프론트 엔드(front-end)가 알아야할 내용들

 

 

브라우저가 웹 페이지를 랜더링 하는 과정

-DOM(Document Object Model)은 웹 페이지에 대한 인터페이스입니다

 

브라우저 렌더링 과정은 사용자가 페이지에 접속하여 HTML을 서버에서 내려받게 되면 이를 브라우저 렌더링 엔진에서 파싱(처리) 한다. 이렇게 "DOM 트리" 를 만들고, link 태그를 통해 CSS 파싱을 해서 "CSSOM 트리"를 결합한 것이 "렌더 트리" 가 되고, 레이아웃 작업에서 엘리먼트가 그려질 위치를 계산하고 페인트 단계에서 화면에 그려준다. 이 과정을 진행하다가 자바스크립트를 만나면 런타임 환경에 수행권한을 넘겨 자바스크립트를 파싱을 완료 할때까지  DOM 파싱은 중단된다. 

 

---

 

호이스팅이란

 

함수 안에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언된거 처럼 작동한다.

자바스크립트는 인터프리터 언어로 위에서 아래서 순서대로 읽으면서 실행되는데 실행되기전 분석 단계에서 함수선언과 변수선언을 파악하여 존재를 확인한다. 코드상에서 함수선언 이전에 호출 되어도 자바스크립트는 존재를 알고있기 때문에 에러를 내지 않고 실행되거나 변수의 undefined를 출력한다.

 

var(함수레벨스코프), let, const(블록레벨스코프) 도 호이스팅이 발생하지만 차이점이 있다.

var 는 선언과 초기화가 동시에 진행된다 . 예를 들어 var X 로 선언만하고 할당하지 않은 상태에서 X 를 출력하면 undefined 로 출력된다. 이는 초기화가 선언과 동시에 되는것이며 그렇기 때문에 참조가 가능하여 호이스팅이 가능하다. 반면에 let 은 선언 이후에 값을 할당하기 전까지 초기화가 이루어 지지 않기 때문에 참조가 불가능하다. 그렇기 때문에 호이스팅이 되어서 존재를 알고 있어도 값을 참조하지 못하기 때문에 호이스팅이 안된거처럼 보인다. 

const 는 선언과 초기화가 동시에 이루어지지 않으면 에러가 나기때문에 런타임 이전에는 실행될수 없기때문에 let 과같이 호이스팅 되어도 참조 하지 못한다.

 

---

 

 

null , undefinedm NaN

 

undefined 는 타입이 결정되지 않은 변수
null 은 객체이며 , 비어있는 변수
NaN 은 숫자값 이지만 컴퓨터가 표현할수 없는 숫자값

undefined == null = true
비교연산자 == 자료형이 다르면 자동형변환을 하여 둘다 false기 때문에 true 이지만
=== 타입까지 비교하면 false를 반환한다.

 

 

---

 

CSS 의 우선순위

 

1. !important

2. HTML 인라인으로 작성된 style

3. #id 에 지정한 속성

4. .class , :추상클래스 에 지정한 속성

5. tag 태그에 지정한 속성.

 

 

---

 

웹 접근성?

 

노후한 사람들이나 장애를 가진 사람들, 장애를 가지지 않은 사람 모두가 웹사이트에서 제공하는 정보를 동등하게 이용할수 있는것.

 

alt(설명) 는 이미지 태그에 이미지가 없거나 엑박이 뜰때 이미지를 대신해서 보여주는 대체 텍스트 이며 이미지의 대한 설명을 명시해야합니다.

시각장애인이 볼수있게 대체텍스트가되고 SEO 에 최적화입니다.

 

 

 

---

 

 

리액트(JS 라이브러리)를 사용하는 이유

 

사용자에게 더 좋은 인터페이스(UI)와 경험(UX)를 제공하기 위해서.

 

리액트는 컴포넌트(앱을 이루는 최소한의 단위) 를 사용하여 유지보수와 재사용에 용이하다.

 

리액트는 virtual DOM 을 활용하여 실제 DOM 에 접근해서 조작하는게 아닌 DOM 의 사본 virtual DOM 을 생성하여 변경된 부분을 이전의 virtual DOM 과 비교하여 변경된 부분의 DOM 만 변경해준다.

이렇게 변경된 부분만 조작하여 페이지 전체를 렌더링 하지 않아도 되어 속도 그리고 사용자게 더좋은 사용자 경험을 줄수 있다. 

 

 

---

 

이벤트 버블링, 이벤트 캡처링

 

버블링은 특정 요소에서 이벤트가 발생하였을때 상위 요소들로 이벤트가 전파 되는 특성을 의미하고, 캡처링은 버블링과 반대로 상위에서 하위로 전파하는 방식이다.

 

이벤트 위임(delegation)

 

자식에게 필요한 이벤트 핸들러를 부모에게 주고 이벤트에 대한 동작을 위임시켜 하나의 이벤트 핸들러로 자식이 무수히 많아도 하나의 핸들러로 동작시킬수 있으며 관리면에서도 편리하다.

 

 

---

 

GET 방식, POST 방식

 

두방식 모두 서버에 요청할때 사용하는 메서드인데

 

GET 방식은 클라이언트 데이터를 URL 뒤에 붙여서 보내는데 특정 페이지를 다른사람에게 접속 할수 있지만 데이터를 보내는 양의 한계가 있다.

쿼리스트링방식으로 전달한다.

URL에 데이터를 포함시켜서 요청합니다.

데이터를 헤더에 포함해서 전송합니다

URL에 데이터가 보이므로 보안에 취약합니다

캐싱할수있습니다

 

POST 방식은 GET 과 다르게 URL 이 아닌 BODY 에 데이터를 넣어서 보내고 컨텐츠 타입을 꼭 명시해야 합니다. 데이터를 서버로 보내서 추가 또는 수정하기 위해서 사용합니다

 

URL에 데이터를 노출하지 않습니다.

데이터를 BODY에 포함합니다

데이터가 노출되지 않아서 기본적인 보안이 되어있습니다.

캐싱할수 없습니다.

 

 

GET

a 가 b 한테 요청을하는데 a 가 소리를 치면서 요청을한다.

보안이 취약하다. 말을 쿼리스트링으로 하기때문에 제한이 있다.

 

POST

a 가 b 한테 요청을하는데 a 가 메모하고 접어서 요청을한다. 메모하는데에 제약이 없다.

 

 

---