1. HTML 렌더링 중에 JavaScript가 실행되면 렌더링이 멈추는 이유

키워드

• HTML 파일을 파싱하면서, DOM 객체 생성
• 자바스크립트 파일을 파싱하는 순간 DOM 객체 생성 중단
• 자바스크립트 파일 파싱이 끝나면 다시 HTML 파싱
• DOM 객체 생성 시작

답변

• 일단 브라우저 렌더링 할 때, HTML 파일을 파싱하면서 DOM 트리가 생성된다.
• 하지만 자바스크립트 코드를 만나는 순간, DOM 트리 생성이 중지된다.
• 그래서 렌더링이 멈추는 것이고, 자바스크립트 파싱이 끝나면, 다시 HTML 파일을 파싱한다

2. require와 import의 차이점

키워드

• require는 Node.js에서 사용되는 모듈
  • 동기적으로 로딩하고, 파일이 모두 로딩되면 코드 실행 가능
• ES6에서 도입된 모듈
  • 비동기적으로 로딩하기에, 파일이 모두 로딩되지 않아도 코드 실행 가능

답변

• require는 node.js에서 사용하는 모듈이고, ES6 이전에 사용하는 방식이다
• 동기적으로 작동하기 때문에, 해당 모듈 파일이 모두 로딩되어야 다음 코드가 실행됩니다
• import는 ES6 부터 사용되는 모듈이다.
• 비동기적으로 작동하기 때문에, 해당 모듈 파일이 모두 읽히지 않더라도 다음 코드가 실행됩니다

3. var, let, const 차이점

키워드

• var는 변수 재선언, 재할당 모두 가능, 호이스팅으로 최상단스코프
• let은 변수 재선언을 불가능하고 재할당은 가능, 호이스팅없이 블록스코프
• const는 변수 재선언과 재할당 모두 불가능, 호이스팅없이 블록스코프

답변

• var는 재선언, 재할당 모두 가능하고, 최상단으로 스코프가 호이스팅되기 때문에, undeclared 같은 에러가 발생하지 않습니다.
• let은 재선언은 안되고, 재할당은 됩니다. 블록스코프로 선언이후에만 값을 할당할 수 있습니다
• const는 재선언, 재할당 둘 다 안됩니다. let이랑 똑같이 블록스코프로 선언이후에만 사용가능합니다.

4. CORS 에러에 대처하는 방법과 우회하는 방법

키워드

• SOP는 Same-Origin-Policy
  • 다른 도메인에 리소스를 요청할 시에 막음
• CORS는 Cross-Origin-Resource-Sharing
  • 다른 도메인에 리소스를 요청할 때 요청이 가능하게 해줌
• 1. 서버에서 Access-Control-Allow-Origin 헤더에 요청하는 도메인을 설정하여 접근권한허용
• 2. JSONP 설정으로 script 태그의 src에 도메인과 Json 데이터가 담긴 parseResponse 콜백함수를 포함하여 요청하연 됨
• 3. CORS 에러는 브라우저에서 발생시키는 것이기 때문에 자신의 서버를 경유하여 외부 도메인 접근을 요청한다면 에러없이 응답을 받을 수 있음(프록시 서버)

답변

• CORS 에러는 브라우저에 동일 출처 정책인 SOP에 의해서 HTTP 요청을 막은 것입니다.
• 그래서 이를 해결하기위해 3가지 방법이 있습니다.
• 첫 번째, 서버에서 Access-Contorl-Allow-Origin 헤더에 다른 도메인을 작성하면 됩니다
• 두 번재, JSONP 설정을 통해서 script 태그의 src에 다른 도메인 이름과 parseResponse 콜백함수에 넘겨줄 JSON 파일을 감싸서 보내는 방법이 있습니다.
• 세 번재, 자체 서버를 경유해서 브라우저의 검열을 피하여 HTTP 요청을 받는 방법, 즉 프록시 서버라는 것을 통해서 HTTP 요청을 하는 방법이 있습니다.

5. React의 생명 주기

키워드

• 생성(mount), 갱신(update), 제거(unmount)
• 생성에는 constuctor(컴포넌트 생성), getDerivedStateFromProps(props를 state로),
  render(컴포넌트 렌더링), componentDidMount(렌더링 이후에 HTTP 요청)
• 갱신에는 getDerivedStateFromProps(props를 state로), shouldComponentUpdate(변경 사항 체크), render(컴포넌트 렌더링), getSnapshotBeforeUpdate(업데이트 전 스크롤 유지), componentDidUpdate(렌더링 이후에 HTTP 요청)
• 식제에는 componentWillUnmount(브라우저에서 사라지기 직전에 호출 - 이벤트 제거)

답변

• React 생명 주기는 3가지 경우에 따라 달라집니다.
• 생성, 갱신, 삭제입니다.
• 생성은 constructor, getDerivedStateFromProps, render, ComponentDidMount,
• 갱신은 getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate,
• 삭제는 componentWillUnmount 입니다.

6. ES6에서 Arrow 함수를 왜 쓰는가?

키워드

• 중괄호나 return 키워드 생략 가능해서 간결함
• this로 참조할 때, 항상 해당 함수를 기준으로 참조되게 함

답변

• 일단 중괄호나 return 을 굳이 사용하지 않아도 되기 때문에 코드가 간결해서 가독성이 좋습니다. 그래서 자주 사용하고,
• this로 해당 함수를 기준으로 참조해야하는 경우가 있는데, 예외없이 해당 객체를 기준으로 참조하기 때문에 에러 발생이 적어서 사용합니다.

7. 쿠키, 세션, 캐시

키워드

• 쿠키는 웹 브라우저에 저장하여 사용자 정보나 상태를 유지
• 세션은 서버 측에서 유지되는 상태 정보를 저장, 세션 ID를 통해서 클라이언트를 식별
• 캐시는 이전에 검색한 데이터를 로컬에 임시로 저장하여 필요할 때 서버에서 다시 다운로드하지않고 브라우저에서 가져오게 함

답변

• 쿠키는 클라이언트 쪽에서 웹 브라우저에 저장하여 사용자 정보나 상태를 유지합니다
• 세션은 서버 측으로부터 세션ID를 클라이언트가 받고, 해당 세션ID를 통해서 식별 후 상태 정보를 요청하거나 저장합니다
• 캐시는 이전 검색 결과 등을 로컬에 데이터를 임시로 저장하고, 해당 캐시를 통해서 동일한 정보면 서버에 굳이 다시 다운로드 받지 않게 성능을 높이는 것입니다.