코드스테이츠/코드스테이츠 @ 개발 복습

[코드 스테이츠] 13일차, "2주차 복습 (1)"

Je-chan 2021. 7. 31. 23:19


[ 오늘의 TODO ]

  1. 코드 스테이츠) 월~수 내용 복습
    // 계산기 Refactorying  
    // CLI, Node.js 기본 명령어
  2. 패스트 캠퍼스) 인강 3개 이상 듣기 // optional
  3. 생활) 물 1L 이상 마시기
    // 물 마시는 거 신경 안 쓰니까 500ml 도 안 마시더라
  4. 생활) 수-토-일 운동 
    // 오늘은 운동 말고 JeFresh 했다

[ 오늘의 복습 ]

 

1.  Calculator Sprint Refactorying

  복습 시작은 계산기 Sprint 과제를 리팩토링하는 것에서 시작했다. Calculator Sprint는 총 세 단계로 돼있다. Bare => Advanced => Nightmare 이며 페어분과 함께 3단계까지 모두 코딩을 작성했다. 각 단계는 기능을 몇 개씩 추가하는 방식이라 단계가 진행되면서 서로에게 영향을 주지 않는 나열적인 코딩 작성이 아닌 이전 단계의 코드들을 변형하는 방식으로 코딩해야 한다. 이번 리팩토링은 다음과 같은 방법으로 진행했다.

 

1. 크루님께서 올려주신 Refrence Code를 참조해 Advanced 단계까지만 리팩토링한다. (Nightmare 구현됐던 것은 모두 주석처리)
2. 그 Advnaced 코드를 가지고 Nightmare를 새롭게 작성, 리팩토링한다.

 

  1. 은 약 30분 정도의 시간이 걸렸으며 2.는 약 1시간 30분 정도의 시간이 걸렸다. 

 

2. CLI 기본 용어 및 명령어

  빨간색으로 친 것들은 매우 주의하며 사용할 것

  내용 옵션
프롬포트 키보드의 입력을 확인하고 편집할 수 있는 공간  
pwd 현재 위치 확인  
mkdir Make Directory, 새 폴더를 생성  
touch 새 파일을 생성  
ls List, 특정 폴더에 포함된 파일-폴더 확인 -l : 폴더나 파일 표현
-a : 숨어있는 것까지 표현
-al, -la 로 중복 표현 가능
ll  list들이 수직 정렬돼서 나옴
각 파일 별 상세 정보도 함께 나옴
 
. 터미널이 가리키는 현재 폴더 위치. 상대경로  
.. 현재 폴더의 이전 부모 폴더. 상대경로  
open . Mac에서 현재 위치 GUI로 실행함  
code . Mac에서 현재 위치 VSC로 실행함 안 될 경우 VSC 설정 확인
cd Change Directory, 폴더에 진입  
cat 파일의 내용을 터미널에 출력  
nano 터미널의 기본 에디터로 파일을 엶  
rm Remove, 폴더나 파일 삭제
휴지통에 가지 않고 완전 삭제
윈도우 GUI의 shift + del 과 유사함
-r: 폴더를 지우게 해줌
-f: 질문 받지 않고 지움
-rf 로 보통 사용함
mv Move, 폴더나 파일 이름 혹은 위치 변경  
cp copy, 복사 -rf로 폴더를 복사
/
(루트 디렉토리)
폴더 위치의 기준점. 절대 경로
./ : 현재 파일의 위치
 
~
(홈 디렉토리)
Mac에서   Users/[사용자] 까지의 경로 
~/ : Users/[사용자]/
 
sudo 관리자 권한을 가져옴
명령어 앞에 사용
이거 잘못 쓰면 컴퓨터가 깡통이 될 수 있음 
 
tab
검색어 자동 완성 기능  
clear
현재의 프롬포트를 터미널의 최상단으로 갖고 옴  
history
지금까지 친 명령어 목록 |grap 명령어
: 명령어 포함된 목록 출력 
화살표 위 이전에 쓴 명령어로 올라가기  

 

3. Node.js 기본 개념

  1) npm

  남들이 만들어 놓은 모듈.'

  npm install을 하면 package.json이 필요하다 생각하는 모듈(dependencies)을 다운 받음

  

  2) package.json

  기본적인 정보들을 다 담아둔 곳

  프로그램 실행 방법, 테스트 방법, 필요한 모듈이 무엇인지 등이 적혀 있음

 

  3) package.json > devDependencies

  개발 환경에 필요한 옵션적인 모듈 목록

 

  4) package.json > dependencies

  반드시 있어야 하는 가장 필수적인 모듈 목록

 

  5) scripts

  CLI 에서 사용 가능한 명령을 기술

  객체의 형태로 존재

  npm run <스크립트 key> 로 value 실행

  

  가장 기본적인 명령으로

  npm run start : node.js 앱을 실행

  npm run test : 테스트 실행

  npm run lint : 코드 검사


[ 오늘의 교훈 ]

1.  처음 작성하는 코드는 기둥이다. 

  리팩토링 하는 과정에서 매우 크게 느낀 바다. 처음 코드를 작성한 날 TIL 때도 얘기했지만 코드가 많이 더러웠다. 난잡하고 보기가 어려웠다. 그와 반면, 크루님께서 레퍼런스로 제공해주신 코드는 진짜 간결하고 깔끔했다. 왜 그렇게 작성했는지를 익혀서 아이디어를 얻고 내가 작성한 코드에서 어떻게 하면 더 간결하게 할 수 있을지를 생각해본 후 리팩토링을 했다. 덕분에 처음 Advanced 단계의 코드가 굉장히 간결해지고 가독성이 좋고 유지보수하기 좋은 형태를 띄었다.

 

  그 다음에 Nightmare를 작성하니 이전과 다르게 매우 간단해졌다. 이전의 코드는 주석 처리를 하고 리팩토링한 코드와 비교를 해봤는데 진짜 엄청 보기 편해졌다. 그렇게 하고 나서 내가 내린 결론이 "처음 작성하는 코드가 기둥이다." 라는 것이다. 처음에 잘 작성하지 않고 이상하게 작성하면 어디에선가 계속 에러가 나면서 덕지덕지 붙어 결국 아래의 그림과 같은 상황이 만들어진다. 

 

 

처음 코드를 어수선하게 짠다면 이후에도 코드가 덕지덕지 붙으며 누더기 집을 짓는다.

반면 처음 코드를 단단하게 잘 짠다면 깔끔하고 아름다운 궁전을 짓는다.

 

 

  나는 궁전을 짓는 개발자가 되고 싶다. 앞으로 코드 스테이츠에서 무슨 프로젝트를 진행하면 리팩토링을 스스로 하는 시간을 가져서 더 기둥을 단단하고 견고하게 짓는 방법을 익힐 것이다.