Immersive Prep - Linting & Testing

Code Quality에 대하여

 

- 우리가 작성 토대로 동작을 하는가?

- 우리가 작성한 코드에 결합이나 문제가 없는가?

- 우리가 작성한 코드는 일기 쉽고 유지보수가 용이한가?

 

이와같은 항목으로 코드퀄리티를 평가할 수 있다.

 

오늘 나는 유닛테스트를 실행하였다.

 

또한 아래에는 한것들에 대한것들을 옮겨놓은 것이며, 이 작업을 통해서 나는 Jest에서 test하는 관계와 함께

잘 안되었던 것들이 초반에 많았지만 그것들은 거의 다 설치에 관한 것들이여서 지웠다 다시 받았다 반복을 한것 같았다.

또한 cd . 에 대한것은 현재에 대한 것이며 ../math. 이런 표시는 전에 폴더로 가기위한 것으로 해석을 하면 된다.

 

npm install --save-dev 로 설치를 했지만 -d로도 된다는 것을 다른 블로그에서 찾아보다가 본것 같다.

현재 로컬에서 깔려있는지 확인 가능 한것은 npm ls로 확인가능하며, npm ls --depth=0 을 입력하면 현재 깔린것만 보여주는 역할을 해준다.

또한 전역영역인 global을 보려면 같은 방식으로 npm ls --depth=0 -g를 하면 보여주게 된다.

만약에 파일이 중복이나 여러개의 실수파일이 왔을시 rm -rf 파일명으로 지워주면 되며 eslint 잘못했을경우 우리가 아는 

npm uninstall -g eslint작업을 해주면된다. 이렇게 lint까지 다 되었으면 에러를 잡고나서 jest와 같이 사용하여 우리가 IM과정에 오기위한

HA때 풀었던 것을 다시 페어와 함께 풀면서 터미널에서 확인을 하면서 풀면서 고쳐나가는 작업을 하였다.

 

Getting Started with ESLint

Warning

네 그렇습니다. 영어예요. 여기서 지레짐작하고 포기하고 만일 한국어로 정리된 블로그를 찾는다면, 여러분은 영영 공식 문서를 읽는 연습을 할 수 없게 됩니다. 여러분이 설정을 어떻게든 할 수는 있을지도 몰라요. 하지만, 그 원리나 과정을 제대로 이해한다고 볼 수는 없을거예요. 반쪽짜리 공부를 하실건가요? 아니면, 습관부터 바꾸실건가요?

• Tip: CLI에서 뭔가 잘못되어가고 있다는 생각이 들면, Ctrl + C 를 눌러 과정을 중지할 수 있습니다.

• CLI 설치 과정 중 선택지에 대한 다음 안내를 참고하세요.

  질문다음을 선택하세요.

  How would you like to use ESLint?	To check syntax and find problems
  What type of modules does your project use?	CommonJS
  Which framework does your project use?	None of these
  Does your project use TypeScript?	No
  Where does your code run?	Node
  What format do you want your config file to be in?	무엇을 선택해도 상관없습니다.

• ESLint 설정 파일은, .eslintrc.js 또는 .eslintrc.json와 같은 이름으로 만들어집니다.

• ESLint 설정 파일을 열어, 추천 설정 eslint:recommended 이 적용되었는지 반드시 확인해봅니다.
• 다시 설정해보고 싶다면, ESLint 설정 파일을 지우고 다시 시도하면 됩니다.
• 설정을 이리저리 바꿔가면서 설정 파일의 결과가 어떻게 달라지는지도 확인해보세요.
  • 설정 파일에서 "rules"라고 쓰인 부분을 자세히 살펴보세요. 여기에 공식 문서에 담긴 다음 rule을 추가해보고 npm run lint의 결과가 어떻게 달라지는지 확인해보세요. 

    

• npm run lint를 실행한 결과에서, lint 에러를 잡아낼 수 있다면 성공적으로 설정한 것입니다.
  • 설정이 제대로 되지 않은 경우 

    

  • 설정이 제대로 된 경우 

    

3. npm run lint의 원리를 파악합니다.

• package.json 파일을 열어 ESLint를 어떻게 실행하고 있는지 파악합니다.

4. ESLint에서 지적하는 에러들을 잡아냅니다.

여러분이 ESLint에서 지적하는 에러를 찾아내는 것은 그리 어렵지 않을 거라 생각합니다. 하지만, 테스트도 잘 통과하지만 lint에서 지적하는 경우가 간혹 있습니다. (특히 transformAsHTML 문제에서 이런 일이 발생합니다)

우리는 node 환경에서 ESLint를 이용한 linting을 진행합니다. 이는 node 환경에서는 document 또는 window 객체와 같은 DOM을 사용할 수 없다는 것을 의미합니다. (다행히 jest는 해당 dom 테스트를 무리없이 실행할 수 있습니다)

ESLint는 현재 실행 환경이 node이므로, 우리가 코드를 작성할 때 document 또는 window와 같은 객체를 사용하면, 해당 객체가 정의되지 않았다고 판단합니다. ESLint 설정 중에는 다행히, 이를 회피할 수 있는 옵션을 제공합니다. 어떻게 적용하면 다음 문제를 해결할 수 있을까요?

Hint: 해결할 수 있는 방법은 다양합니다. 에러를 있는 그대로 검색하거나, no-undef 옵션을 찾아보거나, Specifying Globals, Specifying Environments 문서를 읽어보세요. 문제를 해결는 데 급급하지 말고 "내가 지금 무엇을 하고 있는지" 이해하세요.

 

 

참고한 사이트들

https://jestjs.io/docs/en/getting-started

Jest · 🃏 Delightful JavaScript Testing

https://github.com/facebook/jest#getting-started

facebook/jest