Front-end 모의 기술면접 복기

진형욱·2023년 1월 16일

CORS

Cross-Origin Resource Sharing 의 약자로 교차 출처 리소스 공유라는 뜻이다. 교차 출처라 함은 (엇갈린) 다른 출처를 의미하는 것이다.

Origin(출처)란?

Protocol(https://)과 Host(naver.com) 그리고 Port(Http : 80, Https : 443)까지 모두 합친 URL

SOP(동일 출처 정책)

Same-Origin-policy 의 약자로 요청을 보내고자 하는 대상과 프로토콜과 포트가 같아야 한다. 즉 동일한 출처에서만 리소스를 공유할 수 있다는 뜻으로, 동일 서버에 있는 리소스는 자유롭게 가져오지만 다른 출처 서버에 있는 이미지, 영상 리소스는 상호작용이 불가능하다.

동일 출처 정책이 필요한 이유

제약이 없다면 해커가 CSRF(cross-site Request Forgery)나 XSS(Cross-site Scripting)등의 방법을 이용해 우리가 만든 어플리케이션에서 해커가 심어놓은 코드가 실행되어 개인 정보를 가로챌 수 있다.

출처 동일함의 기준

두 출처의 URL 구성 요소 중 Protocol, Host, Port 이 3가지만 동일하다면 동일 출처이다. 같은 프로토콜, 호스트, 포트를 사용한다면 그 뒤 다른 요소는 다르더라도 같은 출처로 인정되며, 하나라도 다를 경우 브라우저 정책상 차단당하게 되는 방식이다.

몇가지 예외 조항을 두고 다른 출처 리소스 요청이라도 이 조항에 해당할 경우에 허용하기로 했는데, 그 중 하나가 바로 CORS 정책을 지킨 리소스 요청이다.

브라우저를 검색했을때 랜더링 과정

HTMl 마크업 처리하고 DOM 트리를 빌드합니다.("무엇을"그릴지 결정)
CSS 마크업을 처리하고 CSSOM 트리를 빌드합니다.("어떻게"그릴지 결정)
DOM, CSSOM을 결합하여 렌더링 트리를 형성합니다.
렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산합니다. ("Box-model"을 생성)
개별 노드를 화면에 페인트 합니다.(=래스터화)

래스터화란? 벡터 그래픽 형식으로 설명된 이미지를 래스터 이미지로 변환하는 작업이다.

B, Strong 태그의 차이점

b 태그와 strong 태그는 모두 텍스트를 강조하는 역할을 한다. 하지만 strong 태그는 텍스트를 단순히 강조할 뿐만 아닌 (매우 중요, 긴급, 경고의 의미를 가지고 있다.) 실제로 페이지 내의 중요한 부분으로 브라우저에게 알려주는 역할을 한다.

React를 사용하게 된 이유?

참고 자료

메모제이션이란?

프로그램 실행 시 이전에 계산한 값을 저장하고, 동일한 입력이 들어오면 재활용 하는 방식의 프로그래밍 기법. 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션 성능 최적화 할 수 있다.

.jsx와 .js의 차이점

JSX란

JavaScript XML의 약자로 자바스크립트에서 XML을 추가한 확장형 문법이다. 자바스크립트에서 HTML 문법을 사용할 수 있다는 점이고 주로 리액트나 다른 프론트엔드 프레임워크에서도 사용이 가능하다.

차이점

.js와 .jsx의 확장자로서의 차이점은 없으나 jsx가 표준 자바스크립트 문법이 아닌 만큼, Plain하지 않은 자바스크립트가 js파일에 들어가는 것에 대한 논쟁이 있을 수도 있다.

요약하자면 기능에는 차이가 없으나 팀 내 convention에 관련하여 js를 쓸 것인지, jsx를 쓸 것인지 협의를 해야 하는 부분이 존재하는 것 같다.

리액트 공식 홈페이지에서 JSX 관련해서는 자바스크립트 내에서 직관적으로 UI 관련 작업이 가능하고, 개발에 도움을 주는 에러 및 경고 메시지를 표시할 수 있게 해 준다고 하고 있다. 뉘앙스 자체는 추천하는 듯한 느낌

왜 styled.component인가?

스타일링을 위해 CSS만 사용했을 때 불편한점이 있다. 일단 글로벌 네이밍을 신경써야 한다는 문제이다. 프로젝트 규모가 커질 수록 비슷한 역할이지만 생긴건 다른 컴포넌트가 많이 생기는데 그 때 이름이 겹치게 만들면 전혀 의도하지 않는 스타일링이 될 수 있다.

조건에따라 class를 다르게 만들고 적용하기도 힘들고, 케이스마다 네이밍을 줄줄 달아주는것도 문제이다.

그래서 우린 JS상에서 CSS를 관리하는 형식을 찾게 되었다.

CSS-in-JS

Javascript를 사용하여 컴포넌트의 스타일을 지정하는 기술이다. Javascript에서 구분이 분석되면 그때 CSS가 스타일 요소로 생성되어 DOM위에 직접 부여되는 방식.

Props를 받을 수 있어서 조건부 스타일링을 쉽게 할 수 있고, JavaScript 상수나 변수를 받을 수 있다. 즉 동적 스타일링 기능을 제공한다. 하지만 그냥 CSS를 사용하는 것 보다는 동적 스타일링이기 때문에 JavaScript를 해석 할 시간이 필요해 스타일의 적용이 느리다.

Styled-components과 Emotion

StyledComponets와 Emotion을 이용해 환경 세팅을 해보면 차이가 크게 없다는 것을 느낄 수 있다.

StyledComponets는 styled를 이용해 하나의 HTML 태그를 선택하여 컴포넌트화 시키는 것이고 Emotion은 css를 이용해 스타일만 지정한 뒤 스타일을 표현해줄 때 HTML 태그를 선택해서 사용 한다.

추가로 성능 및 번들 크기와 관련하여 눈에 띄는 차이는 없지만 Emotion.js가 2kb의 차이로 더 작았다고 한다. 개인 기호나 팀 컨벤션 상황에 맞게 선택해서 사용해도 좋을 것 같다고 한다.

GET, POST

GET

요청을 전송할 때 필요한 데이터를파라미터로 포함되어 쿼리스트링을 통해 전송한다.

URL의 끝에?와 함께 이름과 값으로 쌍을 이루는 요청 파라미터를 쿼리스트링이라고 부른다.

URL 공간에 담겨가기 때문에 전송할 수 있는 데이터 크기가 제한적이며 안이 필요한 데이터에 대해서는 데이터가 그대로 노출되므로 Get 방식은 적절하지 않다. 서버에서 데이터를 가져와 보여주기 위해 사용.

POST

Http Request Message의 Body 부분에 데이터가 담겨 전송된다.바이너리 데이터를 요청하는 경우
POST 방식으로 보내야 하는 것 처럼 데이터 크기가 GET 방식보다 크고 보안면에서 낫다. 즉 서버의 값이나 상태를 변경, 추가하기 위해 사용.

PUT, PATCH

HTTP Method 중에 PUT과 PATCH는 리소스의 업데이트를 의미한다. 같은 역할을 하는 메소드처럼 보이지만 약간의 차이가 있다.

PUT

HTTP PUT 메서드는 요청 페이로드를 사용해 새로운 리소스를 생성하거나, 대상 리소스를 나타내는 데이터를 대체한다.

즉, 리소스의 모든 것을 업데이트 한다.

PATCH

HTTP PATCH 메소드는 리소스의 부분적인 수정을 할 때에 사용된다.

리소스의 일부를 업데이트 한다.

요약

예를들어 한 사용자에 대해 여러 정보를 객체로 수집하여 서버로 보내는 경우, PUT은 보내지지 않은 정보에 대해서는 null값으로 업데이트하지만, PATCH는 기존 데이터를 유지하며 업데이트 하는 방식으로 대응한다.

Code Snippet

코드 조각이라는 뜻으로, 코드 일부분만을 발췌한 것을 가르킨다. 코딩 예시를 보여줄 때 쓰거나, 모듈처럼 일부 코드를 복사 붙여넣기 할 때 code snippet이라는 표현을 쓴다.

진형욱

90% of my problems magically disappeared when I slept well, ate well and went on regular walks

이전 포스트