언젠가는 펼쳐 볼 아카이브

# 우리 어디서 본적 있지 않나요🤔 리액트로 프로젝트를 개발하다보면, 크롬 개발자 콘솔창에서 자주 보이는 "warning" 친구가 있다. 경고문 예시 코드 import data from './data.json'; function App() { return ( {data.map((item) => { return ( {/* "p" 태그에 key값을 설정해 주지 않음*/} Name : {item.name}, Age : {item.age} ); })} ); } export default App; 바로 이 친구인데, 리액트 컴포넌트를 생성하는 방법 중 데이터 값을 불러와 반복문으로 child component를 생성할 때 key 값을 설정하는 걸 놓치면 생기는 warning 친구다. 프로젝트를 개발 하다보면 종종..

엘리스 SW 트랙 7기를 마치고, 지난 4개월 동안 배우고 느꼈던 것들을 조금씩 정리하고 있다. 내가 알고 있었던 것들을 다시 정리하게 되거나, 새로 알게 된 것들이 꽤 있었는데 그 중 하나가 바로 Vite(비트)다. 새로 알게 된 것들은 차차 추가로 정리하기로 하고! 이 글에서는 새로 알게된 Vite를 정리해보고 CRA(Create-React-App)와 비교하는 내용을 적어보려고 한다.👀 📌 Vite 를 처음 알게 된 작은 썰 리액트의 "ㄹ"만 알았을 때는 CRA가 무적이라고 생각했다. 알아서 자동으로 환경을 착착 만들어 주는데, 얼마나 좋은가! CRA를 몰랐을 땐 package.json을 하나씩 일일히 찾아보면서 넣었는데, 알아서 다 해주니까 너무 신세계였다. 그래서 엘리스 1차 프로젝트에서 CRA를..

React styling React + styling 도구 CSS module css, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없음 스타일 충돌을 방지하고 코드를 격려하여 체계적으로 CSS 설계가 가능함 스타일링을 직접 하나하나 해야함 CSS in JS 따로 CSS 파일을 만들 것 없이 JSX 파일 안에서 스타일링까지 해결 가능함 JS 값들을 props로 넘겨줘서 해당 JS 값에 의도된 styling을 바로 적용할 수 있음 class 이름에 random string이 생성되기 때문에 선택자 이름이 겹칠 우려가 없음 ex)styled components UI framework 이미 다 만들어져 있어서 간편하고 쉽게 쓰기에 좋음 styling의 학습 및 훈련이 필요한 초심..

성능 측정 키 매트릭 웹 퍼포먼스 웹 페이지가 로드되고 유저와 상호작용하는 모든 것들을 측정함 성능을 측정하여 웹 앱의 사용성을 개선할 수 있음 열악한 네트워크 환경에서도 사용 가능한 앱을 만드는 등, 좋은 유저 경험으로 유저의 만족을 얻음 Time To First Byte 페이지 요청 후, 처음 데이터가 도착하기까지 걸리는 시간 브라우저의 요청이 서버까지 가는 시간 서버에서 요청을 처리하는 시간 서버에서 브라우저까지 응답이 가는 시간 요청을 받았을 때, 서버에서 처리하는 시간이 오래 걸리거나, 네트워크가 딜레이 되는 등의 상황이 발생할 경우 지표가 악화됨 First Contentful Paint (FCP) 페이지에 진입하고부터, 브라우저가 어떤 DOM content를 만들때까지 걸리는 시간 브라우저의 ..