웹 개발 1도 모르는 사람이 웹페이지 만들기 프로젝트 2일차

썸네일 - 뤼튼 AI 생성 이미지

 

 

저번 1일차에는 노션 API를 post man에서 요청하여 확인해보는 과정까지 했었습니다.

이번 2일차에는 이를 활용하기 위한 웹페이지 제작을 시작해보도록 하겠습니다!🥳

 

💡 웹 페이지 제작... 어떻게?

 

이 프로젝트 이름이 그렇듯 저는 웹 개발에 대해 전혀 모르는 사람입니다.

기초부터 시작하자니 한 세월 걸릴거 같아 보고 따라 할 만한 자료를 찾아 나섰습니다.

 

Next.js 나만의 포트폴리오 사이트 만들기 (개발하는 김에 배포까지) / LottieFiles, Notion Api, TailwindCSS

 

웹 페이지 만들기 위한 세팅부터 배포까지 과정과 노션 API 사용까지... 아주 좋은 영상을 발견했습니다!

정대리님에게 감사인사를 전하며... 시작해보도록 하겠습니다😎

 

⭐ 웹 페이지 만들기

 

1. VScode와 Node.js 설치하기

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

https://nodejs.org/ko

Node.js — 어디서든 JavaScript를 실행하세요

웹 페이지 개발을 하기 위한 기본적인 세팅입니다.

둘 다 홈페이지에서 다운로드하면 됩니다.

 

2. Next.js 설치하기

https://nextjs.org/docs/app/getting-started/installation

Getting Started: Installation | Next.js

 

영상을 보며 next.js를 설치하는데 아무래도 2년 사이에 버전이 업그레이드 되면서 설치 옵션이 조금 다르더라구요.

windows의 경우 Windows PowerShell은 보안 문제때문에 명령 프롬프트를 이용하는 걸 추천합니다!

 

 

 

명령 프롬프트(cmd) 명령어

• cd 폴더명 : 폴더명 폴더로 이동
• cd.. : 이전 폴더로 이동
• dir : 현재 폴더에 존재하는 폴더와 파일들 출력
• 폴더명 작성할 때 앞의 글자만 입력 후 tab을 누르면 빠르게 입력 가능

명령 프롬프트(cmd)를 켜주고 next.js를 설치하고자 하는 폴더로 이동합니다.

폴더로 이동하였으면 아래 명령어를 입력하여 최신 버전의 next.js를 설치합니다.

 

npx create-next-app@latest 폴더명

 

 

 

뭐가 뭔지 잘 모르기 때문에 대부분 No로 설정하고 영상에서 Tailwind CSS를 사용하는 부분이 있어 이것만 추가해주었습니다.

 

3. dev 모드 실행하기

설치가 성공적으로 진행되었다면 프로젝트를 만든 폴더로 이동하고 아래 명령어를 이용하여 dev 모드를 실행합니다.

 

npm run dev

 

 

성공적으로 실행이 됐다면 홈페이지를 이동하여 확인해봅시다!

Local이나 Network에 나와있는 url를 복사하여 브라우저에 붙여넣으면 됩니다.

 

 

기본 Next.js 페이지가 열리는 걸 볼 수 있습니다.👍

 

2일차에는 세팅을 완료하고 영상을 보고 노션 API를 시도하였으나 실패해버렸습니다...

하지만 3일차에 성공했습니다!!! 3일차를 기대해주세요🩷