개발자로 근무하면서 게임보단 점점 코딩에 몰두하게 되어 활동성 있는 취미를 찾던 중에,
낚시를 접하게 됐는데, 몇명이서 하든 혼자만의 시간이 많아져 많은 것들을 집중적으로 생각하는데 도움이 되었다.(사실 다 필요없고 그냥 혼자 다 만들어보고 싶어서 만드는)
그래서 내가 가진 능력으로 낚시 관련 사이트를 만들어보는 게 어떨까 해서 시작하게 된 것이 '월척이오'이다.
월척이오의 사이트 목적은 젊은이들의 낚시법을 위한 커뮤니티 사이트이다.
기초적인 낚시 종류 강좌부터, 낚시 포인트, 관련 장비 등등 낚시에 관한 건 모조리 다 때려 넣을 생각이다.
사실 내가 가진 능력으로 뭘 할 수 있다라는
그런 자부심과 마음 깊은 고양감이 이렇게 생각할 수 있는 원동력이 된 듯하다.
이러한 방향을 제시해 주고, 충고를 해서 성장하게 해주고, 결정적인 순간에 멘털을 붙잡아주는 세 분이 가장 큰 힘이 됐던 것 같다.
서론이 길었지만,
해당 프로젝트의 기본 개발환경부터 세팅해보도록 하겠다.
프런트 2년 차 개발자로서 개발환경 정도는 어느 정도 세팅할 수 있다고 자부한다.
사실 일단 해보면 돼서 그런 겁니다.
보통은 npm으로 많이들 프로젝트 환경을 세팅하지만,
나는 yarn이 더 좋다. 커맨드도 짧고, 이것저것 관리해주는 것이 훨씬 내 개발 성향과 잘 맞기 때문에
패키지 매니저는 npm보다 yarn으로 대체를 했다.
node의 버전은 가장 안정적인 버전인 v14로 시작한다.
yarn은 최신의 버전을 사용했다 1.22.10
나는 Vue, React, Angular 중 React를 채택했었다.
React는 Vue보다 생태계가 넓고, Angular보다 문법과 공식 사이트 설명이 쉬웠기 때문에,
그냥 딴 거 없이 사실 리액트를 제일 많이 실무에서 사용했다.
하지만 월척이오 프로젝트는 커뮤니티 사이트이기 때문에, SEO가 필요하다
따라서 React의 서버사이드 렌더링인 Next.js를 프레임워크로 선정
우선 설치부터 해보자
그전에, 이 프로젝트는 맥 OS 위주로 진행한 것이기 때문에 윈도우 버전은 추후에 추가로 붙일 예정이다.
처음엔 프로젝트 환경을 구성한다.
$ mkdir good-nakssi-front
$ cd good-nakssi-front
$ yarn init터미널에 해당 명령어를 입력해 프로젝트 기본 환경 구성을 한다.
기본 구성으로는
package.json
이 끝일 것이다.
이 파일은 프로젝트의 구성도를 json파일로 나타낸 것이다.
앞으로의 프로젝트 구성은 모두 이 파일에 함축되고 구성되어 프로젝트를 하는 데 있어 없어서는 안 될 파일이므로,
나중에 아주 자세하게 얘기할 예정이다.
아니면 그냥 Git 카테고리에도 포스팅할 생각이니 거기를 봐도 무방하다.
다음은 node_modules를 세팅한다. 그냥
$ yarn install입력하면 된다. 그럼 알아서 node_modules라는 디렉토리가 최상단 디렉토리에 생성된다.
다음으로, Next.js로 진행할 것이기에 아래 커맨드를 입력한다.
$ yarn add next react react-dom이후엔 기본적인 create-next-app으로 세팅하는 것과 같다.
$ mkdir pages
$ mkdir components
$ mkdir assets
$ mkdir public흔히들 여기서 보통 yarn global add create-next-app을 설치하여 CLI로 Next를 Generate 하지만,
나는 처음부터 끝까지 개발환경을 커스텀할 예정이기에, 손수 직접 세팅해준다.
따라서, '어? 나는 create-next-app으로 하고 싶은데..'는 조용히 뒤로 가기
하지 마시고 이제부터 봐주시면 됩니답.
그러면 디렉토리 세팅은 이런 식으로 될 것이다.
뭐 많은데, 일단 각각의 디렉토리를 설명하자면,
CSR의 React의 라우팅 방식은 react-route-dom이라는 라이브러리로 pages라는 폴더를 따로 생성하여 라우팅 시켜주었다.
하지만 Next.js는 그럴 필요가 없다.
폴더 하나하나의 의미가 담겨있고, 각각의 디렉토리이름 자체가 그 역할들을 한다.
pages
라우팅을 담당한다. 기본적으로 index라는 이름의 jsx확장자 파일은 메인 페이지를 뜻한다.
pages에 들어가는 파일 또는 디렉토리는 각각의 라우팅을 담당한다.
예를 들어, user/login/index.jsx라면 페이지 URL은 http://localhost:3000/user/login이 되는 것이다.
중첩 라우팅도 있지만 후에 parameter에 대해서 같이 얘기를 할 것이다.
public
정적 파일을 관리한다. 이미지들을 여기에 넣으면 된다.
Next는 image도 따로 최적화하여 렌더링 해주는데, 이 부분은 프로젝트를 진행하면서 얘기하도록 하겠다.
components
이 디렉토리는 리액트의 컴포넌트 폴더와 같다.
내부에서 재사용할 수 있는 컴포넌트들을 만들고, pages내에 붙일 예정이다.
리액트 디자인 패턴과도 연계하여 아주 딥하게 쓸 예정이니 이 부분도 후에 얘기할 예정이다.
assets
assets은 위에서 설명한 것들을 제외한, javascript 기능 및 stylesheets를 포함한다.
위의 디렉토리 구성 이미지를 보면 되게 파일과 폴더가 설명한 폴더 외에도 많은데, 이건 다음에 설명하도록 하겠다.
일단 pages에 index.js를 생성한다.
touch pages/index.jsx하면 생긴다.
내부 코드는 이렇게 작성해준다.
import React from 'react';
const Index = () => (
<div>Hello Next.js</div>
);
export default Index;리액트와 유사하다! 그렇다.
리액트 기반인 SSR이기 때문이다.
터미널에서 명령어를 실행하여 확인해본다.
$ yarn next이렇게 실행하면 터미널엔
대충 이렇게 디버깅 될 것이다.
1 ~ 3 번째 라인은 next를 실행하고 실행되는 로컬 주소를 보여준다.
4 ~ 6번째는 어떤 내장 모듈을 지원하고 있는지를 확인하는 것이다. 이 것은 어느 정도 진행 중인 프로젝트이기 때문에,
이 부분은 나중에 따로 얘기할 것이다.
3번째 라인을 보면 url: http://localhost:3000이라고 되어있는데,
이 주소를 브라우저 주소창이 입력하면 나타난다.
자, 아주아주아~주 기본적인 환경 세팅이 끝이 났다.
다음 장에서는 좀 더 자세히 개발환경 세팅을 해볼 예정이다.