이번 포스팅은 진행중인 프로젝트의 핵심 기능들의 개발이 끝나면서, 프로젝트를 출시하게 됐을 경우 많은 사용자들이 알 수 있게 검색 엔진에 노출될 수 있도록 하는 과정은 필수적이기 때문에, 해당 프로젝트의 SEO를 최적화하는 과정에 대해서 소개하려고 한다. SEO란? 해당 웹사이트가 구글, 네이버, 다음과 같은 검색 엔진에서 높은 순위를 차지하여 잘 노출될 수 있도록 최적화 하는 프로세스 검색 엔진은 사용자의 특정 키워드 검색을 결과로 반환하는데, 이 때, 웹 사이트를 검색 엔진에게 더 잘 이해시키고 노출시키는 방법 head 태그 일반적으로 html 파일 내의 ); } next/head 서버 측에서 실행되는 _document.tsx 파일에서는 애플리케이션의 공통적인 html 구조를 정의하면서 next/do..
폴더 구조 수정과 리팩토링이 조금 남아있지만 이제 네컷지도 프로젝트가 막바지로 향해가고 있다. 기본적인 핵심 기능들은 구현이 완료되었고, 이번에는 FAQ 페이지를 구현하면서 문의할 사항들을 프로젝트 측에 유저가 전달할 수 있도록 이메일 링크를 걸어주는 작업을 하면서 몇가지 헷갈렸던 사항들을 정리하고자 한다. Nextjs의 Link 컴포넌트의 내용과 함께! Link 컴포넌트 일단 Nextjs의 Link 컴포넌트에 대해서 살펴보자. Nextjs는 pages 폴더내에서 애플리케이션의 라우팅이 구성되고, Nextjs의 Link 컴포넌트는 페이지 전환을 위한 컴포넌트로 클라이언트 측에서 페이지를 전환하기 때문에, 새로고침이 일어나지 않는다. Link 컴포넌트의 대표적인 props는 다음과 같다. Link 컴포넌트..
저번 포스팅에는 recoil을 설치하고, nextjs에서 세팅하는 방법과 기본적인 recoil의 사용법에 대해 포스팅을 진행했다. 해당 포스팅을 하면서 recoil을 통해 애플리케이션의 모달 상태를 전역으로 관리하는 방법에 대해서 포스팅을 진행할 것이라고 언급했는데, 이 포스팅에서 한 번 소개해보도록 하겠다. 현재 진행중인 프로젝트는, 로그인 유저와 비로그인 유저에 따라서 처리해야할 로직이 존재한다. 로그인 유저는 애플리케이션의 모든 기능에 접근이 가능하지만, 비로그인 유저에 한해서는 특정 기능에서, 로그인이 필요하다는 모달을 띄워줘야만 했다. recoil을 통해 모달의 상태를 전역관리 하기 이전에는, 각 페이지에서 작성한 모달 컴포넌트와 모달의 상태 함수인 setState 함수를 관련 컴포넌트에 pro..
프로젝트를 진행하면서, 프로젝트의 볼륨이 커질수록 관리해야 하는 상태가 많아지고, 컴포넌트 중첩 구조가 발생함에 따라 관련 state를 상위 컴포넌트에서 하위컴포넌트로 반복적으로 전달하게 되는 props drilling 문제가 발생했다. 따라서 코드 유지보수를 원활하게 관리하고, 상태관리를 간편하게 하기위해 상태관리 라이브러리를 도입하게 되었는데, 이전 프로젝트에서는 redux를 사용하여 상태관리를 진행했었지만, 보일러 플레이트가 적고 비교적 간단한 recoil을 도입하게 되었고, 해당 과정을 포스팅하려고 한다. 1. recoil 라이브러리 설치 일단 recoil 패키지를 설치한다. // npm npm install recoil // yarn yarn add recoil 2. recoil 세팅하기 rec..
프로젝트를 진행하면서 api 요청을 통해 받아온 response 중에 외부 이미지 주소가 있었는데, 해당 주소를 Next/Image의 src에 직접 전달하니까 다음과 같은 에러가 발생했다. 기본적으로 nextjs는 nextjs에서 지원하는 Image 컴포넌트를 통해 애플리케이션의 이미지 최적화를 진행한다. Image 컴포넌트에는 필수적으로 필요한 props가 존재하는데, src, width, height, alt가 바로 그 필수적인 props에 해당한다. 오늘은 Image 컴포넌트에 대해서 자세하게 알아보기 보단, 외부 이미지를 가져오는데 집중할 것이기 때문에, Image 컴포넌트에 대해서 더 자세하게 알고 싶다면 공식문서를 참고하기 바란다. Image 컴포넌트에 필수적인 props인 src에는 다음과 ..
현재 네컷지도라는 프로젝트를 진행하면서 카카오맵을 사용하고 있다. Api 응답값으로 해당 지점의 위도, 경도를 받아 마커를 뿌려줘야 되는 기능을 구현하면서 스크립트를 불러오는 방식에 대해서 고민한 흔적에 대해 정리하고자 해당 포스팅을 준비했다. 카카오맵을 사용하는 자세한 방법에 대해서는 이번 포스팅에서는 다루지 않기 때문에 이 점은 고려하여 읽어주시면 되겠다. 사전 준비 카카오 맵 API를 사용하기 위해서는 Kakao Developers에 접속해서 애플리케이션을 추가하고 해당 애플리케이션의 javascript 키 값을 알아야한다. 이 과정에 대해서는 카카오 로그인 구현 포스팅에서 다루기 때문에, 사전 준비에 해당하는 과정은 이전 카카오 로그인 구현 포스팅을 참고하기 바란다. 카카오맵 API 불러오기 위..
요즘 거의 대부분의 애플리케이션은 사용자의 쉬운 접근성을 위해 소셜로그인을 제공한다. 나도 대부분의 애플리케이션을 이용할 때, 서비스 자체 회원가입, 로그인을 거의 이용하지 않고, 소셜 로그인을 제공하지 않는 애플리케이션은 자주 사용하지 않게 되는 것 같다. 이제는 소셜 로그인이 필수라고 느끼기 때문에. 프로젝트를 진행하면서 소셜 로그인을 구현했던 방법에 대해서 정리해보려고 한다. 사전작업 카카오 로그인을 구현하기 위해서는 사전에 kakao developers에서 애플리케이션을 등록해야한다. 애플리케이션을 추가하고 요약정보를 확인해보면 생성한 애플리케이션의 앱 키를 볼 수 있다. 이번 포스팅에서는 인가코드를 받고, 해당 인가 코드를 통해 토큰을 받아 로그인을 진행하는 로직을 다루기 때문에 REST API..
Yarn-berry란? 기본적으로 가장 접근성이 좋고 많은 사람들에게 사용되는 패키지 매니저를 꼽자면, npm과 yarn을 꼽을 수 있다. 그 중 yarn의 개발자가 내놓은 새로운 패키지 매니저이다. 기존의 npm과 yarn을 사용하면서 높은 용량의 node_modules 폴더, 해당 node_modules의 디렉토리 구조를 만들기 위한 무수히 많은 입출력 작업등의 단점이 존재했다. yarn-berry는 node_modules를 생성하지 않고 Plug'n'Play(PnP)를 이용하여 효율적으로 패키지를 찾을 수 있고, 의존성을 압축파일로 관리하기 때문에 기존 node_modules에 비해 용량이 매우 적어 zero-install로 git을 통한 버전관리가 가능하다. 보일러 플레이트 만들기 NextJS C..
