노마드 코더 코코아톡 클론코딩 5일차
노마드 코더 코코아톡 클론코딩 5일차
잡담
귀차니즘으로 인해 이론 정리만 끝내 놓고 어영부영하다가 챌린지 시작일이 되어버렸다. 아직 챌린지는 이론 파트 중이니까 챌린지 과제와 클론코딩 파트를 동시에 진행할 예정이다. 클론코딩 파트는 단순 내용 정리가 아니라 코딩 중 궁금한 점, 막혔던 점 위주로 어떻게 해서 문제를 해결해나가게 되었는지를 기록할 예정이다. 고민 중인 것은 처음부터 일단 스스로의 힘으로 코드를 짜볼지, 아니면 강의를 들으면서 이해가 안되는 코드를 하나 하나 따져볼 지다. 일단 전자의 방식으로 해보도록 할까.
정리
클론 코딩
- DS_Store은 맥이나 윈도우에서 만든 보이지 않는 임시파일이다. .gitignore 파일에는 무시하고 싶은 파일 이름을 기록한다.
- Sign up screen(02.png) a. 대부분의 웹 서버는 디폴트로 index.html을 찾아본다.
- Font a. heroicons, FontAwesome 사이트에서 무료로 아이콘을 받을 수 있다.
b. !만 쳐도 기본 필수 코드 입력 가능하다.
c. BEM: 많은 사람들이 사용하는 CSS 작성 규칙(좀 더 쉽게 읽히도록)
ex).btn {} : 클래스 이름이 btn
.btn__price{} btn안에 price가 있음
.btn--orange {} : btn을 orange로 변경(속성 수정)
d.BEM에서는 모든 걸 class로 표현함. id 사용하지 않음.
e.앞으로 작성할 코드들의 id, class의 이름이 겹치지 않도록 이름을 지어야 한다.
f.
b. svg: 수학으로만 구성된 픽셀이 없는 이미지 파일 형식
c. font awesome 사이트에서 무료로 제공하는 키트 스크립트를 적으면 여러 아이콘을 사용할 수 있다. 모든 아이콘에는 스크립트가 지정한 이름이 있다.
d. font-famaily로 다양한 폰트 지정가능, google fonts 에서도 다운 가능
일단 코드를 보지 않고 여기까지 만들었다.
코드를 짜면서 막혔던 부분은
- 이메일과 비밀번호의 input 박스에 밑줄만 넣고 싶은데 아예 없애는 거 말고는 밑줄을 넣을 수가 없었다.
- 글씨 폰트가 묘하게 다르다.
- 가운데 정렬을 flex 를 사용하고 싶었는데, center 태그를 사용했다.
- index 버튼을 만들었는데 클릭이 안 된다.
- 맨 위 상태창 만들 때 span은 inline 이니까 옆에 다른 게 올 수 있다는 점을 이용하고 싶었는 데 정렬이 잘 되지 않았다.
강의에 따라 만든 웹페이지다. 아직 자세한 내용은 건들지 않고, 맨 위 상태 창만 작업을 했다.
강의 코드와 나의 코드가 달랐던 점은
- input 태그를 div로 묶지 않고 form 태그로 묶었다.
- input 태그의 type을 button이 아닌 submit으로 했다. 이 경우, 클릭할 때 반응이 있었다.
- 상태 창에서 텍스트를 span으로 묶고, span을 div로 묶었다. 그 다음 display:flex를 사용하고 justify:content로 가운데 정렬을 했다.
- justify:content로 컨트롤을 할 때 class의 이름으로 컨트롤을 했다.
1 번의 경우, div 태그는 아무런 의미가 없기 때문에 코드 가독성이 떨어지는 것 같다. form 태그로 묶으면 다양한 속성을 활용할 수도 있고, 코드를 봤을 때 이해하기가 훨씬 편하다.
3 번의 경우 굳이 태그를 묶는 태그를 만드는 이유는 태그에 id나 class를 부여해 각각을 관리하기 편하게 하기 위해서 인 것으로 보인다. 또한 가독성을 좋게 하기 위함이지 않을까. 코딩은 가독성을 특히 중요하게 보는 것 같다. 한눈에 봤을 때 딱딱 구분되어서 읽을 수 있는 코드가 좋은 코드로 보는 느낌. 그러므로 코드를 작성하기 전에 먼저 큰 틀을 잡고 가는 게 중요할 것 같다.
만약 span에 바로 id를 적었다면, span 뒤에 나오는 아이콘을 컨트롤하려면 또 아이콘에 id를 부여해서 컨트롤을 해야 했을 것이다. 그러나 둘을 묶는 하나의 태그를 만듦으로써 한 번에 2개의 태그를 컨트롤 할 수 있었다.
상태 창 정렬을 하는 추가적인 방법은 아직 잘 이해가 안 가서 다음에 재 정리를 해봐야 할 것 같다.