html / CSS

node vs element

node : 태그 노드와 텍스트 노드 전체
element : 텍스트 노드 제외

children : 텍스트 노드 제외
childNodes: 텍스트 노드 포함

선택자

id : 고유값, 중복 불가, #id명로 선택
class : 중복 가능, .class명으로 선택
[특정속성] : 특정 속성을 갖는 모든 요소
[특정속성=’’] : 특정 속성의 값이 ‘’인 요소

선택자 우선순위

!important를 포함한 규칙 > 인라인 스타일 속성 > id선택자 > 클래스, 속성, 가상 선택자 > 요소 선택자 > 전체 선택자

높은 우선순위의 선택자를 더 많이 사용한 규칙이 우선
| #id .wrap .content div span > #id .content div span

head 안 style > style안 @import > link로 연결한 css > link로 연결한 css 안에 @import > 브라우저 기본

border-box vs content-box

content-box : padding, border 영역을 제외한 크기를 width, heigh로 가짐

border-box : padding, border 영역을 포함한 width, height를 가짐

position

static

기본, 좌에서 우, 위에서 아래 방향으로 쌓임

relative

top, right, bottom, left 속성을 사용한 위치 조절 가능

absolute

가장 가까운 중 static이 아닌 요소를 기준으로 top, right, bottom, left 속성을 사용한 위치 조절 가능
!width:100%

fixed

화면을 기준으로 top, right, bottom, left 속성을 사용한 위치
!width:100%

css 애니메이션 vs js 애니메이션

doctype

HTML은 버전 별로 지원하는 태그가 차이가 있어 어떤 버전의 HTML로 작성이 되었는지 미리 선언
웹 브라우저가 이를 통해 내용을 표시할 수 있도록 지원

i18n

전처리도구

sass, scss
css의 한계와 단점을 보완, 가독성과 재사용에 유리한 css생성을 위한 확장도구
css보다 심플한 표기법으로 css를 구조화
css에는 존재하지 않는 기능을 활용하여 유지보수 편의성 향상

javascript

함수와 함수호이스팅

함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점은 다름
함수 선언문도 선언문으로 코드가 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행 => 호이스팅

함수 선언문으로 함수를 정의하면 자바스크립트 엔진에 의해 다른 코드가 실행되기 이전에 함수명과 동일한 이름의 변수를 암묵적 선언하고 객체를 생성하여 할당
-> 코드가 실행되기 이전에 이미 객체가 생성되고 함수명과 동일한 변수에 할당 -> 함수 선언문 이전에 함수를 참조, 호출가능

동기 vs 비동기

동기식 : 직렬적 작업 수행 -> 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기
비동기식 : 병렬적 작업 수행 -> 작업이 종료되지 않은 상태에서도 대기하지 않고 다음 작업을 실행

서버에서 데이터를 가져오는 경우 동기식은 서버에서 데이터가 응답 될 때까지 이후 작업이 블록킹상태가 되며, 비동기식은 서버에 데이터를 요청한 후 서버의 응답을 기다리지 않고 다음 작업을 수행, 이후 서버로부터 데이터가 응답되면 이벤트가 발생하여 해당 데이터를 사용할 작업 수행

ajax

Asynchronous JavaScript and XML
자바스크립트를 이용한 비동기적 통신방법
서버로부터 페이지가 반환되면 화면 전체를 갱신하는데 이를 일부 페이지만 갱신하여 동일한 효과를 볼 수 있도록 함
페이지 전체를 로드하여 렌더링하지 않고 갱신이 필요한 일부만 로드하기 때문에 빠른 퍼포먼스와 부드러운 화면 표시 효과 가능

콜백 헬

비동기식 처리를 위해 콜백 패턴을 사용하면 처리 순서를 보장하기 위해 여러 개의 콜백 함수가 중첩되어 복잡도가 높아지는 현생이 발생
가독성이 나빠지며 실수를 유발

콜백 방식의 비동기 처리를 하면 에러처리가 곤란

promise

Promise 생성자 함수를 통해 인스턴스화
비동기 작업을 수행할 콜백 함수를 인자로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인자로 전달받음

Promise 생성자 함수가 인자로 전달받은 콜백 함수 내부에서 비동기 처리 작업을 수행
처리가 성공하면 resolve함수를 호출
실패하면 reject함수를 호출

Promise로 구현된 비동기 함수는 반환값으로 Promise객체를 반환

Promise객체를 반환한 비동기 함수는 프로미스 후속 처리 메소드인 then이나 catch 메소드를 사용 가능
-> then 메소드가 Promise를 반환하면 여러개의 프로미스를 연결하여 사용가능 -> 콜백 헬을 후속처리 메소드의 체이닝을 통해 해결

fetch, async/await

SPA

Component

ssr vs csr

렌더링 : 어떤 웹 페이지 접속시, 그 페이지를 화면에 그려주는 것

ssr : 요청마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식 -> 서버측에서 HTML&view를 생성하여 응답하는 방식
csr : 서버에서는 빈 체이지를 제공하고 view에 대해서는 client에서 자바스크립트를 통해 렌더링하는 방식 -> 클라이언트에서 view를 생성

ssr은 view를 서버에서 렌더링하여 가져오기 때문에 첫 로딩이 짧지만 csr은 서버에서 view를 렌더하지 않고 html과 js등의 파일을 다운받은 후 브라우져에서 렌더링하여 보여주기 때문에 초기 로딩시간이 상대적으로 길어짐

ssr은 view를 생성하기 위해 자바스크립트가 필요하고 그 전까진 HTML의 내용이 이어있어 제대로 데이터 수집이 어려움 -> seo 어려움