신입사원 현재의 개발일기

github.io로 배포를 하고 난 뒤에 사이트를 최초로 접속했을 때, 최초 화면이 로딩되기까지 생각보다 많은 시간이 걸렸다. 체감상 3초정도..? 가 걸린 것 같았다. 올라가는 이미지도 없는데 너무 느려서 혹시 서버로부터 응답받는 속도가 느린가? 하고 개발자 도구의 네트워크 탭을 확인해 본 결과, 범인은 폰트를 불러오는 시간이 오래걸려서 생긴 문제였다. 그래서! 이번 포스팅은 폰트 호출 최적화하기 위해 했던 일들에 대한 포스팅을 해보려고 한다. 1. 기존 문제 아래의 사진은 최초로 Lighthouse를 실행시켰을 때 나온 점수와, 기존에 사용했던 폰트의 크기다. 1.8MB로 상당히 큰 용량을 차지하고 있다. 비슷한 크기의 폰트를 총 9개 호출하고 있어 렌더링이 오래 걸릴 만했다.. Largest Co..

별도의 서버가 없는 환경에서 포트폴리오를 만들다 보니, 서버 없이 동작할 수 있는 목데이터 구축이 필요했습니다. 이 포스팅에서는 각 동작을 하나하나 설명한다기보다는, 목데이터를 구축하면서 여러 가지의 삽질(?)했던 기록 위주로 작성해보고자 합니다. MSW 적용하기 MSW란? MSW에 대해 간단히 설명하자면 MSW(Mock Service Worker)는 API Mocking 라이브러리로, 서버의 네트워크 요청을 가로채서 모의 응답을 보내주는 역할을 합니다. 한마디로 얘기하면, 별도의 서버를 구축하지 않아도 API가 구현이 됐다고 가정하고 개발을 진행할 수 있습니다. MSW 사용하기 아래는 msw를 적용했을 때의 폴더 구조입니다. vite + react 환경에서 동작합니다. ├── public │ ├── m..

이번에는 일반적인 사이트에서 다수 쓰이는 최근검색 기록 기능과, 즐겨찾기 기능에 대해 써보려고 한다. 아래 사진은 실제 프로젝트에 적용된 사진이다. 위와 같이 최근검색과, 즐겨찾기 기능을 구현했고, 백엔드 서버가 별도로 존재하지 않는 관계로 로컬 스토리지에 데이터를 저장해서 사용했다. 1. 최근 검색 최근 검색의 요구사항은 다음과 같다. 1. 가장 최근에 검색한 순서대로 최근 검색 탭에 보여질 것 2. X 표시 아이콘을 눌렀을 때 최근 검색 탭에서 삭제될 것 위의 요구사항에 맞게 구현된 코드는 아래와 같다. 순서대로 최근 검색의 상태를 담고 있는 keyword, 최근 기록을 추가, 삭제하는 기능이다. const [keywords, setKeywords] = useState( JSON.parse(local..

프론트엔드 개발자로의 취업을 위해 개인 프로젝트로 op.gg 사이트(https://www.op.gg/)를 클론 코딩을 해보면 좋겠다 라는 생각이 들어 클론 코딩을 시작하게 되었다. 사실 지금은 어느정도 개발이 된 상황이다. 하나하나 최대한 비슷한 형태로 만들다 보니 오랜 시간이 걸렸다. 그래도 만들어진 걸 보니 뿌듯한 마음이 든다. 오늘 포스팅 할 성능 개선에 대한 내용은 lighthouse 점수에 대한 부분이다. 최초에 사용자가 검색한 소환사에 대한 정보를 가져오기까지 network 탭으로 확인해본 결과, 4.5초라는 시간이 걸렸다. 그래서 그런지 light house 점수가 31점이 나왔다. 큰 충격을 먹어서 그 때의 사진은 가져오지 못했다. 지금은 67점이 나온다. 사실 67점도 그렇게 높은 점수가..