10월 26일 컨퍼런스에서 발표된 Next.js 13 버전, 새롭게 변경된 내용을 정리해봅니다 :) | 공식 문서 | 컨퍼런스 페이지 | 예제 배포 사용 Next.js 13 App Playground – Vercel Explore the new app directory (App Router) in Next.js 13. vercel.com 최신 Next.js 설치 npm i next@latest react@latest react-dom@latest eslint-config-next@latest 무엇이 달라졌는지? app/ Directory (beta) (app/디렉토리): Easier, faster, less client JS Layouts (레이아웃) React Server Components (리액트 ..

Result 전세계의 다국어 도메인은 퓨니코드로 변경되어 등록과 처리가 진행된다. 인터넷 사용자가 입력한 다국어 도메인은 클라이언트 측에서 아스키 기반의 퓨니코드로 변환되 네임서버로 전송된다. | 과정 주소창에 다국어 도메인이 입력된다 (ex. 청와대.com) 클라이언트(브라우저)측에서 퓨니 코드로 변환한다 ( ex. xn--vk1b187a8ue.com ) DNS의 네임 서버로 전송되 IP 주소를 찾아 접속하게 된다 * 네임 서버는 퓨니코드 형태의 영역 데이터를 운영한다 . 1) 국제화 도메인 네임 ( IDN _ Internationalized Domain Name ) 인터넷 상에서 호스트의 주소를 나타내는 도메인 네임은 기본적으로 라틴 문자, 숫자, ( _ )언더바 등으로 구성되어있다. 여기서 말하는 ..

공식 페이지 Getting Started | Next.js Get started with Next.js in the official documentation, and learn more about all our features! nextjs.org 리액트로 프로젝트를 진행하면서 새롭게 프로젝트를 만들게 된다면 next js를 사용해 개발해보고 싶었습니다. Next.js는 Zeit에서 만든 React 프레임워크로 리액트만으로 개발를 진행하면 핵심기능 외의 라이브러리(라우터, 상태 관리 등)를 추가로 설치해 조합해야 했지만, Next에선 별도의 설치없이 프론트앤드 개발에 필요한 다양한 기능을 여러 3rd 라이브러리로 기본으로 제공합니다. Next 프로젝트 생성 기본 설치를 위해선 npx 혹은 yarn을 통해..

1. VS code 1 ) 설치 URL 비주얼스튜디오코드는 마이크로소프트사에서 만든 텍스트 에디터로 ts기반으로 개발된 오픈소스 프로젝트입니다. 웹개발 및 다양한 언어 개발에 유용하게 활용됩니다. Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 2 )..

최근 M1 맥북을 구매하게 되면서 프론트 개발에 필요한 프로그램 설치를 진행하였습니다. 리마인드겸 정리해두는게 좋을 것 같아 설치한 목록을 정리해보려고 합니다. 추가 사항이 생기면 아래에 계속 업데이트 해두겠습니다. 1. Node.js & npm 1) 설치 URL https://nodejs.org/en/download/ Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2) 설치 단계 사이트에 접속해 macOS Inataller 아이콘을 클릭하면 패키지 다운로드가 진행됩니다. 다운로드 폴더 내부에 node-v16.13.0.pkg와 같이 노드 버전이 명시된 패키지 파일을 확..

다양한 곳에 동일한 정보가 분산되어 있을 때 한 곳의 정보를 업데이트하게 될 경우 props를 통해 전달해주는 방법은 데이터의 위치가 가깝다면 편리하지만 프로젝트 크기가 커진다면 번거로운 작업이 될 수 밖에 없다. 그렇다면 업데이트 사항을 props로 전달해주는 방법 말고 다른 방식은 뭐가 있을까? redux? context? mobx은 또 무엇일까 Redux - A predictable state container for JavaScript apps. | Redux A predictable state container for JavaScript apps. redux.js.org 리덕스 공식문서에 접속하면 더 다양한 정보를 살펴볼 수 있으며 리덕스를 사용하기 위해선 사전 설치 작업이 필요하다. 1. 터미..