학교 현장 실습을 지원했는데, Front-end 직무에 맞춰 CS 지식을 물어보는 task를 받았다. task 항목을 쭉 읽어 보니 내가 부족한 것을 많이 느꼈다. ㅜㅜ
그래도 시간을 꽤나 투자해서 책, 구글링을 통해 정보를 습득하고 나의 언어로 나름 다시 작성하여 제출하였다. 아마 프론트엔드 기술 면접 문제은행에 나와 있는 문제들인 듯하여 여기에 나의 답변을 기록해 두려고 한다.
1. 일반적인 질문
a. 어제/이번 주에 무엇을 공부하셨나요?
: React.JS를 활용하여 <서울시 채식 식당 찾기 웹서비스> 제작 프로젝트를 진행 중입니다. UI를 좀 더 보기 좋고 쉽게 만들기 위해 UI 라이브러리 적용에 대한 공부를 진행했습니다. 여러 UI 라이브러리 중, 비교적 최근 개발되어 접근성이 뛰어나고 import를 통합하여 보여주어 코드 가독성이 좋은 chakra를 선택하여 적용하는 것을 공부했습니다.
백엔드와 프론트엔드를 연결해 주는 작업을 앞두고 있어 REST API에 대하여 공부했습니다.
b. 최근에 당신이 경험한 기술적인 문제는 무엇이고 그것을 어떻게 해결했나요?
: 카카오 소셜 로그인 구현에서 백엔드와 연결하는 과정에 있어 오류를 겪었습니다. 프론트엔드에서 카카오 서버에게 인가 코드를 받아올 때 Redirect URL을 설정해 주어야 하는데, 백엔드에서 먼저 테스트 구현을 해 두어서 Redirect URL이 백엔드 접근 기준 포트 번호로 되어 있어 프론트에서 접근이 불가능하여 연결이 불가했습니다. 구글링 후 여러 블로그 문서에서 Redirect URL을 프론트가 접근 가능한 주소로 변경하라는 내용을 보고 변경 후 해결하였습니다.
c. 선호하는 개발 환경에 대해 자유롭게 이야기해 주세요.
: IDE는 VScode를 가장 선호합니다. 여러 확장 프로그램을 이용하여 사용자 기준으로 가독성, 배경 등을 편집할 수 있고 가벼워서 좋습니다.
언어로는 다양한 컴포넌트(라이브러리)를 제공하는 React.JS를 사용을 선호합니다.
알고리즘 문제 풀이의 경우에는 Visual Studio에서 c++로 줄곧 연습해 왔기 때문에 c++ 로 푸는 것을 선호합니다.
d. 버전 관리 시스템은 어떤 것들을 사용해보셨습니까?
: 사용 경험이 있는 시스템은Git이 유일합니다. 각 페이지별로 브랜치를 생성하여 코드 수정 내역들을 관리 후 github에 커밋 하였습니다. 하지만 사용 경험이 많지 않아 익숙하지 않습니다.
2. HTML
a. 다국어가 포함된 페이지는 어떤 방식으로 제공하나요?
: http의 요청 헤더의 accept language 정보 또는 IP로 지역을 판단하여 알맞은 언어를 제공하는 방식이 있습니다.
b. 쿠키(Cookies)와 세션저장소(sessionStorage)와 로컬저장소(localStorage)의 차이점을 설명해주세요.
: 명시된 세 가지 모두 브라우저에서 데이터 저장소 역할을 합니다.
쿠키는 저장 공간이 가장 작으며, 클라이언트의 상태 정보를 만료 기한까지 서버와 로컬에 저장해 두고 참조합니다. 쿠키의 정보를 서버로 전송하면 지속적 데이터 교환을 위하여 계속 서버로 쿠키의 정보를 전송합니다. (ex.다시 보지 않기 팝업창)
세션 저장소와 로컬 저장소는 웹 저장소입니다. 웹 스토리지는 로컬에만 정보를 저장합니다.
세션 저장소는 세션 종료, 즉 브라우저를 종료할 경우 클라이언트 정보를 삭제합니다. (ex. 입력 폼 정보)
로컬 저장소는 사용자가 직접 삭제하기 전까지 정보를 영구적으로 저장합니다.
(ex. 로그인 정보 저장)
c. script>, script async와 script defer의 차이점에 관해 설명해주세요.
: 보통 body 태그가 끝날 때 script를 지정합니다. 왜냐하면 브라우저가 html을 읽다가 스크립트를 만나면, 스크립트를 전부 실행할 때까지 그 아래의 html을 읽지 못하고, 이는 웹페이지 로딩이 길어지는 원인이 되기 때문입니다.
이에 관한 해결책으로 백그라운드에서 script를 다운로드 하는 script async 방식과 script defer 방식이 있습니다.
script async 방식은 html의 파싱과는 독립적으로 script 가 다운로드 완료되면 바로 실행합니다. 이는 실행 순서와 관련 없는 광고, 방문자 수 카운팅 등에 적합합니다.
반면 script defer 방식은 html 파싱이 끝날 때까지 지연되었다가 파싱 완료 후 동시 실행됩니다. 이는 실행 순서가 중요한 페이지 구현에 적합합니다.
3. CSS
a. 그리드 시스템(Grid system)을 사용한 적이 있나요? 있다면 어떠한 것을 선호하나요?
: 최근 진행하는 프로젝트에서 식당 정보를 표시하는 카드형 컴포넌트 여러 개를 불러와야 했기 때문에 chakra 라이브러리의 그리드 시스템을 사용하였습니다.
b. CSS에서 'C’는 Cascading을 의미합니다. Cascading에 관해서 설명해주세요. 또 cascading system의 장점은 무엇인가요?
: cascading의 사전적 정의는 <폭포 같은, 연속적인, 계속되는>입니다. 이는 상위 요소에서 지정한 속성이 우선되어 하위 요소에까지 영향을 미치는 방식의 CSS를 나타냅니다. Cascading system을 사용하면 각 HTML 요소마다 스타일을 일일이 지정하지 않아도 되므로 코드 길이 단축과 속도 향상에 도움이 됩니다.
4. Javascript
a. null과 undefined 그리고 undeclared의 차이점은 무엇인가요?
■ 두개를 구분하기 위해서는 어떻게 하면 될까요?
: undefined는 변수가 선언되었으나 아무런 값도 할당되지 않은 상태입니다.
undeclared는 변수도 선언되지 않은 상태입니다. 이는 오류를 출력합니다.
Null은 변수 선언 후, null 값(빈 값)을 할당한 상태입니다.
Null과 undefined를 구분하기 위해서는 == 연산자가 아닌 === 연산자 혹은 typeof 키워드를 사용합니다.
b. mutable object와 immutable object에 관해 설명해주세요.
■ JavaScript에서 immutable 객체의 예를 들어보세요.
■ immutability의 장/단점은 무엇인가요?
■ 자신의 코드에서 불변성(immutability를) 어떻게 달성할 수 있나요?
: immutable object는 생성 후 상태를 바꿀 수 없는 객체를 말합니다. 예시로 객체를 복사하여 불변 객체를 만들거나 boolean, int, null, undefined, string 타입들이 있습니다.
불변성의 장점은 변경이 적고, 동기화 없이도 안전하게 공유가 가능하다는 점입니다. 단점은 객체의 상태 변경이 불가하고 변경을 원할 경우 새로운 객체를 생성해야 한다는 점입니다.
불변성을 달성한다는 것은 유지보수가 가능하고 가독성이 좋은 코드를 뜻한다고 생각합니다. 불변성을 지켜 명시적으로 작성된 코드는 흐름을 따라가며 이해가 쉽기 때문입니다. 이는 리액트에서 state와 props을 사용하며 지켜가는 노력을 하고 있습니다.
