HTML/CSS/FE 모의면접 리스트

• 피드백 : 5단계이야기가 암기느낌을 많이 준다.(암기한 느낌이 많이 난다.) : + 자연스럽게 말한다. : + 당황하더라도 톤이 일정하게 잘 유지된다. : + 두괄식으로 제시하는 방향 듣기 편하다. : - → 리액트 단방향 개념 제시하면 책임져야한다. 이유가 불명확했다. : - VirtualDOM 개념말할 때 끝까지 마무리 잘 하면 좋을 것 같다. : 프로젝트와 관련있는 개념들을 사례와 같이 이야기하면 좋을 것 같다.

• 주혜님 피드백 : 1) 서버에서 렌더링 클라이언트렌더링 차이 : 2) 면접관과 핑퐁을 좀 더 하면 좋을 것 같다. : - 요/다 .. 섞어쓰는데 의도하신건가? 스타트업 면접경우에 장점이 될 수도? : + 간결한 설명좋다. : + 머뭇거리는 부분이 없어서, 지식이 탄탄해보 인다는 장점 : - (저도 같은 피드백) 톤이 조금 단조로운 측면

• 한솔님 피드백 (11분) : 브라우저 렌더링 과정과 연관 : 사용자가 빈화면을 보지 않도록 :1) 조금 장황한 느낌이 있었다. 차이점은 공통점을 말하고, 어떤 기준을 중심으로 차이를 설명하면 좋을 듯하다. :2) em설명에서도 조금 장황한 느낌 들었다. 선언식으로 말하면 좋지 않을까 (사소한것) vh, vw 묻지않았지만 이야기한 것이 좋다고 :3) 장점 물어봤을 때, 1문장으로 scss가 무엇이다 말하고 가면 좋지않을까 :4) css in js 에서도 이거는 뭐다! 라고 말하고 나면 장단점 자연스럽게 떠오르고 이어나갈 수 있지않을까 : 번들링 이야기 굳이 필요한가?

면접전 생각할 것

• 의도를 파악하고 핵심부터 말하는 연습

• 예상질문 그대로 답변하는 것 보다 어떤 질문이 와도 내가 가진 지식을 가지고 잘 대답할 수 있는 능력이 필요하다. (응용력)

HTML

CSS

CSS보다 SCSS/SASS가 가진 장점에 대해 설명하세요.

💡

scss는 css를 조금 더 효율적으로 사용하기 위해 자체 문법을 가지고 있는 대표적인 css전처리기 중 하나입니다. [장점[ 1) 변수를 지정함으로 재사용성을 증가 ($color변수) 2) nesting(중첩)을 통해 불필요하게 중복된 selector를 선언하는 것을 막고 가독성을 높일 수 있다. 3)조건문 반복문 등의 간단한 연산가능 4) mixin을 통해 자주쓰는 속성들을 모듈화 할 수 있다. (버튼, 반응형틀) 이러한 CSS전처리기는 재사용성과 시간비용을 줄인다는 점, 유지관리가 용이하다는 장점이 있습니다. 단점) 바드시 컴파일과정 거쳐야 한다는 점

스타일시트를 쪼개서 관리한다는 것이 mixin 모듈화와 같다

FE (Frontend)

웹페이지가 사용자에게 보여지는 과정에 대해서 설명하세요. (처리)

프로세싱 이전까지가 서버의 과정 프로세싱 이후가 프론트엔드 과정

프론트엔드 입장에서 신경써야 할 보안은 어떤 것들이 있나요? (링크)

CSRF 정의와 예방법

💡

CSRF(Cross-Site Request Forgery)는 공격자가 마치 사용자인 것 처럼 서버에 위조 요청을 하는 공격을 말한다. 사용자를 피싱사이트에 접속하게 하여, 특정 악성 코드가 실행하도록 하는 방법이다. CSRF 공격은referer 검증을 통해 방어할 수 있는데, HTTP의 referer는 방문한 사이트에 대한 정보를 가지고 있어, 요청이 들어왔을 때 피싱사이트에 들어온 것을 발견하여 방어하는 방법이다.

XSS 정의와 예방법

💡

XSS( Cross-Site-Scripting) Xss는 공격자가스크립트를 삽입하여 클라이언트에 저장되어 있는 쿠키,세션의 정보를 탈취하거나, 댓글등에 악성코드를 심어놓는 것을 말한다. 이러한 XSS 공격은 쿠키나세션에 정보를 보관하지 않고 서버에 중요정보를 저장하거나, 해당 정보를 암호화하는 방법으로 방지할 수 있으며, html 코드를 다른 문자열로 변환시켜 스크립트로 실행되지 못하게하는securecoding 방법이 있다.

React (리액트) 관련 질문 모음입니다. (여기까지할것)

https://velog.io/@dojunggeun/React-interview-questions-15

프로젝트 때 왜 리액트 사용하셨어요?

💡

npm 트렌드를 검색했을 때, 점유율이 가장 높았고. SPA의 대표 프레임워크이기 때문에, 프론트엔드 개발자로서 SPA를 만들어보고 싶은 욕심이 있었습니다.

https://docs.microsoft.com/ko-kr/dotnet/architecture/modern-web-apps-azure/choose-between-traditional-web-and-single-page-apps

개념과 장점, 그리고 컴포넌트란 무엇인가요?

💡

리액트는 페이스북에서 개발한 UI를 쉽게 만들어 내기 위한 js 라이브러리입니다. 1) 리액트는 데이터가 단방향으로 흐르게 동작하는 큰 특징을 가지고 있습니다. (DOM TRee와 같이 뿌리에서 아래로 props) 2) 리액트는 virtual DOM 을 이용하여 리렌더링 시 기존과 달리진 부분만을 변경하여, 성능을 개선합니다. (필요한 부분 최소로 갱신) 3) 컴포넌트 단위로 쪼개어 재사용성, 유지보수 장점 컴포넌트는 하나의 기능단위로 묶여있는 코드의 집합 (재사용가능)

 

리액트의 내부 작동 원리를 설명하세요.

💡

HTML은 브라우저가 문서 객체 모델(DOM)을 구성하기 위해 따라야 하는 절차라고 말할 수 있습니다. HTML 문서를 이루는 엘리먼트는 브라우저가 HTML 문서를 읽어 들이면 DOM 엘리먼트가 되고, 이 DOM이 화면에 사용자 인터페이스를 표시합니다. 리액트는 이러한 DOM 엘리먼트를 직접 조작하지 않습니다. 대신 리액트가 가상 DOM을 생성하고 브라우저가 이를 렌더링하도록 하는 방식을 따릅니다. 이러한 가상 DOM을 리액트 엘리먼트라고 합니다. 리액트 엘리먼트는 개념상 HTML 엘리먼트와 비슷하지만 실제로는 자바스크립트 객체입니다. 따라서 HTML의 DOM API를 직접 다루는 것보다 자바스크립트 객체인 리액트 엘리먼트를 직접 다루는 편이 훨씬 빠릅니다.

리액트에 있는 라이프사이클과 각 라이프사이클의 역할을 설명하세요.

💡

생성, 업데이트 ,제거 단계가 존재한다. 중요한 일이 발생할 때마다 렌더를 진행 (최초생성, new props, setState ,..) 라이프사이클 메소드 존재 DOM생성단계에서 렌더이후 호출 componentDid-Mount, DOM업데이트 단계에서 컴포넌트가 업데이트 후(상태변경) componentDid-Update DOM제거단계에서 화면에서 사라지기 전 componentWillUnmount

리액트 라우터 같은 Client side routing 에 대한 설명하세요.

💡

SPA에서 다른 종류의 화면을 보여주기 위해서 주소를 생성하는 것을 클라이언트에서 진행하는 것을 말합니다. 특정 URL로 들어갔을 경우, 특정 페이지 및 컴포넌트를 보여주도록 합니다.

state를 직접 변경하지 않고 setState를 사용하는 이유에 대해서 설명하세요.

💡

state가 변경되었다는 것은 리액트엔진에 알리기 위해서입니다. 만약 컴포넌트의 state를 직접 변경하려고 시도한다면, 리액트는 컴포넌트를 다시 렌더링해야 하는지 알 수 있는 방법이 없습니다. setState() 메소드를 사용하면 리액트는 컴포넌트의 UI를 업데이트할 수 있습니다.

props drilling 이란 무엇인가요?

💡

prop drilling은 부모 컴포넌트에서 하위 컴포넌트(자식 컴포넌트의 자식 컴포넌트 등으)로 데이터를 전달할 때 발생하는 것으로, props를 전달하는 것 외에는 props를 필요로 하지 않는 다른 컴포넌트를 통해 “drilling”(내리꽂기) 됩니다. 컴포넌트를 리팩토링하고, 컴포넌트를 더 작은 컴포넌트들로 쪼개지 않고, state를 가장 가까운 부모 컨포넌트와만 공유함으로써 prop drilling 회피할 수 있습니다. 위계상 멀리/깊게(deep/far)떨어진 컴포넌트와 state를 공유할 때, React의 Context API 혹은 Redux와 같은 state 관리 라이브러리를 사용할 수 있습니다.

리액트 hooks 의 장점은 무엇인가요?

💡

[개념] Hooks는 클래스 기반 컴포넌트의 장점(예를 들면 내부 state와 생명주기 메소드)을 함수형 컴포넌트로 가져오려는 리액트의 시도입니다. [장점] 클래스 기반 컴포넌트, lifecycle hooks, this의 필요성이 사라집니다. 공통 기능을 커스텀 hook로 만들어서 로직을 재사용하기 쉬워집니다. 컴포넌트 자체에서 로직을 분리할 수 있어서 읽기 쉽고 테스트하기 쉬운 코드를 작성할 수 있습니다.

virtual DOM 이 무엇인가요?

💡

Virtual DOM은 애플리케이션의 UI를 구성하는 HTML 엘리먼트를 메모리 내에서 구현한 것입니다. 컴포넌트가 다시 렌더링될 때, virtual DOM은 업데이트할 요소의 목록을 만들기 위해 기존의 DOM 모델에서 변경되는 사항을 비교합니다. DOM 전체를 다시 렌더링할 필요 없이 실제 DOM에 필요한 최소한만 변경하여 효율성이 높다는 것이 큰 장점입니다.

가상돔이 갱신하는 방법은 setState() 함수를 호출하거나 render함수를 통해 직접 돔을 변경할 때

JSX가 무엇인가요?

💡

JSX는 HTML처럼 보이는 코드를 작성할 수 있게 해주는 자바스크립트 문법의 확장입니다. JSX는 자바스크립트 함수 호출 방식으로 컴파일되어 컴포넌트에 대한 마크업을 만들 수 있는 더 좋은 방법을 제공합니다.