[MEMO APP] Back-end/환경설정 (1)

🔨 개발환경구축 

 

nodeJS라이브러리인 Koa.js를 이용해서 Back작업을 해줄겁니다.

 

일단 환경부터 구축하겠습니다.

 

🔨 폴더구성

 

본인의 컴퓨터의 적당한 장소에 Momo라는 폴더를만들어주세요. 

그리고 VSCODE에디터로 해당 폴더를 열어주세요.

 

그다음에  npx create-react-app front  라고 콘솔창에 쳐줍니다.

(이후에 있을 우리의 front-end 작업을 위한 폴더입니다.)

 

그리고 front 폴더와 같은경로에 back이라는 이름의 폴더도 만들어줍니다.

(앞으로 작업할 back-end 작업을 위한 폴더입니다.) 

 

위의 절차가 마치셨다면, VSCODE를 끈후에 방금생성한 back폴더경로로 VSCODE를 다시켜줍니다.

(당분간은 front작업보다는 back작업위주로 할터이니 이렇게 설정해줍니다.)

 

🔨 npm init

 

back폴더 안에는 우리의 API서버의 역할을해줄 몇가지 파일들을 만들어줄겁니다.

그전에 npm init 이라는 명령어를 통해 현재폴더에 package.json파일을 만들겠습니다.

(package.json은 프로젝트에관련 정보들이 적혀있는 파일입니다. 이파일이 있어야 추후에 버전관리나 다른 개발환경에서의 초기설정이 쉬워진답니다.)

 

추가로 package.json이 생성된 경로에 src 이름의 폴더를 만들고 그안에 index.js 파일을 생성해줍니다.

(앞으로의 back-end 관련 파일들은 src폴더안에서 다뤄지게 됩니다.)

 

🔨 eslint 설정

 

이번에는 eslint를 설정해줄꺼에요. eslint가 무엇이냐면, js언어는 다른 타개발언어에 비해 자유로운 문법의 이유로 개발사마다 코드 스타일이 재각기 다르게 나옵니다. 예를들자면 세미콜론같은거죠

(세미콜론이 없어도 자동으로 적용이 되어집니다. 즉 ;은 써도그만 안써도 그만) 

이런 코딩스타일을 제한하여 일관성있는 코딩스타일을 만들어 나 이외 타개발자가 보아도 이해되도록 돕습니다.

(사용하는 이유는 다양하니 검색해보시길 바랍니다.)

 

yarn을 사용하신다면 yarn add --global eslint, npm을 사용한다면 yarn add 대신에 npm install 혹은 npm i로 바꿔치시면 됩니다.

 

설치가 완료되면, 또다시 콘솔창에 eslint --init 이라는 명령어를 쳐줍니다. 그다음에 나오는 질문은 아래의 사진을 따라오시길 바랍니다.

 

 

여기까지 잘 따라오셨다면 환경설정의 대부분이 완료되었습니다. 

 

다음 포스팅에서는 실질적으로 웹서버의 역할을 수행해줄 index.js에대해 설정을 끝마쳐보도록 하겠습니다.