Next.js 프로젝트 생성 및 MongoDB 사용 방법 1. Next.js 프로젝트 생성하기 Next.js 프로젝트를 새로 생성하려면, 먼저 작업하려는 디렉토리에서 터미널을 열어주세요. 그리고 아래의 명령어를 입력해주세요. //bash npx create-next-app@latest 명령어를 실행하면 프로젝트의 이름을 물어보는데, 여기에서 원하는 이름을 입력하면 됩니다. 그 다음으로 나오는 질문들은 대부분의 경우 기본값을 선택하면 됩니다. 프로젝트가 성공적으로 생성된 후에는 CSS 파일과 page.js 파일의 내용을 깔끔하게 정리하고 시작하는 것이 좋습니다. 2. MongoDB 사용하기 웹사이트를 운영하면서 사용자의 데이터(예: 아이디, 게시글 등)를 영구적으로 저장하려면 데이터베이스가 필요합니다. 데..

React에서 클릭 이벤트와 State 관리하기 1. 클릭 이벤트 처리하기 HTML 요소에 클릭 이벤트를 추가하려면 onClick 핸들러를 사용합니다. 이는 클릭 시 특정 자바스크립트 코드를 실행시키는 역할을 합니다. //jsx { console.log(1) }}>버튼 위의 코드에서는 버튼을 클릭하면 콘솔에 1이 출력되도록 설정했습니다. 2. Client Component에서 JavaScript 기능 추가하기 Next.js에서는 Server Component에서는 HTML 안에 JavaScript 기능을 넣을 수 없습니다. 이를 해결하기 위해 Client Component를 사용합니다. 이를 사용하려면 파일 맨 위에 'use client'를 적어야 합니다. //jsx 'use client'; export..

Next.js에서 컴포넌트와 import/export 활용하기 1. 컴포넌트 만들기 길고 복잡한 HTML 코드를 간결하게 만들기 위해 컴포넌트를 활용할 수 있습니다. 컴포넌트는 HTML 코드를 함수로 만들어 재사용 가능하게 하는 기능입니다. //jsx export default function Cart() { return ( Cart ) } function 작명(){ return( 상품명 $40 1개 ) } 위의 코드에서는 작명이라는 컴포넌트를 만들어 HTML 코드를 간결하게 표현하였습니다. 2. Server 컴포넌트 vs Client 컴포넌트 Next.js에서는 Server 컴포넌트와 Client 컴포넌트 두 가지 유형의 컴포넌트를 사용할 수 있습니다. Server 컴포넌트: 페이지 로드 시 JavaS..

Next.js에서 배열과 map 함수를 활용하여 HTML 생성하기 1. 배열 생성하기 Next.js에서 상품 리스트와 같은 여러 개의 데이터를 다루기 위해 배열을 사용할 수 있습니다. //jsx export default function List() { let 상품 = ['Tomatoes', 'Pasta', 'Coconut'] return ( (생략) 위의 코드에서는 '상품'이라는 변수에 여러 개의 상품 이름을 배열 형태로 저장했습니다. 2. 배열과 map 함수를 활용하여 HTML 생성하기 배열에 있는 각 데이터를 활용하여 HTML을 생성하려면 map 함수를 사용할 수 있습니다. //jsx export default function List() { let 상품 = ['Tomatoes', 'Pasta', ..

Next.js에서 페이지 생성 및 라우팅하기 1. 페이지 생성하기 Next.js에서는 URL을 이용하여 페이지를 구분합니다. 예를 들어, '/list'로 접속하면 상품 목록 페이지를 보여주는 식으로 설정할 수 있습니다. 이를 위해 다음의 단계를 따릅니다: 'app' 폴더 안에 새 폴더를 만듭니다. 이 폴더의 이름은 원하는 URL의 일부가 됩니다. 새로 만든 폴더 안에 'page.js' 파일을 만들고, 이 파일 안에 HTML을 작성합니다. 예를 들어, '/list' URL로 접속했을 때 상품 목록 페이지를 보여주고 싶다면, 'app' 폴더 안에 'list'라는 폴더를 만들고, 그 안에 'page.js' 파일을 만들어 상품 목록 HTML을 넣으면 됩니다. 2. Navbar 생성하기 웹 페이지 상단의 메뉴를 ..

Next.js 개발환경 설정하기 1. 필요한 프로그램 설치하기 Node.js: LTS 버전을 설치하세요. Node.js 18버전 이상에서만 잘 돌아갑니다. 설치 경로는 변경하지 마세요. Visual Studio Code: 구글에서 검색하여 설치하세요. 다른 에디터를 사용해도 됩니다만, 터미널을 처음 사용하는 분들은 Visual Studio Code를 설치하는 것이 좋습니다. 2. Next.js 프로젝트 생성하기 작업용 폴더를 하나 만듭니다. 작업 폴더에 Shift + 우클릭하여 '여기서 Powershell 열기'를 선택합니다. 맥북 사용자는 두 손가락으로 클릭하여 '터미널 열기'를 선택합니다. 터미널에 npx create-next-app@latest를 입력하고 엔터키를 누릅니다. 이후 나오는 선택지를 원..