전체 글

프론트 프로젝트를 하다보면 매번 고민하는 것 중 하나가 효율적인 폴더 및 파일 구조이다.나도 해당 질문에 대해 자세히 알지 못해서 매번 고민하던 와중, 디자인 시스템을 공부하면서 아토믹 디자인에 대해 알게 되었다.더 알아본 결과 정말 괜찮은 구조라 생각되었고 내 프로젝트에 도입해 보기로 하였다. 아토믹 디자인(Atomic Design) 이란? 아토믹 디자인은 화학적 관점에서 아이디어를 얻은 디자인 시스템이다.  아토믹 디자인은 위와 같은 단계별 기준을 가지고 있다.우리들의 궁극적인 목표인 Pages를 만들기 위해 Atom부터 시작하여 구체화하는 과정을 거치게 된다. Atom Atom이란 더 이상 분해할 수 없는 기본 컴포넌트이다.   위와 같이 label, input, button과 같이 기본 HTML ..

이전 블로그에서는 Next/Image를 사용하여 드라마틱한 성능 개선을 이루었다.이번 블로그에서는 드라마틱한 성능 개선은 아니겠지만 폰트 최적화 및 트리 셰이킹을 통해 좀 더 개선을 해보려고 한다. font 최적화  Lighthouse에서 위와 같은 경고를 볼 수 있었다.이에 관련하여 해결하기 위해 FOIT와 FOUT에 대해 알아볼 필요가 있었다. FOIT(Flash of Invisible Text) FOIT란 웹폰트가 로드되는 동안 텍스트가 일시적으로 사라지는 현상을 말한다. font-display 속성을 지정해 주지 않으면 웹폰트가 아직 로드되지 않은 상태에서 해당 폰트를 사용하는 텍스트가 기본 시스템 폰트로 표시되다가, 웹폰트가 로드되고 나서야 해당 폰트로 교체되는 현상이라고 할 수 있다. FOUT..

프론트엔드에서 굉장히 중요한 작업 중 하나가 UX 최적화일 것이다. UX 최적화를 판단할 때 사용자들이 서비스와 얼마나 빠르게 인터렉션 할 수 있는지가 매우 중요한 요소이다. 우선 내가 하고있는 프로젝트의 위 장소 상세 페이지 초기 성능을 Lighthouse로 측정해보았다. 여러번의 측정 결과 대략 68~72점으로 좀 아쉬운 점수이다. jpeg 포맷의 이미지 2개를 받아오는데 드는 용량은 약 1MB로 상당히 큰 것을 확인할 수 있었다. 해당 페이지에서는 큰 이미지 2개를 슬라이더 형식으로 띄워주고 있으므로, 이미지 관련 Optimization만 잘 해줘도 성능을 좀 더 올려줄 수 있을 것 같다. img 태그 대신 Next/Image 흔히 이미지를 UI에 띄우기 위해 img 태그를 사용하곤 한다. 하지만 ..

프론트엔드 작업을 하다보면 기능 구현만을 신경쓰다 보면 제일 중요하다고 볼 수 있는 성능에 큰 신경을 쓰지 못하는 경우가 꽤 있다. 성능에 큰 영향을 미치는 요소 중 하나가 불필요한 렌더링이다. 불필요한 렌더링을 최소화하는 것은 프론트엔드 개발자가 극복해야하는 문제 중 하나이다. 리액트의 렌더링 과정 우선 렌더링 최적화를 이루기 위해 렌더링이 이루어지는 과정을 알아볼 필요가 있다. 렌더링이란 리액트가 컴포넌트에게 현재의 props와 state를 기반으로 UI가 어떻게 생겼으면 좋겠는지 설명하도록 요청하는 프로세스라고 나와있다. 리액트 작업에서는 주로 함수형 컴포넌트를 사용하여 작업을 하게 된다. export default function Component(){ ... return 컴포넌트 코드 } 위는 ..

이전 블로그에서 toast 기능을 Context API 를 통해 구현하였다. (https://doyourbestcode.tistory.com/140) 물론 당장은 toast 기능 하나만 구현하였기 때문에 불필요한 rendering만 좀 신경 써주면 Context API를 사용해도 큰 문제가 없다. 하지만 여러 기능을 Context API를 통해 구현하고자 하면 문제가 발생할 수 있다. 불필요한 rendering을 처리하는 cost 이전 블로그를 보면 ... export const ToastValueContext = createContext(undefined); export const ToastActionContext = ..

프론트엔드 작업을 하다보면 꽤 많이 발생되는 비효율적인 구조 중 하나가 과도한 props drilling 이라고 생각한다. props drilling 말 그대로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 값을 전달해 주는 것을 말하는데, 너무 깊은 단계를 거쳐야 한다면 그 사이에 있는 모든 컴포넌트에서 작업을 해줘야하기 때문에 매우 불편하다. 이를 방지해주기 위해 Context라는 개념을 사용한다. Context란? Context는 리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해주는 기능이다. 주로 Context는 전역적으로 필요한 값을 다룰 때 사용하지만, 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이다" 라고 접근을 하시는 것이 좋다고 참고한 블로..

팀 프로젝트, 회사 등등...개발적인 약속 즉, 컨벤션을 지키는 것은 협업에서 중요하다. 클린 코드 작성도 컨벤션의 일종이라고 볼 수 있고 이를 바탕으로 코드를 짜는 것은 매우 중요한 일이다.'개인 프로젝트에서는 어떤식으로 코드를 짜도 내가 짠 코드이기 때문에 언제든지 해당 코드를 알아볼 수 있다. 하지만 코드를 짜는 스타일은 개개인마다 다를 수 밖에 없고, 여러 사람들의 코드가 들어갈 시 클린 코드를 바탕으로 코드를 짜지 않으면 다른 사람의 코드가 들어간 부분을 건드리게될 상황이 오면 매우 당혹스럽고 효율도 떨어질 것이다. 어떤 식으로 클린 코드 짜는 법을 연습할 수 있을까 고민하던 와중, 토스 개발 블로그에서 매우 좋은 자료를 발견하였다. 참고: https://toss.im/slash-21/sessi..

웹 서비스에서 데이터를 fetch 하는 데이는 어느정도의 시간이 걸릴 수 밖에 없고, 사용자들은 이를 기다린 후에 UI에서 데이터를 확인할 수 있다. 이 시간동안 화면에서 아무것도 볼 수 없다면 사용자들은 답답함을 느끼게 될 것이다. 해당 시간동안 스켈레톤 컴포넌트를 보여줌으로써 데이터를 불러오고 있다는 것을 UI 상으로 보여줄 수 있다. 그럼 데이터를 불러오고 있는 중이라는 것을 상태로 나타내야 한다. fetch 메소드를 사용하고 있다면 useState로 로딩 상태를 관리해야 하고, tanstack query같은 라이브러리를 사용한다면, 이가 제공해주는 isLoading 상태로 관리한다. 이도 문제는 없지만 삼항 연산자나 if 문으로 로딩상태를 관리해야 하므로 코드가 좀 지저분해 질 수 있다. 리액트는..

프로젝트에서 소셜로그인을 구현하자는 얘기가 나왔고, 우선 카카오 로그인을 구현하기로 정했다. 먼저 Kakao developers 에 어플리케이션을 추가하자.그 후 사이드바의 앱 키 탭을 눌러보면  위와 같이 4개의 키를 얻을 수 있다.필수로 사용해야 할 키는 REST API 키와 JavaScript 키이다. 해당 값들을 환경변수로 다음과 같이 등록해놓자. NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY='Your JAVASCRIPT KEY'NEXT_PUBLIC_KAKAO_REST_API_KEY='Your REST API KEY 만약 추가 보안을 원한다면 보안 탭에서 Client Secret를 사용한다 (여기서는 일단 패스) . 다음으로 플랫폼 탭으로 이동 후  위에서 사용할 사이트 도메인과, ..

프론트 단에서 데이터를 효율적으로 관리하는 것은 매우 중요하다.이를 위해 Cache를 흔히 활용한다. 이번에는 Next 에서 Cache를 효율적으로 활용하기 위해 공부해보자. Request Memoization 공식문서에 따르면 요청 url과 options가 같은 fetch api 에 대해서 자동으로 기억(memoize) 한다고 나와있다.   즉, 위 그림처럼 동일한 endpoint로의 API fetch가 여러 컴포넌트에서 수행된다면 Request memoization이 동작한다.따라서 API fetch 결과를 props drilling 하지 않고, 각 컴포넌트에서 fetch를 진행해도 실제 API 요청은 최초 1번만 시행된다. 다만, memoization은 서버에서 호출되는 GET 요청에 한해서 적용되..