안녕하세요. 엔지엠소프트웨어입니다. 이전 시간에 넥스트js를 개발하기 위한 환경을 구성하고, 실행까지 해봤습니다. 오늘은 Next.js의 구조에 대해 알아보도록 하겠습니다. 우선, vscode에서 프로젝트를 열어줍니다. 그리고, 실행하면 Create Next App 화면을 볼 수 있습니다.

npm run dev

 

터미널에서 콘트롤키를 누르고, 링크를 클릭하거나 해당 주소를 웹브라우저에 입력해도 됩니다.

 

 

좌측의 탐색기에서 page.js가 보일겁니다. 페이지는 화면에 보여지는 화면을 말합니다. 대부분 시각적인 내용들은 여기서 구현하게 될겁니다. 그리고, layout.js가 있는데요. 이 파일은 페이지를 감싸고 있는 상위의 페이지입니다. 웹 개발을 해보셨으면 대략적인 구조는 파악이 가능할텐데요. 일반적으로 layout.js에 헤더 정보나 공통 컨트롤, 메뉴, 네비게이션등등이 들어옵니다. 물론, 푸터도 여기에 작성합니다.

 

 

globals.css는 리액트나 앵귤러에도 동일하게 있는 파일인데요. 모든 페이지에 적용되는 스타일입니다. 그런데, 특정 페이지에만 적용 가능한 css 파일도 존재합니다.

 

 

public 폴더가 보일텐데요. 이 곳은 소스코드를 제외한 모든 리소스 파일들을 모아두는 곳입니다. 이미지, 아이콘, 폰트등등... 그렇습니다. node_modules 폴더는 앱이 동작하기 위해 필요한 모든 패키지와 라이브러리들을 모아놓은 곳이라고 생각하시면 됩니다. 이곳은 개발자가 직접 컨트롤 할 일은 없습니다.

 

 

마지막으로 package.json 파일이 있는데요. 이 프로젝트를 구동하기 위해 필요한 라이브러리들의 버전이 기록되어 있습니다. 라이브러리를 설치하면 자동으로 기록되기 때문에 딱히 건드릴만한건 없습니다. 하지만, 특정 버전을 사용해야 하는 경우 버전을 변경해야 할수도 있습니다. 내용을 잘 보면, 앱을 실행했던 명령도 보일겁니다. npm run dev라고 실행했죠? next dev를 실행한다는 의미입니다. 그리고, 이 앱의 이름이 macro인것도 알 수 있습니다.

 

 

간단하게나마 Next.js 프로젝트 구조에 대해 알아봤습니다. React나 Vue, Angular, Next등등... 구조는 비슷합니다. 만약, 이 프로젝트를 typescript로 만들었다면 몇몇 폴더와 파일들이 더 추가만 될뿐입니다. 그래서, frontend 프로젝트를 해본 분들은 쉽게 적응할 수 있을겁니다. 다음에는 실제로 페이지를 만들어보고, 실습하는 시간을 갖도록 하겠습니다.

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0