기능 구현이 끝난 후 프론트엔드 성능이 사용자 경험에 영향을 미칠 수 있다는 것을 알고, 서비스의 품질 향상을 위해 LightHouse와 번들 분석기를 이용해 성능 지표를 측정하며 개선하고자 했습니다. LightHouse를 통해 성능을 측정하였을 때, FCP와 LCP 지표가 낮게 나온 것을 확인하였고, 이를 개선하였습니다. 먼저 해당 지표들의 의미를 알아보고, 개선점을 살펴보겠습니다. FCP와 LCP FCP(First Contetnful Paint)는 유저가 페이지에 처음 진입했을 때, 콘텐츠가 처음 렌더되기 시작하는 시점을 뜻합니다. 즉, 페이지 콘텐츠가 모두 렌더 되지 않아도 일부가 렌더 되기 시작했다면, 이 시점을 측정합니다. 이때 콘텐츠는 이미지나 텍스트, 요소, 내용이 있는 요소를 뜻합니다. 이..
NutriNotes의 목표했던 기능들을 모두 마무리하고 회고를 쓰려고 노션에 항목들을 정리해 두었지만, 쓰고 싶은 내용이 너무 많아 엄두가 나지 않았다. 프로젝트를 진행하며 마주했던 문제와 해결책들을 기록하며, 다시 한번 복기해 보는 시간을 가지기로 했다. 라이브러리 선택 이유 및 이전에 구현된 기능은 중간 회고에 작성되어 있다. 중간 회고 이후로 약 3개월이 지났는데, 약 2개월은 프로젝트를 더 발전시켰고, 그 이후에는 가끔 필요한 부분만 수정하였다. 밤새 끙끙대다 배포를 성공해서 내가 만든 사이트에 접속되었을 때의 기쁨을 잊을 수 없다..>! (내용이 길어져서 빈 부분은 차차 채워나갈 예정입니다..!) 프로젝트 소개(+배포 링크): NutriNotes NutriNotes는 건강에 관심을 기울이는 현대..
[HTML] HTML 시맨틱 태그(Semantic Tags) 시맨틱 태그란? 프로그래밍에서 시맨틱은 코드의 의미를 나타낸다. HTML의 시맨택 태그는 태그만 보고도 역할이나 위치를 알 수 있도록 만든 태그이다. 예를 들어, 은 페이지에서 최상위 제목인 bichoninthefront.tistory.com HTML 시맨틱 태그에 대해 공부하고, 이번에 진행하고 있는 프로젝트에 적용해 보았다. 시간이 걸리는 작업이었지만, 각 페이지의 구조에 대해 다시 한번 생각해 보고, 페이지 내에서 각 구획의 역할에 대해 생각해 볼 수 있었다. 또한, 이전 포스팅에서 살펴봤던 것과 같이 태그만으로도 구조를 파악할 수 있어 HTML의 가독성과 유지보수성을 높일 수 있었다. 사실 복잡한 구조를 가진 페이지는 없었지만, 이 과정..
NutriNotes는 제로베이스 커넥투 부트캠프에서 팀원들과 진행한 MYCHELIN 프로젝트를 마무리한 이후 혼자서 처음부터 끝까지 책임지고 구현해보고 싶다는 생각이 들어 시작한 프로젝트이다. 로그인, 회원가입부터 간단한 서버 작업까지 직접 해보았다. 처음에는 정말 간단하게 React, TypeScript로 만들어보려고 했는데 기획을 하다 보니 욕심이 생겨서 기능을 더 추가하게 되었다. 프로젝트 소개 : NutriNotes, 간편한 식단 기록 어플리케이션 해당 프로젝트는 간편한 식단 기록 어플리케이션으로, 유저가 다양한 식단을 둘러보고 날짜와 식단을 선택하면 대시보드에 기록할 수 있다. 약 3주간의 기간동안 디자인을 포함해 진행한 작업은 아래와 같다. Node.js & Express 서버 초기 세팅 JW..
