[2회차] Study

[devwqc]

매회 차마다 "[n 회차] Study"라는 제목으로 디스커션이 올라오면 아래 템플릿으로 면접관의 입장에서 댓글 달아주시면 됩니다.

QnA를 작성하실 때는 면접관 역할에서 본인이 했던 질문과 지원자의 답변 내용을 작성하면 됩니다.
답변 내용을 전부 받아 적기 힘들면 키워드 위주로 작성해 주셔도 됩니다.
기술 질문은 예상 답변도 작성해 주시면 감사드립니다.

## 역할
면접관 - 
지원자 - 

## QnA
### Q. 

A. 

[devwqc]

역할

면접관 - 봉찬
지원자 - 지원

전반적인 느낌

긴장한 기색 하나 없이 대답은 잘한다.
알고 있는 지식이더라도 조금 고민하는 척하고 대답해도 좋을 거 같다.

1분 자기소개

A. 전반적으로 이력서의 자기소개 항목에 있는 내용을 말씀하셨다.

조금 천천히 말해도 될 듯. 이건 내가 받아 적느라 그랬을 수 있어요
마지막에 지원한 회사에 맞는 지원 동기도 추가하면 좋을 거 같아요

QnA

1. 자기소개에 오너쉽을 가진다고 했는데 본인이 생각하기에 오너쉽은 무엇인가요?

A. 오너쉽이 없이 개발할 때는 제가 맡은 플로우만 이해하고 전체적인 플로우를 이해하지 않아서 다른 페이지와 상호작용에서 오류가 많이 발생했었는데 오너쉽을 가지고 개발 했을 때는 전체적인 서비스 플로우를 파악하고 보다 나은 성과가 있었다.

질문에서 물어본 본인이 생각하기는 오너쉽은 뭔지 대답은 안 해주신 거 같아요!

2. 본인의 서비스를 직접 사용해 본 적이 있나요?

A. 사용해 본 적 없습니다.

그래도 사용했다고 하세요🤣

3. 어떻게 하면 클라이언트가 좋아하는 방향으로 개선할 수 있을지 시선을 바꾸어 생각한다고 했는데 기억나는 경험이 있으신가요?

A. 네이버 푸드라는 공동 배달앱에서 로그인, 회원가입 페이지에서 input이 많이 있었다. input에 placeholder가 있는데 워낙 input이 많으니까 정보를 입력했을 때 placeholder가 사라져서 사용자가 나중에 그 칸에 무엇을 입력 했는지 까먹을 수 있기 때문에 MUI를 이용한 애니메이션으로 input 위에 입력해야 하는 정보를 표현했다.

3-1. 보통 input에는 label을 넣어서 placeholder가 사라지더라도 해당 값이 어떤 입력 값인지 확인할 수 있지 않나요?

A. 맞네요...ㅎ

4. CSS 박스 모델에 대해서 말씀해 주세요.

A. 잘 모르겠습니다.

박스 모델
모든 HTML 요소는 박스로 이루어져 있다. 브라우저 렌더링 엔진은 레이아웃을 계산할 때 각 요소의 박스 모델을 참고한다.
내용(content), 패딩(padding), 테두리(border), 마진(margin)으로 구성된다.
요소의 width, height 속성은 기본적으로 내용(content) 영역만을 의미하지만, box-sizing 속성을 border-box로 설정하면 border와 padding을 포함한 크기를 조절할 수 있다.

5. 브라우저 렌더링 과정

A. HTML, CSS 파일을 파싱해서 각각 트리를 만든다. 각 트리를 합쳐서 렌더링 트리를 만든다. 레이아웃 단계로 각 노드의 크기와 위치를 계산한다. 화면상에 표시될 실제 픽셀 단위로 변환하고 레이어를 만든다. 각 레이어를 합치는 컴포지트 단계를 거쳐서 브라우저 렌더링이 된다.

DOM, CSSOM 키워드도 말하면 좋을 거 같아요

6. 스코프와 스코프 체인에 대해서 말씀해 주세요.

A. 잘 모르겠습니다.

스코프
식별자가 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정되는 것이다.
자바스크립트는 렉시컬 스코프를 따른다.
함수 호출 -> 실행 컨텍스트 생성 -> 실행 컨텍스트 스택에 실행 컨텍스트 push -> 렉시컬 환경 생성

스코프 체인
렉시컬 환경에는 스코프 정보와 외부 렉시컬 환경에 대한 참조 프로퍼티를 지니는데 어떤 식별자를 참조할 때 현재 스코프에서 검색할 수 없으면 외부 렉시컬 환경에 대한 참조를 통해 상위 스코프에서 식별자를 검색한다. 이렇게 전역 객체까지 거슬러 올라가는 것을 스코프 체인이라 한다.

7. 리액트에서 메모이제이션 훅에 대해서 아시나요?

A. 잘 모르겠습니다.

7-1. 메모이제이션 훅에는 useMemo, useCallback 같은 것이 있는데 알아두시면 좋을 거 같아요.

메모이제이션 훅 useMemo와 useCallback의 차이
참조 동일성, 비용이 많이 드는 계산을 위해 사용된다.
메모이제이션을 위한 비용(오버헤드)이 발생하기 때문에 무분별한 메모이제이션 사용은 바람직하지 않다.

useMemo
렌더링 중에 발생하는 연산량이 큰 함수의 결과값을 메모이제이션하며, 이전 결과값을 재사용 할 수 있도록 도와준다.

useCallback
이벤트 핸들러와 같은 함수를 메모이제이션 할 때 사용하는 훅이다.
컴포넌트가 리렌더링 될 때마다 함수를 새로 생성하는 것을 방지하고 이전에 생성한 함수를 재사용하여 불필요한 렌더링을 줄여준다.

8. CORS는 무엇인가요? 경험한 적이 있나요? 해결 방안은 무엇인가요?

A. 출처가 다른 자원을 공유한다는 뜻이다. 유튜브 카피 킬러를 할 때 많이 떴었는데 AI에 많이 관련돼서 떠서 그 파트를 맡으신 분이 해결해 주셔서 해결 방안은 잘 모르겠습니다.

특정 프로젝트 진행에서 경험했다고 말하지 말고 그냥 경험한 적이 있었고 아래 대응 방식 중에서 하나로 해결해 봤다고 말하면 좋을 거 같아요

CORS
출처를 구성하는 세 요소 프로토콜, 도메인(호스트 네임), 포트 중에서 하나라도 나르면 CORS 에러를 만나게 된다.
SOP가 서로 다른 출처일 때 리소스 요청과 응답을 차단하는 정책이라면, CORS는 반대로 서로 다른 출처라도 리소스 요청, 응답을 허용할 수 있도록 하는 정책이다.

CORS 에러 대응
서버에서 Access-Control-Allow-Origin 응답 헤더 설정하기, 프록서 서버 사용하기가 있습니다.

8-1. 그럼 출처는 무엇을 의미하나요?

A. 프로토콜, 호스트, 포트를 출처로 알고 있습니다.

출처(Origin)
프로토콜, 도메인(호스트 네임), 포트로 구성된다. 이 중에서 하나라도 다르면 CORS를 만나게 된다.

9. 인프랩 CTO이신 이동욱님이 지원자님의 대학 선배인데 알고 계셨나요?

A. 진짜요? 호돌맨님이요?

10. 협업 프로젝트 경험이 많으신 거 같은데 프로젝트를 진행할 때 본인은 이끄는 편인가요? 따르는 편인가요?

A. 주로 따르는 편입니다.

10-1. 협업을 진행할 때 가장 중요하게 생각하시는 덕목은 무엇일까요?

A. 책임감과 끈기가 가장 큰 덕목이라고 생각한다. 본인이 책임감을 가지고 있으면 하기 싫다고 해서 미룰 수 있는 부분이 아니기 때문에 협업에서는 책임감이 가장 중요하다고 생각한다.

11. 프로토타입과 프로토타입 체이닝은 무엇인가요?

A. 잘 모르겠습니다.

프로토타입
자신의 부모 역할을 담당하는 객체를 의미한다.
자신이 다른 객체의 원형이 되는 객체라고 볼 수 있다.

프로토타입 체이닝
객체의 프로퍼티(또는 메서드)에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 프로토타입의 프로퍼티를 순차적으로 검색하는 것이다.
[[Prototype]] 내부 슬롯은 __proto__ 접근자 프로퍼티를 통해서 간접적으로 접근할 수 있다.

12. Node.js란 무엇인가요? 어떤 패키지 관리 도구를 사용하셨나요?

A. 노드는 HTTP 서버를 포함하고 있기 때문에 별도의 소프트웨어가 없어도 동작 가능한 소프트웨어 플랫폼이다.

Node.js
자바스크립트 런타임이다. Node.js를 통해서 자바스크립트는 브라우저에서 벗어나 실행될 수 있다.
non-blocking 덕분에 채팅이나 SNS에 자주 사용된다.
싱글 스레드를 사용하기 때문에 많은 CPU 연산을 요구하면 감당하기 어려울 수 있다. 이미지, 비디오, 대규모 데이터 처리를 위한 서버로는 적합하지 않다.

12-1. npm은 무엇인가요?

A. 노드로 만들어진 모듈을 관리해주는 도구.

npm
Node.js 환경에서 동작하는 패키지를 개발, 배포, 공유하기 위한 도구이다.

13. Webpack, Babel, Polyfill은 무엇인가요?

A. 웹팩은 파일 단위로 자바스크립트 모듈 관리가 가능하다. 실제로 코딩할 때 HTML, CSS, 이미지, JS 이런식으로 모든 파일을 하나씩 나눠서 모듈화 할 수 있다. 바벨과 폴리필은 잘 모르겠습니다.

Webpack
모듈 번들러, 웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구다.

바벨(Babel)
트랜스 파일러, 브라우저가 이해하지 못하는 새로운 문법을 이해할 수 있게 변환해 주는 역할을 한다.

폴리필(Polyfill)
브라우저가 지원하지 않는 기능을 지원하는 코드를 제공해주는 역할을 한다.

14. 같이 일하고 싶지 않은 사람은 어떤 유형인가요?

A. 본인 생각만을 고집하는 사람이 가장 같이 일하기 힘들다고 생각한다. 경험으로 고집 중에서도 갈등이 많이 생겼던 케이스가 제출 마지막 날까지 기능보다 디자인을 우선 시 했던 사람과 같이 일 했을 때 힘들었다.

14-1. 그럼 위에서 말한 같이 일하고 싶지 않은 사람 그 이상으로 회사에서 "이 사람이랑 절대 협업 할 수 없겠다" 싶은 사람이 있을 때 어떻게 하실 건가요?

A. 저는 아무리 힘든 사람이라고 하더라도 그래도 하는 편이다. 저 말고 잘 맞는 다른 사람이 계실 수도 있을 거 같아서 회사에 말은 못 할 거 같고 그냥 참고 일하는 쪽으로 선택할 거 같다.

15. HOC(고차 컴포넌트)란? 사용해 보셨나요?

A. 재사용을 위한 것이다. 사용해 본 적은 없다.

HOC(고차 컴포넌트)
컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다. '컴포넌트 로직 재사용'을 위한 패턴이다.

사용 예
URL에서 특정 값을 받아서 그 값이 있을 때만 컴포넌트들이 보여야 하는 상황이 있다고 가정하자.
그럼 각 컴포넌트마다 URL에서 그 값을 꺼내서 처리하는 로직이 들어가는데 이때 HOC를 활용하면 한 곳에서 해당 로직을 추상화 할 수 있다.
커스텀 훅으로 HOC의 입지가 많이 낮아지긴 했지만 여전히 복잡하고 재사용 가능한 로직을 활용할 때 많이 사용된다.

16. REST API에 대해서 말씀해 주세요.

A. GET, POST, DELETE 대표적으로 이렇게 제공이 된다. 이런 것들을 이용해서 통신하는 것이 REST API입니다.

REST API
REST 기반으로 만들어진 API를 의미한다. HTTP URI를 통해 자원(resource)을 명시하고, HTTP Method(GET, POST, DELETE 등)을 통해 해당 자원에 대한 행위를 적용하는 것이다.
REST API는 다음과 같은 설계 원칙을 준수해야 한다. 균일한 인터페이스, 클라이언트-서버 분리, 무상태, 캐시 가능성, 계층화된 시스템 아키텍처

17. 프론트엔드 공부는 어떻게 하고 계신가요?

A. 강의를 단순히 듣기만 해서는 개념 이해가 잘 안돼서 직접 코드를 짜고 전에 짰던 코드를 리팩토링 하는 방식으로 공부하고 있다.

17-1. 그럼 공식문서도 활용하시나요?

A. 공식문서를 처음부터 다 읽진 않는다. 개념을 검색할 때 활용한다.

공식문서를 활용한다고 말하고 주로 개념을 공부하고 검색할 때 활용한다고 말하면 더 좋을 거 같아요

17-2. 요즘 어떤 공부를 하고 계신가요?

A. 타입스크립트, 코드 작성 시점에 코드 오류를 발견해줘서 타입스크립트를 썼을 때 좋았던 경험이 있어서 타입스크립트를 공부하고 있다.

17-2-1. 타입스크립트를 말씀해 주셔서 얘기하는데 타입스크립트에서 interface와 type의 차이에 대해서 말씀해 주세요.

A. interface는 객체 타입을 지정할 때 사용하고 type은 모든 타입을 선언할 때 사용하는 것으로 알고 있습니다.

inteface와 type
타입을 확장할 때 쓰는 키워드가 다르다.
선언적 확장의 가능 여부
computed property name 사용 가능 여부
확장 시 캐싱 여부

interface
extends 키워드로 타입을 확장한다.
선언적 확장이 가능하여 동일한 interface 명을 사용해서 타입을 정의하면 타입이 합쳐진다.
유니온 타입, 튜플 타입이 불가능하다.
computed property name 사용 불가능
확장 시 캐싱된다.

type
&(intersection type) 키워드로 타입을 확장한다.
선언적 확장이 불가능하다.
유니온 타입, 튜플 타입이 가능하다.
computed property name 사용 가능
확장 시 캐싱되지 않는다

18. 희망 연봉이 어떻게 되실까요?

A. 4000으로 생각하고 있습니다.

18-1. 저희가 지원님과 함께하고 싶은데 희망 연봉을 맞춰줄 수 없다면 저희 회사를 포기하실 건가요?

A. 4000이하여도 타협 가능한 선에서 생각해 볼 거 같다.

19. 기업을 선택하는 기준이 있을까요?

A. 회사의 전반적인 분위기, 팀 별로 커뮤니케이션 외에는 개인적인 공간이 보장되는 회사였으면 좋겠다. 빠르게 프로젝트를 출시하기 위해서 코드를 비효율적으로 짜는 비지니스 관점 보다는 처음에는 조금 힘들더라도 코드를 클린하게 짜서 나중에 유지보수 하기 좋은 개발 관점 프로세스를 지닌 회사를 선호한다.

etc. 이력서에 결제, 장바구니 관련해서 내용을 추가하면 좋을 거 같고 장바구니의 낙관적 업데이트는 본인이 하지 않았어도 넣어주시면 좋을 거 같아요.

저는 장바구니가 낙관적 업데이트 되어 있는 줄 알았는데 아닌 거 같아요!
낙관적 업데이트 관련된 부분은 쓰지 않는 것이 좋을 거 같네요

[bokeeeey]

역할

면접관 - 김보경
지원자 - 김민영

QnA

Q. 1분 자기소개 부탁드립니다

A.

• 협업을 중시하는 개발 경험을 통해서 소통의 중요성을 배웠다.
• 개발 과정에서 발생하는 문제들을 효율적으로 관리
• 팀원들이 이해하기 쉬운 코드를 작성하는데 중점을 두었음
• 새로운걸 학습하고 새로운 환경에 적응하는데 자신이 있음
• 사용자 경험 언급
• 팀과 함께 성장하는 개발자가 되고 싶다

전체적인 느낌으로는 개발을 시작하고 어떤걸 깎아 나아왔는지 혹은 어떤 개발자가 되고싶은지 조금 더 구체적으로 표현해도 좋을거같아요
상대방이 민영님을 더 궁금해 할 수 있도록 개발을 하면서 고민하는 내용이나 방향 아니면 시작하게된 계기를 먼저 말함으로써 다음 들어올 수 있는 질문을 유리하게 끌고갈 수 있을듯 합니다.

Q. 1분 자기소개 꼬리질문 - 개발 과정에서 발생했던 문제들에 대하여 이야기 해주세요

A.

• 프로젝트를 진행하면서 문제를 숨히고 팀원들에게 공유하지 않은 경험이 있었는데 스노우볼이 크게 굴러갔던 경험이 있다
• 팀원에게 털어 놓았을 때 오랜시간 고민했던 내용이 간단하게 해결된 경험이 있다.
• 이로인해 눈치보면서 이야기하지 않는 팀원이 있는지 눈치껏 물어보고 자신의 트러블을 공유하는 습관을 가지게 되었다.

구체적인 사례와 그로인해 습득하게 된 내용으로 이야기하면 좋을거같아요 어떤 구체적인 사례가 있었는지 듣고싶어지는 내용이었습니다. 잘 정리하면 좋을거같아요

Q. 가장 기억애 남는 프로젝트는 무엇인가요?

A.

1. 첫 프로젝트

• 프로젝트 자체가 처음이었고, 협업의 걱정이 많았다.
• 역할 분배에서도 간단한 메인페이지를 담당했다.
• 하지만 시간이 지난 후에 더 큰 기능을 담당하지 못했다는 아쉬움이 커서 기억에 남았다.

2. 포잉마켓

• 첫번째 디자이너 백엔드 협업프로젝트
• 기획부터 서비스 런칭까지 끝까지 해내야 하는 상황에서의 어려움이 많았지만 그만큼 제대로 배우고 넘어간 경우도 많았다.

첫 프로젝트를 말씀하시면서 아쉬움을 많이 토로하셨는데 해당 질문은 어떤 프로젝트에서 어떤 문제를 겪었고 어떤 성장을 했는지 구체적인 사례를 말씀하시는게 더 좋을거라고 생각합니다
협업에서의 의사소통이나 처음 접한 기술스택을 사용하면서 겪은 내용을 바탕으로 성장한 스토리등 아쉬움의 내용보다는 성장 이야기가 있으면 좋을거같아요

Q. 꼬리질문 - 포잉마켓에서 민영님의 포지션은 무엇이었나요?

A.

• 헙업의 일정관리 담당
• 상품 관리의 공동구매 담당

협업에서의 일정관리를 언급하면서 민영님이 어떤 사람인지 어필가능한 소프트 스킬을 이야기하고,
기능구현에서는 조금 더 구체적인 구현 내용과 개선내용 등 이야기 할 수 있는 포인트가 많아보입니다.

Q. 이력서 내용 질문 - 웹소켓 구현에 대하여 이야기 해주세요

A.

• 2인 공동구매 진행시 디스카운트를 해주는 역할
• 어떤 기능인지 잘 설명하고 구현 과정 잘 이야기함 굿굿
• 처음 보는 기능이었을텐데 어려움은 없었는지?
  • 통신 중 클라이언트와 서버와 연결이 끊어지는 경우가 존재함
  • 소켓에서 자동으로 연결해주는 기능을 활용해서 데이터 손실을 방지하고 다시 연결되었들 때 기존 데이터를 다시 서버에 재전송 진행
  • 데이터 일관성으로 끝맺으셨는데 마무리가 매우 아쉬웠음

처음부터 구현과정에서의 문제점들을 해결한 내용도 같이 이야기하는게 좋은 소스라고 생각합니다 하지만 위에 적어놓았듯이 마무리가 아쉬웠어요
조금 더 정리해본다면 좋은 내용이 완성될 것 같습니다.

Q. 비전공에서 개발을 시작하게 된 계기

A.

• 운동으로 겪은 필라테스와 강사로 접근했던 필라테스의 분위기가 너무 달랐다
• 경쟁 구도인 직장 분위기에서 외로움을 느꼈다
• 영어회화 스터디 시작
• 타 스터디원 소개에서 국비 출신분의 경험을 듣고 배워보고 싶다고 생각하게 됨
• 학원을 알아보던 중 알고리즘 노출로 인한 코드잇 발견
• 커리큘럼을 보고 지원하고 도전하게 됨
• 배우면서 직업으로 ~~~ 하게됨 마무리.

이것만큼 중요한 질문이 없다고 생각합니다.
구두로 말씀드렸던 것 처럼 스토리가 있는 내용으로 다시 정리해보시는게 좋을거같아요 현재 말씀해주신 내용은 많이 아쉬움이 남습니다.

Q. 비전공으로 개발을 배우면서 어려웠던 점이 있으신가요?

A.

• 가장 어려웠던 점은 전공자가 아니어도 된다던 이야기와는 달리 전공자의 비중이 컷다.
• 전공자 분들이 부러웠던 이야기를 계속 말씀해주심
• 따라가기 벅찼다로 끝남

이 질문에서는 듣는입장(회사)에서 민영님이 새로운 환경에서 어떤 핏을 가지셨는지 알 수 있는 내용을 돌려말하는거라 생각해요
하지만 아쉬움만 토로하고 끝난 내용이 좋지 않았다고 생각합니다
오히려 환경에서 오는 어려움을 이겨낸 스토리를 풀어보시는게 어떨까요

Q. var, let, const 에 대해 설명해주세요

A. 전체적으로 무난하게 잘 이야기해주셨음

특징만 이야기 해주셨는데 var키워드의 문제점을 추가로 언급해도 좋을거같아요 내용은 굿

Q. async/await에 대해서 이야기해주세요

A. 구체적인 설명이 부족했음

제너레이터와 함께 비동기 로직을 동기처럼 실행할 수 있게 도와주는? 내용으로 구성하고 해당 로직이 나오기 전에 어떤 스타일들이 사용되었는지 어떤 배경으로 나온 로직인지를 이야기하면 좋을거같습니다.

Q. 동기 비동기에 대해 설명해주실 수 있을까요?

A. 동기 실행은 잘 설명하셨지만 비동기에서는 내용이 많이 부족했음

Q. 자바스크립트에서 비동기 처리가 가능한 이유에 대해 이야기해주세요

A. 대답 잘했음 굿

Q. 깊은 복사와 얕은 복사의 차이는 무엇이고 JS에서 각각을 구현하는 방법은 어떻게 되는지 설명해주실 수 있을까요?

A. 답변을 잘 못하셨음

공부... 해야겠죠...?

Q. 리액트 컴포넌트의 라이프사이클에 대해서 설명해주세요.

A. 제대로된 용어를 사용해서 정리할 필요가 있을거 같습니다

알고계시긴 한데 많이 부족했습니다 단어가 조금 더 정리되면 부족함 없는 답변이 나올거같아요

Q. vanilla.js와 비교하여 리액트를 사용하는 이유에 대해 설명해주실 수 있을까요?

A.

• 컴포넌트의 재사용성 언급 => 유지보수성과 연관지어 이야기함
• 호환성 문제 => 잘못된 답변이라고 생각합니다

리액트로 넘어가면서 어떤 부분이 개선되었는지 조금 더 알아보시면 좋을거같아요
렌더링 방식이 각각 어떤 특징과 문제점을 가지고있고 그에 따른 꼬리질문이 들어올 수 있는 질문이라고 생각합니다
ex) 가상돔과 같은 SSG와 CSR의 차이를 두고 들어오는 내용, 리액트의 단점 등등

Q. 리액트와 넥스트의 차이를 설명해주세요

A. 제대로 답변하지 못함

각각의 렌더링 방식을 바탕으로 이야기하는데 꼭 CSR이라고 SEO최적화가 되지 않는다는 것과 SSR이 무조건 좋다는 오래되고 잘못된 정보들을 바로잡아 설명 하실 수 있을만큼 깊은 답변을 준비하는게 좋을거같습니다.

Q. 프로젝트에서 최적화를 진행해본 경험이 있으신가요?

A. 없음

next.js를 사용하면서 진행한 이미지 최적화 내용이나 tanstack query 등등 다른 팀원들과 함께 고민했던 최적화 내용의 스토리를 잘 풀어서 설명하는게 좋을거같습니다.
최적화 만큼 답변하기 쉬운 내용이 없다고 생각해요

Q. 브라우저 주소창에 검색어를 입력했을 때 일어나는 일련의 과정에 대해서 이야기해주세요

A. 브라우저 렌더링 과정에 대해서만 이야기 함

해당 질문은 브라우저 렌더링 과정보다 조금 더 광범위한 답변을 준비하는게 좋을거같습니다.
CS지식을 아울러 네트워크 등등을 이야기할 수 있는 내용으로 프론트엔드 필수 혹은 끝판왕 답변으로 손꼽히는 만큼 제대로된 내용을 정리해보시는걸 추천드립니다.

총 평

1. 기술 - 초급이나 중급으로 설정한 기술 질문에서는 무난히 답변을 해주신 반면에, 고급의 내용으로 준비한 질문들에서는 많은 부분 답변에 어려움을 겪으셨습니다. 민영님 매끄럽게 말씀하시는 기술이 매우 좋다고 생각되는 만큼 기술면접에서의 깊이도 조금 따라온다면 많은 시너지가 따라올거같아요.
2. 이력서 - 이력서 수정을 언급하신 만큼 민영님 자신만의 스토리와 서사 그리고 어떤 성장을 이루셨는지 조금 더 생각해보고 정리하면 좋을거같아요
3. 프로젝트 - 프로젝트에서 민영님을 보고 개발자로 어떤 역할을 수행하는지? 업무 핏이나 어떤 문제를 겪고 해결해 나아갔는지 어떤 내용을 구현했고 어떻게 개선해 나아갔는지 이야기할 수 있는 소스가 많다고 생각해요. 트러블슈팅이나 디버깅 과정에서 어떤 행동을 취하였는지 열정을 보여줄 수 있는 포인트를 잡으면 좋을거같습니다.

[codingaring]

역할

면접관 - 김유경 (제 질문만 올리겠습니다), 이서인
지원자 - 윤아영

QnA

Q. 서버에서 내려주는 데이터와 프론트에서 사용하는 데이터의 네이밍 컨벤션이 다른데, 이를 해결하기 위한 방법으로 어떤 것들을 생각하셨고, 그 중에서 변환 모듈을 개발하게 된 이유를 설명해주세요.

멘토님이 그래서 만들게되었다 보다는, 백엔드에서 또다시 데이터 형식이 바뀔 수 있기 때문에 프론트엔드에서 데이터를 안정적으로 받아서 사용하기 위해 개발했다고 하는 건 어떨까요?

Q. 각 페이지별로 메타 데이터를 설정하여 SEO 최적화를 하셨다고 했는데, 페이지 별로 어떤 차이점을 두고 메타 데이터 설정을 하셨나요?

| 페이지 별로 메타 데이터가 달라야하는 이유를 포함해보면 좋을 것 같아요 !

Q. 이외에도 SEO 개선을 위해 신경 쓴 부분이 있을까요?

Next.js가 왜 SEO에 도움이 되는 것인지, 페이지 라우트, 앱 라우트를 구분해서 설명해주면 좋을 것 같습니다 !

Q. 시맨틱 태그는 잘 사용하셨나요?

nav 태그 안에 main 태그가 있다면 그건 잘못된 사용입니다. main 태그는 전체 html 문서에서 한 번만 사용되는 것이 맞습니다

Q. api 호출 시 에러 처리를 어떻게 하셨나요?

사용자 경험 측면에서의 에러 처리의 중요성과 예상할 수 있는 에러 상황에서의 사용자의 flow를 얘기해주면 좋을 것 같아요

• 404 에러라면 404 페이지로 이동시키고, 그 페이지에서 홈이나 서비스로 되돌아갈 수 있는 navigate 버튼을 제공할 것이다
• put 요청이 정상적으로 가지 않았다면, 에러 toast를 띄우고 재 시도할 수 있도록 유도한다
• token만료로 인한 405 에러라면, 모달을 띄워서 로그인 페이지로 이동할 수 있는 navigate 버튼을 보여준다던가

기타

이력서에 PR링크나 블로그 링크로 이동해서 코드를 볼 수 있었으면 좋을 것 같습니다 !

[codingaring]

역할

면접관 - 김유경, 윤아영
지원자 - 이서인

QnA

Q. 카카오와 구글 OAuth 인증을 구현하고, 토큰 자동 갱신을 처리하셨다고 했는데, 이 과정에서 직면했던 이슈나 해결방법에 대해 말해주세요.

조금 더 구체적인 flow를 설명하며 어떤 부분에서 백엔드와 오류가 있었던 것인지 짚어주고, 그걸 어떤 과정을 통해서 해결했는지를 말씀해주시면 좋을 것 같아요 !

Q. 클라이언트가 AWS S3에 이미지를 업로드할 때 presigned URL 방식을 도입했다고 하셨는데, 이 방식의 장점과 도입 이유는 무엇이었나요?

~~라고 해서 하게 되었다 보다는, ~~여서 사용하게 되었습니다. 라고 확신을 가지고 말씀해주시면 더 좋을 것 같아요 ! 그래서 도입했는데 실제로 어떻더라 이런 게 있으면 더 좋을 것 같긴 합니다

Q. 주문 상세 페이지에서 레이아웃 시프트를 개선하셨는데, CLS(Core Web Vitals)란 무엇이며 레이아웃 시프트를 개선한 것과 CLS의 관련성을 알려주세요.

설명 잘 해주신 것 같습니당

Q. 크로스 브라우징 이슈를 해결한 경험이 있다고 했는데, 브라우저 간 호환성 문제를 어떻게 해결하셨나요?

특정 CSS 속성이 왜 특정 브라우저에서는 동작하지 않는지 덧붙여주면 좋을 것 같습니다 !

[Seoin02]

역할

면접관 - 이서인 / 김유경
지원자 - 윤아영

QnA

Q. 1분 자기소개 부탁드려요.

• 만들고, 완성하는 것을 좋아하는 개발자
• 코드 리뷰로 다양한 의견을 확인하는 게 좋은 점
• 코드 리뷰를 키워드로 잘 얘기한 듯

Q. 코드를 작성할 때 가장 중요하게 생각하는 부분이 무엇인가요?

• 재사용성이 좋아야 한다. 사용했을 때 단순하게 사용할 수 있으면 좋다고 생각한다.
• 아토믹이나 합성 컴포넌트를 잘 모른다고 얘기하는 문구가 매끄럽다.(근데 잘 설명하면서 왜 잘 모른다고 서두에 붙이나요? 굳이 겸손할 필요는 없다고 생각합니다.)
• 눈도 안 굴리고, 진짜 차분하게 잘 답변하는 모습을 배우고 싶다.

Q. ‘트래블록’ 프로젝트에서 검색 디바운스를 적용해 성능 최적화를 하셨는데, google API 요금 절감이 얼마나 되는지 테스트 해보셨나요?

• 테스트는 안해봤다. 지금 활발하게 서비스가 운영되지 않다보니 많은 검색이 있지 않았을 것이다.
• 세부적으로 질문 들어올 것을 대비해 문구를 수정하든지 답변을 보완하면 좋겠다.

Q. 카카오 OAuth 콜백 페이지가 노출되는 게 사용성을 저하한다고 보여집니다. 이를 개선할 생각이 있으실까요?

• 한 번 확인해보도록 하겠다.

Q. ‘트래블록’ 프로젝트에서 TanstackQuery와 Next.js 기술 스택의 역할 분리를 어떻게 하셨을까요?

• 캐싱의 차이 꼬리질문
• 당황하면 목을 긁는다.
• Next.js 캐싱을 신경쓰지 않고 알아서 된다?!

Q. 프로젝트를 하면서 해결했던 트러블 슈팅이 있다면 설명해주세요.

• interceptor 훅이 제대로 동작하지 않는 경우에 useEffect에서?!
• 프로젝트 당 기술 트러블 슈팅 1개, 소통 트러블 슈팅 1개 준비하면 좋을 것 같습니다.
• 협업 시 소통 진행 방식? 데일리 스크럼 시간을 가졌고, 매일 코드 리뷰, 코어타임

Q. 브라우저 렌더링 과정을 설명해주세요.

• 서버 요청 과정을 좀 더 보충하면 완벽한 답변이 될 듯 합니다.

Q. 건축학과를 졸업하셨는데, 프론트엔드 개발자를 준비하는 동기는 무엇인가요?

• 준비를 안 한 것 같은 초반의 정적… 역시 맞았습니다…
• 근데 정적 뒤에 답변을 잘 하셨습니다. 자신감 더 가지세요!!!

Q. 어떤 개발자가 되고 싶나요?

• 코드를 잘 해석할 수 있는 개발자
• 목표 달성률 60%
• 코드리뷰 문화의 긍정적인 효과와 잘 엮어서 얘기했습니다.

Q. 선호하는 회사 조건이 있나요?

• 뽑아만 준다면 어디든…

이력서 보완할 점: 관련 PR 링크 추가

[Seoin02]

역할

면접관 - 이서인 / 윤아영
지원자 - 김유경

QnA

Q. 1분 자기소개 부탁드려요. ⇒ 준비 안 함

• 당황하면 눈을 굴리고, 얼굴이 붉어진다. 뻔뻔해집시다 우리.

Q. 코드를 작성할 때 가장 중요하게 생각하는 부분이 무엇인가요? ⇒ 잘 얘기했다. / 꼬리 질문도 잘 답변했다.

• 주로 협업 과정에서 코드를 작성할 때 타인이 읽었을 때 목적과 재사용성이 잘 읽히게 작성하려고 한다.
• 한 컴포넌트가 하나의 역할만 하게 작은 단위로 개발했다.
• 개발에서 디자인을 중요하게 여긴다기 보다는 개발은 하나의 프로덕트를 만들기 위해서 사용자의 경험을 개선하기 위해 디자인을 신경 안 쓰진 않는다.

Q. ‘타임 세이버’ 프로젝트에서 query-factory를 도입해 코드 유지보수성을 향상시켰는데, 본인이 제안해서 적용한 걸까요?

• 도입 배경부터 잘 얘기했다.
• 쿼리 키를 상수화 할 때 부작용까지 들어서 잘 답변했다.

Q. 개발 과정에서 다른 협업 분야와 적극적으로 소통한다고 하셨는데, 프로젝트 경험으로 얘기해주세요.

• 한글날 프로젝트
• 컴포넌트 단위 디자인, 반응형에 대해 디자이너와 자세히 소통한 경험
• about me에 적으려면 특별하고 세부적인 경험을 말할 수 있어야 한다.

Q. ‘피드비’ 프로젝트를 하면서 어려운 문제를 해결한 경험이 있으신가요?

• 프로젝트 리스트 불러오는 과정

Q. 콘텐츠 제작과 온라인 스토어 운영 경험이 개발하는 데 도움이 되는 게 있을까요?

• 기술적인 도움은 없지만, 사용자 경험을 고려하는 데 도움이 됐다.

Q. 개발자 전향한 이유는 무엇인가요?

• 지원 동기를 더 보완하는 게 좋을 것 같다. 기획자로 노선 변경할 것이라고 생각이 들기도 한다.

Q. 가상 DOM을 사용한 리액트의 동작 원리를 설명해주세요.

• 대체적으로 맞는 답을 했다.
• 가상 DOM과 실제 DOM의 차이를 좀 더 공부하면 좋겠다.

이력서 보완할 점

• 이력서에 프로젝트 인원 추가
• 피드비 프로젝트 소개, 구현 내용 오타 수정

[ayoung-iya]

역할

면접관 - 윤아영, 김유경
지원자 - 이서인

QnA

Q. 인증 구현 방식에 대해서 설명해 주실 수 있나요?

A. 쿠키, 로컬스토리지, 세션스토리지 등을 활용할 수 있다. 보안적 측면에서 쿠키를 사용하였다. 쿠키를 이용했을 시 http only 옵션을 사용하여 XSS 공격을 막을 수 있다.

세션 기반 인증, 토큰 기반 인증에 대해서도 알아보면 좋을 거 같아요. 각 인증 방법의 장단점에 대해서 설명하고 해당 프로젝트에서 쿠키를 활용한 인증 방식을 선택한 이유에 대해서 설명해도 좋을 거 같아요!

Q. next.js를 사용하면서 axios를 선택한 이유

A. next.js의 서버 컴포넌트 기능을 활용하지 않고 서버사이드렌더링 측면만 이용. axios를 사용 시 에러 처리 즉면에서 더 좋다고 판단.

여기서 말하는 서버 컴포넌트의 기능과 서버사이드렌더링 측면이 무엇을 뜻하는지 잘 모르겠어요.
next.js에서 fetch를 적용하면 캐싱을 지원하지만 axios를 사용했을 때 에러 처리, 베이스 url 설정 등의 측면에서 좋다고 생각해 선택했고 캐싱을 위해서는 react-query를 도입했다고 해도 되지 않을까? 싶었습니다~ (확신은 없습니다)

Q. 프로젝트를 진행함에 따라 어려웠던 부분이 있나요?

A. 인증, 인가 구현할 때 페이지마다 인가처리를 잘 해야 사용자 경험을 해치지 않을 수 있다. accessToken 로그아웃 되는 현상을 방지하기 위해 401에러 발생 시 refresh-token을 이용하여 갱신하도록 유도했습니다. 리팩토링 과정에서 인터셉터의 역할, 어떤 에러가 발생하는지 등을 공부하여 적용하였다.

Q. 타입스크립트 사용하는 이유

A. 자바스크립트 동적 언어 타입으로 안정성을 높이기 위해서 타입스크립트를 사용한다. 에러를 미리 방지할 수 있다.

컴파일 단계에서 타입 검사를 해주기 때문에 런타임 에러를 방지할 수 있다고 표현해도 좋을 거 같아요
부수적으로는 VSCode 등의 IDE에서 타입 자동 완성 기능을 제공해서 변수와 함수 타입이 추론 가능하고 리액트를 사용할 때 어떤 prop을 넘겨야 하는지 매번 확인하지 않아도 볼 수 있기 때문에 개발 생산성이 향상됩니다.

Q. any, unknown의 차이

A. any는 모든 타입 허용한다. 타입 안전성을 고려해 최대한 안쓰려고 한다. unknown 타입은 여러 타입을 보관하기는 하지만 any 보다 작은 타입을 포괄한다.

어떤 타입이든 any 타입에 할당 가능하고, any 타입은 어떤 타입으로도 할당 가능 (never 제외)
어떤 타입이든 unknown 타입에 할당이 가능하고 unknown 타입은 any 타입 외에 다른 타입으로 할당 불가하다.
unknown 타입은 any 타입과 유사하지만 타입 검사를 강제하고 타입이 식별된 후에 사용할 수 있기 때문에 any 타입보다 더 안전하다고 합니다. 따라서 데이터 구조를 파악하기 힘들 때 any 타입 대신 unknown 타입으로 대체해서 사용하는 방법이 권장됩니다.

Q. 리액트에서 배열을 렌더링 하는 방법

A.

배열의 요소를 jsx 노드로 매핑하여 렌더링 할 수 있습니다.

Q. 배열 렌더링 시 키를 설정해야하는 이유

A. 순서에 맞게 렌더링 하기 위해서, 키를 index로 설정하면 안된다. id와 같이 불변하는 값이 아닌 변하는 값을 키 값으로 사용하면 안된다.

Q. 왜 키 값이 불변해야 하는가?

A. 리액트의 렌더링과 관련 있는 것 같다

key로 해당 항목을 식별합니다. 그래서 재정렬로 인해 위치가 변경되더라도 생명주기 내내 식별할 수 있습니다. 예를 들어, key가 없다면 3개의 요소가 있을 때 2번째 요소가 삭제 된다면, 두번째 요소가 삭제된 것인지, 두번째 요소가 세번째 요소로 변경된건지 정확한 동작을 이해하지 못할 수 있습니다.

Q. 반복문과 고차 함수의 차이점

A. 반복문을 사용한다고 했을 때 보통 for문을 주로 사용합니다. 본인은 반복문보다는 내장 함수를 사용합니다. 어떻게 동작하는지 명확하다. for문은 조건문을 확인해야하고 어떤 동작인지 확인할 필요성이 있습니다. 내장 함수가 더 가독성이 있다고 생각해서 사용하는 편입니다.

break, continue 문을 통해서 반복문을 실행 순서를 조작할 수 있는데 고차함수는 로직 흐름이 단순하여 가독성이 높다고 판단될 수 있습니다.

Q. for...in, for...of 의 차이

A. for...in은 객체에서 for...of문의 배열에서 사용

배열도 for...in으로 순회가 가능합니다. 하지만 만약에 배열에 조회 가능한 프로퍼티가 존재한다면 요소를 제외한 해당 프로퍼티도 조회하여 의도와 다르게 동작할 수 있습니다.
for...in문은 객체의 프로토타입 체인 상 존재하는 모든 프로토타입의 포로퍼티 중에서 프로퍼티 어트리뷰터 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며 열거한다. for...of문의 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다.

Q. 디바운스와 쓰로틀링에 대해서 설명하고 관련 경험을 이야기해주세요

A. 디바운스 - 이벤트 발생해도 일정 시간이 흐른 후 마지막 한 번 만 처리하여 서버 자원 절약한다.
쓰로틀링: 여러 번 발생했을 때 주기적으로 렌더링하는 방법
input 컴포넌트를 만들면서 입력할 때마다 렌더링이 될 때 깜빡임이 발생하여 개선하기 위해 디바운스를 적용하였다.

Q. 어떤 개발자가 되고 싶은가?

A.

• 동료에게 좋은 개발자, 사용자 경험을 우선적으로 하는 개발자
• 코드를 짜고 컴포넌트를 짤 때 재사용성 고려하여 동료들이 편하게 작업하면 좋은 프로덕트가 될 가능성이 높아진다.
• 좋은 코드를 써서 프로덕트를 만들어도 사용자가 잘 쓰지 못하면 유용하게 쓰지 못하면 소용이 없다.
• 사용자들이 좀 더 좋은 경험을 하도록 하고 싶다.

전체적으로 잘 대답했다고 생각합니다~!

[ayoung-iya]

역할

면접관 - 윤아영, 이서인
지원자 - 김유경

QnA

Q. 사용자의 삶을 더 편리하게 만들기 위해서 어떤 노력을 하였나요?

A. 진행했던 프로젝트 사람들이 필요하고 불편하게 느끼는 걸 편하게 느끼는 걸 그 과정에서 다른 서비스들도 이런 큰 목적은 동일하다.

에러처리나 로딩 같은 코드적인 면을 기대하기도 했습니다

Q. 커뮤니케이션을 가장 중요한 역량으로 여기고 있는데, 팀원 간의 소통 과정에서 어려웠던 경험이 있나요?

A. 소통이 어려웠을 때 왜 어려웠나 고민을 해보면 소통을 안했기 때문에 소통이 어려웠다고 생각한다. 소통을 하지 않더라도 일정 공유 규칙을 정해 두면 별다른 소통을 하지 않아도 원하는 정보를 주고 받을 수 있어 상황을 오해하지 않을 수 있었다.

Q. 만약의 동료가 일정 공유도 하지 않는다면?

A. 팀장으로 진행하는 프로젝트 1:1 대화를 할 수 있는 공간을 만들고, 소통이나 규칙 오해할 수 있는 의도 아닐지라도 오해할 여지가 있다고 알리고 앞으로 행보를 지켜볼 것 같습니다.

Q. styled-component와 tailwindCSS의 차이점

A. 태일윈드: 미리 정의된 것으로 일관된 디자인 구축 가능하다. 같이 학습이 된 입장에서 어떤 작성된건지 이해하기 편하다. CSS파일을 분리하지 않아도 된다.
스타일드 컴포넌트: CSS 파일을 분리하지 않아도 된다. 동적으로 스타일 적용이 가능하다.

Q. 다음 프로젝트를 하게 된다면 어떤 것을 선택할 것인가?

A. UI를 보고 선택할 것이다. 다양한 애니메이션과 상태에 따라 스타일이 변한다면 styled-component, 단순하고 일관된 디자인이라면 tailwindCSS

Q. 제어문

A. 코드 실행 흐름을 제어해주는 문

제어문과 조건문 헷갈리지 말기?

Q. for...in, for...of

배열도 for...in으로 순회가 가능합니다. 하지만 만약에 배열에 조회 가능한 프로퍼티가 존재한다면 요소를 제외한 해당 프로퍼티도 조회하여 의도와 다르게 동작할 수 있습니다.
for...in문은 객체의 프로토타입 체인 상 존재하는 모든 프로토타입의 포로퍼티 중에서 프로퍼티 어트리뷰터 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며 열거한다. for...of문의 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다.

Q. 디바운스, 쓰로틀링

전체적으로 잘 설명하신 거 같습니다

Q. 어떤 개발자가 되고 싶은가?

A. 더 많은 곳에서 같이 일하고 싶은 개발자. 타 분야 원활하게 소통하고 코드가 잘 읽히는 개발하는 개발자

이력서 관련

기술 스택에 @tanstack/react-query라고 정확하게 작성하는 것도 좋을 거 같아요.

전체적으로 답변을 잘하시는 것 같아요. 기술 도입에 있어 원인이 있는 것도 좋았습니다.

[minyoung0503]

역할

면접관 - 김민영
지원자 - 김보경

QnA

0. 자기소개

A.

• 공간정보 분야에서 3D 데이터 추상화와 DB 시각화, 서버 업로드 경험을 바탕으로 프론트엔드 개발자로 커리어를 전환
• 비전공자이지만 이전 경험 덕분에 비교적 개발을 빠르게 습득할 수 있었음
• 혼자 서비스를 개발하고 운영하려는 새로운 시도 중

---

1. 이전 경력에서 공간정보 데이터를 시각화한 경험이 있는데, 이를 프론트엔드 개발에 어떻게 적용할 수 있었나요?

A. 공간정보 분야에서 사용하는 데이터를 어떻게 하면 사업주나 사용자에게 더 직관적으로 보일 수 있을지 고민하는 과정과 프론트엔드 개발에서 사용자가 사이트를 직관적이고 편하게 이용할 수 있을지 고민하며 레이아웃을 시각화하는 과정이 유사하다고 설명

---

2. 유지보수를 고려한 코드 설계에서 중요한 점은 무엇이라고 생각하나요?

A.

• 디버깅이 용이해야 되고 가독성이 좋아야 함.
• 컨벤션과 스타일이 일치해야 유지보수와 문제 해결이 수월하다는 점을 실무와 프로젝트 경험을 통해 깨달았음

2-1. 프로젝트에서 코드 컨벤션을 정하는 과정에서 각자 본인이 추구하는 코드 컨벤션이 다를 때 어떻게 조율하시나요?

A.

• 프로젝트 시작 전에 컨벤션을 애매하게 정하면 혼란이 생길 수 있음
• 구두로 컨벤션을 잡기보다는 FM대로 린트, 자동화 도구를 활용하는 것이 많은 도움이 되었음

---

3. Next.js의 특징을 설명해주세요.

A.

• React보다 자유도가 낮지만 생태계가 잘 갖춰진 편리한 프레임워크
• 주요 특징은 서버 사이드 렌더링, 이미지 최적화
• 이미지 최적화 경험을 통해 모듈이나 파일 크기와 렌더링 속도면에서 차이가 존재한다고 느낌

서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 이미지 최적화, 파일 기반 라우팅, API Routes 등등

---

4. Three.js를 활용한 3D 커스터마이징 기능 구현 경험에 대해 설명해주세요.

A.

• 다른 팀원이 구현한 것
• 코드 리뷰를 통해 내용을 파악하고 구현 과정을 여쭤보며 학습
• 기존의 키보드 템플릿에 텍스처를 입히고, 키캡 배열에 따라 데이터를 적용

---

5. TossPayments를 활용하여 결제 기능을 구현하셨는데, 결제 프로세스에서 가장 중요한 부분은 무엇이라고 생각하셨나요?

A.

• 데이터 일관성이 중요
• 결제 중에 상품이나 가격 정보가 바뀌는 경우 잘못된 내용으로 결제가 진행될 수 있으니 에러 처리가 중요

5-1. 결제 성공 또는 실패 시 사용자 경험을 개선하기 위한 기능을 추가한 사례가 있나요?

A.

• 결제 진행 시 스피너를 버튼이나 페이지에 적용하려고 했으나, TossPayments API 민감성 때문에 커스텀 구현이 어려웠음
• 대신, 결제 성공 시 JS confetti 라이브러리를 사용하여 폭죽 애니메이션과 함께 결제 성공 정보가 보여지는 UX 적용

---

6. ServerComponent 리렌더링 문제를 설명해주세요.

A.

• 프로젝트 초기 단계에서 헤더 컴포넌트의 색상 변경 로직을 서버 컴포넌트에서 처리했으나, 클라이언트에서 상태 변경을 감지하지 못함.
  (이미 서버에서 생명 주기가 끝난 상태로 클라이언트로 넘어와서 발생한 문제)

→ 클라이언트 컴포넌트로 수정하고 기존 서버 컴포넌트의 로직을 다른 곳으로 분리하여 문제 해결

6-1. ServerComponent에서 ClientComponent로 전환하는 과정에서 Hydration이 어떤 역할을 했나요?

A.

• 직역하면 수분 공급
• 서버 컴포넌트에서 받아온 데이터를 클라이언트 컴포넌트에 테트리스처럼 제자리에 정확히 배치하는 과정
• 서버 사이드 렌더링이 서버 컴포넌트에서만 이루어지는 것이 아니라, 클라이언트 컴포넌트에서도 적용될 수 있도록 TanStack Query를 사용한 사례

6-2. Hydration을 통해 리렌더링 문제를 해결했을 때 성능이나 UX에 어떤 차이가 있었나요?

A.

• 서버 컴포넌트로 작성되었기 때문에 레이아웃 시프트나 불필요한 로딩 없음
• 서버 사이드 렌더링을 통해 사용자에게 더 매끄러운 사이트 이용 경험 제공
• Hydration을 통해 동적인 데이터를 적용하여, 상태에 따른 차이가 있는 헤더에 로그인/로그아웃이나 사용자 프로필 이미지 부분을 매끄럽게 구현

---

7. 비전공자로써 전공자와의 차이를 줄이기 위해 노력한 것이 있나요?

A.

• 부트 캠프에서 매주 진행하는 과제를 통해 HTML/CSS를 시작으로 React, TypeScript, Next.js까지 마이그레이션을 진행하며 다양한 기술 스택을 경험
• 마이그레이션 과정이 어려웠고, 결과물이 마음대로 되지 않아 밤샘 작업
• 기존 코드를 그대로 마이그레이션하는 것보다 프로젝트를 새로 생성하고 멘토님들께 피드백을 받으며 학습하는 방법으로 코드 작성 능력 향상

---

8. 퇴근 후 약속이 있는데 갑작스런 야근을 하게된다면 어떻게 하실건가요?

A.

• 당황스러울 수 있지만, 실무에서 유사한 상황을 경험한 적이 있음
  (퇴근 준비 중에 공무원분의 요청으로 성과를 정리하고 문서화해야 했던 상황)
• 일이니까 어쩔 수 없는 부분이라고 생각
• 몇 번의 경험을 통해 이제는 이러한 상황을 좀 더 유연하게 대처할 수 있음

---

9. 포지션 static, relative, absolute, fixed 각 특징에 대해서 설명해주세요.

A.

• static
  모든 요소들에게 기본적으로 설정
  단어 뜻 그대로

• static
  • 기본값.
  • 문서 흐름에 따라 자연스럽게 배치.
  • top, right, bottom, left 속성 무시.
• relative
  • 원래 위치를 기준으로 이동.
  • top, right, bottom, left 속성으로 상대적 위치 조정.
  • 원래 자리 유지.
• absolute
  • 문서 흐름에서 제거.
  • 가장 가까운 relative, absolute, fixed 부모 또는 뷰포트를 기준으로 배치.
  • top, right, bottom, left 속성으로 절대적 위치 설정.
• fixed
  • 문서 흐름에서 제거.
  • 뷰포트를 기준으로 고정.
  • 스크롤과 관계없이 항상 같은 위치에 유지.

---

10. HTTP와 HTTPS 통신 방식의 차이를 설명해주세요.

A.

• 끝에 붙는 S는 Security을 의미
• HTTPS는 HTTP에 SSL과 TLS 방식을 적용하여, 통신 과정에서 보안을 강화하고 데이터 암호화 진행

• HTTP (HyperText Transfer Protocol): 웹에서 데이터를 주고받는 기본 프로토콜. 정보가 평문으로 전송되며, 보안에 취약. 기본 포트는 80번.
• HTTPS (HyperText Transfer Protocol Secure): HTTP에 보안 계층을 추가한 프로토콜. SSL 또는 TLS를 통해 데이터를 암호화하여 전송. 정보 도청 및 변조를 방지하며, 개인 정보와 민감한 거래에 적합. 기본 포트는 443번.

---

11. 브라우저 동작 원리를 설명해주세요.

A. 자바스크립트의 비동기 처리와 이벤트 루프에 대한 동작 방식을 설명

1. URL 입력: HTTP 요청을 서버로 전송.
2. 서버 응답: HTML 및 리소스 다운로드.
3. HTML 파싱: DOM 트리 생성.
4. CSS 파싱: CSSOM 트리 생성.
5. JavaScript 실행: DOM 및 CSSOM을 수정.
6. 렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리 구성.
7. 레이아웃: 요소의 위치와 크기 계산.
8. 페인팅 및 컴포지팅: 시각적 요소가 화면에 그려짐.

---

12. OOP라고 아시나요 ?

A. 모르겠습니다.

객체지향 프로그래밍(Object-Oriented Programming, OOP)

12-1. 객체지향 프로그래밍 언어의 특징을 설명해주세요.

A. 잘 모르겠습니다.

객체지향 프로그래밍(Object-Oriented Programming, OOP)은 프로그램을 '객체'라는 기본 단위로 구성하는 프로그래밍 패러다임이다. 객체는 데이터를 담고 이를 처리하는 메서드를 포함하며, 클래스라는 설계도로부터 생성된다. 객체 지향 프로그래밍의 주요 목표는 코드의 재사용성, 확장성, 관리 용이성을 높이는 것이다.

객체지향 프로그래밍의 주요 개념

1. 캡슐화 (Encapsulation):
   • 데이터와 메서드를 하나의 객체로 묶어 외부로부터 숨기고, 외부에서 객체의 데이터에 직접 접근하는 것을 방지
2. 상속 (Inheritance):
   • 한 클래스가 다른 클래스의 속성과 메서드를 물려받아 새로운 클래스를 생성하며, 이를 통해 코드 재사용성과 클래스 계층을 구성 가능
3. 다형성 (Polymorphism):
   • 같은 이름의 메서드가 다양한 방식으로 동작할 수 있게 하여, 여러 객체를 일관되게 처리
4. 추상화 (Abstraction):
   • 복잡한 시스템을 단순화하여 고수준의 모델로 표현하고, 세부 구현을 숨김

→ 객체지향 프로그래밍은 소프트웨어를 유연하고 쉽게 변경할 수 있게 하며, 대규모 프로젝트와 복잡한 시스템 관리에 유용하다.

---

13. 이벤트 버블링과 캡처링에 대해서 설명해주세요.

A.

• 이벤트 버블링은 해당 요소에서 특정 이벤트가 발생할 때 상위 요소까지 전파되는 현상
• 이벤트 캡처링은 이와 반대로 상위 요소에서 하위 요소로 전파 되는 현상

이벤트 버블링과 이벤트 캡처링은 웹 브라우저의 이벤트 전파 방식이며, 이벤트가 DOM 요소들 간에 전파되는 과정을 말한다.

• 이벤트 버블링: 자식 요소에서 부모 요소로 이벤트 전파.
• 이벤트 캡처링: 부모 요소에서 자식 요소로 이벤트 전파.

13-1. 특정 요소에 각각 이벤트를 할당하지 않고 상위 요소에서 하위 요소의 이벤트를 관리하는 방식을 뭐라고 하는지 아시나요?

A.

이벤트 위임

---

14. React의 주요 특징에 대해서 설명해주세요.

A.

• Vanilla Js와 비교해서 설명
  Vanilla Js는 코드의 일부만 바뀌어도 전체가 리렌더링되지만, React는 컴포넌트 단위로 가상 DOM을 사용해 렌더링을 효율적으로 처리하기 때문에 자원을 비교적 절약
• 초기 렌더링 속도가 느림
• SEO에 불리

React 주요 특징

• 컴포넌트 기반 구조: 애플리케이션을 작은 컴포넌트로 나누어 관리하며, 각 컴포넌트는 독립적으로 상태와 렌더링을 처리
• 가상 DOM: 실제 DOM을 조작하기 전에 가상 DOM에서 변경 사항을 계산하고, 최적화된 업데이트를 통해 성능을 개선
• 단방향 데이터 흐름: 데이터가 부모에서 자식 컴포넌트로 흐르며, 상태 관리와 데이터 흐름 명확
• JSX: JavaScript 코드 안에서 HTML-like 구문을 사용하여 UI를 선언적으로 정의하고, 코드의 가독성을 높임
• 상태 관리: useState, useReducer, Context API 등을 사용하여 컴포넌트의 상태를 관리

---

15. state와 props의 차이점에 대해서 설명해주세요.

A. 둘 다 상태를 뜻하는 요소이며, props는 변하지 않는 상태, state는 동적으로 변하는 요소를 말합니다.

state와 props는 React에서 데이터와 상태를 관리하는 주요 개념

1. State (상태)

• 컴포넌트의 내부 상태를 저장, 컴포넌트가 관리하고 변경할 수 있는 데이터
• setState 메서드 또는 useState의 setter 함수를 사용하여 변경
• 컴포넌트의 동적인 데이터를 처리할 때 사용

2. Props (속성)

• 컴포넌트에 전달되는 읽기 전용 데이터
• 부모 컴포넌트에서 자식 컴포넌트에 전달하며, 자식 컴포넌트는 이 데이터를 읽기만 가능하고 변경은 불가능
• 부모 컴포넌트가 Props 값을 변경하면 자식 컴포넌트에 전달된 값이 자동으로 업데이트
• 컴포넌트에 데이터와 콜백 함수를 전달할 때 사용

---

16. useMemo와 useCallback에 대해 설명해주세요.

A.

• 함부로 다루면 안 되는 개념, 웬만한 대규모 대기업이나 대규모 프로젝트가 아니면 사용하지 않음
• 불필요한 리렌더링을 방지하고 메모리 자원을 효율적으로 사용하기 위해 동작을 캐싱하는 데 도움을 줌
• 잘못 적용하면 자원 누수나 성능 저하
• 프로젝트에 적용하려고 시도했지만 무용지물이 된 경험

useMemo와 useCallback은 React에서 성능 최적화를 위해 사용되는 훅.
둘 다 의존성 배열을 기반으로 값이나 함수를 메모이제이션(캐싱)하는 데 사용되며, 불필요한 렌더링을 방지할 수 있다.

• useMemo: 계산 비용이 큰 값이나 함수의 결과를 메모이제이션하여 불필요한 재계산 방지
• useCallback: 함수 인스턴스를 메모이제이션하여 불필요한 렌더링 방지

---

💡 피드백

• 말씀하실 때 “아직 경험이 많이 없다”라는 걸 가끔 언급하시는데, 생략해도 좋을 것 같아요. 보경님의 실제 경험만으로도 충분히 답변이 가능할 거예요!!
• 기술 질문에 답변하실 때 중요한 키워드는 다 알고 계시는 거 같은데 말로 풀어서 설명하는 게 약간 어려우신 것 같아요. 버벅거리더라도 포기하지 말고 기억나는 키워드라도 활용해 천천히 답변을 이어가면 좋을 것 같습니다!
• 고생하셨습니당 🙇🏻‍♀️

[seolsis]

역할

면접관 - 백지원
지원자 - 정봉찬

QnA

Q. 1분 자기소개

A. 풀스택 개발 경험 바탕으로 현재는 프론트엔드 개발 전문 강화중
향상된 디자인 시스템, 개발자 경험은 좋은 사용자 경험에 기여한다 생각하기 때문에 좋은 컴포넌트 설계,아키텍쳐, 훅에 관심

Q. 팀 내 협업을 성공적으로 이끌기 위해 가장 중요하다고 생각되는 것은 무엇인가요?

A. 서로 간의 믿음을 주는 것, 나도 해당 팀을 믿는 것을 보여주는게 가장 좋다.

Q. 에듀인소프트 시스템개발부에서 풀스택으로 장기간 근무하셨는데 프론트로 옮기신 이유가 있을까요?

A. 당시 전반적 업무는 백엔드에 가까웟지만 가끔 프론트 업무를 했는데 재미를 느낌
성격상 사용자 경험이 중요해서 사용자에 더 가까이 있는 프론트가 더 적합하다고 생각하였음

Q. Vue.js의 장점은 무엇인가요?

A. HTML CSS자바스크립트 템플릿 기반이라 진입 장벽이 낮음
양방향 데이터 바인딩을 지원해줌
input값을 상태로 표현하는 과정이 React 보다 간편
실시간으로 뷰랑 상태를 연결해줌

Vue.js는 단순하고 직관적인 문법을 가지고 있어 배우기 쉽고 개발이 간편합니다. 또한 React는 라이브러리로 UI 렌더링 요소에 집중한 반면에 Vue.js는 필요한 도구를 자체적으로 포함합니다.

Q. 포잉마켓 프로젝트에서 팀장을 맡으셨는데 다른 팀원들과 차별화 되는 역할은 무엇이었나요?

A. 전반적인 프로젝트 진행
백엔드 경험이 있었기 때문에 백엔드와 직접적인 소통이 가능
백에서 필요한 부분, 프론트에서 필요한 부분을 중재하였음

Q. 팀 내 갈등이 생긴다면 어떻게 해결할 것인가요? 또는 그런 경험이 있다면 말씀해 주세요.

A. 크게 갈등은 없었음
기술적 선택에 의견차이가 생겼을 때 우선 어떤 것이 우리에게 바른 방향인지 얘기하며 고민할 것 같음
공인된 자료를 바탕으로 선택할 것

Q. 포잉마켓이 모바일 뷰를 제공함으로써 팀원의 기능면에서의 집중은 올렸으나 클라이언트 입장에서는 어떻게 장점이 되었나 요?

A. 무신사나 점점 브라우저가 pc 화면의 ui를 제거하고 있다
뷰가 다르면 사용자 입장에서는 뷰의 다른 점의 차이를 없앴던 것 같다
일관된 UI를 제공할 수 있었다.

• 빠른 로딩 속도
  - 모바일 환경에 최적화된 디자인은 불필요한 요소나 이미지 크기를 줄여 페이지 로딩 속도를 개선
  - 데이터 사용량을 줄이고 사용자가 느끼는 대기 시간을 감소시켜 더 나은 사용자 경험을 제공

• 높은 접근성
  • 다양한 디바이스에서 일관된 사용자 경험을 제공
  • 사용자가 어느 기기에서든지 동일한 품질의 콘텐츠를 접할 수 있게 하여 접근성을 높임

Q. 어떻게 토스트 위치를 유동적으로 구현하였나요?

A. 모달이나 토스트 경우 포탈, 크리에이트 포탈이라는 api에서 제공
id를 입력받아 포탈 값을 유동적으로 변동시켜 원하는 곳에 토스트를 띄울 수 있도록 제작

Q. 컴파운드 컴포넌트 패턴을 사용했을 때 어떤 장점이 있었나요?

A. 디자인 시안상으로 페이지마다 헤더가 다른 구성이 많았다
하나의 헤더를 통해서 props로 받기에는 종류가 다양했고 컴파운드 패턴을 통해서 자신이 원하는 헤더의 구성 요소로 구성할 수 있다.

• 컴파운드 컴포넌트 패턴은 headless component로 기능은 있지만 스타일이 없는 컴포넌트

• React로 여러 컴포넌트를 만들다 보면 재사용하기 위해 props를 추가하면서 컴포넌트 구조가 복잡해짐
• 따라서 컴포넌트 패턴을 사용함으로써 prop을 사용하지 않고 내부 데이터 처리 가능
• 비슷한 디자인의 컴포넌트가 필요할 때 새로 컴포넌트 만들지 않고 사용 가능
• 즉, 유연하고 재사용 가능한 컴포넌트를 설계, 가독성과 유지보수성을 높임

Q. CSR은 무엇이며 장점은 어떤 것이 있나요?

A. 처음에 자바스크립트 파일을 모두 다운받고 페이지 이동할 때마다 필요한 자바스크립트 파일을 로드
하나의 html 안에서 컴포넌트만 바꾸는 방식으로 동작
spa라는 것이 있는데 장점이 깜빡임이 없음
자바스크립트 파일을 로드하고 나서는 바꿔치기이므로 매우 빠르게 페이지 로딩이 가능

• CSR이란
  - Client Side Rendering의 약자로 서버가 요청을 받았을 때 클라이언트에 HTML과 JS를 보내고 클라이언트는 그것을 받아 렌더링을 시작

• 장점
  • page 전체를 요청하지 않고 유저 행동에 따라 변화된 부분만 re-rendering 하므로 SSR보다 빠른 interaction이 가능
  • Lazy loading 지원
    • 스크롤 내리기 전까진 페이지에서 보이지 않는 부분은 로딩 X

Q. SPA(Single Page Application)의 장점은 무엇인가요?

이미 앞서 이야기 하심.

• 클라이언트가 모든 페이지를 가지고 있으므로 앱과 같은 자연스러운 사용자 경험을 제공

• 페이지를 이동 하더라도 컴포넌트만 부분적으로 교체하면 되므로 효율성이 증가
• 서버가 해야 할 화면 구성을 클라이언트가 수행하므로 서버 부담이 경감
• 모듈화 또는 컴포넌트별 개발이 용이
• 백엔드와 프론트엔드가 비교적 명확하게 구분
• 앱과 웹이 동일한 서버를 이용할 수 있음

Q. 브라우저에 www.naver.com라고 입력했을 때 어떤 일이 발생할까요?

A. 브라우저 관점에서 살펴보면 사용자가 들어오면 필요한 HTML의 정적 파일 리소스 파일을 서버에 요청
해당 파일에 대한 응답 값으로 정적인 리소스 파일을 전달해주고 브라우저에 받아서 HTML 파싱
돔 트리를 생성하고 link 태그를 만나면 css 파일을 파싱
HTML을 다시 파싱하고 스크립트를 만나면 자바스크립트를 파싱
HTML 파싱이 끝나면 돔트리, CSSOM => render tree => 레이아웃이란 기하학적인 위치계산을 마치고 화면에 페인팅

• 브라우저 렌더링이란?

• 브라우저가 HTML, CSS, JS로 작성된 텍스트 문서에 대해 파싱하고 이를 화면에 그리는 일련의 과정

• 브라우저 렌더링 과정

  1. 사용자가 주소 표시줄에 URI 입력

  2. 브라우저 엔진이 캐시에서 해당 URI의 캐싱된 데이터가 있는지 확인, 있다면 해당 자료를 렌더링 엔진에게 보내주고, 없다면 렌더링 엔진이 네트워크에 URI를 전달하여 네트워크가 해당 서버에 요청을 보내고, 응답받은 리소스를 렌더링 엔진에게 전달

  3. 렌더링 엔진의 HTML파서가 HTML태그를 한줄씩 파싱하여 브라우저가 이해할 수 있는 Node 객체로 변환하고, 이 Node, 즉 DOM의 계층 구조인 DOM Tree를 형성

  4. CSS파서가 CSS를 casecading rule에 따라 우선순위를 적용해 최종 계산된 스타일로 CSSOM을 생성

  5. DOM과 CSSOM을 병합하여 실적적으로 브라우저에 표기될 요소들만 선별하여 Render Tree를 생성

  6. 자바스크립트 코드는 자바스크립트 엔진의 인터프리터가 해석하고 실행

  7. 렌더링 엔진이 구축한 Render Tree를 기반으로 UI 백엔드가 layout -> paint -> composition 과정을 거치며 최종적으로 브라우저 화면이 그려지게 됩니다.

Q. 평소에 상태관리를 어떤 것을 사용하나요?

A. 기본적으로 상태관리는 useState
useReaders? 잘사용안햇는데 사용해봐야겟다
server ⇒ tanstack react-query
client ⇒ url 기반 상태관리
스토리지, jotai

Q. 개발자로서의 포부 한마디 해주세요.

A. 주어진 것에 구현을 잘하고 내가 지금 구현하는 것이 사용자가 쓰기 편할까를 고민하며 개발해옴
프로덕트 관점으로 생각할 수 있어야 한다
소스 멍판이여도 프로덕트 관점에서 개발해야겟다
사용자를 끌어올 수 있는 프로덕트를 만들고 싶다