FrontEnd

프로젝트에서 소셜로그인을 구현하자는 얘기가 나왔고, 우선 카카오 로그인을 구현하기로 정했다. 먼저 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 요청에 한해서 적용되..

프로젝트에서 공간 상세화면에 들어가면 해당 공간의 위치를 지도로 보여주는 기능이 있으면 좋겠다는 피드백이 들어왔다. 추가로 큐레이션에 담겨 있는 모든 공간의 위치도 띄워주어야했다. 지도를 보기 위해 서비스 밖으로 이동하는 것이 아닌 서비스 자체에서 지도를 띄워야 했고, 이를 위해 나는 네이버에서 제공해주는 map api를 사용해 보기로했다. https://www.ncloud.com/product/applicationService/maps 위 링크에 접속한 뒤 신청하기를 누른다. 회원가입을 하면 네이버 클라우드 콘솔로 이동된다. 네이버가 제공하는 map 기능이다. 나는 Web Dynamic Map와 Geocoding을 활용하였다. 네이버 지도 api는 일정 사용 횟수 이전까지는 무료이지만 그 이후부터는 과..

프론트엔드에서 애니메이션 주입은 필수적이다. framer-motion 등 많은 애니메이션 라이브러리가 있지만 이번에는 DOM을 조작하여 애니메이션을 부여할 수 있는 react-transition-group 라이브러리를 활용하였다. 크게 4가지 컴포넌트가 있다. Transition CSSTransition SwitchTransition TransitionGroup 주로 사용할 컴포넌트는 CSSTransition과 TransitionGroup 이다. CSSTransition CSS로 변화를 주어 애니메이션을 실행시키고 싶다면 `CSSTransition 컴포넌트를 활용한다. 이 컴포넌트는 Transition 컴포넌트의 모든 요소를 상속받는다. 나는 CSSTransition 컴포넌트를 활용하여 Toast 기능을..

프론트엔드 작업을 하다보면 DOM 에 직접 접근하는 ref 속성을 사용하는 경우가 꽤 많이 온다. DOM 이란? Document Object Model의 약자로써 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당한다. HTML은 등의 태그들로 이루어져 있는데, 이를 계층적으로 구조화하고 제어할 수 있도록 여러가지 메소드를 제공해주는 트리 자료 구조를 바로 DOM 이라고 할 수 있다. 아래는 DOM의 예시이다. React로 작업을 할 때, state..

프론트엔드에서는 UI 작업을 할 때에 재사용성이 높은 디자인들을 컴포넌트로 구성하는 작업이 필수적이다.컴포넌트 작업을 여러 사람이 하다보면, 내가 가져다 사용해야 할 컴포넌트 이름이 뭐고 어디에 있지?? 이렇게 혼란이 올 때가 많다. 또한 컴포넌트를 코드를 직접 변경해가며 변화를 확인하는 것은 매우 귀찮다.이를 방지하기 위해 모든 컴포넌트들을 한눈에 파악하고, 코드 변경없이 컴포넌트들의 변화를 한번에 확인할 수 있는 Storybook이라는 도구가 있다. npx storybook init 프로젝트에서 위 명령어를 터미널에 입력하면 스토리북 설치를 진행할 수 있다.  설치가 완료되기 전 Storybook에서 제공하는 ESLint 를 설치 여부를 묻는 단계가 있다.  ESLint 는 내제되어있는 Linter가..