[TIL] 2022-03-30 / 8일차
미음제
·2022. 3. 30. 17:29
오늘 배운 내용
코딩 테스트를 준비하는 방법
알고리즘을 잘 공부하는 방법
문제를 풀 때 중요한 것!
- 항상 여러 가지 풀이가 존재할 수 있다는 것을 인지하자
- 항상 예외가 존재할 수 있다는 것을 인지하자(문제에 명시되어 있는 테스트 케이스 이외의 것을 의심)
- 나의 풀이법이 최선인지 의심하자(더 효율적인 방법이 존재할 것이다)
- 문제를 풀었으면 시행착오를 메모하자(코테는 시험공부와 같아 오답 노트를 작성한다 생각하자)
- 다른 사람의 코드를 많이보자. 생각지 못한 방법을 발견할 수 있다(매일 문제를 풀며 하는 것...)
- 쉽게 포기하지 말자. 도저히 모르겠다면 답을 보는 것도 좋은 방법이다.(문제 해설을 늦게 보도록 연습하자)
visualgo와 같은 시각화 자료를 통해 알고리즘이 동작하는 방법을 시각적으로 확인하는 것도 도움이 많이 된다.
좋은 코드를 작성하는 방법
간결하고 가독성이 좋은 코드
- 변수와 함수의 네이밍을 신경쓰자(이름을 통해 의미를 확실하게 전달할 수 있도록)
- 중복 코드를 제거했는가?(반복되는 로직은 함수로 분리할 수 있도록)
- 함수형 프로그래밍도 좋은 방법(map, filter, reduce와 같은 고차 함수를 이용해보자)
Javascript를 배우며 느낀것이지만, map, reduce 등 고차 함수를 잘 활용하면 너무나도 좋을 것 같다는 생각이 자주 든다. 아직 고차 함수에 대해 익숙하지 않기 때문에 틈틈이 신경 써서 활용해볼 필요가 있다.
가지치기를 잘하자
가지치기는 백트래킹과 같은 알고리즘에서 사용되지만, 그 외 알고리즘에서도 중요한 부분이다. 사소한 로직이라면 성능 개선에서 큰 효과를 보지 못하지만, 코드 리뷰에서 좋은 평가를 받을 수 있다(불필요한 탐색을 최소화 했기 때문에).
자바스크립트를 잘 활용했는가?
- 구조 분해 할당
- ... 오퍼레이터
let a = 10, b = 9;
[a, b] = [b, a]
console.log(a,b); // 9, 10
let arr = ["고양이", "강아지"];
let brr = [...arr, "토끼"];
console.log(brr); // "고양이", "강아지", "토끼"
일관성을 잘 유지했는지?
코드를 잘 작성했더라도 일관성이 없는 코드보다 코드가 더러워 보이더라도 일관성 있는 코드가 좋다고 할 수 있다.
- var, let 키워드 혼용하지 않기
- 변수명, 함수명을 줄여쓰다가 어딘가에서 전부 적는 경우(ex, cnt라고 적다가 나중에 count라고 적는 등)
- 제출 전 코드 스타일, 변수명, 함수명을 꼭 확인해보자
코드를 작성할 때 습관적으로 cnt, tmp 같은 변수명을 자주 사용하는 것 같다. 무엇을 위한 cnt 변수인지 풀어쓸 수 있도록 노력하고, tmp와 같은 변수를 사용하기보다는 어떤 것을 위해 임시로 선언했는지 나타낼 수 있도록 신경 써야 한다.
HTML & CSS
HTML(Hyper Text Markup Language)
HTML에서 Markup은 무엇을 의미하는지? 과거에는 원고의 수정 지침을 나타내는 용어로 사용되엇다. "해당 단락의 크기를 키워라", "글꼴을 바꿔라" 등 수정 사항을 표시하는 자료였다. 디지털 세계에 와서는 디스플레이, 출력물에 대해 표시하는 방법을 나타내는 문서가 되었다.
웹에 접속 가능한 브라우저가 등장했고, 이때 웹 문서를 표현하기 위한 markup이 HTML이다. markup에 의해 다양한 스타일과 서식을 지정했고, 웹 문서는 하이퍼링크를 통해 연결되어 이동이 가능하다. markup과 하이퍼링크를 합쳐 HyperMarkupLanguage가 된 것이다.
HTML은 프로그래밍 언어가 아니다?
로직이 실행되지 않기 때문에 프로그래밍 언어가 아니라고 한다. HTML은 워드 문서와 가깝다고 볼 수 있다.
문서 양식에 대해 수정할 곳이 생겼을 때, 한번에 비슷한 문서를 수정하지 못하는 문제가 있었고 이를 해결하기 위해 CSS가 등장했다.
CSS
CSS는 Cascading Style Sheets로 HTML의 내용과 표현을 분리해 CSS라는 별도 양식을 만들어 HTML 문서의 표현을 위임시켰고, 모든 문서를 한 번에 수정할 수 있게 되었다. CSS는 스타일이 정의되는 우선순위와 해당하는 스타일을 스타일 시트에 기록할 수 있다.
CSS의 등장으로 HTML에서 표현 용도로 사용되던 tag들이 사라지게 되었다. 이에따라 HTMl은 문서 구조(Structure)와 의미(Semantic)로만 남게 되었다.
- HTML = 문서 구조, 전체 의미를 담당
- CSS = 해당 문서의 표현을 의미
HTML5
2014년 10월 28일 표준안이 확정되었다. 등장 배경은 기존 HTML이 점차 발전하고 있는 웹을 따라잡지 못해 등장하게 되었다. 과거 문서로만 존재하던 HTML에서 비디오, 오디오를 표현하기 위해 Flash, Active X를 사용했었다(1학년 때 전공 수업에 있었던 이유.. 너무나 싫었다).
- 영상, 음성을 처리하기 위한 멀티미디어 요소 추가(audio, video, canvas 등)
- 구조적 요소 추가(header, nav, article, section, aside, footer 등)
- 표현을 담당하던 tag가 삭제되고 의미를 담은 tag가 추가 (bold 체를 의미하던 b tag가 strong으로)
CSS3
가장 최신 버전의 CSS이다.
selector {
property value;
}
- selector : 어디에 스타일을 적용?
- property : 어떤 스타일을 적용?
- value : 어떻게 스타일을 적용?
HTML과 CSS를 공부하는 방법은?
사례를 외우는 것이 최선의 방법이다. 모든 tag와 스타일을 외우는 것이 아니라 사례별로 외우는 것이 좋다. 예를 들면 레이아웃을 잡는 방법, 특정 상황에서 가운데 정렬을 하는 방법 등 외울게 많지만 하다 보면 빠르게 체득할 수 있다고 한다. codepen에서 다양한 사례들을 보며 공부해보자.
CSS에서 id와 class의 차이점은?
한 가지 요소에 집중 하고 싶다면 id를, 여러 중복되는 요소에 한번에 적용하고 싶다면 class를 사용한다.
class는 여러 tag에 사용이 가능하고, 해당 클래스는 동일한 스타일이 적용된다.
하나의 tag에는 여러 class를 적용할 수 있지만, id는 하나밖에 적용하지 못한다(여러 개를 지정하는 경우 CSS가 적용이 되지 않는다).
- 적용 우선 순위 : inline style > id > class > tag
// id 사용 방법
#idName{
// 적용 내용
}
// class 사용 방법
.className{
// 적용 내용
}
CSS 선택자 종류
CSS 선택자(selector)는 말 그대로 선택을 해주는 요소로 선택자를 통해 스타일을 적용할 수 있다.
1. 전체 선택자
/* Selects all elements */
* {
color: green;
}
/* 구문 */
* { style properties }
HTML 페이지 내부의 모든 요소에 같은 CSS를 적용한다. 모든 요소를 읽기 때문에 페이지 로딩 속도가 느려질 수 있어 지양하는 것이 좋다.
2. 유형 선택자
/* All <a> elements. */
a {
color: red;
}
/* 구문 */
element { style properties }
HTML 요소를 직접 가리키는 선택 자이다. 예시에서 a tag를 선택하고 모든 a tag에 색상을 red로 지정한다.
3. 클래스 선택자
/* All elements with class="spacious" */
.spacious {
margin: 2em;
}
/* All <li> elements with class="spacious" */
li.spacious {
margin: 2em;
}
/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
margin: 2em;
}
/* 구문 */
.class_name { style properties }
주어진 class 속성 값을 가진 모든 요소를 선택하여 적용한다.
4. ID 선택자
/* id="demo" 요소 선택 */
#demo {
border: red 2px solid;
}
/* 구문 */
#id_value { style properties }
클래스 선택자와 유사한 구조를 갖고 있고, class와 달리 id 속성을 사용한다.
4. 특성 선택자
/* <a> elements with a title attribute */
a[title] {
color: purple;
}
/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
color: green;
}
/* <a> elements with an href containing "example" */
a[href*="example"] {
font-size: 2em;
}
/* <a> elements with an href ending ".org" */
a[href$=".org"] {
font-style: italic;
}
/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
padding: 2px;
}
tag 안의 속성에 따라 스타일을 지정하는 것이다.
DOM
DOM은 Document Object Model의 약자로 문서 객체 모델이라고 한다. DOM은 추상적인 개념의 HTML tag를 Modeling 하여 만든 객체라고 할 수 있다. DOM의 각 요소는 key, value 형태로 이루어져 있는데, Web UI의 상태, 기능, 속성을 개체로 뽑아낸 것이라 볼 수 있다.
DOM의 탄생
Javscript가 탄생하며 같이 등장했다. 초기에는 form, link 등 몇 요소에만 접근이 가능했고, form 유효성 검사 로직 등에만 사용되었다. 이후에 점차 많은 요소에 접근할 수 있게 되었고, HTML 문서를 직접 수정하는 것 까지도 가능해졌다.
DOM은 트리 구조로 이루어져 있다. DOM 트리의 시작점은 문서 노드가 된다.
<div>Div</div>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
<p>Paragrph</p>
위와 같은 HTML이 있다고 가정했을 때, document.getElementByTagName('li')의 결과는?
List 1, List 2, List 3 순으로 나타난다. DOM 트리의 순회는 preorder로 이루어져 있기 때문이다.
DOM을 다루는 방법
Virtual DOM
한 번에 여러 개의 DOM 객체를 수정해야 하는 경우가 있다고 생각하자. 예를 들어 100개의 DOM을 수정한다고 하면, 최악의 경우 100번의 레이아웃과 렌더링을 한다는 의미가 된다. 개발자가 렌더링 하는 코드를 최적화하는 것은 쉽지 않다. 특히 대규모 애플리케이션일수록 그렇다. 이 같은 문제를 해결하기 위해 탄생한 것이 Virtual DOM이다.
Virtual DOM은 실제 DOM 트리를 javascript 객체로 만든 것으로 필요한 정보만을 담아 만들어진다. Event나 DOM이 수정되는 한 틱 내에서 직접 DOM을 수정하지 않고 Virtual DOM을 바꾸는 부분만 수정한 후 렌더링 하면 브라우저 렌더링 프로세스를 줄일 수 있다.
이러한 이유로 최적화, 편의성을 위해 React와 Vue에서도 Virtual DOM을 사용한다.
Virtual DOM의 오해
Virtual DOM이 DOM보다 빠르다? 는 말은 오해이다.
React 핵심 개발자 Dan Abramov
Virtual DOM이 DOM 보다 빠르다는 것은 미신이고
편의성과 대부분의 상황에서 충분히 빠르기 때문에
사용하는 것이다.
페이지에 그려지는 DOM이 많을수록 느려지는 현상은 동일하다. Virtual DOM을 사용하면 실제 DOM과 Virtual DOM을 두 번 탐색해야 하고, 메모리 사용도 각각 이용해야 한다. 브라우저 렌더링 횟수만 줄어들 뿐 속도는 더 느리다.
일반적인 웹사이트에서 앞서 말한 만큼 성능이 소요되는 경우는 거의 없고, 빠른 개발을 위해 성능 최적화보다 개발 편의성을 선택하는 경우가 많기 때문에 Virtual DOM을 사용하는 것이다.
부족한 점
- 코딩 테스트를 위한 Setting
- 브라우저 작동 흐름
- DOM 조작
- Virtual DOM
느낀 점
우아한 테크코스 프리코스를 진행했던 때가 생각났다. Javscript에 익숙하지 않고 특히나 DOM을 다루는 것은 더더욱 그랬다. DOM을 추가하고 수정하고 삭제하는데 애를 많이 썼던 기억이 났다. Udemy 강의를 들으며 어느정도 익히고 수업을 들으니 반갑게 느껴졌다. 우아한 테크코스 지원 과정, Udemy 강의를 수강하지 않았다면 오늘도 역시 많이 헤맸을 거 같다. 나중에 개인 과제나 팀 프로젝트를 진행할 때 어려움이 없도록 이 부분에 대한 학습도 많이 해야겠다는 생각이 든다. 특히 DOM 트리에 대해 생각해보지 못했었는데, 이 부분을 이해하기 위해 브라우저 작동 흐름과 함께 학습할 수 있도록 해야겠다.
며칠간 자료구조와 알고리즘 강의들을 듣다 벗어나니 숨통이 트인 느낌... 사실 그렇다 해도 계속 문제를 풀어야 하지만..
글의 서두에 작성된 코딩 테스트를 준비하는 방법은 지난 특강과 오늘 강의를 통해 다시 Recap 했다. 언제나 문제를 풀고 싶다는 생각뿐이었는데, 생각보다 신경 쓸게 많았고 전혀 신경 쓰지 않았던 부분들이 많았다. 연습을 하고 문제를 풀며 꼭 적용할 수 있도록 노력해야겠다.
참고
'프로그래머스 > 데브코스 프론트엔드' 카테고리의 다른 글
[TIL] 2022-04-01 / 10일차 (0) | 2022.04.01 |
---|---|
[TIL] 2022-03-31 / 9일차 (0) | 2022.03.31 |
[TIL] 2022-03-29 / 7일차 (0) | 2022.03.30 |
[TIL] 2022-03-28 / 6일차 (0) | 2022.03.28 |
[TIL] 2022-03-25 / 5일차 (0) | 2022.03.27 |