[TIL] 220111

2022-01-11 화요일

1. 오늘의 도전과 배움
   아침 하드 트레이닝 시간에는 인증(Authentication)과 인가(Authorization)에 대해서 배웠는데 세션, JWT, AOuth 등을 더 자세히 알게 되었고, TDD 강의에서 JEST Framwork 사용법을 배웠다. 그리고 원티드 과제를 만들려고 했는데 나는 귀찮아서 cra로 했는데 다른 분들이 다 개발환경을 직접 구축해서 하셨길래 나도 복습할 겸 처음부터 다시 만들었다! 그리고 낮에 구매한 클린코드 찍먹하고 TDD 강의 정리하고 팀프로젝트

2. 학습하면서 궁금하거나 어려웠던 점

3. 내일 해보고 싶은 것들
   즉흥적으로....?! 하드 트레이닝 next.js 기대된다

---

팀프로젝트

git checkout & commit message..

저번주에 checkout 명령어로 돌아가고 싶은 commit hashcode를 입력해서 코드를 수정하고 add, commit, push를 하려고 했는데 checkout 기능을 몰라서 버벅이다가 어차피 수정해야할 부분이 많아서 새로 또 폴더를 생성해서 만들고 있었는데..
오늘 다시 checkout을 다시 최신 commit? 마지막으로 저장된 상태로 되돌리려고 이것저것 찾아서 해봤지만 head가 자꾸 이렇게 뜨네..!!

https://mintaku.tistory.com/12
그러다 발견한 블로그 글..! 이 방법이 정확한지는 모르겠는데 git checkout master 하니까 아마도 내가 원하는 대로 돌아간 것 같다

git checkout - 수정사항 되돌리기?

지금까지 오늘 끝낸 분량은 무조건 git add . & git commit -m "아무거나.." & git push 이렇게 습관적으로 깃허브 저장소에 올렸는데 이제는 commit이나 push를 의미 있게? 사용해야겠다. 영어든 한글이든 커밋 메세지 잘 작성하기!

jsx

그리고 모든 파일의 확장자를 .js -> .jsx로 변경함!
강의에서는 js 파일로 작성해서 계속 그렇게 작성했고 .js로 해도 잘 작동해서 신경 안 썼는데 리액트는 jsx의 문법을 쓰고 조금 찾아보니 .jsx로 해야 html 문법이 자동완성이 된다고 한다!
https://codingmania.tistory.com/269

---

TDD 강의

예전에는 Test Runner, Assertion 라이브러리가 따로 있어서 조합해서 사용함. 요즘엔 별도로 구분하지 않아도 Jest란 라이브러리를 사용해 간단하게 테스트를 할 수 있음!

3.3 Jest 알아보기

공식문서! https://jestjs.io/
자바스크립트 환경에서 테스트할 수 있는 프레임워크로 간편하고 심플함.
별도로 복잡한 설정을 하지 않아도 되고, 단위 테스트와 별개로 ui 등의 테스트를 지원하며 고립된 특징을 가지고.. 문서만 보면 굉장히 좋은 테스트 라이브러리인 것 같음

3.4 환경 설정

// npm으로 우리의 프로젝트를 관리
npm init -y
// 설치. 개발 의존성 리스트에 추가
npm i --save-dev jest
// 이 프로젝트에서 jest를 사용할 준비!
jest --init

jest.config.js 파일이 생성됨.

3.5 첫 번째 테스트 작성

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

src/test/sum.test.js

// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum; 

// sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

expect(sum(1, 2)) - sum(1, 2) 코드를 수행했을 때
toBe(3) - 그 결과값이 정확히 3이 되어야 한다!

yarn test or npm run test

테스트를 실행할 때마다 코드 커버리지를 확인하고 싶다면

// jest.config.js 
module.exports = {
  ...
  collectCovarage: true,
  ...
}

비동기 함수와 json은 어떻게 테스트 코드를 작성하는지 궁금하다!

---

Clean Code(클린 코드)

2장 의미 있는 이름

• 의도를 분명히 밝혀라. 함수가 무슨 일을 하는지 getThem -> getFlaggedCells
• 그릇된 정보를 피하라. 널리 쓰이는 의미의 단어 List -> Accounts
• 의미 있게 구분하라. 불용어..?
• 발음하기 쉬운 이름을 사용하라
• 검색하기 쉬운 이름을 사용하라
• 인코딩을 피하라?
• 클래스 이름과 객체 이름은 명사나 명사구가 적합함
• 메서드 이름은 동사나 동사구가 적합함
• 한 개념에 한 단어를 사용하라. 이클립스, 인텔리제이 등과 같은 최신 IDE는 문맥에 맞는 단서를 제공함.
• 의미 있는 맥락을 추가하라. firstNme -> addrFirstName
• 불필요한 맥락을 없애라. 일반적으로는 짧은 이름이 긴 이름보다 좋다. 단, 의미가 분명한 경우에 한해서다.
• 좋은 이름을 선택하려면 설명 능력이 뛰어나야 하고 문화적인 배경이 같아야 한다..

3장 함수

어떤 프로그램이든 가장 기본적인 단위가 함수다.

• 작게 만들어라!
  - 함수를 만드는 첫째 규칙은 '작게!'다. 둘째 규칙은 '더 작게!'다. 예시에서 14줄 짜리 함수 코드를 6줄로 줄여놨네...😱
• 한 가지만 해라! 함수는 한 가지를 해야 한다. 그 한 가지를 잘 해야 한다. 그 한 가지만을 해야 한다.

평소 변수나 함수 이름을 어떻게 지으면 좋을지와 리액트를 계속 배우다보니 리액트의 근간인 함수형 프로그래밍이 뭐고 함수를 어떻게 잘 짜야할지 등 이것저것 궁금한 게 많았는데 이 책이 워낙 유명해서 도움이 됐으면 좋겠어서 구매했다.. 근데 자바 언어가 예시고 처음 보는 용어들이 많아서 아직은 이해가 잘 안 되는 부분들이 많았다.

---

계획계획

• 운동

• 강의
  - TDD
  - Typescript

• 책
  - 리액트를 다루는 기술
  - 모던 자바스크립트 Deep Dive
  - 클린 코드
  - 우울할 땐 뇌 과학 워크북

• 생활습관