본문 바로가기

분류 전체보기170

사용하지 않는 자바스크립트 이슈 1. 문제상황 : 내가 만들고 있는 프로젝트에서 lighthouse를 통해서 성능 평가를 진행했는데 이때 성능 평가에서. 사용하지 않는 자바스크립트라는 항목이 나옴. 실제로 자바스크립트 전송크기가 918.3KIB라는 수치가 나옴 2. 가설 (H1) : 네트워크 탭에서 자세한 정보를 확인해보니 메인 페이지로 들어왔을 때 해당 메인 페이지와 관련이 없는 Detail , Write페이지가 렌더링되고 있음을 확인 . 따라서 지연로딩을 시켜야 겠다는 생각을 함. 3. 해결(S1) : 라우터에서 지연 로딩을 구현함. 구현한 코드는 다음과 같음 import { BrowserRouter, Routes, Route } from "react-router-dom"; import { Suspense, lazy } from ".. 2023. 9. 5.
렌더링 차단 리소스 제거하기 이슈 1. 문제상황 : 내가 만들고 있는 프로젝트에서 lighthouse를 통해서 성능 평가를 진행했는데 이때 성능 평가에서 렌더링 차단 리소스 제거하기라는 항목이 나옴. 이 항목을 분석해보니 렌더링 이전에 CSS와 JS를 동기적으로 다운로드 받기 때문임. 2. 가설 1 (H1) : 내 프로젝트에서는 구글 폰트를 사용하는 데 이 구글 폰트 서비스가 CDN 서비스라서 외부로 부터 CSS , JS파일을 동기적으로 다운로드 받아야 함. 이 과정에서 렌더링 차단이 발생하는 것으로 보임 3. 해결 (S1) : 구글 폰트를 미리 prefetch 받기 위해서 다음과 같은 항목을 추가함 여기서 프리로드를 통해서 브라우저가 폰트를 로드하기 전에 폰트 리소스를 사전에 가져오도록 지시함. 이를 통해서 가능한 절감 효과인 370m.. 2023. 9. 5.
코드 리뷰 사이트 개인 회고 10일차 오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눌려고 한다. 1. 테블릿 사이즈 반응형 사이트 만들기 : 반응현 사이트를 만들면서 가장 어려웠던 점은 테블릿 사이즈일 때 어떤 디자인으로 해당 사이트를 보여줄 것인지가 가장 어려웠다. 그 다음으로 어려웠던 부분은 테블릿 사이즈일 때 마진 값과 패딩 값을 어떻게 맞출 것인지 였다. 그래서 나는 이문제를 해결하기 위해서 flex라는 속성을 통해서 해결했다. 정확히 말하자면 flex-grow , flex-shrink , 기본값을 통해서 화면이 줄어들 때 줄어드는 화면 비율에 맞춰서 자동적으로 사물의 크기도 배치되도록 만들었다. 그리고 요소들간의 간격은 gap이라는 속성을 통해서 해결했다. 이 gap을 통해 각 요소들의 간격을 맞추고 .. 2023. 9. 2.
코드 리뷰 사이트 개인 회고 9일차 오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눠볼려고 한다. 1. 페이지네이션 테스트 코드 : 페이지네이션 테스트 코드를 작성하면서 어떻게 테스트를 해야 할지에 대한 궁금중이 많았다. 여기서 궁금중을 설명하기 위해서 한가지 예시를 들겠다. 만약 페이지가 1~100개까지 있다고 하자. 이때 1~100개를 다 클릭했을 때 확인하는 테스트 코드를 작성하는 것이 맞을 것인지 아님 다른 방법이 있는지에 대한 궁금중이 있었다. 나는 이 부분을 다음과 같이 해결했다. 만약 1~100까지가 있다면 3가지만 체크하면 모든 것을 체크할 수 있을 것이라고 생각한다. 첫번째 : 첫번째 페이지를 눌렀을 때 이전 페이지는 disabled , 다음 페이지는 abled처리가 이루어지는지 두번째 : 첫번.. 2023. 9. 2.
코드 리뷰 사이트 개인 회고 8일차 오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눠볼려고 한다. 1. flex 정말 너란 친구는..... 최고야....! 오늘의 가장 큰 주제는 css에서 flex였다. css에서 flex란 정말 중요한 개념이다. 사물들을 배치하는데 있어서 즉 정렬 하는 데 있어서 중요한 속성이다. 특히 비율과 관련된 부분이 flex 핵심인데 이번 프로젝트에서는 그 비율과 관련해서 여러 이슈가 있었다. 내가 프로젝트를 보면 다음과 같은 페이지가 구현되어야 한다. 여기서 가장 큰 문제는 저 3개의 비율을 어떻게 조정할 것인가 였다. 특히 저 큰 박스가 가운데에 있고 나머지 2개의 박스가 양옆에 가로로 배치되어야 한다. 이때 나는 저 3개의 박스를 담는 하나의 박스를 만들고 이 하나의 박스에서 3.. 2023. 8. 31.
코드 리뷰 사이트 개인 회고 7일차 오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눠볼려고 한다. 1. test code and tdd 이번에 코드 리뷰 사이트를 만들면서 가장 시간을 많이 든 부분은 디버깅이었다. 어떤 기능을 만들면 해당 기능이 정상적으로 작동하는지를 확인하기 위해서 일일히 테스트를 진행했던 것이 가장 시간이 많이 든 부분이었다. 그래서 나는 이번 기회에 테스트를 자동화할 수 있으면 좋을 거 같다는 생각이 들었다. 그래서 테스트 코드에 대해서 알아봤으며 테스트 자동화에 대해서 찾아보았다. 그래서 오늘은 테스트코드 작성과 tdd에 대해서 알아볼려고 한다. 먼저 tdd란 데스트 주도 개발이다. tdd의 흐름은 다음과 같다. RED : 실패하는 테스트 코드를 작성한다. (즉 내가 만들려고 하는 기능.. 2023. 8. 30.

티스토리툴바