언젠가는 펼쳐 볼 아카이브

엘리스 SW 엔지니어 트랙 7기가 마무리 되었다. 부트캠프가 끝나고 내가 작성했던 글들, 프로젝트 들을 정리하며 이력서랑 포트폴리오를 정리하고 있는데.. 첫번째 프로젝트를 했던 코드를 다시 찬찬히 훑어보니, 수정해야할 부분들이 너무 많이 보였다. (이 날것 상태의 코드를 포트폴리오에 써보자니 조금 부끄럽기도 했고..ㅎㅎ) 리액트를 처음 응용했던 코드, 일정에 맞춰 급급하게 짰던 코드 등.. 프론트 엔드 파트는 내가 처음부터 참여하지 않아서 디렉터리 구조가 섞여있기도 하고.. 계속 손을 봐야할 곳들이 눈에 밟혔다. 1차 프로젝트때 열심히 했던 기억도 있고, 고쳐보고 싶기도 한 마음이 들어서 이전에 같이 프로젝트를 진행했던 분이랑 함께 리팩토링을 해보기로 결심했다.🛠 # 브랜치를 정리해보자 첫 프로젝트를 ..

엘리스 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를 만들때까지 걸리는 시간 브라우저의 ..