최근 사이드 프로젝트의 담당 기능을 다 구현하여 Light House의 지표를 통한 성능 최적화를 진행해 보았습니다. Light House의 점수 기준은 아래와 같습니다. 0~49(빨간색): 나쁨 50~89(주황색): 개선 필요 90~100(녹색): 양호 Light House의 공식문서에는 좋은 사용자 경험을 위해 90점 이상을 유지하도록 노력해야 한다고 말하고 있습니다. Light House 측정은 정확한 측정을 위하여 yarn build -> yarn start를 진행하여 production 환경에서 진행하였습니다. 최적화 전 측정 점수 Performance 최적화 Performance를 측정하는 항목은 5가지로 정의됩니다. 초록색은 빠름, 노란색은 중간, 빨간색은 느림을 의미합니다. First ..
폴더구조 처음엔 너무 집착하지 마세요! 다들 프로젝트 진행 전에 폴더구조를 어떻게 하면 이쁘게 만들 수 있을까? 한 번쯤은 고민해 보셨을 겁니다. 하지만 이건 정답이 없는 문제입니다. 리액트의 공식문서에서도 너무 깊이 생각하지 말고 5분 이상 시간을 투자하지 말라고 권고하고 있습니다. 그만큼 폴더구조란 언제든 변경될 수 있는 것이고 프로젝트가 커짐에 따라 어느 파일은 어느 폴더로 가야 할지 리팩토링 할 순간이 알아서 오기 때문입니다. 제가 최근 진행했던 사이드 프로젝트의 기존 폴더구조입니다. 현재 리팩토링을 진행하고 있으며 팀원들과 소통하여 최근 폴더구조를 변경하였습니다. 해당 프로젝트 폴더 구조의 간략한 설명은 아래와 같습니다. app : 페이지 라우팅 components pages : 특정 페이지에서..
slice() slice() 함수는 배열로부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만든다. arr.slice(begin, end) begin : 추출 시작점에 대한 index를 의미한다. 음수 index는 배열의 끝에서부터의 길이를 나타낸다. slice(-2)는 배열의 마지막 두 개 요소를 추출한다. begin이 0이거나 아무 값을 넣지 않는 경우 배열 전체를 복사한다. begin 이 배열의 길이보다 큰 경우, 빈 배열을 반환한다. end : 추출을 종료할 기준 index입니다. slice는 end번째 index를 제외하고 추출합니다. slice(1,4)는 index 1부터 index 4를 포함하지 않는 index까지 즉 index1~3까지 추출한다. 인자로 begin을 넣고 end를 넣..
27일 새벽 App Router의 새로운 가이드가 Release 되었고 주말 동안 새로운 가이드를 통해 Dashboard를 구현해 보았습니다! 가이드에는 어떠한 내용들이 포함되어 있나요? 가이드에는 CSS 스타일링, Layout과 Page.tsx의 이해, 데이터 Fetching과 서버컴포넌트에서 데이터를 불러와 Suspense를 사용하는 법, DB에 직접 쿼리를 날려 데이터를 불러오는 법, Error Handling, Metadata주입하는 법, 로그인/로그아웃 등 총 16개의 챕터가 있으며 하나의 애플리케이션을 처음부터 끝까지 만드는 과정이 담겨있습니다. 이 중에서 가장 인상 깊었던 것은 API Endpoint를 구현하지 않고 직접 DB에 연결하여 데이터를 가져오는 것이었습니다. 프론트 서버에서 직접 ..
