취업준비를 하면서 온라인 면접도 처음이었고, 기술에 대한 질문을 준 회사가 처음이었기에 나의 무지함을 인정하며 간단하게 정리를 해보고자 한다.
오히려 부족한 점을 알 수 있게 기술면접을 준비해준 회사측에 감사하다.
추상적으로 이해는 되었지만 말로 설명하라하면 왜 못 하는가 바보야
웹표준이란?
MDN에 따르면 웹표준은 다음과 같이 정의되어 있다.
웹 표준은 여러 국제 표준 기구가 정한 규칙으로서 웹이 작동하는 방식을 정의합니다. (때로는 인터넷을 제어하기도 합니다).
이 설명만 봐서는 와닿지 않는다. 그래서 웹표준이 뭐가 중요한건데?
웹표준이 중요한 이유는 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함을 의미하기 때문이다. 웹표준이 있기 때문에 사용자가 파이어폭스, 크롬, 네이버웨일, 엣지 등 다양한 브라우저로 접속을 하더라도 같은 화면을 보게될 것이고, 이는 웹접근성을 향상시킨다
시맨틱태그를 사용하면 뭐가 좋은데?
검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.
즉, 시맨틱태그를 통해 기대할 수 있는 효과는 다음과 같다
- 검색엔진(SEO)최적화
- 코드의 가독성 향상 및 명확한 의미 제공
- 웹접근성 향상
여기서 제일 중요한건 검색엔진 최적화라 생각한다.
크로스브라우징은 왜 중요해?
사용자는 다양한 브라우저에서 웹사이트에 접속한다.
그렇기에 모든 브라우저가 지원하는지 Can I Use?에서 확인한 후 제공되어야 한다.
안그러면 어떤 브라우저에서는 지원이 안되어서 개발자의 의도와 달라짐!
함수형 프로그래밍
사실 모던 자바스크립트 Deep Dive에서 자바스크립트는 프로토타입 체인을 이용한 강력한 객체지향 언어라고 설명해서 함수형 프로그래밍을 객체를 설계하는게 아닌 단순히 함수로 작성하는 프로그래밍으로 알고 있었다
함수형 프로그래밍은 거의 모든 것을 순수 함수로 나누어 문제를 해결하는 기법으로, 작은 문제를 해결하기 위한 함수를 작성하여 가독성을 높이고 유지보수를 용이하게 해준다.
함수형 프로그래밍은, 부수효과를 멀리하고 가급적 순수함수를 만들어 1급함수(1급객체)의 특징들을 이용해서 함수들을 인자과 반환값으로 사용하는 활용을 통해서 단순하고 결함이 적은 단방향성의 파이프라인을 함수들의 조립을 통해 구축한다는 개념이다.
부수효과(Side Effect)
여기서 부수효과(Side Effect)란 다음과 같은 변화 또는 변화가 발생하는 작업을 의미한다.
1. 변수의 값이 변경됨
2. 자료 구조를 제자리에서 수정함
3. 객체의 필드값을 설정함
4. 예외나 오류가 발생하며 실행이 중단됨
5. 콘솔 또는 파일 I/O가 발생함
순수 함수(Pure Function)
그리고 이러한 부수 효과(Side Effect)들을 제거한 함수들을 순수 함수(Pure Function)이라고 부르며, 함수형 프로그래밍에서 사용하는 함수는 이러한 순수 함수들이다.
1. Memory or I/O의 관점에서 Side Effect가 없는 함수
2. 함수의 실행이 외부에 영향을 끼치지 않는 함수
HTTP의 header의 역할?
HTTP 헤더는 클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 해준다
제일 많이 사용되는 헤더 몇 가지만 알아보자.
General Header
1.Date
Date: (day-name), (day) (month) (year) (hour):(minute):(econd) GMT
예시
"Date: Wed, 21 Oct 2015 07:28:00 GMT"
2.Connection
- close : 메세지 교환 후 TCP 연결 종료
- Keep-Alive : 메세지 교환 후 TCP 연결 유지
예시
Connection: close
Connection: Keep-Alive
Request Header
1. Host
요청하는 자의 호스트명, 포트 번호를 포함하고 있다.
예시
Host: developer.mozilla.org
2.User-Agent
요청자의 소프트웨어 정보(os, 브라우저, 기타 버전 정보)를 표현한다.
예시
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
3. Accept
요청자가 원하는 미디어의 타입 및 우선순위를 표현한다.
- Accept-Language : 사용자가 원하는 언어셋
- Accept-Encodig : 사용자가 원하는 인코딩 방식
예시
Accept: application/json, text/plain, */*
-> json > text > all type 순으로 받는다는 표현이다.
Accept-Language: en-US,en;q=0.5
-> 언어는 en이라는 표현이다. q는 가중치다.
Accept-Encoding: gzip, deflate, br
-> gzip, deflate, br(Brotli) 등등의 압축 포맷을 받는다는 표현이다.
4. cookie
서버에 의해서 이전에 저장된 쿠키를 포함시키는 속성
Response Header
1.Server : 서버 소프트웨어의 정보를 표현
2. content-encoding : 응답하는 내용의 인코딩 포맷을 표현
3. content-type: 응답하는 내용의 타입과 문자 포맷을 표현
4. cache-control : 캐시 관리에 대한 정보를 표현
예시
cache-control :
no-cache(서버측에 캐시를 사용해도 되는지 확인),
no-store(캐싱x),
must-revalidate(만료 캐시만 서버측에 확인),
public(중개 서버에 저장 가능)/private(사용자 브라우저에만 등록),
max-age(캐시 유효기간)
5. date : 응답 메세지가 생성된 시간을 표현
6. vary : 캐시된 응답을 향후의 응답에 사용할 기준을 표현
7. Set-Cookie : 서버에서 사용자에게 세션 쿠키 정보를 전달
8. Age : max-age내에서 캐시가 얼마나 지났는지 초 단위로 표현
CSS의 Cascading의 의미?
Cascading은 폭포, 위에서 아래로 쏟아지는이라는 뜻을 가진 단어입니다. 그리고 이는 CSS에서 가장 중요한 스타일 적용 규칙을 의미한다.
Cascading은 다음과 같은 두가지의 원칙을 통해 어떤 요소에 스타일을 적용할지 결정한다.
1.스타일 우선순위
2.스타일 상속
CSS 방법론
CSS 방법론(컨벤션)은 대표적으로 세가지가 있다.
OOCSS
OOCSS(Object Oriented CSS)는 CSS를 모듈방식으로 작성하여 중복을 줄이는 방식으로 가장 많이 사용되는 방식이다.
예시
<style>
.header {
position: fixed;
top: 0;
}
.footer {
position: relative;
bottom: 0;
}
.common-width {
width: 800px;
margin: 0;
}
</style>
<div class="header common-width">Header</div>
<div class="footer common-width">Footer</div>BEM
BEM(Block Element Modifier)는 블록(block), 요소(element), 상태(modifier)로 구분하여 클래스명을 작성하는 방식이다.
BEM은 블록(block), 요소(element), 상태(modifier) 3가지로 구성하고,
각 부분을 __와 --로 구분하여 짓게 된다. 어떻게 보일지에 초점을 두기보단 '어떠한 목적인가' 에 초점을 두어 이름을 짓는다.
예시
블록(block)
재사용성이 가능하고 기능적으로 독립이 가능한 컴포넌트이다. 일반적으로 하나의 단어를 사용하되 길어질 경우엔 -를 사용한다.
.header {..}
.block {..}요소(element)
블록을 구성하는 단위로 __를 사용한다.
.header {..}
.header__tap {..}
.header__content {..}
.header__logo__button {..}요소(element)
블록이나 요소의 속성으로 -를 사용한다.
.header--hide {..}
.header__tap--big {..}
.header__content--disabled {..}SMACSS
SMACSS(Scalable and Modular Architecture for CSS)는 CSS를 범주화(Categorization)로 패턴화 하고자 하는 방법론이다
CSS를 비슷한 종류끼리 모아 5가지 스타일로 나누고 각 유형에 맞는 선택자와 작명법, 코딩 기법을 제시한다. 기본(base), 레이아웃(layout), 모듈(module), 상태(state), 테마(theme) 다섯가지의 범주를 제시한다.
기본(base)
Reset, Variable 등을 포함하고 !important를 쓰지 않는다.
body, form, p, table, button, fieldset, input ... {
margin: 0;
padding: 0;
}레이아웃(layout)
주요 요소(id)와 하위 요소(class)로 구분하고 접두사를 사용한다.
// layout => l-
// 주요 요소 작성
#header {
width: 400px;
}
#aside {
width: 40px;
}
// 하위 요소 작성
.l-width #header {
width: 650px;
padding: 10px;
}
.l-width #aside {
width: 100px
}모듈(module)
재사용성이 높은 구성 요소를 정의한다.
재사용을 위해 id 셀렉터와 element를 사용하지 않는다.
.box >span {
padding-left: 20px;
background: url(icon.png);
}상태(state)
요소의 상태 변화를 표현하고 접두사 is-나 s-를 사용한다.
Hidden, expend, active, hover 등의 상태에서 사용된다.
.btn.is-active{
background:#43f837;
}
.btn.is-hidden {
display: none;
}테마(theme)
사용자가 선택 가능 하도록 스타일을 재선언하여 사용한다.
// base.css
.header {
background-color: red;
}
// theme.css
.header {
background-color: orange;
}SMACSS 유의사항
- 파생된 CSS 셀렉터 사용금지
- ID 셀렉터 사용금지
- !important 사용 금지
- Class 이름은 의미있게, 다른 개발자가 이해할 수 있도록 선언
참고
MDN - Web standards
함수형 프로그래밍을 배워보자!
[프로그래밍] 함수형 프로그래밍(Functional Programming) 이란?
MDN - HTTP 헤더
HTTP Header 이번에 확실히 정리하고 가세요!
CSS방법론 (OOCSS, BEM, SMACSS)
[CSS방법론] SMACSS, BEM, OOCSS
