FrontEnd/React

프론트엔드 개발자는 백엔드 개발자들이 구현해놓은 api를 호출하여 얻은 데이터를 UI에 띄워주곤 한다.아마 대부분의 경우 GET method를 통해 데이터를 얻어올 것이다. 불러오는 데이터의 양이 그리 많지 않다면 큰 문제는 없을 것이지만, 만약 불러와야 할 데이터의 양이 매우 크면 문제가 생기게 된다.사용자는 어쩌면 데이터를 확인하기 위해 많은 시간을 기다려야 할 수도있다.데이터에 이미지가 포함되어 있다면 그 시간은 엄청나게 늘어날 것이다! 이를 방지하기 위해 무한 스크롤은 프론트엔드에서 필수적인 기술이라고 할 수 있다. 무한 스크롤이란? 말 그대로 무한으로 스크롤되게 만드는 기법을 뜻한다.무한으로 스크롤이 된다는 것은, 보여줄 데이터가 아직 남아있음을 뜻한다.즉 한번에 모든 데이터를 불러오는 것이 아..

이전 블로그에서 효율적인 협업을 위해서는 git commit을 깔끔히 관리하는 것이 중요하다고 느껴 git merge에 대해 자세히 알아보고, 상황별 적합한 merge 방법에 대해 알아보았다.협업에서 또 가장 중요한 것이 팀원들과 정해나가는 컨벤션이라고 생각한다. 협업 과정에서는 수많은 컨벤션을 정해 나가야한다.PR및 commit의 단위, commit 메시지 형식, PR 형식, 폴더 및 파일 구조 등 통일해야 할 것이 너무나도 많다.디프만 프로젝트에서 채택한 협업구조를 간략하게 정리해보려고 한다.기본적인 세팅은 Next 14(CNA)의 디폴트 세팅부터 시작한다. ESLint ESLint는 협업 상황에서 코드의 일관성을 유지시켜주고, 잠재적인 에러를 잡아주는 역할을 한다.예를 들어, 사람마다 arrow f..

이전까지는 혼자, 혹은 둘이서만 프론트 프로젝트를 진행하거나 / 다수로 진행하더라도 촉박한 기간으로 인해 협업을 위한 컨벤션 정하기 및 세팅에 소홀했었던 것 같다.이번에 디프만 프로젝트를 진행하면서 협업에 더욱 신경써야할 것 같았고, 이를 위해 효율적인 협업을 위한 세팅을 진행해보고 Git 복습도 진행하기로 했다. Merge / Squash & Merge / Rebase & Merge 나는 지금껏 일반적인 Merge만 사용해왔었다.그런데 Merge에도 여러 종류가 있고, 팀의 컨벤션에 맞게 적절한 Merge 방안을 선택한다면 수많은 commit들을 더욱 효율적으로 관리할 수 있을 것 같았다. PR을 날린 후 Merge에 종류를 보면  위처럼 3가지의 merge 방식 중 하나를 택할 수 있다.그럼 각 방식..

서비스를 구현할 때, 성능을 최대한으로 끌어올리기 위해 캐시를 흔히 사용한다.여러 종류의 캐시가 있지만, 여기서는 HTTP Cache에 대해 알아보려고 한다. Cache-Control 헤더 브라우저가 HTML, CSS, JS, 이미지, 비디오 파일 등 서버에 처음 요청할 때, 브라우저와 서버는 완전한 HTTP 요청/응답을 주고받는다.이 때, Cache-Control 헤더 응답 값에 따라서 처음 요청한 리소스의 캐싱 방식이 결정되게 된다. max-age 예를 들어 Cache-Control 헤더 값으로 max-age=10 을 설정하면, 리소스에 대한 캐시의 유효한 시간은 10초가 된다.  예를 들어 위와 같은 요청에서 완전한 HTTP 요청/응답을 주고받고 status 200이 반환된 것을 확인할 수 있다. ..

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

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