Weeeeey Weeeeey

1. getServerSideProps (Docs) getServerSideProps 라는 함수를 한 페이지 내부에서 export 할 경우, Next.js는 getServerSidePrpos에 의해 반환되는 각 페이지 별 요청에 따른 데이터를 pre-rendering 할 것이다.(자동적으로) export async function getServerSideProps(context) { return { props: {}, // will be passed to the page component as props } } Note that irrespective of rendering type, any props will be passed to the page component and can be viewed on..

Middleware란? 통용적으로 사용되는 의미로는 "서로 다른 애플리케이션이 서로 통신하는 데 사용되는 소프트웨어" 이다. 미들웨어를 통해 더욱 빠르게 혁신할 수 있도록 애플리케이션을 지능적이고 효율적으로 연결하는 기능을 제공한다. 미들웨어는 단일 시스템에서의 다양한 기술,도구, DB간에 다리 역할을 한다. 유저는 이 같은 서비스에 대해 인식하지 못한다. 개발자는 처음에 미들웨어를 사용하여 초기 코드를 다시 쓰지 않고도 새 프로그램을 초기 시스템과 통합하였습니다. 미들웨어는 분산 시스템의 중요한 통신 및 데이터 관리 도구가 되었습니다. 개발자는 미들웨어를 사용하여 애플리케이션 개발을 지원하고 디자인 프로세스를 단순화합니다. 이렇게 하면 서로 다른 소프트웨어 구성 요소 사이를 연결하지 않고 자유롭게 비즈..

1. Next.js 가 제공하는 Image 컴포넌트(공식문서 링크) 특징과 장점 특징 lazy loading 이미지 사이즈 최적화 placeholder (Local Image일 경우) 장점 성능 향상 : 적절한 사이즈 이미지 서빙 & 작은 용량의 포맷 사용 가능 시각적인 안전성: placeholder를 통해 이미지 로드전 CLS(Cumulative Layout Shift) 방지 빠른 페이지 로딩: lazy loading & 이미지 사이즈 최적화, placeholder를 통한 2. lazy loading 이미지 로드 하는 시점을 필요할 때 까지 지연시키는 기술을 의미한다. ( 페이지 로드 속도 빨라지는 이점) 사용자가 이미지가 나올때까지 스크롤 하지 않으면 이미지는 로드 되지 않는다. Next.js는 사용..

SWR란? HTTP 캐시 무효 전략인 State-While-Revalidate 에서 유래됨. SWR은 캐시로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화 된 데이터를 가져오는 전략 SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트를 경험할 수 있음. Next.js 팀에서 만들었다. 설치 yarn add swr // npm install swr 사용법 import useSWR from "swr"; const fetcher = (url:string)=>{ fetch(url).then(res=>res.json()) } const useUser = () => { const { data, error } = useSWR("/api/users/me",fetcher); r..

참고: https://jforj.tistory.com/259 1. .env 파일에 사용할 변수 입력 COOKIE_NAME= carrot_market COOKIE_PASSWORD = carrot_password 2. next.config.js 파일에 변수들에 대해 입력 ( 자동완성 ) /** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, env: { COOKIE_NAME: 'carrot_market', COOKIE_PASSWORD: 'carrot_password', }, }; 3. env 타입 지정 root 경로에 @types 폴더 생성 후 그 안에 import-env.d.ts 파일 생성 import-env.d...

API Route 란? 등장배경 React 애플리케이션을 개발하다보면 backend API가 필요한 시점이 온다 (Eg.) DB의 데이터 조회| 사용자가 요청하는 데이터 처리 작업(html page가 아닌 입력받은 데이터만 필요) 이를 위해 노드.js 을 활용한 custom server 파이프라인을 구축해서 작업하는 방식이 있다. 하지만 이럴 경우 Next.js의 성능 최적화를 해침 (+TS 및 Es6 방식의 모듈 시스템 사용 못함) 이를 위해 API Routes 라는 기능을 추가해서 Next.js 안에서 필요한 serverless API Endpoint를 구축 가능해짐 API란? 여러 종류가 있지만 REST API가 대표적임 REST API란 REST 규칙의 특수한 규칙을 가진 웹 API를 말한다. (..

// 참고: sinclairr 님의 벨로그 1. Iron-Session 이란? 암호화된 쿠키를 이용하는 Node.js stateless session utilituy 이다. 기본적으론 JWT와 흡사합지만, 토큰 정보에 대해 암호화,복호화를 한다는 점이 다름 2. 동작방식 user(Browser)가 server에 req을 보냄 server 에서 해당 정보를 암호화한 cookie를 만듬 이후 user에게 res를 보낼떄 cookie를 같이 보냄 user는 암호화된 cookie를 가지고, 이후 req에 이 cookie가 같이 보내짐 server는 cookie를 받게 되면 복호화를 진행 후 정보를 활용함 => 쿠키를 만들고, 유저에게 보내는 작업을 직접 할 필요 x . Iron Session에서 제공하는 hel..

Next.js가 자체적으로 파일들을 통해 지원하는 환경 변수들 Next.js는 프로젝트 폴더에 존재하는 환경변수 파일(.env*) 로부터 변수들을 읽어서 Node.js 환경의 process.env객체에 주입한다. 환경 Default 환경 변수 (원격 저장소 푸시 o) Secret 환경 변수 (원격 저장소 푸시x) 모든 환경 .env .env.local 개발 환경(next dev) .env.development .env.development.local 배포 환경(next start) .env.production .env.production.local 테스트 환경(Jest, Cypress등등) .env.test .env.test.local 환경 변수 파일들의 적용 우선순위는 다음과 같이 결정된다. (환경에 ..