Next.js5 Next.js 15 버전 설치시 추가된 Turbopack create-next-app으로 설치할 때 Turbopack 설치여부 물음 Next.js 15버전으로 올라오면서 기존에 create-next-app으로 설치할 때 물어보지 않았던 turbopack 설치여부가 추가되었다. Turbopack은 Next.js 팀이 개발하여 2022년 10월에 열린 Next.js 컨퍼런스에서 발표한 새로운 번들러로, 높은 성능을 위해 저수준 언어와 고수준 언어의 중간 성격을 가진 Rust 언어로 작성되었다. 성능을 목표로 개발되었다보니 기존의 webpack보다 더 빠른 빌드와 번들링 속도가 특징이며, 핫 모듈 교체(HMR)와 같은 기능을 통해 개발 중에 변경 사항을 즉시 반영할 수 있어서, 기존의 webpack 기반 HMR보다 성능이 개선되어 개발 환경이 빨라진다는 특징이 있다.. 2024. 11. 6. 카카오페이 API 단건결제가 이뤄지기까지 과정 단건결제의 시작 카카오페이 API를 이용하여 한 건의 결제를 하든 정기결제를 하든 시작점은 단건결제로 시작한다. 단건결제는 사용자가 결제버튼 클릭 ➡ 준비(ready) API 호출 ➡ (200) TID값 등 반환 ➡ 승인(approve) API 호출 ➡ (200) SID 값 등 반환 ➡ 단건결제 성공 과정으로 진행된다. 단건결제로 결제프로세스가 끝난다면 결제로직이 완성된 것이고, 여기서 정기결제를 진행하려면 2회차 결제부터 SID 값을 사용하여 진행하게 된다. 아래 예시 코드는 공식문서의 JAVA 코드로 되어있는 예시를 NEXT.JS 코드로 구현한 것이다. (이 글을 참고하시게 된다면 코드는 참고용으로만 봐주세요! 많이 부족합니다😂. 그리고 꼭 공식문서와 함께 참고해주세요!) 단건결제 프로세스 예시 코.. 2024. 7. 15. React와 NEXT.JS에 대해서 React와 NEXT.JS 둘이 비슷한 거 아니야? 처음에 둘의 차이점에 대해 잘 몰랐을 때 저렇게 생각했다. 생각보다 그렇게 생각한 기간이 길었다. 라이브러리와 프레임워크의 차이도 잘 몰랐다. 하지만 최근 React와 NEXT.JS를 공부하면서 둘에는 어떤 궁극적인 차이가 있는지 알게 되었다. 우선 React와 NEXT.JS에 대한 일반적인 소개를 하면 다음과 같다. React React는 UI를 만드는 데 사용하는 자바스크립트 라이브러리이다. 컴포넌트라는 개념을 도입하여 UI를 재사용 가능한 개별적인 부분으로 분리하는 것을 가능하게 한다. React의 주요 특징 중 하나는 Virtual DOM인데, 이를 사용하면 실제 DOM에 직접 접근하여 변경하는 대신, 이를 추상화하여 성능을 향상시킨다. 또한, .. 2024. 2. 8. route group Next.js의 route group Next.js는 폴더 라우트방식으로도 유명하다. 개발자가 라우트 코드를 작성하지 않아도 되서 간편하다. 폴더 라우트 방식에는 route group이란 기능이 있다. 사용법은 폴더명을 소괄호로 묶으면 되며, 라우트 경로에 소괄호를 한 폴더는 포함되지 않는다. 그래서 구역별로 폴더정리를 하는 느낌으로 이 기능을 사용할 수 있다. 위 예시에서 (auth) 폴더를 예로 들면, 라우트 경로에는 sign-in과 sign-up은 포함되지만 상위의 (routes)나 (auth)는 포함되지 않는다. 즉, localhost:3000/sign-in의 URL이 되는 것이다. route group은 다음과 같은 경우에 유용하게 사용할 수 있다. 사이트 섹션, 개발 의도 또는 팀별로 나눠서 .. 2023. 10. 19. Next.js는 무엇인가 빠르고 효율적인 React 프레임워크 Next.js는 React 애플리케이션을 위한 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하는 프레임워크이다. Vercel에서 제작했고, 성능 최적화와 SEO, 개발자 경험 향상 등을 위한 기능들이 내장되어 있다. Next.js의 특징은 다음과 같다. 서버 사이드 렌더링(SSR): 초기 페이지 로드시에 서버에서 렌더링하여 빠른 로드와 SEO 최적화가 가능하다. 정적 사이트 생성(SSG): 빌드 시점에 페이지를 미리 생성하여 빠르게 제공할 수 있고, 별도의 서버 요청없이 콘텐츠가 빠르게 로드된다. 핫 모듈 교체(HMR): 개발 중 코드 변경시에 페이지 전체를 새로고침하지 않고 해당 모듈만 교체하여 빠른 개발이 가능하다. API 라우트: /pages.. 2023. 8. 17. 이전 1 다음
