[코딩 부트캠프 6주차] 좌절이 찾아올 때
TIL
이 코스를 시작하기 전, 어떤 전공자 출신 수강생의 생생한 프리코스 후기가 담긴 블로그를 읽었던 적이 있다. 코스를 시작한 후 종종 그분이 언급했던 내용들을 떠올렸지만, 비전공자이거나 초보자인 수강생들은 HTML과 CSS, DOM 제어에 대해 배우기 시작하면 꽤 당황할 수 있겠다는 말이 이번 주 내게 [현타] 수준으로 다가왔다.
이제는 코스가 Level 3에 접어들면서 본격적인 프런트엔드 개발의 기초를 배우고 있다. 코스 시작 전 사전 학습 내용까지 해서 자바스크립트만 거의 2달을 뽀갠 내게 HTML, CSS, DOM은 또 다른 새로운 세계였고 좌절의 시작인 셈이었다.
HTML이라 하면 한참 다음 카페가 성황 하던 중학생 때 '반 카페지기'가 되어 대문을 꾸미면서 좀 사용했던 기억과 CSS는 회사 프로젝트하면서 디자이너, 개발자들에게 익히 들었던 웹스타일 관련된 언어라는 기억밖에 없었던 나였다. 그런데 HTML, CSS, DOM, JS를 죄다 이용해서 [트위틀러: 유사 트위터 만들기]가 과제로 주어졌다. 처음 Github에서 파일을 클론 받고 HTML을 열어보니 하얗다 못해 뽀얀 빈 화면이 나를 마주하고 있었다.
처음 열어 본 트위틀러 화면"와, 어떻게 갑자기 진도를 이렇게 나갈 수 있는 거지! 어디서부터 뭘 찾아봐야 하는 거야!!!"
학습 자료로 주어진 내용을 다 훑어보고도 머릿속 멍함이 떠나질 않으니 그동안 난 뭘 해왔던 건지 답답해 자신에게 화도 나고, 코스를 이렇게 짜둔 코드스테이츠에도 좀 짜증이 났다.
그러나 어찌하리. 개발자에게 너무 기본적인 항목이다 보니 이 또한 내 것으로 만들어야 하는 영역이었다. 빈 화면은 일단 닫아두고 다시 한번 학습 자료를 훑고, 생활 코딩 강좌를 찾아 정말 미친 듯이 들었다. 어떤 부분은 내용을 듣고 나니 개념적 이해가 가는 부분이 있었고, 손으로 쳐보지 않으면 진짜 하나도 모르는 내용도 있었다. 주중반이 지나니 계획했던 과제 진행이 턱없이 지연되었고, 심지어 옆팀 디자이너 직원들이 정기적으로 진행하는 html, css 교육에 들어갈 수 있을지 물어볼까 고민하기 시작했다.
이번 주 학습 계획과 결과, 끝내지 못한 것들이 점점 늘어간다.코스는 한 달 남았는데 여기서 이렇게 멘붕에 빠지다니. 한 달 뒤에 내가 도도 아니고 모도 아닌 상태가 될까 봐 한 주 내내 깊은 좌절에 빠져있었다. 다행히 토요일 오프 세션 동기들과 다 같이 어려움을 토해내는 상황이라 그나마 서로 위로해주며 한주를 보냈다.
학습 내용도 그랬지만 사실 호기롭게 시작한 개발 도전기에 이런저런 고민이 덕지덕지 붙기 시작해서 마음이 꽤 혼란스러웠다. 스펙 쌓듯이 개발 공부를 하고 싶었던 것이 아니고, 직접 손으로 다룰 수 있는 스킬을 얻기 원했던 나인데 이렇게 10주 달리고 나서 다시 회사 업무로 돌아오면 무슨 변화가 있을지 고민이 많았다.
코드스테이츠에 방문 상담 신청을 했다. 금요일 칼퇴 후 위워크에 방문해 고객 경험 매니저분을 만나 꽤 오래 대화를 나눴고, 왜 내가 개발하려고 했는지부터 그간 궁금했던 것들을 최대한 많이 묻고 들었다. 고객 서비스/경험 관련된 일을 너무 오래 해서 그런지 서비스 피드백 주기가 몸에 배어있는 나인지라 진상 고객처럼 보였을 수 있겠지만 담당 매니저분께도 도움이 되길 바라는 마음으로 지난 6주간 코드스테이츠의 고객으로서 느꼈던 교육 경험도 솔직히 표현했다.
상담을 마치고 나서 언제 퇴근하시냐 물었더니 이제부터 새 기수 오리엔테이션 준비를 하신다길래 미안한 마음과 함께 '아, 나 정말 타이밍 별로인 고객이구나' 싶었다. 그간 개발을 좀 아는 원래의 나(비영리 사내벤처 담당자)로 돌아갈 것인가, 새롭게 개발자로 커리어 전환을 도전할 것인가를 두고 많이 고민했었는데 어느 정도 답을 찾은 듯했다. 계속 고민해왔던 이머시브 코스 도전과 회사 생활 정리에 대한 생각들이 정리되기 시작했다.
6주차 TIL
HTML
Front-end 개발 과정
CSS & Selector
CSS Layout
코딩 팁
[HTML]
HTML : 브라우저의 웹페이지를 정의하는 요소들이 담긴 그릇, 틀을 만드는 언어
HTML 파일의 구성
1. <html>로 시작하고 </html>로 끝남
2. head tag 안에는 눈에 보이지 않는 영역/데이터를 넣음
3. body tag 안에는 눈에 보이는 것들을 넣음
html 파일의 구조: tree structure
- 트리 구조란 '줄기와 잎사귀가 있어서 부모와 자식이 있다'는 말
- html이라는 줄기 아래 head가 있고, 그 줄기 아래 title이 있는 구조로 구성
1. html
1-1. head
1-1-1. title: page title
1-2. body
1-2-1. h1: Hello world
1-2-2. div: Contents here
1-2-3. span: Here too!
self closing tag : 태그 내부에 내용이 없는 경우에는 태그 말미에 />로 스스로 닫음
html에서 자주 쓰이는 태그들
1. <div> : division 한 줄을 모두 차지(block)
2. <span> : span 콘텐츠 크기만큼 공간 차지, 한 줄을 모두 차지하지 않음(inline)
3. <img> : 이미지 삽입, 닫는 태그 없음
- src는 속성, 속성 값으로 이미지 주소를 첨부
4. <a> : 링크 삽입, anchor
- href 속성에 원하는 링크를 첨부
- target="_blank"를 추가하면 새 창으로 열림
- Q : 이미지를 클릭했을 때 링크로 연결하려면?
A : <a> 안에 img 태그를 넣고 </a> 처리하면 됨
5. <ul> & <li>
- 리스트를 나열, 중복이 가능(리스트 안에 리스트 배치 가능)
- ul/li : unordered list, 사용 시 기호가 있음
- ol : ordered list, 사용 시 번호가 있음
6. <input>
- type="text"로 두면 글 쓰는 창이 생김
- type="password"로 두면 입력하는 메시지가 보이지 않음
- placeholder ="메시지"로 두면 input 박스 안에 해당 메시지가 디폴트로 적혀있음
- type="checkbox"로 넣고 메시지를 적으면 체크박스 뒤에 메시지가 나옴
- type="radio"로 넣고 메시지를 적으면 라디오 버튼 뒤에 메시지가 나옴
- 체크박스 vs 라디오 버튼: 라디오 버튼은 a와 b 중에 하나만 선택할 수 있음. 체크박스는 중복 체크 가능.
- 라디오 버튼을 작성할 때도 각 각 <div></div>로 그룹핑을 해주는 것이 좋은 markup 방법!
- 라디오 박스에서 그룹핑을 하기 위해서는 name="그룹 이름"을 넣어주면 됨
- 라디오 박스에서 선택 값을 기준으로 자바스크립트로 접근하기 위해서는 value="응답한 값"을 지정해놓고 활용 가능
ex) <input type="radio" name="group1" value="answer1"> 메시지1
<input type="radio" name="group1" value="answer2"> 메시지2
이런 식으로 여러 개 생성
- Q: ID 박스와 PW 박스를 각각 줄 바꿈 처리해서 보여주고 싶으면?
<div>
<span> ID </span>
<input type="text" placeholder="아이디">
</div>
<div>
<span> Password </span>
<input type="password" placeholder="비밀번호">
</div>
7. <textarea> : <textarea></textarea>가 기본 형태
- input type="text"와 같은 입력창이지만 줄 바꿈이 가능한 텍스트 영역
8. <button>: <button> 로그인 </button> 하면 로그인이라고 적힌 버튼이 나옴
[Front-end 개발 과정]
1. 큰 틀에서 영역을 나눠야 함
1) 쓰기 영역
2) 읽기 영역
(1) 게시물 1
(2) 게시물 2 …
2. 각 영역을 태그로 표현하기
1) 쓰기 영역
- 큰 영역에서 <div> 필요
- 댓글이라는 text를 보여주기 위한 <div> 필요
- <input type = "text">로 필요
- 등록 버튼 필요
2) 읽기 영역
- 전체 게시물을 엮는 <ul> 필요
- 각 게시물을 묶는 <li> 필요
a. 아이디를 보여주는 위한 <div> 필요
b. 댓글을 보여주는 <div> 필요
c. 타임을 보여주는 <span> 필요
d. 좋아요 싫어요 버튼 필요
e. 버튼 안에 이미지 삽입 필요
3. 구조를 짜는 좋은 방법
1) 1.&2. 와 같이 각 구조를 짜서 먼저 그림을 그리기(mock-up)
2) 색이 다른 펜으로 영역 구별하기
3) 그런 다음 각 구조 당 해당하는 html 태그 넣기
JS를 HTML에서 사용하는 방법
1. HTML 내부에 작성: <script> 태그 이용
2. HTML 외부에 작성: <script> 태그의 src 속성 이용
Q: 왜 <b>, <font>, <center> 등의 태그를 권장하지 않는가?
A: HTML에서 디자인에 관련된 내용은 CSS에 넣고 구조에만 집중하기 위해서 지양하는 태그들이다.
버튼1 과 버튼2의 차이?
- input은 어떤 값을 넣는다는 의미로 속성 type의 종류가 다양, 그중 button이 존재
- button은 말 그대로 버튼 모양을 가리킴, 다양한 사용을 위해서는 <button type="submit">이나 <button type="button"> 등의 속성을 추가할 수 있음
- 대개는 submit event 실행을 위해서 <form>태그 안에 <input type="submit">을 사용할 때가 많음
[CSS & Selector]
CSS: Cascading Style Sheets의 약자, 웹 페이지 구성요소의 스타일을 정의하는 언어
HTML: 틀을 짜는 작업 vs CSS: 세부 사항을 디자인하는 작업
How To Use CSS - HTML에 적용하는 3가지 방법
1. Inline
- html 특정 태그에 직접 style을 적용
- ex) `<h1 style='color: red; font-style:italic'> 안녕 </h1>`
2. HTML 내부에 style sheet로 작성
- HTML에 <style> 태그 이용
- 보통은 <head> 태그 안에 삽입
- 태그를 선택하는 규칙(selector)에 따라 일괄 적용
3. HTML 외부에 style sheet로 작성
- HTML에 css 파일을 link
- `<link re = ‘stylesheet’ type = ‘text/css’ href = ‘이름. css/>`로 외부 css 파일과 연결
CSS Selector: CSS에서 요소(element: 여는 태그부터 닫는 태그까지 하나의 덩어리)를 선택하는 규칙
※태그라는 용어는 시작 및 종료 태그와 같이 마크업(MarkUp)을 의미하며, 요소(element)는 의미를 갖는 하나의 구조(여는 태그+ 내용 + 닫는 태그)를 의미함
1. 각각의 element에 고유한 id를 부여
- id 속성을 이용
- #identifier와 같이 #을 이용해서 고유한 id를 선택해옴
2. 종류(class)를 만들고 element에 class 부여
- 여러 태그에 class 부여 가능, 한 태그에 여러 class 적용도 가능
- .className처럼 .(dot)을 이용해서 class를 선택할 수 있음
3. ID와 Class의 다른 점?
- class는 동일한 값을 갖는 element가 많음, id는 문서 내에서 단 하나의 element만을 가짐(identifier, 고유한 id)
- class는 특정 분류(classification)를 지어주는 것에 사용, id는 특정 element를 이름 붙이는 데 사용
- id는 해당 태그의 이름이고 class는 해당 태그의 분류를 넣는 목적이 있음
[HTML에 CSS 적용해보기]
구조를 짤 때 selector를 사용해보자!
- id로는 고유한 영역을, class로는 유형별 분류를 해주는 방식
- html 태그가 라면 selector로는 div#head로 표시
padding과 margin
- padding: element 내부 여백
- margin: element 바깥 여백
- 상> 우>하> 좌(시계방향)로 여백 지정 가능
- ex) margin: 10px 20px 30px 40px;
list의 불린 없애기: list style: none;으로 지정
css에 클래스를 여러 개 언급하고 같이 적용할 수도 있음
- ex). thumb-up과. thumb-down {
width: 30px;
height: 30px;
}
특정 element의 자식 element(하위)를 언급하고 적용도 가능
- ex). thumb-up img {
width: 20%;
}
border 속성을 사용해서 영역 구분: border: 두께, 타입, 색상 순으로 1px solid #ccc;
[CSS Layout]
브라우저 상에서 사용하는 좌표계
- 위에서 아래로, 왼쪽에서 우측으로
- 좌표계를 바탕으로 절대적/상대적 위치에 적용 가능 ex) footer 화면 기준으로 항상 아래에 있도록
- 절대 좌표 만들기 - position : absolute 활용
- 우하단에 배치하기 - border: 1px; position: absolute; right:10px; bottom:10px
다양한 display 요소
- block: 한 줄을 다 차지하는 요소
- inline, inline-block: block과 달리 한 줄을 모두 차지하지 않는 요소들
- span은 inline element, 따라서 width나 height를 가질 수 없음
- 콘텐츠 공간만 차지하면서 width나 height를 가지고 싶을 때는 inline-block을 사용할 수 있음
- css에서 span 태그에 display:block; 을 적용하면 div처럼 block 영역 차지가 가능해짐
Box Model: 여백 관리(content box와 border box의 차이)
- box 크기에 관련한 몇 가지 속성이 있음
- margin: 바깥쪽 여백
- border: 내부 여백
- width와 height는 기본적으로 실제 콘텐츠 영역만 포함
- 실제 콘텐츠+padding+border+margin을 포함한 사이즈를 width와 height로 처리하려면, box-sizing: border-box; 로 처리해줄 수 있음
좌표계: position
- static: 기본값
- relative: 기본값- 상대적 위치
- fixed: 브라우저 화면 좌상단을 기준으로 절대적인 위치
- absolute: 부모 중 기준점이 있는 경우, 그 기준을 절대적인 위치 차지
- sticky: 기본적으로 relative처럼 작동하나, 스크롤 영역을 벗어나면 fixed처럼 작동(ex:스크롤하다 보면 어느 순간 헤더가 따라붙는 사이트)
[코딩 팁]
mutable과 immutable의 특징을 기억하면서 코드 짜기
- arr.sort 같은 경우는 원본을 직접 바꾸는 mutable 내장 함수
- arr.map이나 arr.filter 같은 경우는 immutable 내장 함수
정렬 알고리즘 짜기
- 정렬 알고리즘 종류: https://namu.wiki/w/%EC%A0%95%EB%A0%AC%20%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98
- 정렬을 구현할 때 resource가 적게 드는 노력이 필요!
- 버블 정렬: 성능에 있어서는 가장 비효율적이나 알고리즘을 구현해보는 것은 중요, https://loving-wright-d0eedb.netlify.com/blog/bubble-sort-in-javascript
- 선택 정렬: 역시 좋은 퍼포먼스는 아니지만 버블 정렬보다는 성능이 좋음, 정렬되지 않은 배열 중에 현재 위치에 맞는 값을 선택해서 위치를 교환하는 알고리즘, https://loving-wright-d0eedb.netlify.com/blog/selection-sort-in-javascript
- 합병 정렬: 좋은 성능을 가지고 있고, 구현하기 쉽고 이해하기도 쉬운 장점을 가진 정렬 알고리즘(Safari, Firefox의 Array.prototype.sort가 merge sort 알고리즘으로 구현되어 있음), 두 개의 정렬된 배열이 있다면, 하나씩 요소를 비교하고, 작은 값을 결과 배열에 하나씩 추가하기 시작 → 이렇게 비교가 끝나면 결과 배열은 A와 B 배열의 비교 값에 대해서 정렬이 됨, https://loving-wright-d0eedb.netlify.com/blog/merge-sort-in-javascript
- 크롬에서는 sort method를 사용하기 위해서 quick sort를 기본으로 하되 quick sort 방식을 활용해서 경우에 따라 hybrid sort 형식으로 작동하고 있음
resource를 줄이며 코드를 짜는 예
- Good: 문자열을 받아서 문자열을 그대로 반환하는 함수
- Not Good: 문자열을 받아서 str.split → arr.join → 문자열로 반환하면 resource가 더 소모
∵ join 과정에서 arr의 모든 item을 살펴서 합쳐주기 때문
