2주차 수업을 마치며

눈깜짝할 사이에 2주차 수업이 끝낫다. 첫 수업에서 했던 긴장들은 어느새 옛날 이야기가 되었다. 2주차 Reflection을 블로깅할 수 있을 자신은 없었는데 다행이도 아직까지는 수업의 난이도에 잘 맞추어 따라가고 있는 것으로 생각된다. 2주차에는 리눅스 기반의 언어인 CLI와 개발자들의 필수 커뮤니티인 git 사용법 그리고 과제 제출에 대해 알아보았으며, 1주차 수업에서 배운 html과 css에서 사용되는 추가적인 내용을 학습하였다. CLI의 경우는 처음 경험해본 부분으로 익숙치 않아 중간중간 시간을 많이 허비하였다.. 내 자신이 그동안 얼마나 GUI에 취해 있었는지 알 수 있었다. git의 경우는 부트캠프를 시작하기 전에 간간히 진행한 예제를 업로드하면서 익혀놓았던 덕분에 추가로 배운 명령어들과 명령어들이 가지는 각각의 의미(?)를 학습함으로써 보다 탄탄한 개념을 잡는데 도움이 되었다. 마지막으로 html,css에 대한 학습 그리고 DOM 사용에 대해서는 기존에 javacrtipt을 공부하면서 잡아놓은 개념이었기에 쉽게 받아들이고 과제를 제출함에 어렵지 않았다. 결과적으로 2주차 수업에서는 기존에 공부해 놓은 내용 덕분에 나름대로는 편안한 한 주가 되었던 것 같다.

CLI

우리가 일반적으로 마우스 커서를 이용하여 아이콘을 클릭하고 웹브라우저를 통해 다운로드한 클라이언트를 설치하는 작업들은 GUI를 이용하는 것이었고, 일반 사람들에게는 비교적 딱딱해 보일 수 있는 CLI는 많이들 알고있는 도스 화면에서 명령어를 통해 다운로드와, 설치 등의 다양한 작업을 진행하는 것이라고 이해할 수 있었다.

• node
  CLI에서 사용할 수 있는 텍스트 에디터로 현재는 visual studio code를 사용하지만, CLI에서도 텍스트 에디터가 존재한다는 것과 분명한 것은 사용되어야하는 시점이 있다는 것이다.
• brew
  우리가 사용하는 앱스토어와 비슷한 일을 한다고 볼 수 있다. 앱스토에 존재하는 어플이 하나의 패키지 파일 즉, 압축파일로 정리되어있다고 할 때 우리는 앱스토어를 통해 해당 압축파일을 쉽게 찾고 나의 단말기에 설치할 수 있다. brew의 역할은 이와 비슷하다. CLI에서 필요로하는 다양한 패키지(어플)를 쉽게 나의 단말기에 설치 및 삭제 등을 도와주는 '패키지 매니저'라고 이해할 수 있었다.
• node.js
  이제까지 배운 javascript는 단순히 웹 브라우저를 런타임으로 사용하는 것들만을 보았다면 node.js는 javascript에 또다른 런타임의 탄생을 말해주었다고 한다. 기존에는 하나의 웹 서비스를 만들기위해서 프론트엔드/백엔드로 분업이 되었고 각자가 사용하는 언어는 확연하게 구분되어 있었다. 물론 javascript는 프론트엔드 측이었다. 그러나 node.js의 탄생으로 더이상 다른 언어로 프론트엔드와 백엔드를 구분지을 필요가 없어졌으며, javascript 하나만으로도 서버의 프로그램을 만들 수 있게되었다.
• nvm
  node.js의 version을 관리해주는 매니저라고 이해하였다. 말 그대로다. node.js도 다른 시스템과 마찬자기로 업데이트가 이루어지고 버전이 관리되어 진다. 때문에, 다양한 버전이 존재하고 이에 맞추어 우리는 내가 사용하고있는 pc에 최적화된 버전을 사용해야할 필요가 있다. 이때 도움을 줄 수 있는 것이 nvm이다. 보다 쉽게 버전을 설치 및 삭제를 진행할 수 있도록 해준다.
• npm
  CLI에서 앱스토어가 brew였다면, node.js에서는 남들이 만들어놓은 라이브러리를 모아놓은 앱스토어인 npm이 있다. 그리고 npm에 저장되어있는 하나하나의 라이브러리를 npm 모듈이라하며, 해당하는 npm모듈에 대한 정보를 모아놓은 파일은 package.json이라고 약속되어있다. 이해하기 쉽게 모듈의 정보를 담은 카탈로그라고 보면 된다.

git

개발자의 업무가 단순히 코드만 작성하는 것이 아니라고 생각한다. 간단한 시스템이야 혼자서 개발이 가능하겠지만 대부분은 방대한 양의 코드 작업을 필요로하는 시스템이며 혼자만의 지식으로 해결할 수 없는 부분이 존재한다. 때문에 협업이 매우 중요시 된다. 그리고 git은 협업에 있어서 개발자 개개인이 작성한 파일의 버전을 완벽하게 관리해줌으로써 개발자 간에 작성한 코드의 관리에 매우 용이하다.

• git 저장 구역 이해와 사용법
  git을 활용하기 위해 정리되는 저장소는 크게 remote영역과 local영역으로 구분할 수 있다. git의 버전 관리에 직접적으로 영향을 받기 시작하는 remote영역. 그리고 아직까지 나의 손에서 떠나지 않은 local 영역으로 나뉜다. 내가 참여한 협업 프로젝트에서 내가 맡은 구역을 작업하고자 할 때, 나는 팀프로젝트 remote 영역에서 fork를 진행하여 나의 git remote 영역으로 가져와야 한다. 다음은 'git clone 레포지토리 주소'를 프롬프트 입력창에 입력하여 나의 pc에 최신 버전의 파일을 가져올 수 있으며 지금부터는 나의 pc에서 텍스트 에디터로 수정이 가능하다. 그리고 해당 시점부터 최신 버전의 파일에 수정 전/후(unmodify/modified) 상태로 구분이 되어진다. 다음은 수정이 이루어졌을 때 어떤식으로 다시 팀 프로젝트의 remote 영역에 넣을 수 있는지 작성해야하는 명령어를 순서대로 기재하였다.
  git add <추가할 파일이름>
  git commit -m <추가할 메시지>
  git push <저장소 이름> <저장할 브랜치이름>
  여기까지 작성하면 나의 git remote 영역에 내가 수정한 파일이 업로드 되었다. 이후에는 pull request를 통하여 최종적으로 팀 프로젝트 영역에 파일을 업로드할 수 있다.

• 페어의 remote 주소 추가하는 명령어
  git remote add <저장소 이름> <페어의 저장소 주소>

• 현재 디렉토리에 추가 된 remote 영역을 볼 수 있는 명령어
  git remote -v

CSS flexbox 사용법

이제까지 개인적으로 css를 공부할때만 해도 box내부의 배치를 grid만을 이용하여 진행하였다. 그런데 이게 왠걸 이번 수업을 통해 알게된 flex를 이용하면 보다 쉽게 box내 가로/세로 배치를 할 수 있었다. 물론 grid와 flex 각자의 쓰임새가 어느정도 다르겠지만, 현재까지 내가 해온 수준의 css에서는 flex만으로도 충분히 쉽고 빠르게 배치를 일구어낼 수 있었던 부분이 놀라웠다.

• display : flex
  가로 or 세로 배치를 진행할 하위 box요소들을 모두 감싸고있는 box의 display 속성에 flex값을 넣어준다.
• flex-direction : 기본 값(row), 세로배치(column)
  display속성에 flex값을 넣게되면 기본적으로 하위 box요소들의 배치가 row, 즉 가로 형태로 구성된다. 이를 세로로 변경하기 위해선 flex-direction 속성에 column 값을 넣어야 한다.
• flex : grow shrink basis
  글로는 설명하기 어려운 부분이다... 일단 내가 이해한 것을 최대한 쉽게 풀어보자면 만약 하위 box요소가 총 3개(box1, box2, box3)가 있다고 할 때, 각각의 box에 css 속성 flex의 값으로 1 0 auto를 주었다고 하자. 그렇게되면 3개의 box는 모두 grow값으로 1이라는 크기를 갖게 되고 3개의 box가 모두 같은 1이라는 크기를 같기 때문에 지정된 가로 범위 내에서 각각 같은 크기의 범위를 가지게 된다. 만약 box3의 flex 속성에 값으로 2 0 auto를 주었다면 box1 box2는 각각 25% 가로 범위를 가지게 될 것이고, box3은 나머지 50%의 범위를 가져가게 된다. shrink는 grow와 반대로 설정한 비율만큼 작아지는 속성이다. 그렇기 때문에 grow속성과는 같이 쓰지 않는다. basis속성 값은 해당 box의 기본 크기를 지정해주는 것이다 만약 auto로 지정한다면 grow 또는, shrink속성 값에 맞는 크기를 가져갈 것이고 100px를 준다면 절대 크기 100px를 넘지 않을 것이다.
• justify-content : 콘텐츠 수평 정렬
• align-items : 콘텐츠 수직 정렬
  위 두개는 모두 부모 박스에 넣게될 속성이다. 해당 속성을 이용하여 부모 박스 내에 존재하는 하위 box요소들의 배치를 정렬할 수 있다.

DOM 이해와 사용법

수업이 3주차까지 이어져있으므로 생략함!