# next js
웹 링크 SNS 공유하기
웹에서 현재 링크를 SNS에 공유하는 기능을 요청 받았다. 처음에 요청 받은 건 기본 링크 복사, 카카오톡 공유, 그리고 인스타그램 공유였는데, 인스타그램은 공유 기능을 web api로는 제공하지 않는 듯하여 일단은 트위터 공유로 수정하기로 하였다. > "next": "13.4.5" 사용 링크 복사 링크 복사는 가장 간단하다. navigator 의 clipboard를 활용하면 된다. 카카오톡 공유 카카오톡 공유의 경우 kakao developers 사이트에 가입하여 어플을 만든 뒤, sdk key를 가져와야 한다. 
Next JS tutorial
설치 일단 node가 설치가 되어있어야 한다. 그렇다면 위와 같이 명령어를 하면 되는데, @latest는 최신 버전을 사용한다는 뜻이고 .은 현재 폴더에 만든다는 뜻이다. 그 뒤 여러가지 질문들이 나오는데, 나는 일단 생코를 보면서 연습해 볼 것이기 때문에 아래와 같이 하였다 >✔ Would you like to use TypeScript? … No ✔ Would you like to use ESLint? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use src/ directory? … Yes ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to customize the default import alias? … No 맨 아래는 아직은 잘 모르겠다. 검색해서 찾아봐야할 듯 하다. 여기서 중요한 것은 App Ro
Next의 라우팅
React 에서의 동적 router react 에서는 동적 라우터를 사용하기 위해 react router dom 을 이용하여 라우팅을 하지만 next에서는 pages폴더 안에 index.js 파일을 가지고 라우팅을 한다. Next 라우터 Next에서 라우팅을 하는것을 알아보자 pages가 이런구조라면 우리 보여질 첫 페이지는 page안에 index.js이다. 이 index.js 경로가 http://localhost:3000/이라면 about 페이지는 http://localhost:3000/about 일것이다.물론 about 페이지의 문서는 about 폴더 안에 index.js 일것이다. Next에서의 동적 라우팅 react에서의 동적 라우팅은 이렇게 router dom을 이용할것이다.하지만 next에서는 이런식으로 대가로 안에 값을 넣어서 동적 라우팅을 하게 된다. 이 아이디 값을 받아 오는 방법은 query.id값을 가지고
[Next JS] notFound, 404 Default page
이번에는 next에서 제공하는 404 페이지로 유도하는 법을 적어보고자 한다. 시나리오 유저는 id 1부터 10까지만 있다. localhost:3000/user/1 - localhost:3000/user/10 그런데 사용자가 임의로 11이나 다른 것들을 입력했을 때 404 페이지로 유도하고자 한다. > 사용자가 잘못된 루트로 이동 localhost:3000/user/11 진행 import { notFound } from 'next/navigation'를 해준다. 그리고 컴포넌트에서 유저가 없으면 notFound함수를 실행시킨다. if (!user) notFound(); 결과 그러면 404페이지가 잘 표시되는걸 볼 수 있다. Custom 404
230629.til
키워드 정리 color-scheme 웹 페이지가 지원하는 색상 테마를 시스템에 알려주는 역할을 한다. 보통 이 속성은 웹 페이지의 루트 요소(html) 에 적용되고, light, dark, normal 의 값을 가진다. @media (prefers-color-scheme: dark) 같은 미디어 쿼리와 함께 사용하면 다크테마, 라이트테마 같은 시스템 테마 컬러 설정을 하는 것에 유용하다. React.FC ? React Function Components 를 명시해주는 타입스크립트 구문이다. 컴포넌트의 props 타입을 명시해 주기 위해 종종 사용한다. 최근에는 아래와 같은 단점들로 인해 잘 사용하지 않는다고 한다. 자동으로 children props 을 추가한다. React.FC 타입을 사용하면 명시해주지 않아도 자동으로 children 이라는 오리지널 prop이 추가된다. 따라서 children prop 을 원하든, 원하지 않든 반드시 전달받게 되
나의 Next.js 초기 세팅값
내가 Next.js 프로젝트를 생성하면 세팅하는 값들 우선 위와 같이 설정되어 있는 globals.css를 수정해준다. 싹 지우고 위와 같이 간단하게 해두기! 그리고 layout.tsx 파일로 가서 폰트와 언어를 바꾸어준다. 폰트는 이외의 다른 좋은 폰트도 많고, 따로 fonts폴더를 생성 후 원하는 폴더를 저장하고, tailwind.config.js파일에서 설정해줄 수도 있다! 이건 포스팅 하단에..🔥 그리고 page.tsx로 들어가서 기본값으로 설정되어 있는 값들을 모두 지워준다. 
Next.js 프로젝트 생성 방법
Next.js 프로젝트 생성하는 방법 위의 명령어를 터미널에 입력하여 프로젝트를 생성할 수 있다. 위와 같이 터미널창을 열어 원하는 경로까지 가서 명령어를 입력하고 엔터를 누르면 파일 이름을 설정할 수 있고, 타입스크립트를 사용할 것인지, Tailwind css를 사용할 것인지 등의 질문이 나온다. 원하는대로 설정하고나면 프로젝트가 생성된다. 필요한 파일들까지
Next Js
: React로 만드는 서버사이드 렌더링 프레임워크 >react + express + react router dom + server side rendering 타입스크립트 : 자바스크립트의 슈퍼셋 프로그래밍 언어. 확장자로는 .ts를 사용하며, 컴파일의 결과물로 자바스크립트 코드를 출력 슈퍼셋 : 시각적이고 직관적이며 대화형으로 설계된 오픈 소스 데이터 탐색 및 시각화 플랫폼 NextJs 설치 및 시작 아래는 프로젝트 구조 실행 명령어는 좀 다르다 위 url http://localhost:30
Next Js에서 localStorage다루기(feat Darkmode)
🔴 문제상황   다음과 같이 다크 모드 적용을 위해 localstorage에 theme 저장 후 이 값을 가져와서 새로고침이 되더라도 theme를 유지하려 했다.  그런데 위와 같이 localStorage를 찾지 못하고 있어서 문제 해결에 어려움이 있었다. 왜 localStorage를 찾지 못했을까?? <
230605.til
타입스크립트 핸드북 스터디 타입스크립트의 기본 타입 1. Primitive types 2. Array 3. Enum 열거형. 특정한 값 집합 중 하나의 값만을 가질 수 있는 타입을 정의. enum 을 생성하면 자동으로 숫자 기반 열거형을 지원하며 문자열 기반의 열거형도 사용자가 정의해줄 수 있다. enum 타입을 활용할 경우 정의한 집합을 일종의 바운더리로 설정할 수 있기 때문에, 변수의 값을 예측 가능하도록 명시할 수 있다. 이는 개발자의 의도를 조금 더 직관적으로 파악할 수 있으므로 가독성 측면에서 유리하다. 또한 VSCode 의 자동완성 기능으로 생산성도 증진시킬 수 있다. 컴파일 시 코드의 양이 증가하는 단점이 있다. Tree-shaking 또한 지원하지 않는다. 런타임이 실제로 존재하는 객체이므로 enum 을 난발한다면 무거운 코드가 될 수 있다. 3-1. const enum
230519.til
레아이웃 컴포넌트 심화과정 심화과정이라고 하면 조금 거창하긴 하지만 여러가지 가능성을 두고 연습을 해봐야 실력이 늘기 때문에 심화과정이라고 하겠다. 추가적으로 앞으로의 프로젝트는 모두 타입스크립트로 진행하려고 한다. 타입스크립트만 지원하는 prisma 같은 ORM 도 있고, 정적 타이핑의 장점을 살려서 개발하는 버릇을 들이는 편이 아무래도 좋다는 생각이 든다. 구현물 스타일링은 따로 진행하지 않고 tailwind 를 사용해 가볍게 margin, padding, border 정도만 넣어주었다. tailwind 를 연습하는 것도 정말 재밌는데, 익숙해지면 많이 쓰던 styled-components 이상으로 편할 것 같다. 현재 버전의 Next js 에서 서버 컴포넌트에서 js-in-css
230517.til(next-js-05)
회원 인증기능 가장 최근 프로젝트에서 회원가입 기능의 프론트엔드 담당을 맡아서 했다. Next 에서는 내가 직접 서버를 만들어 볼 수 있기 때문에 조금 더 기대되는 기능. 원리 회원 인증 기능을 쉽게 설명하면 ”이러한 행동을 하기 위해서는 이러한 권한이 필요합니다” 라는 느낌이다. 여기서 “이러한 권한” 이라는 것을 증명하는 방법에는 다양한 종류가 있는데, 대표적으로는 Cookie & Session, JWT token, 같은 것들이 있다. Session 방식은 유저가 로그인을 시도하면 데이터 베이스에 로그인 정보를 저장해두고 클라이언트에 세션 id를 발급하는 방식이다. 매 요청마다 엄격한 권한 체크를 할 수 있지만 서버의 부담이 증가하는 단점이 있다. JWT 토큰 방식은 데이터 베이스에 로그인 정보를 저장하지 않고 클라이언트에 암호화된 로그인 정보를 토큰 형식으로 발급한다. 서버에 따로 저장되는 데이터가 없으므로 서버의 부담은 줄어들지만, 토큰 탈취시 대처가
230516.til(next-js)
서론 가끔은 sudo 키워드를 인생에도 적용할 수 있으면 좋겠다는 생각을 한다. 의지와 상관없이 거부할 수 없는 명령같은거. 이상한 생각 금지. 최근들어 벨로그가 자주 먹통이 되는게 참 안타깝다. Update 넥스트 CRUD 세번째. 업데이트 로직은 리액트에서 업데이트 자체가 어렵다기 보다는 업데이트 레이아웃을 컨트롤 하는 부분이 어려웠던 것 같다. 사실 CRUD api 로직은 전부 비슷비슷해서 명령을 보낸다 -> 수행한다 의 로직을 따르는데 (프로그래밍이 대부분 이렇지만) 리액트에서의 업데이트는 기존의 데이터를 불러와서 바인딩 하고, 그 데이터를 수정하고 업데이트 로직을 수행할 때 기존의 데이터를 어떤식으로 업데이트 할 지. 이 말로는 간단해보이는 로직이 정말 수많은 방법이 있고, 예외사항이나 (예를들어 이미지나 캔버스) 시행착오도 많이 겪었던 것 같다. 넥스트는 어떻게 다른지 알아보자. list 페이지에서 버튼을 누르면 해당 페이지로 이동한다. post
230512.til(next-js-03)
Dynamic route 라우트의 경로가 동적으로 변하는 방식의 라우팅. 비슷한 패턴의 페이지를 일일히 만들필요 없이 동적으로 컨텐츠를 바인딩 할 수 있다. 리액트에서는 리액트 라우트를 사용해서 이런식으로 작성해주었다. 넥스트에서는 어떤식으로 작성하는지 알아보자. [작명]/page.js 아주 간단하게 app 폴더 내부에 [작명]/page.js 로 디렉토리를 구성하면 자동으로 다이나믹 라우트를 지원한다. 굉장히 편리하고 직관적인 기능. 이런식으로. 그리고 해당 페이지에서 props를 객체분할하여 params 객체를 찾으면 바인딩 할 데이터를 가져올 수 있다. 아래의 예시에서는 findOne 메소드를 사용하여 mongo DB의 _id 값으로 게시글의 데이터를 가져온다.
230508.til(next-js-02)
Client / Server components Next.js 컴포넌트는 종류가 2가지. default 는 서버 컴포넌트. 파일의 최상단에 ‘use client’ 키워드를 입력하면 클라이언트 컴포넌트가 된다. 이름과 같이 ‘서버에서 렌더링되는가’, ‘클라이언트에서 렌더링 되는가’의 차이라고 볼 수 있다. 위의 문서를 보면 조금 더 명확하게 구분할 수 있다. 서버 컴포넌트는 서버 인프라를 조금 더 활용할 수 있게 해주는 역할을 한다고 할 수 있겠다. 초기 페이지 로드가 빨라지고 클라이언트 측 자바스크립트의 번들 크기가 헌저하게 줄어든다. 단, 서버 컴포넌트는 서버에서 동작하기 때문에 브라우저 API를 사용할 수 없다. onClick 부터 useState, useEffect 까지 브라
storybook/nextjs 프로젝트에 적용하기
install 터미널에 위 명령어를 입력한다. npx storybook@next init 스토리북 설치할거냐고 물어보는데 y 를 누르고 엔터를 친다. 현재 7.0.2 버전으로 설치 할 수 있다. 설치메세지 그러면 위와 같은 메세지가 나오고 조금만 기다리면 패키지 설치가 시작된다 본인의 경우 1분 정도 걸렸다. 그리고 이런 메세지가 추가로 나왔다. 
[Next.js, react-query] 쇼핑몰 만들기
프로젝트 링크 깃헙 링크 Next.js를 이용해 쇼핑몰 웹사이트를 제작해 보았다. 사용된 버전은 13이지만... 딱히 13에서 추가된 기능을 사용해보지는 않았다. 이번 프로젝트가 끝나면 13의 새로 추가된 기능을 한 번 경험해 볼 예정이다. 기존의 프로젝트에서는 상태 관리에 redux를 사용해 왔는데 딱히 만족스럽지는 않았다. 서버 상태 관리에 특화된 라이브러리가 아니기 때문에 간단한 데이터를 서버에서 불러와 앱 전역에 뿌려주기 위해 미들웨어, 액션과 리듀서를 작성하던 추억들이 아직까지 생생하다. 따라서 이번 프로젝트에서는 redux보다 서버 상태를 관리하는데 더 특화된 react-query를 처음으로 도입해 사용해 보았다. <
NEXT JS
넥스트 js라는 좋은 리액트 라이브러리가 있는대 왜 쓰느냐, 리액트로만 구현한다면 SEO에 관한 문제가 발생한다. SEO란 검색엔진 최적화 라는 뜻인대 웹환경상 구글이나 네이버 같은 검색엔진에 노출될때 치명적이다. CSR 방식은 검색엔진이 빈HTML파일을 확인할수밖에없기에 조사 결과 서버측에선 다른 리액트 서드파티 라이브러리를 사용해서 변환시켜 검색엔진에 노출시켜야 하기때문에 NEXT를 사용한다. 먼저 리액트가 동작하는 구조를 보면 TTFB: 빨리 첫 데이터 받는대 걸리는시간 서버에서 클라이언트로 빈 html 전송 CSS, 자바스크립트 파일 전송 클라이언트의 브라우저는 받은 JS 파일로 렌더링 시작 html 뷰 완성. 더 통신할게 남아있다면 컴포넌트들의 api통신을 사
Next js 동적 SEO 구현기
SEO란? SEO는 Search Engine Optimization의 약자로, Google과 같은 검색 엔진에서 상위 노출될 수 있도록 사이트를 최적화하는 일을 의미한다. 쉽게 말해 사용자가 특정 검색어를 쳤을 때, 우리 서비스가 최대한 상단으로 노출될 수 있도록 최적화하는 작업이다. 수많은 웹사이트를 돌아다니며 정보를 수집하는 웹 크롤러에게 적절한 정보를 제공함으로써 최적화를 이뤄낼 수 있다. 구현 배경 숙박 예약 서비스는 SEO 중요도가 높다. 예약할 숙소에 대한 검색 결과를 따라서 자연 유입되는 케이스가 많이 발생하기 때문이다. 그렇기 때문에 우리 서비스에서도 SEO가 중요했다. 특히 숙소 상세 페이지에 대해서 SEO를 구현하는 일이 중요했다
Hydration Handler
Hydration Error 리팩터링을 진행하는 과정에서, window가 mount되기 전에 발생하는 hydration Error를 관리하는 코드가 컴포넌트별로 반복된다는 것을 발견했다. 따라서, 이를 재사용이 가능한 HydrationHandler 컴포넌트로 선언해, Error Handler가 필요한 파일 내에서 import하는 방식을 채택했다. 원하는 컴포넌트에서 import 및 사용. reactPortal