본문 바로가기

IT-백엔드

백엔드 개발 환경 설정하기(npm, 린터, 포매터)

개발 환경 설정을 위한 설치와 setup을 진행해보도록하겠습니다. 우선 개발 환경에 필요한 여러가지 패키지들이 있는데요. 이것들은 node의 패키지 매니저인 npm을 통해서 설치할 것입니다.

npm 외에도 여러가지 패키지 매니저들이 있는데요. Yarn 또는 Pnpm이 있긴합니다. 성능적인 문제로 다른 패키저 매니저들을 선택하실 수는 있으나 NPM만 사용하시더라도 아무 문제 없이 모든 문제에 대응하실 수 있습니다.

 

 

NPM 사용 방법:

우선 이 패키지가 즉 다시 말하자면 저희가 작업하고 있는 이 프로젝트가 NPM이 관리하고있는 패키지라는 것을 알려줘야하는데요. 그것을 알려주기 위해서는 package.json이라는 파일이 필요합니다. 그것을 만들려면

터미널에 npm init라고 입력을 해주시면 됩니다. 그런데 그렇게 쳤을 경우에 질문이 여러가지 나옵니다. 그거를 다 yes라고 응답을 하거나 enter 키를 다 누르면 생성이 되는데 그것을 자동적으로 yes로 처리해주려면 npm init -y 입력해주시면 됩니다.

 

그러면 위 사진처럼 정상적으로 생성이 된 것을 볼 수 있습니다.

그리고 package.json은 여러가지 필드가 있는데요. 각 필드가 어떤 뜻인지 알려드리겠습니다.

가장 중요한 필드는 name인데요. 사실 name 정보는 밖에서 쓸일은 거의 없습니다. 특히 패키지를 만들 때 아닌 이상은요. 먼저 말씀 드려야할 것은 package.json은 패키지에 메타 데이터를 포함하는 것입니다. 어떤 노드 패키지를 위한 거다라고 생각하시면 됩니다. 그래서 일단 name은 패키지 name이라고 생각하시면 됩니다.

 

 

npm run:

npm run은 package.json 안에 있는 script를 그대로 실행시켜주시는거라고 생각하시면 됩니다.

 

결과:

 

 

 

 

 

그런데 저희가 node 프로젝트를 진행하다보면, 여러가지 문제가 생기기 쉽습니다. 그 문제라하면 포매팅이 계속 잘못 될수가 있고요. 여러가지 작업을 하다보면 엉망인 포맷이 들어올 수가 있고 혹은 테스트가 잘 안된 코드가 들어올 수도 있죠. 이런 여러가지 문제들을 ide에서 제공하는 포맷팅과 린팅 기능들을 사용해서 어느정도는 해소할 수 있습니다. 그래서 ide가 node 런타임에게 우리 코드가 넘어가기전에 사용자들이 우리 서비스들을 사용하기전에 최대한 문제들을 잡아줄 수 있게 환경을 잡아주는게 중요하죠.

그래서 그것들을 해결하기위해 대표적으로 사용하는 것들이 Formatting과 Linting이라고 생각해주시면 됩니다. Formatting에는 Prettier라는 것이 있습니다.

Prettier는 어떻게 동작하기 설명하기전에 일단 preetier를 설치해주겠습니다.

 

 

 

 

설치를 해주면 node_modules라는 폴더가 새로 생긴 것을 볼 수 있는데요. 이 폴더에 대해서 설명을 하자면,

일단 node_modules 밑에 들어있는 디렉터리들은 저희 프로젝트가 의존하고있는 패키지들이라고 보시면 됩니다.

.bin 밑에 있는 파일들은 저희가 실행할 수 있는 binary 파일이라고 생각하시면 되고

위 사진을 보면 preetier라는 binary 파일이 생겼다는 것을 알 수 있죠.

 

 

이제 preetier를 사용하면서 어떻게 포맷팅을하는지 보여드리겠습니다.

이제 peetier를 사용하려면 preetier에게 필요한 설정 파일들을 몇개 만들어주셔야합니다.

 

.preetierrc를 사용하기 위해서 일단 아래꺼를 다운로드 받아주시면 됩니다.

 

 

그리고 preetierc라는 파일을 위 사진처럼 생성하시면 되는데요. 여기는 json과 똑같은 형태로 써주시면 됩니다.

 

semi는 세미콜론을 쓸 것이냐에 관한 것인데 저는 세미콜론을 안 쓸거여서 false로 해줬습니다. 그 다음으로 singleQuote는 문자열 리터럴을 표현할 때 쌍 따음표를 사용할 것인지 홑따옴표를 사용할 것인지에 관한 내용인데요. 홑따옴표를 사용하고 싶으신 사람은 true로 해주시면 됩니다.

마지막으로 해줄일은 vs code에게 이 preetier를 통해서 포맷팅을하라고 알려주는 일입니다. vs code의 세팅은 아래 사진처럼 해주시면 됩니다.

 

여기는 visual studio code가 보는 로컬 세팅을 해주는 것이라고 보시면 되는데요. 즉 이 프로젝트에만 적용되는 세팅들을 모아 놓는 것이라고 생각하시면 됩니다.