[4회차] Study

[ayoung-iya]

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

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

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

## QnA
### Q. 

A. 

[ayoung-iya]

역할

면접관 - 윤아영
지원자 - 이서인

QnA

Q. 1분 자기소개

• 사용자 경험을 최우선으로 하는 성장에 목마른 개발자
• 사람들과의 상호작용하는 게 강점, 부족한 점 보안, 개선
• 꾸준하게 어떤 학습이나 새로운 기술에 대해서 도입하고 적용하며 성장하려고 하는 욕구가 강한 것

Q. 최근 학습 기술

• 에러 바운더리와 서스펜스

Q. 에러 바운더리와 서스펜스 적용 전과 후 코드 차이

• 리액트 쿼리의 로딩, 에러처리도 할 수 있지만 클라이언트단에서 매끄럽게 처리 가능
• 에러 바운더리 같은 경우에는 로딩이 아직 되지 않은 부분만 골라서 폴백을 적용할 수 있다.

들을 때는 그렇구나 했는데 다시 보니까 로딩이 아직 되지 않은 부분만 골라서 폴백,,? 서스펜스 예시 아닌가라는 생각도 드네요.

Q. 최근에 봤던 아티클

• 웹 바이탈 수치를 개선하는 네이버 아티클
• 라이트하우스 이외의 다른 기법도 존재
• 본인 프로젝트에는 적용의 어려움이 존재

Q. 어떤 기법들이 존재했나?

• 정확한 명칭이 기억이 안난다

정확한 명칭은 기억이 안나지만 측정하는 요소는 비슷한데 측정하는 도구에 따라 수치가 달랐다던가? 아니면 측정하는 요소가 라이트하우스와 다른 것들이 존재했다던가 내용을 설명해도 좋을거 같아요

Q. 개인 프로젝트에서 리덕스 툴킷을 사용하게 된 이유

• 장바구니 기능을 구현, 관련 정보가 여러 곳에서 사용하고 있어 전역 상태를 관리할 필요가 있다고 느낌
• 데이터 단방향흐름으로 데이터를 제어
• 리덕스와 비교해서 복잡한 보일러 플레이트를 작성하지 않아도 사용할 수 있는 리덕스 툴킷 사용

Q. 다른 것과 비교한 다른 라이브러리가 있을까요?

• 리덕스보다 간단한 쥬스탄드 공부: 간결하게 사용 가능하다

Q. 피케팅의 주스탄드 선택 이유는 간결함인가?

• 프로젝트 규모가 작아서 리덕스 과하다고 생각
• 기획 당시 여러 페이지였지만 한 페이지로 변하면서 쥬스탄드로 많이 활용하지는 못했다.

Q. contextAPI도 있는데 라이브러리를 사용한 이유

• 선호의 차이, 현업에서 많이 사용
• 리액트의 데이터 일방향 데이터 흐름과 맞아 떨어지는 리덕스 툴킷 사용

많이 사용하는 것도 중요할 것 같아요, npm trend에서 리덕스의 사용량이 많았다던가 그런 정보를 말해도 괜찮을 거같아요
사용량이 많으면 정보도 많은 거니까

Q. 전역 상태를 관리해야하는 이유는?

• 복잡한 상태를 관리하다보면 propsDrilling 현상이 발생, 이를 방지
• 코드를 한 곳(스토어)에서 관리하면 유지보수, 데이터흐름 파악이 편하다

복잡한 상태라기 보다는 앱 전체에서 사용되는 상태라고 표현해도 좋을 거 같아요.
이 부분은 저도 명확하지는 않지만 데이터 흐름 파악이 편한가? 라는 생각이 들기는 해요

Q. 전역 상태 관리하는 방법

• 리덕스 : 단방향 데이터 흐름
• 리듀서 : 리듀서 함수 작성, 액션 정의, 중앙 집중 관리
• 주스탄드, 리코일 : 아톰, 분산식

제일 처음에 이 질문을 하고 시작할 걸 그랬어요,, ㅎㅎ

Q. yarn의 선택 이유

• 설치하는 속도가 빠르고, 한 래포에 여러 프로젝트를 관리
• 의존성 설정도 할 수 있는 yarn 선택

Q. 탄스택의 캐싱 기능을 어떻게 사용하였는가? 예를 들어 데이터의 최신성을 어떻게 보장하는가?

• 쇼핑몰에서 잘 바뀌지 않는 제품 사진이나 제품 데이터 부분은 잘 바뀌지 않는 정보로 캐싱처리하여 로딩이 빨리되어 사용자 경험에 좋겠다고 생각
• staleTime: 5분, props가 변경되지 않는다면 최신인 것처럼 유지해서 캐싱 기능 설정
• gcTime : 가바지콜렉터 타임, staleTime보다 커야된다. 6분으로 설정
• 5분이 지나 staleTime에 도달한 데이터가 있다면 가비지 컬렉터에 의해 사라지게 만들어서 최신성을 유지

staleTime과 gcTime의 개념이 섞인 거 같아요
staleTime의 경우, 데이터를 오래된 것으로 간주되는 시간으로 5분이 지나면 오래된 데이터라고 인식하고 refetch가 필요하다고 생각하는 것이고
gcTime의 경우, 미사용/비활성화된 캐시 데이터가 메모리에 유지되는 시간입니다.
예를 들어 다른 페이지로 이동을 해서 더이상 사용하지 않는 데이터의 캐시 유지시간입니다.

Q. 탄스택 쿼리를 사용하면서 겪었던 트러블 슈팅이 있는가?

• staleTime과 gcTime이 제대로 적용이 안되는 경험
• a 태그의 사용이 문제였다. react-router-dom을 사용하고 있었는데 Link태그로 변경

Q. 과거 프로젝트 실패한 경험 있는가?

• 결과물이 마음에 들지 않는 프로젝트
• 기준이 높을수도 있지만 기능 구현, 발표, 배포 다 했지만 코드스타일이 마음에 들지 않았다.
• 그래서 혼자서 리팩토링을 진행해보고 있다.
• 팀원들과의 소통은 잘 이루어졌다

Q. 어떤 부분에서 코드가 마음에 들지 않다고 생각했나?

• 팀원들의 역량차이, 마지막에 시간이 없어서 컨벤션을 잘 지키지 못했다.
• 주석 정리도 이루어지지 않아
• 불필요한 useEffect 사용
• 데이터 패칭도 커스텀훅으로 진행하고자 했는데 각자 다르게 진행

Q. 불만족스러운 부분이 다음에 또 비슷한 일이 발생하지 않도록 노력한 부분은?

• 시간이 부족했었다고 생각, 이후 일정 관리를 조금 더 타이트하게 잡았다.
• 코드 리뷰를 세심하게 진행

Q. 동기, 비동기에 대해서 설명해주세요

• 동기: 순차적으로 함수가 들어온 순서대로 처리
• 비동기 : 들어온 순서대로 하는 게 아니라,,, 마무리하고 다음 동작을 실행하는 것이 아니라,,, 함수가 끝나지 않더라도 다음 함수가 진행되어 빠른 처리를 하는 방식

코드가 순서대로 실행되는 것, 블로킹, 실행 순서 보장 등의 이야기가 담기면 좋을 거 같아요
중간에 비동기는 순서대로 처리하는 것이 아니다라는 말을 한 것 같아요. 이 말은 조금 애매한 거 같아요. 차라리 병렬적으로 진행되다는 것이 낫지 않을까요?

Q. 자바스크립트는 동기인가? 비동기인가?

• 자바스크립트 자체는 동기 방식을 활용
• 브라우저의 웹API를 활용, 이벤트 루프를 사용해서 비동기를 처리

Q. 좀 더 자세히

• 이벤트 루프가 비동기 처리의 주체인데 함수가 실행되면 콜스택에 담기고 콜백함수 같은 경우는 콜스택이 아니라 테스크 큐에 있고 콜스택에 있는 함수가 끝나고 마무리가 되어 콜스택이 비게되면 테스크 큐에 있는 콜백 함수를 콜스택에 순차적으로 옮겨서 처리하는 방식

Q. Timeout 함수를 0초로 설정한다면?

• 4ms가 최소 지연시간
• 콜스택이 비고 4ms가 지나면 이벤트루프가 콜스택으로 넘겨져서 실행된다.

Q. 만약에 기술적으로 4초가 아닌 0초로 지연시간을 지정할 수 있다면? 바로 실행될 수 있는가?

• 콜스택이 비어야하기 때문에

계속된 꼬리 질문은 솔직히 동일한 답변이라고 생각합니다.
콜스택이 비어져야 이벤트 루프가 태스크큐에 담긴 콜백함수를 전달한다는 같은 답변을 위한 질문들이었던거같아요
모르는 것 같아서 꼬리질문한 건 아니고 그냥 동기 비동기하면 생각나는 질문들이었어요

전체적으로 잘 대답한 것 같아요. 그리고 다양한 기술에 대해서 공부하고 있다는 생각도 드는 것 같아요

[minyoung0503]

역할

면접관 - 김민영
지원자 - 백지원 @seolsis

QnA

0. 1분 자기소개

A.

• 고객 만족 목표, 프로덕트에 대한 오너십
• 책임감을 바탕으로 서비스의 전체적인 흐름 파악, 공동 목표 명확하게 이해하려 노력
• 기능적인 측면뿐만 아니라, 더 나은 사용자 경험을 제공하기 위해 다양한 관점에서 개선하고자 함

---

1. 프론트엔드 개발자로서 "오너십"이란 무엇이라고 생각하시나요?

A.

• 맡은 일에 대한 책임감을 가지고 주도적으로 문제를 해결하고 개선하려는 자세
• 단순히 기능을 구현하는 것을 넘어, 비즈니스와 고객의 시선을 모두 고려해 프로덕트를 만들어야 함 → 이를 위해서 우리가 개발하는 프로젝트에 애정을 갖고, 그 제품의 팬이 되는 것이 중요 → 이렇게 하면 제품에 대한 깊은 이해를 바탕으로 더 나은 사용자 경험 제공

이 답변 너무 좋은 것 같아요 들으면서 우와 ~~~ 했어요. 😲😲😲😲

1-1. 프로젝트에서 오너십을 발휘했던 경험을 말해주세요.

A.

• ‘Youtube CopyKiller‘ 프로젝트에서 AI 기반 개발 진행, 백엔드뿐만 아니라 AI 연동도 담당
• 백엔드 연동 경험은 있었지만 AI 연동은 처음 → 새로운 분야로 보기보다는 배워야 할 영역으로 받아들임
• 모르는 것에 대해 부끄러워하지 않고 적극적으로 AI 개발자분께 연동 관련 질문

---

2. 고객에게 좋은 서비스를 제공하는 것이 목표라고 하셨는데, 그 목표를 실현하기 위해 어떠한 노력을 하시나요?

A. 프론트엔드는 고객이 가장 먼저 접하는 첫인상이기 때문에, UI와 UX를 잘 구성하는 것이 핵심

2-1. UI/UX 구현할 때 가장 중요하게 생각하는 부분이 무엇인가요?

A.

• 사용자에게 적합한 위치에 버튼을 배치하는 등 세부적인 디자인도 중요하지만, 전반적인 사용 흐름이 가장 중요
• 예를 들어, 두 명이 모여 구매하는 '포잉마켓' 프로젝트에서 첫 번째 구매자에게는 결제 후 다른 사람에게 링크를 공유할 수 있도록 링크 복사 기능을 추가, 두 번째 구매자는 결제가 완료되면 공동 구매가 성사되므로 링크 복사 버튼을 추가하지 않음 → 이런 식으로 사용자 경험을 고려하여 기능 구현

---

3. React와 Next.js를 사용하신다고 하셨는데, 두 차이점은 무엇인가요?

A.

• React는 클라이언트 사이드 라이브러리로 주로 CSR을 통해 UI를 구축하며, 초기 로드 후에는 페이지 전환 시 새로운 요청 없이 동적으로 콘텐츠를 변경할 수 있는 특징
• Next.js는 React 기반 프레임워크로, SSR과 SSG를 기본적으로 지원하며 파일 기반 라우팅 시스템을 제공해 개발자가 별도의 라우팅 설정 없이도 쉽게 페이지를 구성할 수 있다는 점에서 React와 차이

---

4. TypeScript와 JavaScript의 차이점 중, 개발 과정에서 느꼈던 장점은 무엇이 있었나요?

A. 타입스크립트는 변수, 함수, 객체의 타입을 미리 정의함으로써 코드의 의미를 명확하게 알 수 있고, 코드 작성 시점에 타입 오류를 발견할 수 있어 런타임 오류를 줄이는 장점

---

5. Youtube CopyKiller 프로젝트에서 두 개의 영상 URL을 등록하여 표절률을 출력하는 과정에서 가장 어려웠던 부분은 무엇이었나요?

A.

• API를 사용해 자동으로 영상을 첨부하고 재생되도록 하는 기능은 처음 사용하는 것이어서 어려움이 있었음
• 표절률을 bar 형식으로 출력할 때 각 표절률마다 UI가 뒤틀리는 현상이 발생해, 다양한 테스트 케이스를 만들어 UI를 지속적으로 수정해야 했던 점이 가장 어려웠음

6. Youtube CopyKiller 프로젝트에서 AI가 제공하는 결과를 어떻게 직관적으로 제공했는지 설명해 주세요.

A. 표절률을 bar 형식으로 출력하면서, 옆에 퍼센테이지도 명시해 이미지와 텍스트에 대한 표절률을 각각 표시하고 그 후, 평균값을 계산해 전체 표절률을 나타냄

---

7. Neighbor-Food 프로젝트에서 본인이 구현한 주요 기능을 간단하게 설명해 주세요.

A.

• ‘Neighbor-Food’는 대학생들이 친구나 이웃과 함께 음식을 주문해 배달비를 줄일 수 있도록 돕는 서비스, 구현한 부분은 마이페이지와 참여한 게시물 목록
• 마이페이지: 대학생들이 사용하는 앱인 만큼 먼저 학교 인증이 필요했고, 이메일 인증을 통해 상태 확인 → 인증 전이라면 '인증 전'으로, 완료되면 '인증 완료'로 표시
  로그아웃 버튼과 내가 참여한 게시물 목록으로 이동하는 버튼 추가
• 참여한 게시물 목록: 사용자가 참여한 배달 게시물의 제목과 식당을 확인할 수 있도록 했으며, 참여 취소 버튼으로 쉽게 취소할 수 있도록 구현

8. Neighbor-Food 프로젝트가 사용자에게 주는 핵심 가치는 무엇이라고 생각하나요?

A. 계속해서 증가하는 배달비로 인해 대학생뿐만 아니라 돈을 버는 직장인들에게도 큰 부담이 되고 있는 상황에서 공부하느라 바쁜 대학생들에게 부담을 덜어줄 수 있는 가치

---

9. Pawing Market 프로젝트에서 장바구니 기능에서 React-Query를 사용한 이유는 무엇인가요?

A. 처음에는 세션 스토리지를 사용했지만, 브라우저 종료 시 자동으로 삭제되는 특성 때문에 React-Query로 변경, 전반적으로 구현 과정에서 큰 어려움이 없었기 때문에 React-Query를 선택

10. 결제 기능을 구현할 때 가장 어려웠던 점은 무엇인가요?

A.

• 처음 결제한 사람은 링크 복사 버튼이 있는 페이지로 이동하고, 두 번째 결제한 사람은 결제 성공 메시지만 표시하는 페이지로 이동하는 기능을 구현하는 데 어려움
• 어떻게 해야 할지 감이 잡히지 않았지만, 링크 복사로 이동하는 경우에는 추가 속성 값을 넘겨주어 해당 속성 값이 있는 경우에만 링크 복사 페이지로 라우터를 이동시키고, 속성 값이 없는 경우에는 결제 성공 UI만 표시하는 페이지로 이동하도록 해결

11. 결제 성공 또는 실패 시 사용자 경험을 어떻게 개선하셨나요?

A. 결제를 성공했을 때는 홈으로 바로 이동할 수 있도록 구현했으며, 결제에 실패했을 경우에는 에러 메시지를 표시해 사용자가 결제 실패를 한눈에 알아볼 수 있도록 했음

---

12. 다양한 협업 경험이 있으신데, 협업하면서 발생했던 어려움은 없었나요?

A. 마지막까지 디자인을 강조하는 팀원이 있었음

12-1. 그 어려움을 어떻게 해결하셨나요?

A. 그때는 해결하지 못하고 시간 부족으로 기능 구현을 마무리한 후 디자인을 수정, 결국 이전 디자인이 더 높은 평가를 받았음 → 이 경험을 통해 앞으로는 의견을 표현해도 된다는 점을 배움

해결하지 못했다는 언급은 없어도 될 것 같아요 ! 그냥 시간이 부족해서 ~~ 부터 시작해도 좋을 것 같습니다. 어떻게 해결했냐고 물었는데 해결하지 못했다고 답변이 시작되면 오잉 싶을 것 같아서요 ㅎ_ㅎ

13. 협업 과정에서 의견 충돌이나 문제 해결을 위해 지원님만의 특별한 방식이 있나요?

A. 사용자 관점에서 우선적으로 생각하며, 내가 유저라고 가정하고 시뮬레이션을 돌려봄 → 내 의견이 맞다고 생각될 때 팀원들에게 의견을 제시하고, 다수결로 해결

---

14. 왜 개발자가 되고 싶으신가요?

A.

• 학부 시절 다양한 언어를 배웠지만, 가장 잘 배우지 못했던 언어는 자바스크립트
• 다른 언어에 적응하지 못해 개발자라는 꿈을 포기하고 싶었던 경험
• 그러나 웹 프로그램에 참여하게 된 기회가 있었고, 내가 구현한 것이 화면에 바로 출력되는 것이 너무 신기, 실제로 서비스를 만들었을 때 누군가가 그것을 사용한다는 생각이 가장 큰 쾌감 → 이 경험을 통해 개발자라는 꿈을 다시 꾸게 되었음

---

15. 쿠키, 세션 스토리지, 로컬 스토리지의 차이점을 설명해주세요.

A.

• 로컬 스토리지와 세션 스토리지는 클라이언트 측에서 데이터를 저장하는 방법
• 로컬 스토리지는 영구적으로 데이터를 저장, 세션 스토리지는 브라우저 종료 시 자동으로 삭제되는 일시 저장소
• 쿠키는 서버와 클라이언트 간 데이터 전송에 사용되며, 유효기간을 따로 설정할 수 있는 장점
• 쿠키는 5KB 용량 제한, 로컬 스토리지는 약 5MB 용량 제한

• 쿠키: 서버와 클라이언트 간에 데이터를 주고받기 위해 사용되며, 요청마다 자동으로 서버로 전송됩니다. 용량 제한(약 5KB)이 있고, HttpOnly와 같은 보안 옵션을 설정해 XSS 공격을 방지할 수 있습니다.
• 로컬 스토리지: 브라우저에 데이터를 영구적으로 저장하며, 브라우저를 닫아도 데이터가 유지됩니다. 용량이 최대 4~5MB로 넉넉하며, 서버로 자동 전송되지 않습니다.
• 세션 스토리지: 브라우저에 데이터를 임시로 저장하며, 브라우저를 닫으면 데이터가 사라집니다. 용량은 로컬 스토리지와 비슷하지만, 일시적 데이터 저장에 사용됩니다.

---

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

A.

• content, padding, border, margin으로 구성
• width, height 속성으로 content 영역 설정
• margin은 border의 외부 공간, padding은 내부 공간을 의미
• box-sizing 속성을 border-box로 설정하면 padding과 border를 포함한 크기를 조절 가능

Box Model: 웹 페이지의 요소가 공간을 차지하는 방식을 설명하는 개념

1. Content: 실제 내용이 들어가는 부분 (텍스트, 이미지 등).
2. Padding: 콘텐츠와 경계(border) 사이의 여백. 요소 내부의 공간을 조정.
3. Border: 요소의 테두리. 패딩과 외부 여백(margin) 사이에 위치
4. Margin: 요소와 다른 요소 간의 외부 여백. 요소 외부의 공간을 조정합니다.

→ 이 네 가지 요소로 요소의 전체 크기와 배치를 결정

16-1. 박스 모델이 웹브라우저에서 어떻게 동작하는지 설명해 주세요.

A.

• 브라우저는 Content 영역에 요소의 실제 내용을 렌더링.
• Padding 적용으로 콘텐츠와 박스의 테두리 사이에 여백 추가.
• Border 그려져 요소의 경계 형성.
• Margin 적용으로 요소와 다른 요소들 사이의 간격 설정.
• 브라우저는 각 부분을 합산하여 요소의 전체 너비와 높이 계산.
• 계산된 값을 기반으로 페이지의 레이아웃 조정.
• 각 요소가 페이지 내에서 정확하게 위치하고, 적절한 간격과 정렬 유지.

---

17. 자바스크립트는 싱글스레드인데 비동기코드가 작동 가능한 이유는 뭘까요?

A.

• 이벤트 루프와 백그라운드 작업을 통해 비동기 처리 가능
• 자바스크립트는 주로 메인 스레드에서 코드를 실행하며, 비동기 작업은 백그라운드에서 처리
• 작업이 완료되면 태스크 큐로 전달되고, 이벤트 루프는 메인 스레드가 비어 있을 때 이 태스크 큐의 작업을 가져와 실행하여 비동기 작업을 처리

1. 이벤트 루프: 비동기 작업을 관리하고 콜백을 실행하는 메커니즘.
2. 콜백 큐: 비동기 작업이 완료된 후 실행할 함수를 저장하는 큐.
3. 웹 API: 브라우저의 기능으로, 비동기 작업(예: AJAX 요청)을 수행할 수 있게 해주는 API.
4. 프로미스: 비동기 작업의 완료를 나타내는 객체로, 결과 값을 다룰 수 있게 해줌.
5. async/await: 비동기 코드를 작성할 때의 문법적 편의성을 제공하는 기능.

→ 이 요소들이 결합되어 자바스크립트는 싱글스레드 환경에서도 비동기 작업을 처리 가능

---

18. State와 Props의 차이점에 대해 설명해 주세요.

A.

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

1. State (상태)

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

2. Props (속성)

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

---

19. React 라이프 사이클을 간단하게 설명해 주세요.

A.

• 마운트, 업데이트, 언마운트 단계로 나뉨
• 마운트 단계: 컴포넌트가 처음 DOM에 삽입될 때 발생하며, 초기 상태 설정이나 API 호출 작업 수행
• 업데이트 단계: 컴포넌트의 상태나 props가 변경될 때 발생
• 언마운트 단계: 컴포넌트가 DOM에서 제거될 때 발생하며, 타이머 해제나 이벤트 리스너 제거와 같은 작업 수행

1. 마운트(Mount): 컴포넌트가 DOM에 처음 추가될 때

• constructor: 컴포넌트 초기화 및 상태 설정.
• componentDidMount: 컴포넌트가 마운트된 후에 호출, API 호출이나 타이머 설정 등에 사용.

2. 업데이트(Update): 컴포넌트의 상태나 props가 변경될 때

• shouldComponentUpdate: 컴포넌트가 업데이트될 필요가 있는지 결정. (성능 최적화)
• render: 컴포넌트의 UI를 렌더링.
• componentDidUpdate: 업데이트가 완료된 후 호출, 이전 props나 상태와 비교하여 후속 작업을 수행.

3. 언마운트(Unmount): 컴포넌트가 DOM에서 제거될 때

• componentWillUnmount: 컴포넌트가 언마운트되기 전에 호출, 타이머 정리나 이벤트 리스너 제거 등에 사용.

---

💡 피드백

• 차분하게 핵심만 전달하는 답변이 너무 듣기 좋았어요 !!
• 답변하기 어려운 질문을 받았을 때 듣자마자 모르겠다고 답변하는 것보다 조금 생각해보고 모르겠다고 답변하는 게 좋을 것 같아요 !
• 고생하셨어요 지원님 🙇🏻‍♀️

[Seoin02]

역할

면접관 - 이서인

지원자 - 윤아영 @ayoung-iya

QnA

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

A. 운 좋은 개발자 / 서로 돕는 친구들 / 긍정적으로 진행하고 있다.

운 좋은 개발자 특이합니다. 근데 본인을 어필할 수 있는 포인트인지 잘 모르겠습니다.

Q. 본인과 잘 맞지 않는 사람과 프로젝트를 하게 되면?

A. 무조건적인 악은 없기 때문에 의견을 먼저 들어볼 것 같다.

꼬리질문에 답을 잘 했습니다.

Q. 자기 객관화를 잘 하는 게 개발에 미치는 영향이 뭔가요?

A. 일을 맡았을 때 할 수 있는지 없는지 걸리는 시간을 파악하는 게 중요하다고 생각한다.

Q. 역량보다 큰 일을 회사가 맡기면 어떻게 할 것 인가요?

A.

잘 답변했습니다.

Q. 프로젝트에서 기본에 충실했던 경험을 말씀해주세요.

A. 리팩토링하면서 많이 느꼈다. 불필요한 state를 줄이고, 관리의 중요성을 깨달았다. useEffect도 최소화로 변경했다.

경험을 잘 말했습니다.

Q. 여행을 계획하고 공유하는 플랫폼은 많은데 트래블록이 가지는 차별성이 있을까요?

A. 참고했던 레퍼런스는 있었다. 차별점이 당장 생각나지 않는다.

Q. 프로젝트에서 본인의 역할은 무엇이었나요?

A. 팀원으로 참여를 열심히 했고, 맡은 컴포넌트와 맡은 페이지를 기한 내에 완성했다. 코어타임을 가졌었는데 코어타임에 매번 참석하고, 정해진 일을 잘했다. 인풋과 검색 페이지와 여행 초기 계획 페이지를 맡았다.

• 꼬리질문: 폼 관리를 하면서 어려웠던 부분이나 들었던 고민이 있었나요?

A. 제어 컴포넌트와 비제어 컴포넌트 사용 여부를 고민했다. 실시간으로 상태를 추적하는 부분은 제어 컴포넌트를 사용했다.

• 리액트 훅 폼 사용 이유가 있나요?

A. 그 부분을 고려하지 못했다. 팀원의 추천

리액트 훅 폼 사용 이유도 생각해보면 좋을 것 같아요.

Q. useEffect를 제거하고, 불필요한 리렌더링을 줄였을 때 성능이 얼마나 개선됐나요?

A. 성능 측정을 해본 것은 아니고, 불필요한 리렌더링이 없어졌다고 생각했다.

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

A. 서버 컴포넌트에서 API의 호출이 필요할 땐 Next.js 캐싱을 사용했고, 클라이언트 컴포넌트엔 리액트 쿼리 캐싱을 사용했다.

• 꼬리질문: 클라이언트 컴포넌트와 서버 컴포넌트를 나누는 기준이 뭐였나요?

A. 기본적으로 get 요청을 할 땐 Next.js 패치를 사용했고, 무한스크롤은 리액트 쿼리의 인피니티쿼리를 사용했다.

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

A. 프로젝트를 리팩토링 하면서 문제점을 정확히 알고 해결한 부분이 있었다. 무한스크롤 커스텀 훅을 사용하려고 했을 때 제대로 동작하지 않았다. 인터섹션 옵저버의 콜백을 밖으로 빼서 해결했는데, 리팩토링을 하면서 왜 해결됐지를 분석했다. 근본적인 문제 해결은 아니었다. 커스텀 훅에서 의존성 배열은 ref로 잡고, useState를 혼용해서 사용했다.

엄청 잘 얘기하시네요! 문제 해결 과정을 많이 고민한 게 느껴지고, 무한스크롤 윈도잉까지 구현했다면 이력서에 넣어도 되지 않을까요?

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

A. 건축학을 공부하면서 예술적인 작업이라 어렵다고 판단했습니다. 동생에게 개발자라는 직군을 추천받았다. 실제로 내가 사용하는 것과 밀접한 기술을 다루는 데 흥미

건축학을 공부하면서 느꼈던 완성의 즐거움을 개발에서도 느끼고 있다.

Q. 다른 사람보다 내가 이거 하나는 자신있다 하는 것이 있을까요?

A. 꾸준하고, 무던하다는 게 장점이다. 지금까지 운이 좋았던 것도 큰 갈등 상황에 감정의 폭이 크지 않았기 때문도 있다고 생각한다.

Q. 개발자에게 필요한 역량은 무엇이라고 생각하시나요? 그리고 본인을 평가했을 때 몇 %이고, 이 역량을 갖추기 위해 어떻게 노력하고 있는지 설명해주세요.

A. 코드를 해석하는 능력이 중요하다. 코드를 해석할 줄 알아야 더 나은 방향으로 나아갈 수 있고, 돌아가는 원리를 추측할 수 있다. 40% 정도 달성했다. 코드 리뷰를 하면서 많이 느꼈는데 어떻게 진행되는 것인지 깃허브 상으로 이해가 어려웠고, 리팩토링 과정에서 기존에 어떻게 돌아갔고, 만들어졌는지 코드를 파악한 후에 수정하는 과정을 거쳤다.

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

A.

키워드 중심 설명을 잘했습니다.

예상 답변

• 컴포넌트가 상태나 props를 변경하면 리액트는 새로운 가상 DOM 트리를 생성합니다.
• 이전 가상 DOM 트리와 새로운 가상 DOM 트리를 비교해 어떤 부분이 변경됐는 지 감지합니다.
• 변경된 부분을 감지하면 리액트는 변경된 부분만 실제 DOM에 적용합니다.

Q. 리액트의 선언형 프로그래밍이 갖는 장점은 무엇인가요?

A.

공식문서 기반으로 예시를 들며 설명을 잘했습니다.

예상 답변: 선언형 프로그래밍은 어떻게 처리할지 명령형으로 일일이 지시하지 않고, 무엇을 보여줄지 선언합니다. 이는 코드의 흐름을 직관적으로 만들어 유지보수를 쉽게 만듭니다. 또, UI 상태와 로직을 분리해 관리할 수 있어 컴포넌트 재사용성을 높입니다.(자바스크립트 자체는 컴포넌트를 분리하는 기능이 내장돼있지 않습니다.)

Q. HTTPS의 원리를 설명해주세요.

A.

원리를 설명하진 못했지만, HTTP을 기반으로 설명하려고 노력했습니다.

예상답변: HTTPS는 HTTP에 SSL/TLS 프로토콜을 적용해 데이터 전송을 암호화하고, 기밀성, 무결성, 인증을 보장하는 통신 방식입니다. 클라이언트가 서버에 접속하면 서버는 SSL/TLS 인증서를 제공하고, 클라이언트는 이를 검증한 후 대칭키를 생성해 서버와 공유합니다. 이후 데이터를 암호화해 안전한 통신을 합니다.

Q. CORS란 무엇이고 어떻게 구현할 수 있나요?

A.

설명하지 못했습니다.

예상답변: CORS는 브라우저가 다른 출처의 리소스를 요청할 때 보안성 제한을 해제하는 메커니즘입니다.

서버에서 Access-Control-Allow-Origin 헤더를 설정해 허용할 출처를 명시해서 구현합니다.

이를 통해 특정 도메인만 자원을 공유할 수 있게 제어할 수 있고, 보안을 유지하면서 외부 리소스를 활용할 수 있습니다.

Q. 10년 뒤에는 본인이 어떤 모습일지 말씀해주세요.

A. 프론트엔드 개발자는 계속 해서 새로운 기술을 도입해야 한다. 10년 뒤에도 요즘의 트렌드와 기술을 살펴보지 않을까 생각한다.

<이력서 보완사항>

• 깃허브 링크가 안 들어가집니다. 확인부탁드려요.
• SEO 최적화는 라이트하우스 이용해서 성능 수치 계산할 수 있습니다.

[seolsis]

0. 1분 자기소개

협업을 중심으로 한 개발 경험을 통해 팀원과 소통의 중요성 배움
개발 과정에서 발생하는 문제를 효율적으로 해결
팀원이 이해하기 쉬운 코드 작성 목표
새로운 기술을 빨리 학습
복잡 문제 효과적으로 해결
UI/UX 중시

1. 프로젝트 내에 처음 접하는 기술을 신속히 학습한 경험을 말씀해 주세요.

프로젝트마다 빠르게 학습
다 처음 접함

구체적인 사례를 같이 들어주면 좋을 것 같아요.

2. 개발 과정에서 여러 작업을 효율적으로 관리했던 사례를 말씀해주실 수 있나요?

아무래도 프로젝트를 들어가면 팀원끼리 역할 분담을 효율적으로 하고
역할 분담 크게 잡고
자기가 맡은 바 하다가 먼저 끝나면 뒤쳐지는 팀원을 도와줌
일정관리 측에서는 회의 때마다 이날까지는 마무리를 지어야 한다
를 노션에 작성해 캘린더 관리
개인적으로는 노트에 뭐를 해야한다 적어서 프로젝트에서 발생하는 문제를 해결

3. 직관 일기는 어떤 서비스이고, 민영님이 맡은 역할은 무엇인가요?

유저 트래픽 100명 있던 웹 서비스
서비스 자체가 야구를 직관했을 때 승률을 따지는 서비스이기 때문에 웹 보단 모바일이 낫겟다 싶어
기존 웹 서비스를 마이그레이션 작업
아직 개발 단계는 못들어감
프론트엔드 전반적 개발
기획에서는 야구를 좋아하다보니 실제 사용자로서 어떤 서비스가 좋은지 직접 얘기
서비스를 제공해줄 수 있는지 판단하는 역할

4. Recoil을 사용하여 상태관리를 하셨는데 많은 상태관리 중 Recoil을 선택한 이유는 무엇인가요?

상태관리 라이브러리가 많은데 Recoil은 비동기 상태를 효과적으로 처리할 수 있고, Recoil 자체가 react에서 제공하는 상태관리
효율적으로 관리
직관적 상태관리 가능

5. 포잉마켓에서 타입 처리와 Prop 지정을 철저히 하셨다고 했는데 타입 처리와 Prop 설정에서 발생할 수 있는 문제를 어떻게 방지하거나 해결했나요?

공통 컴포넌트를 다른 팀원들이 컴포넌트 파일을
pr 올릴 때 이런 식으로 사용하면 된다, 이런 타입 지정할 것 설명 자세히 적음
안에서 발생하는 문제점은 일단 만들어 놓고 구현하였지만 문제가 발생하면 말해 달라고 부탁
공통 컴포넌트 우선 작업

• 명확한 타입 정의
  • 예를 들어 필수 Prop에는 required 타입을 지정하고 선택적 Prop에는 ?를 사용해 유연성을 부여
• 인터페이스/타입 활용
  • 리뷰와 관련된 CRUD 기능을 구현할 때 리뷰 데이터를 나타내는 인터페이스르 정의해 여러 컴포넌트에서 일관된 데이터 구조를 사용할 수 있게 함
• Prop 기본값 설정 및 디폴트 처리
  • 사용자가 필수 값을 전달하지 않았을 때 발생할 수 있는 오류를 예방

6. 웹 소켓을 사용한 실시간 공동 구매 리스트 업뎃 기능을 어떻게 구현했나요?

실시간 데이터 서비스를 진행했을 때 soket.io 라이브러리를 사용했는데 클라이언트 측에서 데이터가 변경되는 상황이 생기면 서버로 전달
서버가 응답해서 다시 클라이언트로 바뀐 데이터를 보내주고 클라이어트에서는 실시간으로 계속 데이터 업뎃
시간 차 없이 변경되는 데이터 반영

7. 포잉마켓에서 UX를 향상시키기 위해 어떻게 했나요?

실시간 데이터 통신 자체가 사용자 경험을 많이 개선시켯다 생각
실시간으로 빠르고 유연하게 반응하다 보니 공동 구매 참여하거나 생성할 때 데이터가 꼬이는 문제가 없도록 했음
상품 리뷰 기능도 담당
상품 리뷰를 작성할 때는 필수된 입력값을 작성하기 전까진 리뷰 버튼을 비활성화
커서 포인트 없도록 만듦
기본값을 다 작성하면 직관적인 포잉마켓 색으로 바뀌게 함
리뷰 작성한 걸 볼 때 상품 상세 이미지랑 구매했던 상품 옵션, 날짜, 리뷰에 대한 내용을 순차적으로 레이아웃 시켜 보여줌

UX 향상 예시로 좋은 것 같아요.

8. 코드 리뷰에서 제공한 피드백 중 팀원들이 가장 크게 개선한 부분은 무엇이었나요?

가장 많이 햇던건 코드 컨벤션 리뷰
코드 컨벤션을 지켜야 유지보수와 문제 해결이 빠름
내가 작성한거 아니여도 이해하기 빠름
공통 컴포넌트 경우에서도 내 페이지에 빠르게 적용 가능

9. 화살표 함수와 일반 함수의 차이점을 설명해 주세요.

• 화살표 함수
  • return을 제외하고 화살표로 매개변수와 결과값을 보여주는 함수 선언 방식
• 일반 함수
  • 함수의 이름과 잘 모르겟음

• 함수를 간단하게 표현할 수 있는 ES6 문법
• 일반함수는 this가 동적으로 바인딩 되는 반면, 화살표 함수는 바로 상위스코프의 this와 같음
• 화살표 함수는 프로토타입 프로퍼티를 갖고 있지 않기 때문에 생성자 함수로 사용이 어렵고, 일반 함수는 생성자 함수로 사용 가능
• 일반 함수에서는 함수가 실행될 때 암묵적으로 arguments 변수가 전달되어 사용할 수 있지만, 화살표 함수에서는 arguments 변수가 전달되지 않음
• 따라서 객체 프로토타입으로 메소드를 선언할 때엔 화살표 함수가 적합하지 않음

10. 콜백 지옥이란 무엇이고, 콜백 지옥을 해결하는 방법을 설명해주세요.

콜백 지옥은 비동기 작업할 때 콜백 함수가 중첩돼서 연속적으로 호출되면 가독성, 유지보수성이 떨어지는 것
안그래도 복잡한 비동기 처리 다루기 힘들어지니까
해결하려면 async/await를 사용해서 비동기 작업이 완료될 때까지 기다리고 결과를 받아오도록 해결

• 콜백 지옥 (콜백헬)
  • 콜백 함수를 중첩 사용할 때 코드가 복잡해지고 가독성이 저하되는 현상
  • 비동기 작업이 많은 곳에서 주로 발생
  • 유지보수가 어려워짐
• 해결방법
  • 콜백 함수를 외부로 분리
    • 비동기 작업의 결괌를 처리하는 콜백 함수를 따로 정의하고 해당 함수를 콜백으로 사용
  • 프로미스 활용
    • 비동기 작업의 성공 또는 실패를 나타내는 객체
    • 콜백함수 사용 대신 then()과 catch() 메서드를 활용해서 비동기 작업 처리
  • async/await 문법 사용
    • 비동기 작업을 동기적인 코드처럼 작성할 수 있게 해주는 문법
    • async 키워드로 비동기 함수를 선언하고, await 키워드로 비동기 작업 결과를 기다림

너무 맞게 대답하시는데 자신이 없었어요. 자신감을 가지세오!

11. 함수형 컴포넌트와 클래스형 컴포넌트의 차이점을 말해주세요.

• 함수형 컴포넌트
  • 리액트에서 ui와 관련돼서 사용하는 방식
• 클래스형 컴포넌트
  잘 모르겠

• 클래스형 컴포넌트
  • 클래스형 컴포넌트는 ES6의 클래스(class)를 사용하여 컴포넌트를 정의
  • React의 컴포넌트의 상태(state)와 생명주기(lifecycle)를 다룰 때 매우 유용
• 함수형 컴포넌트
  • S6의 화살표 함수(arrow function)를 사용하여 컴포넌트를 정의
  • 훅(hook) API와 함께 많이 사용되며, 컴포넌트의 상태와 생명주기를 다룰 때도 유용
• 차이점
  • 상태와 생명주기의 다루는 방식
  • 클래스형 컴포넌트는 상태를 this.state로 정의하고, 생명주기 메서드를 오버라이드하여 다양한 작업을 수행
  • 함수형 컴포넌트는 상태를 useState 훅을 사용하여 정의하고, useEffect 훅을 사용하여 생명주기를 다룸
  • 클래스형 컴포넌트에서는 this 키워드를 사용하여 상태나 메서드를 참조하며, 함수형 컴포넌트에서는 this 키워드를 사용하지 않음
  • 이러한 차이점 때문에, 함수형 컴포넌트는 더 간결하고 가독성이 좋아지며, 테스트와 리팩토링이 쉽게 이루어질 수 있음

12. undefined와 null 차이점을 설명해주세요.

• undefined는 변수가 선언은 되었지만 값이 할당되지 않았을 때 기본적으로 할당되는 값
• null은 의도적으로 값이 없다고 말하는 것

13. Redux의 장단점에 대해 설명해주세요.

• 상태관리할 때 사용
• 장점으로는 ssr을 지원하기 때문에 서버랑 클라이언트 간 상태를 일관적으로 유지할 수 있다
• 단점으로는 보일러 플레이트 코드라고 많은 설정을 하기 위해 가독성이 떨어짐, 코드 복잡
• 상태를 변경할 때 불변성을 유지해야해서 복잡하다는 단점이 있다.

• Redux
  • 가장 많이 사용하는 리액트 상태 관리 라이브러리로 자바스크립트 앱에서 상태(state)를 효율적으로 관리할 수 있게 도와주는 도구
  • 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너
  • 매우 가벼움
• 장점
  • 단방형 모델링(한가지 방향으로만 바뀐다.)
    • action을 dispatch할 때마다 기록이 남아 에러를 찾기 쉬움
  • 상태의 중앙화
    • 스토어라는 이름의 전역 자바스크립트 변수를 통해 상태를 한 곳에서 관리
    • 전역상태 관리 시 효과적
  • 상태를 읽기 전용으로 취급
    • 이전 상태로 돌아가기 위해서는 그저 이전 상태를 현재 상태에 덮어쓰기만 하면 됨
• 단점
  • 아주 작은 기능도 Redux로 구현하는 순간 몇 개의 파일들을 필수로 만들어야 하여 코드량이 증가
  • 러닝 커브가 큼
    • 개념을 익히기 위한 상당한 노력과 시간이 필요

14. 스마트 콘텐츠 전공에서 다른 분야를 선택한 이유가 무엇인가요?

애초에 학교를 다녔을 때 첫 학번이어서 학과 자체가 어수선하고 커리큘럼과 교수가 제대로 지정되어있지 않아 학교 생활에 집중 못함
간단하게 취미로 시작한 필라테스가 직업이 되었고 다른 사람과 영어 회화 스터디 영향으로 프론트 엔드 개발 준비

15. 비즈니스와 개발 중 어디에 더 집중하는 회사를 선호하시나요?

직업상 개발에 더 집중한다.

이거는 회사마다 정답이 있을 것 같은데 지원한 회사에 대해 잘 알아보고 면접마다 맞춰서 대답하는게 좋을 것 같습니당!

<전반적 평가>

• 모르는 부분도 고민해보는 부분이 정말 좋았고, 아는 것들에 대해서는 매끄럽게 잘 얘기해주신 것 같아요!
• 아리까리해도 정답일 수 있으니까 자신있게 말해주세요
• 질문 드린 기술 질문 별표문항이긴 하나 저도 답변 다 못해요 민영님만 답변 못하신게 아니니까 같이 공부하자요 수고하셨습니다 🙇🏻‍♀️