2020.11.29(일) 개발 일지

09:00 ~ 12:30

1.   노마드코더 코코아톡 클론코딩 수강 & 깃허브 업로드

1.1. 어제까지 클론 코딩의 HTML, CSS파트 이론부분을 완강했고 이제부터 진짜 클론코딩 파트다.

배운 걸 적용해보며 왜 써야 하는지 알 수 있어서 재밌다.

의도한 대로 CSS가 적용되다니.. 신기하다.. 혼자 할 땐 이런 적 없어서 Bootstrap만 긁어 썼었는데..

이제는 padding, margin이라던가 display: flex라던가 조금은 능숙하게 다룰 수 있을 거 같은 자신감이 생겼다.

 

11월 29일 일요일 오전 진행 현황

왼쪽이 클론 대상, 오른쪽이 프로그래밍 결과 화면

 

2.   Iterm2설치 및 VS terminal과도 연동

 

visual studio terminal에 적용된 iTerm2 인터페이스

 

2.1. 개발 툴에 대해 요즘 계속 관심이 생겨서 클론 코딩 강의를 듣다가 iTerm2를 설치해서 적용해보았다. 인터페이스가 내장 terminal보다 마음에 든다. 특히 iterm2는 기본적으로 tab을 통해 키워드 자동완성을 제공해준다.

 

3.   Git commit convention을 위한 vscode 설정

3.1. git commit을 할 때마다 제목 50자 맞추려고 일일이 글자 수 세는 게 너무 힘들었다. 방법을 찾아보니 아래 그림 같이 50자 입력하는 위치에 실선을 그어주는 설정이 있었다. 아래는 순서대로 적용 후의 빈칸일 경우, 50자 딱 맞을 경우, 50자 넘어갈 경우의 사진들이다.

 

commit message 빈칸

commit message 딱 50자인 경우

commit message 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 부분을 제작하였다.

 

왼쪽은 클론 대상(png), 오른쪽은 크롬 브라우저로 클론한 모습 - navigation의 html, css를 제작

왼쪽은 클론 대상(png), 오른쪽은 크롬 브라우저로 클론한 모습 - screen-header의 html, css를 제작

 

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에 해당되니까 순서를 고려해야한다.) 문법을 제대로 알지 못하고 사용하다가 이제야 알았다.. 삽질을 통해 알게된 사실이니 까먹진 않겠지?)

 

more-screen class 내에서 두 번째 icon-row를 지정하는 방법으로 아래 사진을 사용했다 

요렇게 말이다. 얘가 position:relative 되어야 얘의 아래에 있는 position:absolute 된 애(badge badge --sm)가 얘를 기준 값으로 잡을 수 있다.

 

 

 

파란 부분을 보듯이 작은 빨간 점이 이상한 곳으로 가있다. 저 부분도 position:relative인데 내가 selector를 이상하게 지정해서 relative가 적용되지 않았고 제일 가까운 relative인 저기로 가버린 것이다.

 

 

 

이번엔 nth-child의 사용법을 제대로 깨닫고 다시 입력했다.

그랬더니 이번엔 의도한대로 작은 빨간 점이 이동했다. ㅠㅠㅜㅠ 휴

 

 

1.2. 오늘 안에 끝내려고 몰아들었는데 이해하는 시간도 있다보니 진척이 없었다. ㅠㅜ 졸리고 집중 안되는 상태로 수업 더 들어봤자 수업이 아까워서 그냥 오늘은 여기까지 하기로 했다. 아래는 내가 오늘 만든 결과물들 ^^

 

 

내일은 꼭 100% 채우리...

 

 

 

친구목록 페이지

대화창 페이지

검색 페이지

더보기 페이지

설정 페이지

 

29일 코딩시간

30일 코딩시간

 

참고 사이트: 

https://medium.com/harrythegreat/oh-my-zsh-iterm2로-터미널을-더-강력하게-a105f2c01bec

https://ifuwanna.tistory.com/267

[MacOS] 터미널(iTerm2) 한글 깨짐 해결 방법

https://b1tk3y.tistory.com/14

Visual Studio Code 터미널 폰트 설정

https://giantdwarf.tistory.com/3

VS Code 에서 터미널을 zsh로 변경하기

https://velog.io/@haejung/Git-커밋-메시지를-위한-Editor-설정-5072

Git 커밋 메시지를 위한 Editor 설정 (50/72)

https://junwoo45.github.io/2020-02-06-commit_template/

좋은 커밋 메시지를 작성하기 위한 커밋 템플릿 만들어보기