0. 시작하기

아무것도 모르는 상태로 시작해 보는 next js로 웹사이트 만들어 보기 프로젝트입니다.
입문자의 시선에서 작성된 글이기에 전문성이 부족할 수 있습니다.
초보자도 쉽게 따라할 수 있도록 하는게 이 프로젝트의 목적입니다!

Next js를 선택한 이유.

프런트엔드 + 백엔드를 혼자 관리해야 하고, 두 분야 전부 처음 해보기 때문에 서버를 따로 구축할 필요가 없는 Next js를 선택하게 되었습니다.

 

나는 어디까지 알고 있어야 하는가?

진짜 기본적인 html / css / javascript 기초만 알고 있다면 따라할 수 있습니다.
React에 대한 기본적인 지식이 있다면 더욱 이해하기 쉽습니다.
css 대신 tailwindcss를 사용하기에 tailwindcss에 대해 알아보면 좋습니다.

 

Next js 시작하기

공식 홈페이지를 참고해서 시작해 보겠습니다.

시스템 요구사항

Node js 18.17 버전 이상, 윈도우 환경에서 진행합니다.

Next js 버전은 14.1.0으로 선택했습니다. (당시 최신버전에 버그가 있어 한 단계 낮춰서 진행했음)

npx create-next-app@14.1.0

 

적당한 폴더에서 터미널을 열고 위와 같이 입력해 줍니다.

위와 같이 설정하고 진행하겠습니다.

vscode에서 해당 폴더를 열고, 터미널에서

npm run dev

 

를 입력해서 실행해 줍니다.

http://localhost:3000 로 접속해서 웹페이지가 정상적으로 뜨면 성공!

그 후 app 폴더 내 page.js의 내용을 전부 지우고 아래의 코드로 작성해 줍니다.

export default function Home() {
  return (
    <div>
      안녕하세요
    </div>
  );
}

 

이 코드에서 주목해야 할 부분은 return()내부의 코드입니다.

이 부분이 웹페이지에서 보여줄 부분입니다.

 

결과)

결과 화면 1

 

가로줄 배경이 잔뜩있는, 안녕하세요 화면이 나타납니다.

 

이를 수정해 봅시다.

 

app 페이지 내부의 globals.css를 살펴보면 body 태그에 백그라운드 그라디언트가 적용되어 있어서 그럽니다.
어차피 css파일을 다시 작성해야 하기 때문에 전부 지워주고 시작합시다.

@tailwind base;
@tailwind components;
@tailwind utilities;

 

전부 지운 후, 위 3줄을 입력해 줍니다. tailwindcss를 사용하기 위해 필요한 부분입니다.

globals.css파일을 수정한 후 다시 웹페이지를 보면 가로줄이 사라져 있는 걸 볼 수 있습니다.

결과 화면 2

 

다음은 프로젝트 파일 내 쓰지않는 파일을 삭제합시다.

파일 구조

현재 프로젝트의 파일 구조입니다.
여기서 public 폴더 내 svg파일 2개와, app폴더 내 favicon.ico 파일은 현재 프로젝트에 필요 없기에 제거해 줍니다.

0편은 여기서 마무리하고 다음 편에서 진행하겠습니다.