Life is connecting the dots .

프레임워크 Next.js에 대해 한번 정리해 볼 겸 글을 작성하게 되었다. Next.js란 무엇이며 주요 특징과 라우팅 방식에 따른 특징 등을 적어볼 예정이다. 해당 글은 이후 새롭게 학습한 개념 등을 추가로 계속 업데이트할 예정이다. React의 프레임워크 Next.js Next.js는 리액트의 프레임워크이다. 리액트는 자바스크립트 UI 라이브러리로 주로 싱글 페이지 애플리케이션(SPA)을 만들 때 사용한다. 리액트는 자체만으로 많은 장점을 가진 라이브러리지만 라이브러리이기 때문에 제공하는 기본 기능이 적을 수밖에 없다. 리액트의 주요 특징은 기존에 정리해 둔 포스팅에서 확인할 수 있다. 2023.08.04 - [Programming/React] - React를 사용하는 이유 React를 사용하는 이유..

올해 2월 28일에 런칭한 웹어플리케이션 [리스티웨이브]는 단발성 프로젝트로 끝나지 않고, 지금까지도 꾸준히 회의를 통해 기능을 업데이트하고, 사용자의 피드백을 받아서 사용성을 개선하고 있다. 또한, 최근에는 구글에 영어로 listywave를 검색하면 최상단에 노출되는 점을 발견했다.🤩리스티웨이브가 궁금하다면 👀 프로젝트에 Next.js를 선택하면서 기대했던 점 중에 하나는 바로 Next.js의 Metadata API를 사용해서 향상된 SEO를 적용할 수 있다는 점이었는데 기대만큼 잘 적용된 것 같다. Next.js의 Metadata의 상세 적용 방법이 궁금하다면 아래 이전 포스팅에서 확인할 수 있다. 2023.08.18 - [Programming/Next.js] - SEO 향상을 위한 Metadat..

최근에 React와 Next.js 프로젝트에서 CSS module과 styled-components를 사용해 보았다. 어느 방법이던 스타일 코드를 작성할 때 비슷한 부분이 많았지만 설정이 필요한 부분이나, 조건에 따른 스타일링을 적용방법, 주의할 점 등에 대해 새롭게 알게 된 점이 있어서 나중에 필요할 때 꺼내보고자 정리해 두려고 한다. CSS module 기본 사용법 CSS module의 기본 사용법은 다음과 같다. module.css 확장자를 사용하여 CSS 스타일 파일을 만들어 주고, 사용처에서는 해당 파일을 import해와서 사용하면 된다. import로 불러온 styles 객체 안에 있는 값인 CSS 파일에서 선언한 클래스 이름을 참조해서 className을 지정해 준다. 클래스이름이 .card..

Next.js는 최적화(Optimizations)를 위해 기본적으로 제공되는 기능들이 있다. 공식문서를 참고하여 간략하게 소개하자면 먼저, 빌트인 컴포넌트를 사용하여 UI를 최적화하기 위해 복잡하게 구성해야 하는 요소들을 쉽게 만들어 줄 수 있다. Images, Link, Scripts와 같은 컴포넌트들이 이러한 역할을 한다. 다음으로 Metadata를 활용하여 웹사이트의 콘텐츠를 검색엔진에 더 잘 노출되도록 하고, 어떻게 보일 지를 커스텀하여 다양한 플랫폼에서 일관적인 사용자 경험을 줄 수 있는 방법이 있다. Next.js의 Meatadata API는 HTML의 요소를 수정할 수 있게 해 줌으로써 웹사이트 SEO를 향상시키기 위한 방법을 제공한다. 드림코딩 강의를 통해 Next.js(v13)과 Reac..

Next.js 프레임워크를 사용해서 만든 프로젝트를 Vercel를 사용하여 배포해 보았다. 배포하는 과정 중에 발생한 에러 해결을 통해 최종 배포를 완성하였다. Vercel docs에서 깃헙 레포를 통해 배포하는 과정이 간략하게 소개되어 있다. 그만큼 간단하기도 하고, 배포 관련 설정들에 대한 설명도 상세하게 되어있어서 나중에 다른 설정이 필요할 때도 docs를 참고하여 배포를 진행하면 될 것 같다. 1. 로그인 후 [Add New]에서 새로운 프로젝트를 생성해 준다. 2. 배포할 프로젝트의 깃헙 저장소를 불러온다. 2-1. 만약 불러올 저장소가 나오지 않는다면, +Add GitHub Account를 클릭하여 vercel을 설치해 준다. 모든 레포지토리를 선택하면 import 할 때 모든 레포가 보이고,..

Optimistic UI란 서버에 요청을 보내고 응답을 받기 전에 UI를 업데이트하는 데 사용할 수 있는 패턴이다. mutation을 시뮬레이션하고, UI에 업데이트 함으로써 낙관적인 결과를 사용자에게 보여주고, 이후 최종 서버에서 응답을 받으면 그 결과로 대체된다. 기존 프로젝트 기능 중 좋아요 기능👍에 Apollo Client에서 제공하는 옵션을 활용하여 적용해 보려고 한다. 좋아요 버튼을 누르면 아마도 대다수는 좋아요 숫자가 +1이 증가할 것이라고 예상한다. 이렇게 종종 결과를 예측할 수 있는 mutation에 UI를 낙관적으로 업데이트를 할 수 있다. optimisticResponse option Apollo Client는 mutation을 실행시킬 때 해당 옵션을 추가할 수 있도록 제공한다. 우..