🗓️ 날짜 : 2023.09.04
📚 할 일 : 10to7, 1day 1commit 1post, 1mon 3project
📝 오늘의 목표 : 면접준비!
⌛ 공부시간 : 10:00 ~ 12:00 / 20:00 ~ 23:00 🥲면접 문답 정리
1) 자신의 강점과 약점은 무엇인가요?
제 개발자로서의 강점은 맡은 바 임무를 반드시 완수한다는 점입니다.
책임이 부여된 일이라면 목표를 달성하기 위해 끊임없이 탐구하고
정답을 찾기 위해서 부단히 노력하는 성격입니다.
반면에 제 약점은 종종 고지식 할 정도로 하나에만 몰두한다는 점입니다.
이러한 약점을 보완하기 위해서 폭 넓게 사고하고
타인의 의견을 많이 듣고 다시한번 생각해보는 습관을 노력하고 있습니다.
2) 어떤 프레임워크를 사용하여 개발했나요? 왜 그 프레임워크를 선택했나요?
저는 리액트와 Next JS 를 선호합니다.
리액트는 컴포넌트 기반 아키텍쳐를 사용하여, 마치 레고를 조립하듯
재사용성이 높은 구조를 만들 수 있으며 그렇기 때문에 개발생산성과 유지보수가
용이했습니다. 또한, 많은 개발자들이 사용하는 만큼 레퍼런스가 많아
새로운 기술의 학습과 적용이 쉽다고 생각합니다.
Next JS 는 리액트 기반 프레임워크로 리액트를 주로 사용하는 개발자에게
러닝커브가 낮고 SSR과 SSG를 쉽게 사용할 수 있도록 지원해줌으로써,
효율적인 웹 개발이 가능하다고 생각합니다.
3) RESTful API에 대해 설명해주세요.
RESTful API는 Representational State Transfer의 원칙을 따르는
API 아키텍처로, 상태를 가지고 있지 않으며 클라이언트와 서버가 어떻게 데이터를
처리해야 할지에 대한 명세를 제공합니다.
RESTful API는 특히 각각의 HTTP 메소드가 명확한 역할을 가지고 있어서
CRUD 연산을 보다 명확하게 할 수 있습니다.
4) 그렇다면 HTTP 메소드에 대한 설명도 해주실 수 있나요?
주로 사용되는 HTTP 메소드는
GET, POST, PUT, PATCH, DELETE 가 있으며,
각각 리소스의 조회, 생성, 전체 수정, 일부 수정, 삭제를 의미합니다.
5) 브라우저 렌더링 원리에 대해서 설명해보세요.
우선, 브라우저가 HTML, CSS ,JS 파일을 서버로부터 받아옵니다.
이후에 HTML은 DOM Tree 로, CSS 는 CSSOM 트리로 변환되고,
두개의 트리가 병합되어 Render Tree 를 생성하게 됩니다.
병합된 Render 트리를 기반으로 브라우저가 레이아웃을 계산합니다.
레이아웃을 계산한 이후에 실제 브라우저에 Painting 하는 과정을 거치고,
그 다음 Painting 된 레이어를 합쳐서 최종적으로 화면에 표시할 이미지를
Compositing 합니다. 다 끝났다면 실제로 화면에 렌더링 되게 됩니다.
6) 가장 최근에 해결한 기술적인 문제는 무엇이었나요?
최근 프로젝트에서 Tailwind CSS 를 사용하여 개발을 진행할 때,
하나의 컴포넌트를 만들어놓고 Props 로 특정 조건을 받아서
여러가지의 형태의 버튼을 렌더링하는 컴포넌트를 만들고자 하였습니다.
그런데 CSS의 공통 속성을 무시하는 특성때문에 원하는 스타일링을 할 수 없었습니다.
또한 조건을 전부 Switch 문으로 처리하다 보니
코드의 가독성이 떨어지고 제대로 레이아웃이 적용되지 않는 등의 버그가 종종 있었습니다.
이러한 문제를 tailwind 로 작성한 CSS 의 중첩되는 클래스를
override 해주는 역할을 하는 twMerge와 조건부 렌더를 쉽게 작성할 수 있게 해주는
clsx 라이브러리를 하나의 유틸함수로 만들어 해결할 수 있었습니다.
7) "==" 와 "==="의 차이는 무엇인가요?
값이 '동등' 한지, '일치'하는지를 묻는 연산자 입니다.
"==" 연산자는 동등 연산자라고 하며 피연산자 두 값을 비교할 때,
자동으로 형변환을 수행하여 데이터가 다르더라도 값이 같다면 true 를 반환합니다.
"===" 연산자는 일치 연산자라고 하며 자동형변환이 일어나지 않고
값과 타입이 모두 일치해야만 true 를 반환합니다.
실제 코드를 작성할 때 동등 연산자는 의도하지 않은 결과를 출력할 수도 있기 때문에
저는 거의 모든 코드에서 일치 연산자만 사용하는 편입니다.
8) 클로저란 무엇인가요?
이해하기가 굉장히 어려웠던 개념이었던 기억이 납니다.
제가 이해한 클로저는 어떤 함수가 자신이 생성될 때의 환경을 기억하는 함수 라고 정의했습니다.
이를 활용하여 내부 함수가 상위 함수 스코프의 변수에 접근할 수 있게 됩니다.
간단한 예시로, 리액트 환경에서 함수형 컴포넌트를 사용할 때,
useState 의 상태 관리 문제를 해결하는 방법도 자바스크립트의
클로저 덕분이라고 할 수 있겠습니다.
9) 이벤트 버블링에 대해서 설명해주세요.
이벤트 버블링은 DOM 요소에서 어떤 이벤트가 발생했다면,
해당 요소부터 가장 상위의 요소까지 이벤트가 전파되는 현상입니다.
일일히 이벤트를 지정해줄 필요 없이 효율적으로 이벤트를 관리할 수 있습니다.
이벤트 버블링을 막기 위해서 stopPropagation 같은 메소드를 사용할 수도 있지만,
예상하기 힘든 문제를 야기할 수 있어서 잘 사용하지 않았던 것 같습니다.
10) Static Site Generator에 대해서 아시나요?
Static Site Generator 라고 하며, 서버에서 미리 HTML 을 완성해서
클라이언트에 보내주는 방식입니다. 서버에서 미리 HTML 을 만들어주니까
페이지 로딩시간이 빠르고 렌더링을 위한 자바스크립트가 필요없고,
SEO 최적화나 보안 안정성 측면에서 유리하다고 알고있습니다.
단지, 정적인 데이터만 가지고 있을 수 있기 때문에
특정 조건에 의해 가변적으로 변하는 페이지에는 적합하지 않습니다.
11) Flex와 Grid의 차이점에 대해서 설명해보세요.
CSS 레이아웃 구성 방식입니다.
Flex 는 주로 가로 축, 세로 축 같은 단일 축 방향 레이아웃을 구성하는 데 사용되며,
Grid 는 가로세로 3x3, 4x4 같은 2차원 레이아웃을 구성하는데 사용됩니다.
단일 축에서 유동적인 레이아웃을 하려면 Flex를,
미리 이러이러한 크기를 가지는 레이아웃을 하려면 Grid 를 사용할 것 같습니다.
예상되는 내일의 목표
- 면접준비
- 유튜브 클론코딩 프로젝트 이어서
