2020.11.29(일) 개발 일지
09:00 ~ 12:30
1. 노마드코더 코코아톡 클론코딩 수강 & 깃허브 업로드
1.1. 어제까지 클론 코딩의 HTML, CSS파트 이론부분을 완강했고 이제부터 진짜 클론코딩 파트다.
배운 걸 적용해보며 왜 써야 하는지 알 수 있어서 재밌다.
의도한 대로 CSS가 적용되다니.. 신기하다.. 혼자 할 땐 이런 적 없어서 Bootstrap만 긁어 썼었는데..
이제는 padding, margin이라던가 display: flex라던가 조금은 능숙하게 다룰 수 있을 거 같은 자신감이 생겼다.
2. Iterm2설치 및 VS terminal과도 연동
2.1. 개발 툴에 대해 요즘 계속 관심이 생겨서 클론 코딩 강의를 듣다가 iTerm2를 설치해서 적용해보았다. 인터페이스가 내장 terminal보다 마음에 든다. 특히 iterm2는 기본적으로 tab을 통해 키워드 자동완성을 제공해준다.
3. Git commit convention을 위한 vscode 설정
3.1. git commit을 할 때마다 제목 50자 맞추려고 일일이 글자 수 세는 게 너무 힘들었다. 방법을 찾아보니 아래 그림 같이 50자 입력하는 위치에 실선을 그어주는 설정이 있었다. 아래는 순서대로 적용 후의 빈칸일 경우, 50자 딱 맞을 경우, 50자 넘어갈 경우의 사진들이다.
4. Pixel 가늠법
4.1. Png파일을 Chrome으로 연다. Chrome의 page ruler redux를 이용해 드래그를 하면 점선으로 박스가 생기는데 이때 pixel width, height가 렌더링된다. 이걸 활용하면 pixel을 가늠하기 좋을거 같다.
13:20~ 16:00
1. 노마드코더 코코아톡 클론코딩 수강 & 깃허브 업로드
1.1. nav>ul>li*4>a 엄청나게 편리하게 html tag를 생성한다.
1.2. Tab을 활용하면 적절히 입력이 필요한 tag공간으로 이동해준다. 생산성을 높이는 것에는 tool의 적절한 사용도 있는것 같다.
1.3. Width 200px box를 만들고 거기에 PADDING 50PX을 추가하면 브라우저는 box의 width가 50px 줄어들었다고 판단하고 처음 유저가 요청한 200px를 유지하기 위해 50px를 늘린다. Box-sizing: border-box;는 브라우저에게 50px를 늘리지 않아도 된다고 말해주는 속성이다.
1.4. 전체적으로 쓰일 component인 screen-header와 navigation 부분을 제작하였다.
19:30 ~ 02:30
1.노마드코더 코코아톡 클론코딩
1.1. display flex, flex-direction: column, position relative, absolute combo, margin, padding, justify-content: space-between, align-items: center을 클론코딩 할 때 사용해보니 점점 더 레이아웃 짜는 것에 자신감에 생긴거 같다. 근데 pseudo selector인 nth-child()의 법칙은 다시 공부해야겠다. 제대로 적용이 안된다..
(+0317: nth-child()의 비밀을 풀었다.. 예를들면 div:nth-child(3)는 div'만' 따졌을 때 3번째 div를 말하는게 아니다. 그냥 위치한 태그들 중 3번째인 것이다.(그게 a든, span이든 nth-child에 해당되니까 순서를 고려해야한다.) 문법을 제대로 알지 못하고 사용하다가 이제야 알았다.. 삽질을 통해 알게된 사실이니 까먹진 않겠지?)
1.2. 오늘 안에 끝내려고 몰아들었는데 이해하는 시간도 있다보니 진척이 없었다. ㅠㅜ 졸리고 집중 안되는 상태로 수업 더 들어봤자 수업이 아까워서 그냥 오늘은 여기까지 하기로 했다. 아래는 내가 오늘 만든 결과물들 ^^
참고 사이트:
https://medium.com/harrythegreat/oh-my-zsh-iterm2로-터미널을-더-강력하게-a105f2c01bec
https://ifuwanna.tistory.com/267
[MacOS] 터미널(iTerm2) 한글 깨짐 해결 방법
맥북이나 아이맥같은 Mac OS 환경에서 개발하시는 분들은 터미널 많이들 사용하실 텐데요. Windows와 다르게 맥에서는 기본 터미널도 훌륭하지만 더 많은 기능을 제공하는 iTerm2에 zsh로 변경하여 사
ifuwanna.tistory.com
Visual Studio Code 터미널 폰트 설정
내 맥에는 iTerm+zsh+Oh My Zsh(https://github.com/ohmyzsh/ohmyzsh)에 agnoster테마를 사용한다. Visual Studio Code에서 터미널을 열었을 때 이 터미널 환경을 사용하고 싶다. 1. Settings를 열고 terminal을..
b1tk3y.tistory.com
https://giantdwarf.tistory.com/3
VS Code 에서 터미널을 zsh로 변경하기
기본적으로 Mac에서는 bash가 기본 쉘이어서 VS Code에서도 bash를 기본 터미널을 사용합니다. 하지만 많은 분들이 oh-my-zsh을 설치하여 본인만의 터미널을 사용하는데 VS Code에서는 쉽게 변경할 수 있
giantdwarf.tistory.com
https://velog.io/@haejung/Git-커밋-메시지를-위한-Editor-설정-5072
Git 커밋 메시지를 위한 Editor 설정 (50/72)
앞서 소개했던 50/72 규칙에 맞는 커밋 메시지 작성을 조금더 수월하게 하기 위한 Editor 설정을 소개합니다. 아래 다른 블로그의 내용을 참조했습니다.Mac OSGitVSCode (커밋 메시지 Editor)D2Coding 글꼴커
velog.io
https://junwoo45.github.io/2020-02-06-commit_template/
좋은 커밋 메시지를 작성하기 위한 커밋 템플릿 만들어보기
저는 다른 개발자분들이 작성한 코드를 읽을 때, 커밋 메시지의 도움을 많이 받고있습니다. 코드만 볼 땐 이해를 못했는데, 커밋 메세지를 확인하면 바로 이해가 갈 때가 많았거든요. GitLens 찬양
junwoo45.github.io