[3회차] Study

[codingaring]

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

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

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

## QnA
### Q. 

A. 

[codingaring]

역할

면접관 - 김유경, 윤아영
지원자 - 정봉찬

QnA

1. 자기소개

   안녕하세요. 저는 프론트엔드 직무에 지원한 정봉찬입니다. api설계, 연동 db설계, 서버 구축 및 운영 등 다양한 풀스택 개발 경험을 바탕으로 프론트엔드 전문성을 강화하고 있습니다.

   DX 개선으로 동료 개발자가 일하기 좋은 환경을 만드는 것은 사용자, 궁극적으로 제품 가치에 도움이 된다고 믿고 있습니다.

2. 풀스택이 아닌 프론트엔드 직무를 희망하는 이유가 있으신가요?

   풀스택을 했지만, 프론트엔드보다는 백엔드에 가까운 업무를 많이 햇다. 간간히 프론트엔드 업무를 했었는데, 그때 더 재미를 느꼈다. 사용자 경험 향상을 고민하는 것이 제품에 더욱 기여한다는 느낌을 얻었다. 사용자 경험을 중요시했을 때 완성도 있는 제품을 개발한다고 생각함. 사용자 인터랙션을 중요시 하기 때문에

   (풀스택 경험이 프론트엔드를 할 때 도움이 되나요?)

   그럼요. 당연하죠. 백엔드와 프론트가 모두 각 각을 알아야한다고 생각한다. 백엔드와 프로젝트를 한 경험이 있었는데, 프론트와 백엔드 중간에서 커뮤니케이션할 수 있는 역할을 해서 수월한 프로젝트를 할 수 있었다.

3. AWS에서 Vercel로 배포 전환하는 과정에서 어려움이 있지는 않았나요?

   AWS에서 Vercel로 전환하는 과정에 대해서는 어려움이 전혀 없었습니다. 그 이유는 저희가 이미 vercel prview PR을 올리게되면 PR이 적용된 웹 사이트를 바로 볼 수 있는 기능을 구현을 했었고, 거기에 더불어 메인과 develop 브랜치에 대해서 vercel 배포를 처음에 했었기 때문에 전환하는데 문제가 없었습니다.

   (처음부터 vercel을 염두에 두고 하신건가요?)

   네. 디자이너와 백엔드 분들도 프로젝트 진행 상황을 같이 보면 좋겠다고 생각했고, CI/CD를 구축하고 시작했습니다.

   (Vercel이 있는데 AWS를 또 배포한 이유는 무엇이죠?)

   배포를 하면 CI / CD를 해주지만, Vercel에 의존하지 않고 서버를 만들고 싶었고, 서버 세팅을 해주다보니, 사용자가 많아질 수록 비용이 기하급수적으로 늘어난다. AWS는 이에 비해 안정적으로 적은 비용이었다.

   (커스터마이징 했다고 하셨는데, vercel과 다른 커스터마이징이 있으셨을까요?)

   없었음~!

4. 검색 페이지 구성에 있어 최근 검색어를 로컬 스토리지에 저장했는데, 저장하는 곳을 로컬 스토리지로 선택한 이유가 있나요?

   사실 크로스 플랫폼을 지원한다면 DB 상에 저장해두면 PC와 모바일이 동기화가 되는데, 크로스 플랫폼까지는 생각하지 않았다.

   그러면 프론트 단에서 검색어를 유지할 수 있는 방법에 대해 고민했는데, 세션 스토리지나 로컬 스토리지를 고민했다. 세션 스토리지는 브라우저를 끄면 삭제되기 때문에 로컬에 저장을 했다.

5. 동일한 검색어 입력시, 기존 검색어가 지워지고 새로 등록됨 왜?

   예를 들어 고양이라고 검색을 한 후에, 다른 여러 검색어가 쌓였을 때 기존의 고양이를 없애고, 새로 등록하는 것이 사용자 경험 측면에서 좋을 것이라고 생각했음

   (…)

   검색어와 검색어에 대한 키를 같이 저장함. 이 아이디를 기반으로 검색해서 제거합니다. 검색어를 로컬 스토리지에서 서치해서 동일한 검색어를 제거하고 새로운 검색어로 등록합니다.

6. 프로젝트를 진행하며 가장 도전적인 부분이 무엇인가요?

   리액트 쿼리의 도입이 가장 큰 도전이지 않을까 싶습니다.

   (어떤 부분에서 도전이라고 느낀 걸까요?)

   저희 프로젝트 진행하는 프론트엔드가 총 다섯 명으로 구성되어 있었는데, 다섯 명 모두 리액트 쿼리에 대한 경험이 없어서 다들 학습하고 구현해야하는 상황이기 때문에 큰 도전이었다고 생각합니다.

   (큰 도전이라고 하셨는데, 도입을 했을 때 어떤 점이 어려웠는지 그 어려운 부분을 극복하기 위해서 어떻게 하셨는지 궁금합니다)

   아무래도 리액트 쿼리 하면 가장 중요하다고 생각하는게 쿼리 키 값들을 하나의 모듈에서 관리하는 시스템이 가장 중요하다고 생각하고 중요한 만큼 어렵다고 생각해요. 이 키를 따로 관리하지 않으면 중구난방으로 매직 넘버 (하드 코딩)을 하게 되면 쿼리의 일관성이 없기 때문에 하나의 팩토리 같은 시스템으로 관리 … 이 부분에 중점을 두고 했던 것 같습니다.

   (팀원 분들이 모두 경험이 없는데, 도입한 배경)

   이커머스 특징 상 서버와 통신을 해야하는 상황이 많았기 때문에 이를 캐싱 처리하지 않으면 서버에 부하가 많이 와서 리액트 쿼리를 사용해본 경험이 없음에도 도입하게 되었습니다.

7. 포잉 마켓 프로젝트에서 팀장으로서 어떤 리더십을 발휘했는지 설명해주세요.

   부트 캠프 과정이 끝나고 나서, 어떤 분한테 이런 얘기를 들었다. 부드러운 카리스마의 중요성을 알게되었다고 말씀하셨는데, 자랑은 아닌데요 저는 되게 PM 활동을 할 때 내가 신뢰할 수 있는 사람이라는 것을 보여주는 것이 중요하겠지만. 그것보다는 내가 팀원들을 신뢰하고 있다는 모습을 보여주는 것이 중요하다고 생각한다. 이 경우 협업이 원활하게 잘 되었다. 팀장으로서 모범이 되고 의지할 사람이라는 것보다 팀원들을 아끼고 있다는 것에 더욱 힘써서 진행을 했던 것 같습니다.

8. 유틸성 커스텀 훅을 제작하면서 특히 기억에 남는 개선 사례가 있나요?

   세로 스크롤 같은 경우에는 기본적으로 마우스로도 지원을 해주는데, 가로 스크롤은 터치 스크롤이 기본적으로 제공이 되지 않고 있어서 이를 커스텀 훅으로 만들어서 적절하게 사용이 되어서 잘 만들었다고 생각하고, 많이 알려져 있는 커머스임에도 불구하고 PC화면에서 터치로 가로 스크롤이 안되는 경우가 많았다. 이 같은 안좋은 사용자 경험에 신경을 써서 작업을 했고, 동료의 피드백은 특별하게 없었습니다. 자기만족이었어요.

9. 포잉 마켓에서 Next.js를 선택하신 이유가 있으실까요?

   저희가 처음에 프로젝트를 진행할 때 리액트를 사용할 것인지, 넥스트를 사용할 것인지 얘기를 나눴다. 기본적으로 NExt에서 제공해주는 번들 최적화 및 커머스라서 이미지를 많이 쓰는데 이미지 최적화도 제공하고. 파일 기반 라우팅 시스템은 팀원이 모두 매력적으로 느낀 기능이었다. 이 외에도 SSG나 SSR 때문에 Next.js를 선택했던 것 같습니다.

   (React와 Next.js 차이점에 대해서 설명주세요.)

   우선 공통점은 웹 팩을 기반으로 번들한다는 것이 공통이 될 수 있고, | 다시다시

   라우터 처리가 있을 것 같습니다. 리액트는 별도의 라우팅 라이브러리를 사용해야한다는 점. Next는 기본적으로 파일 기반 라우팅을 제공한다는 차이가 있을 수 있을 것 같고. api 라우츠, 서버 컴포넌트를 제공한다는 점에서 큰 차이가 있을 수 있을 것 같습니다.

   |보완하면 좋을 듯 큼큼

10. URL 기반으로 상태 관리를 하셨는데, 다른 방법과 비교했을 때 왜 URL로 했는지 설명해주세요.

    상태 관리는 프론트엔드의 숙명인 것 같다. 많고 복잡할 수록 렌더링 최적화가 어려워지기 때문.

    이를 최소화하는 것이 중요하다고 생각했는데, URL 기반 상태관리는 렌더링을 유발하지 않고, URL을 공유했을 때 공유 받은 사람도 동일한 상태를 가져 일관성을 가질 수 있다는 장점

    공동 구매 커머스라서 공유할 상황이 많다. (굳 ! 이 부분의 선택 이유의 큰 장점으로 가져가도 좋을 듯)

11. 리액트 쿼리의 캐싱된 데이터는 어디에 저장되는지 아십니까?

    메모리에 저장되는 걸로 알고 있습니다.

12. 아쉬운 점과 보충하고 싶은 점이 있을까요?

    너무너무 많습니다. 그것들을 해결하고 싶은 마음이 많았는데요, 각자 많이 바쁘고 하다보니까 시간 내서 작업을 하지 못했던 것도 아쉽고 그런 것들이 많습니다.

    (그럼 가장 기억에 남는 해결점이 어떤 게 있을까요?)

    저희가 리액트 쿼리를 사용하다보니까 리스트를 가져올 때 캐싱 처리를 하고 있어요. 제가 찜을 하고 나서 새로고침 했을 때 리스트에 반영이 안되서 (캐싱 된 데이터를 가져와서) 이런 오류들이 기억에 남는 것 같습니다.

    (해결 하셨나요? 해결 하셔야하는 건가요?)

    리얼 월드라는 걸 참고 했는데, 똑같은 부분에 대해서 렌더링 최적화된 방식으로 캐싱한 걸 봐서 이걸 바탕으로 고쳐보려고 하고 있습니다.

    (간단하게 설명)

| 전반적으로 차분하게 설명을 잘 해주셨던 것 같아요. 다음에는 기술 질문을 마구마구 해봐야겠습니다.

[codingaring]

역할

면접관 - 김유경, 정봉찬
지원자 - 윤아영

QnA

1. 1분 자기소개

   안녕하세요 저는 만들고 개발하고 발견하는 걸 좋아하는 개발자 윤아영

   실제로 개발하는 서비스가 어떻게 실행되는 지 궁금해서 프론트엔드가 되었고, 완성된 게 돌아가는 거에 만족을 느끼고 있습니다.

   동료들과의 소통을 통해 스스로의 발전을 깨닫고, 서로 돕고 돕는 과정에 매력을 느끼고 있습니다.

   1. 동료와의 소통과 돕고 돕는 것은 프론트엔드 개발자가 아니어도 가능하지 않냐 개발자들의 문화에 있어서 좋은 것 같다.

2. state의 모순을 제거한다고 했는데, 본인이 생각 했을 때의 모순에 대해서 설명해주세요.

   모순보단 중복을 제거하려고 했습니다. useState를 통해서 state를 업데이트하기 위해 사용을 하는 경우도 있다. 스케줄에서 유추할 수 있는 위도 경도를 뽑아내는 거라던가, 카테고리만 뽑아낸다던가를 state로 관리하고 있었는데, state가 아닌 상수로 관리할 수 있다고 생각한다.

   1. 렌더링 중에 state 대신 계산한 값으로 사용한다고 했는데, 이 부분에 대해서 보완 설명해주세요.

      트레블록 프로젝트에서 여행 계획이 있고, 그 계획에서 위도 경도만 뽑아내는 상태가 있고, 카테고리만 뽑아내는 상태가 있었어서 ~~ 경우를 생각한 것이었습니다. 하나의 상태에서 꺼낼 수 있는 값을 여러 상태로 하지 않고, 하나의 상태에서 뽑아내는 것

3. 리액트에서 상태를 제거하는 것이 왜 중요한지?

   리액트에서 상태라는 것이 리렌더링 될 수 있는 요소가 될 수도 있다고 생각해서 상태를 줄인다는 것은 ~~.

   상태를 줄인다기보다는 중복되거나 모순되는 것들이 없어지는 것이 좋다고 생각하는데, 중복된 것들이라면 하나가 업데이트 되엇을 때 여러 개가 동시에 업데이트 되엇을 때 이런 것들을 실수하게 된다면 업데이트가 되지 않을 수 있다고 생각하고. 모순된 것들은 완료된 것과 로딩 중인 것이 두 개 존재한다면, 둘 다 true인 경우가 생겼을 때 발생할 수 있는 에러가 있다고 생각해서.

4. state의 중복 제거 이외의 리액트에서의 효율적인 상태 관리를 위한 라이브러리나 패턴이 있을까요?

   상태를 적절하게 관리하기 위함일 때 생각나는 것은 react-query , justand, .. 이 생각난다.

   1. 이 중에서 사용했을 때 가장 사용하기 이전에 비해 이점을 느낀 것이 있을까요?

      react-query를 사용했을 때 데이터 캐싱된다는 부분에서 공통적인 부분은 api 요청을 줄일 수 있는 부분에서 효과적인 관리가 되지 않을 생각합니다.

      테마의 변경 등을 관리할 때 전체적으로 필요한 상태는 context API를 관리를 했습니다.

      모달 등에서도 좋은 상태 관리가 되지 않을까 싶습니다.

5. useEffect에서 의존성 배열이 무엇일까요?

   의존성 배열에 있는 값들이 바뀌면 useEffect가 실행

   빈 배열이면 첫 렌더링에만 실행되고, 없다면 매 렌더링 마다 실행되고, 의존성 배열에 값이 들어있다면 그 값이 변할 때마다 실행되게 됩니다.

   객체가 있다면 리렌더링 될 때마다 새로운 값으로 인식이 되기 때문에 useMemo나 useCallback같은 처리가 필요하다고 생각합니다.

   1. useMemo나 useCallback을 사용하신 경험이 있으신가요?

      의존성 배열에 객체나 배열이 있는 경우 사용해봤다.

6. 도쿄 페이지에 방문 했는데, 로그인을 여기서 하면 도쿄 페이지로 다시 로그인이 된다. 여기서 로그아웃을 하면 방문이 가능하다. 인지하고 있는지

   인지하지 못하고 있었다. (왜 그런 것 같느냐?) return URL을 작성하는 부분 …

7. 일을 하실 때 어떤 부분에서 동기부여를 얻나요?

   동기부여를 얻기보다는, 해야 할 일이라고 생각을 하고 임하는 것 같습니다.

   (어떻게 보면 그게 동기부여네요. 해야될 일은 해야 하니까)

8. 본인은 활동을 할 때 리더인가요 팔로워인가요?

   팔로워 스타일인 것 같습니다. (팔로워 스타일인 이유) 제가 리더로서의 단점이 있다고 생각을 합니다. 일단 다른 팀원이 제대로 참여 안한다고 해야하나, 힘듬이 있는 상황에서 격려를 하기보다는 사정이 있겠거니, 할 일은 하겠지 하며 방치하는 게 있는 것 같습니다.

9. 본인의 장단점에 대해서 말해주세요.

   맡은 바에 최선을 다하고, 기간 안에 완성하는 것을 목표로 하고 있다는 것이 장점이 될 수 있을 것이라 생각하고. 단점 같은 경우에는 제 감정을 말로 잘 표현하지 못하는 것이 단점이 될 수 있을 것 같습니다. 어쨌든 소통을 해야하는데, 제가 말 하기 전에 많은 고민을 하기도 하고 굳이 해야할 말인가 라는 생각이 들어서 다섯 가지 말을 준비했다면 그 중에 한 가지만 말하는 것이 단점일 수도 있을 것 같습니다.

   (그러면 사실 누구나 다 단점이 있는데, 그럼에도 이 단점을 극복하기 위한 노력을 하는데, 본인도 자신의 단점을 극복하기 위해서 하시는게 있으실까요)

   프로젝트 관련해서 말을 하는게 어렵다고 말씀을 드렸는데, 대화를 하기 전에 준비과정을 거쳐서 제가 한 말이 근거가 있을 지, 뒷받침할 말이 있을 지 찾아보고 대화를 하려고 합니다.

10. 저희 회사가 아무래도 네카라쿠배급 회사이기 때문에 훌륭한 사람을 뽑아야해서 질문을 많이 드릴게요.

    주소창에 주소를 입력했을 때 네트워크부터 브라우저가 렌더링되는 과정을 설명해주세요.

| 이력서 내용 조금 더 보완하시면 질문이 조금 더 나오지 않을까 싶습니다 !

[ayoung-iya]

역할

면접관 - 김유경, 윤아영
지원자 - 정봉찬

QnA

Q. 1분 자기소개

• 다양한 풀스택 경험, dx 개선, 동료들에게 좋은 환경 제공, 사용하는 제품에 좋은 가치 제공, 좋은 컴포넌트 설계, 커스텀 훅 제공, 배포 파이프라인 구현 + ( 회사 별 지원 동기)

이력서의 적힌 내용 + 소프트 스킬 혹은 이력서 적힌 내용의 경험을 덧붙여서 자세히 이야기 해보는 것은 어떤가요?

Q. 다양한 풀스택 경험, 프론트 엔드 직무를 희망하시는 이유

• 풀스택 보다는 백엔드에 가까운 업무를 진행, 간간히 했던 프론트엔드 업무가 재미있었다. 사용자 경험을 높일 수 있는 부분이 제품에 더 기여하는 느낌을 받았다. 사용자 경험을 중요시 할 때 완성도 있는 제품을 만드는 것 같은 느낌, 사용자 인터랙션을 만드는 것에 흥미를 가져 전향하게 되었다.

Q. 백엔드 경험이 프론트엔드를 경험할 때 도움이 된 부분은?

• 백엔드든 프론트엔드든 서로가 서로를 어느 정도 알아야한다고 생각한다. 부트캠프에서 마지막 협업프로젝트를 할 때 중간에서 커뮤니케이션의 다리 역할을 해서 수월한 프로젝트 진행이 되었다.

Q. aws배포에서 vercel배포로 전환하는 과정에 대해서 어려움은 없었나?

• 없었다. 이미 버셀 프리뷰를 제공하기 위해서 동시에 배포를 했었다.

Q. 동시 배포를 진행하신 이유가 있으신가?

• 디자이너 분들과 백엔드 분들도 프로젝트 진행 상태를 같이 보면 좋겠다고 생각을 했다.

Q. 그렇다면 이미 vercel로 배포를 하였는데 aws로 배포를 추가적으로 진행하신 이유는 무엇인가요?

• vercel의 경우 ci/cd를 이미 해주고 있다. 레포지토리만 연동하면 알아서 배포가 이루어진다. 사용자가 많아질수록 요금이 기하급수적으로 올라가고 커스터마이징을 위해서는 aws의 사용이 필요하다고 생각했다.

aws의 다른 점을 찾아봐야할까요? 어째든 배포 경험이 있는 건 좋아할 것 같은데 아쉬운?

Q. 동일한 최근 검색어를 로컬 소토리지에 저장한다고 적어주셨는데, 로컬 스토리지를 선택하신 이유는?

크로스 플랫폼을 위해서는 db상에 저장해두는 것이 좋겠지만 거기까지는 고려하지 않았다. 프론트엔드단에서 검색으로 유지할 수 있는 방법 중 하나가 자체 웹스토리지 (세선스토리지, 로컬스토리지)가 있었다. 세션탭은 창을 닫으면 사라진다. 최근 검색어 같은 경우 유지될 필요가 있다고 생각해서 로컬스토리지를 선택

기획상? 혹은 빠른 개발? 크로스 플랫폼을 못했다기보다는 다른 이유가 있으면 더 좋지 않을까요?

Q. 동일한 검색어 입력 시 기존 검색 이력이 사라지면서 새로운 검색어를 등록한다고 했는데 왜 동일한 검색어를 입력하면 기존 검색이력이 사라지는지 궁금합니다.

• 예를 들어, 오래된 검색어가 있을 때 오래된 것을 지우고 새로운 것으로 갱신하는 것이 더 나을 것이라고 생각

사실 이 부분 아직 잘 이해 못했어요,,😅 리스트들을 로컬스토리지에 저장하는 건지? 검색어 리스트가 로컬스토리지에 저장이 되어 있어, 그 아이디를 가지고 queryKey를 검색하는 건지?

Q. 프로젝트를 진행하면서 가장 도전적인 부분은?

• 리액트 쿼리의 도입

Q. 어떤 부분에서 도전적이라고 생각을 했나?

• 팀원들 모두 리액트쿼리에 대한 경험이 없어서 학습하고 구현을 했어야해서 도전이었다.

Q. 도입했을 때 어려운 점은 없었는지 어려운 점을 어떻게 극복하였는지

• 리액트 쿼리 키 값을 잘 관리해야한다고 생각해 중점적으로 다루었다.

Q. 모두가 경험하지 않았는데 도입한 이유

• 이커머스 특성상 서버와 통신해야하는 경우가 많았다. 찜부터 장바구니까지, 많은 시스템이 서버와 API를 요구했기 때문에 캐싱 처리를 하지 않으면 서버에 부하가 많이 가서 리액트 쿼리를 사용한 경험이 아무도 없음에도 도입하게 되었다.

Q. 팀장으로서 어떤 리더십을 발휘했나요?

• 부드러운 카리스마의 중요성에 대해서 말씀해주셨다 (웃음) 내가 팀원들을 신뢰하고 있다는 모습을 보여주는 것이 중요하다

Q. 구현하신 커스텀 훅 중 좋았던 것은 어떤 것이 있나요?

• 기본적으로 마우스로 가로 스트롤을 제공하지 않는다. 피씨 화면에서 마우스로 가로스크롤이 되지 않아 불편한 경험이 있다. 그래서 신경써서 작업했다.

Q. 프로젝트에서 Next.js를 사용하신 이유가 무엇인가요?

• 번들 최적화, 이미지 최적화, 파일 기반 라우팅 시스템 등

Q. 리액트와 넥스트의 차이점

• 라우터 처리

Q. url 기반의 상태 관리 선택한 이유

• 상태 관리의 경우 프론트엔드의 숙명
• url 기반 상태 관리는 기본적으로 렌더링을 유발하지 않는다. 공유 받은 사람도 동일한 상태를 받을 수 있다는 일관성이 좋다.
• 공유가 활발하게 진행되는 서비스라서 선택

Q. 리액트 쿼리를 통해서 데이터를 캐싱한다고 하는데 어디에 저장되나요?

• 메모리에 저장됩니다.

Q. 포잉 마켓 이후 아쉬운 점이라던가 보충하고 싶은 점이 있는가?

• 많다. 다들 바쁘다보니 시간 내서 작업을 하지 못했던 것도 아쉽다.

Q. 해결해야하는 점 중에 기억에 남는 것은?

• 데이터가 캐싱되어 찜을 하고 나서 새로고침 했을 때 반영되지 않는 이슈가 존재했다.

Q. 그것을 해결한다고 생각했을 때의 구상이 있는가?

• 참고한 사이트가 있다. 최적화되는 방법으로 캐싱처리하는 것이 있다.
• 해당 아이디를 가지고 캐싱된 데이터에서 해당 아이디 데이터만 변경하는 방법
• 리스트 자체를 invalidate 하는 방법도 있지만 캐싱된 데이터를 활용하고 싶었다.

백엔드 부분에 대한 예상 답변의 준비도 있으면 좋을 거 같아요

[Seoin02]

역할

면접관 - 이서인
지원자 - @minyoung0503

QnA

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

A.

내용이 길다고 느꼈습니다. 꼬리 질문 나올 게 많을 것 같은데 잘 못 들었어요...

Q. 복잡한 문제도 두려워하지 않고 효율적으로 해결한다고 작성하셨는데, 구체적인 경험을 말씀해주세요.

A. API 연결에 어려움을 가지고 있었는데, 팀원들에게 공유해서 문제를 해결했다. 이후 다른 팀원들의 문제 여부를 질문하고, 적극적으로 소통했다.

목소리톤이 차분하고 좋습니다.

Q. 프로젝트 방향을 정하면서 역할 분담의 중요성을 깊이 이해하게 됐다는 게 무슨 의미인지 구체적으로 말씀해주세요.

A. 포잉마켓 프로젝트에서 PM(일정관리)를 맡았는데, 처음엔 각 역할의 필요성에 의문이 있었는데, 나중에 돌아보니 좀 더 책임감을 가지고 임할 수 있었다. 정해진 일정처럼 진행되진 않았지만, 계속 일정을 확인하니까 팀원끼리 협업 하는데 좋은 영향이 됐던 것 같다.

뭔가를 생각할 때 눈을 가늘게 뜨는 습관 발견했습니다.

Q. 직관일기 프로젝트 유저가 얼마나 있었고, 이를 모바일 애플리케이션으로 마이그레이션 하는 이유를 설명해주세요.

A. 유저는 100명 정도 있었다. 마이그레이션 이유는 아무래도 야구 직관은 내가 내 핸드폰을 가지고 야구장을 직접 가서 승리, 패배를 기록하는 게 대부분일텐데 pc로 하면 접근성이 떨어진다.

이유가 명확해서 좋은 답변이었다고 생각합니다.

Q. React-Native를 다룰 줄 아시나요?

A. 아직 기획 단계라서 개발 신경을 못 쓰지만 공부를 하고 있다.

기획을 하면서 공부하고 있는 상황을 어필하면 좋을 것 같아요.

Q. 포잉마켓 프로젝트에서 팀원들이 사용하기 편한 공통 컴포넌트를 구현하기 위해 어떤 노력을 했는지 구체적으로 말씀해주세요.

A. pr을 올릴 때 공통 컴포넌트 사용방식을 구체적으로 작성했다. 타입 별로 클래스 네임 지정해서 사용자가 네임만 지정하면 그에 맞는 스타일을 적용할 수 있게 노력했다.

납득이 되는 답변이었습니다.

Q. 웹소켓 구현 과정과 트러블 슈팅을 설명해주세요.

A. 소켓 io를 활용해 백엔드에서 소켓 서버를 설정하고 클라이언트와 서버 간 웹소켓 통신 유지하는 과정을 유지했다. 이벤트…

트러블은 실시간으로 데이터를 주고 받는 과정에서 있었다. 데이터 일관성에 문제가 생길 것을 걱정했는데, 소켓io에서 제공하는 기능으로 해결했다.

�이외에도 다른 기술적인 트러블 슈팅을 하나 준비하면 좋을 것 같아요.

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

A. 어떤 개발을 하든지 공부를 하든지 왜?라는 질문을 계속 던지는 게 중요하다고 생각한다. 외우는 방식으로 개발하면 학습이 되지 않는다. 사용자도 의문을 가질 수 있는 문제가 있다.

스스로 평가했을 때 30%

두 번째 프로젝트에서 0%였고, 포잉마켓 프로젝트를 했을 때 부터 왜?라는 연습을 많이 하고 있다. 점점 더 늘어날 것이라고 장담할 수 있다.

의도적으로 작은 문제여도 계속 검색하고 고민하는 습관을 들이고 있다.

잘 말씀해주셨는데, 역량 퍼센트를 60% 이상으로 잡아도 되지 않을까여?!

Q. 사용성 개선 경험을 말씀해주세요.

A. 프로젝트를 하면서 개발자 생각대로 진행을 하다가도 사용자 입장에서 테스트를 해보고 팀원들과 얘기해 바꾸는 노력을 했다.

작은 버튼 하나보다 구체적인 개선 사례를 준비하면 좋을 것 같습니다.

Q. 비전공자이신데 개발로 직무를 변경한 이유와 적성에 잘 맞는지 알려주세요.

A. 필라테스 회원과 강사로 접근하는 게 달랐고, 강사로 일하면서 동료와 경쟁의식이 강조돼서 외롭다는 감정을 가지고 있었다. 프론트엔드 개발은 내가 한 만큼 결과가 보이고, 다른 사람들과 다같이 좋은 결과를 내는 게 매력적이다.(생략)

필라테스, 영어 스터디 등 과정 설명이 길다고 느껴졌고, 좀 더 중요한 핵심만 집어서 얘기하면 좋을 것 같습니다.

Q. 개발하다가 외로움이 닥치면 어떻게 할 것인가?

A. 동료들과 유대감보단 경쟁의식이 강했던 부분이 외로웠다. 전에 느꼈던 외로움과는 다른 문제라 극복할 수 있을 것 같다.

Q. 본인이 이커머스(옷 쇼핑몰) 회사에 어떻게 기여할 수 있을지 말씀해주세요.

A. 예전에 친구와 쇼핑몰 창업을 했던 적이 있다. 그 안에서 카페집사라고 쇼핑몰 홈페이지 관리 서비스가 있었는데, 카테고리, 디자인 등은 사업자가 했어야했다. 이런 경험을 아쉽게 생각했었는데, 포잉마켓 이커머스를 진행하고, 사용자 경험을 고민하면서.

잘 모르겠습니다… 갑자기 포기…

잘 얘기하시다가 포기해서 당황했지만, 본인이 회사에 기여할 수 있는 부분을 정리해보면 좋을 것 같아요. 결국 회사는 이익창출이 목표니까요.

Q. 자바스크립트의 동작 원리를 설명해주세요.

A. 단일 스레드, 저거? / 콜 스택, 이벤트 루프

예상 답변

• 자바스크립트는 싱글 스레드 기반으로 동작하고, 콜 스택을 사용해 함수를 실행합니다.
• 동시에 많은 작업을 처리해야 할 땐 브라우저 내장 기능인 이벤트 루프를 통해 비동기 작업을 처리합니다.
• 함수가 호출되면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시돼 순차적으로 실행됩니다.
• 비동기 함수의 콜백 함수 또는 이벤트 핸들러는 태스크 큐에 보관되는데, 이벤트 루프는 콜 스택이 비면 태스크 큐에 대기 중인 함수를 순차적으로 이동시킵니다.
• 마이크로태스크 큐는 태스크 큐보다 우선순위가 높아 마이크로태스크 큐(프로미스)에 함수가 대기하고 있으면 태스크 큐보다 먼저 실행됩니다.

갑자기 목소리가 차분함에서 애기스럽게 바뀌었습니다?! 다시 차분한 목소리로 가주세여… 이벤트 루프 등 명확한 단어로 설명 마무리하면 좋을 듯 합니다.

Q. 이런 동작 원리의 장점을 설명해주세요.

A.

비동기 처리 장점을 대체로 잘 말했는데, 좀 만 정돈하면 좋을 것 같습니다.

예상 답변

• 비동기 작업으로 시간이 오래 걸리는 작업 완료를 기다리지 않고 다른 작업을 계속 진행할 수 있어 사용자에게 빠르고 부>드러운 웹 경험을 제공할 수 있습니다. 아울러 CPU와 메모리 자원을 효율적으로 처리할 수 있습니다.
• 싱글 스레드로 동작하는 것은 웹 애플리케이션에서 복잡한 동기화 문제를 줄일 수 있고, 직관적인 코드를 작성할 수 있는 장점이 있습니다.

Q. 네이버 검색 창에 검색어를 입력했을 때 일어나는 과정을 설명해주세요.

A.

네트워크 요청과 응답 과정부터 잘 말해줬습니다. 손 동작 화려합니다. 리플로우 용어 사용하면 좋을 것 같아요.

예상 답변

• URL입력 후 엔터키 입력하면, 웹 브라우저가 도메인의 IP주소를 조회합니다. (먼저 캐시를 찾고, 그 다음 DNS를 기반으로 검색합니다)
• 웹 브라우저가 찾은 IP주소를 기반으로 서버와의 TCP연결을 시작하고,
• 웹 브라우저가 HTTP 요청을 서버로 전송합니다. (필요한경우 HTTPS 보안 통신 진행)
• 웹 서버가 요청을 처리하고 응답을 다시 웹 브라우저로 전송합니다.
• 웹 브라우저가 전송받은 콘텐츠를 렌더링합니다.
• 브라우저는 서버로부터 HTML 파일을 수신하고, 이를 파싱해 DOM 트리를 생성합니다.
• 동시에 브라우저는 HTML 파일 내 CSS 파일을 파싱해 CSSOM 트리를 생성합니다.
• 다음에 브라우저는 DOM 트리와 CSSOM 트리를 결합해 렌더 트리를 생성합니다. 렌더 트리는 화면에 표시될 요소들만 포함하며, 각 요소의 스타일 정보도 포함합니다.
• 리플로우 과정을 거치면서 렌더 트리를 기반으로 각 요소의 위치와 크기 등 레이아웃을 결정합니다.
• 리플로우 완료 후 브라우저는 렌더 트리의 각 노드를 화면에 페인팅을 수행합니다. 이 단계에서 텍스트, 색상, 이미지, 테두리 등 시각적 요소들을 그립니다.

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

A.

잘 설명했습니다.

예상 답변

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

Q. 가상 DOM을 사용한 리액트의 장점과 단점을 설명해주세요.

A. 성능 최적화 / UI가 복잡하거나 데이터 변경이 많이 있을 때 효율적인 렌더링을 할 수 있다.

아무리 작은 변경이라도 많은 비용을 사용할 수 있다?! => 확실한 것을 말했으면 긴가민가 하는 내용은 말 안 하는 게 좋은 것 같습니다.

예상 답변

• 장점은 가상 DOM이 변경 사항을 메모리에서 계산하고, 실제 DOM 조작을 최소화하면서 성능을 최적화한다는 것입니다. 또, 리액트 개발자는 가상 DOM 덕분에 UI 변경 사항을 직접 관리할 필요가 없습니다.
• 반면, 단점은 가상 DOM을 사용하는 초기 렌더링에 비용이 발생하고, 가상 DOM은 복잡한 비교 알고리즘을 사용하기 때문에 이를 이해하고 최적화하기 위해 깊은 이해가 필요합니다.

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

A. 잘 모르겠습니다.

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

Q. 타입스크립트 타입 중 any와 unknown의 차이를 설명해주세요.

A.

모르는 것 같지만 아는 부분까지 답변하려고 노력하는 모습이 좋았습니다.

예상 답변

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

총평

• 민영님 면접 넘 차분하게 잘 준비하고 계시는 것 같습니다. 목소리톤도 넘 좋습니다~

이력서 보완 점

• 블로그 링크 클릭 시 이동을 하지 않고(-표시가 문제인 듯 합니다.), 글이 하나 있는 게 신경쓰입니다.
• 스킬에 css 라이브러리도 쓰면 좋을 것 같아요.
• 포잉마켓 진행하진 않고 있는데… 날짜 표기를 저렇게 해도 될까요?

[ayoung-iya]

역할

면접관 - 정봉찬 윤아영
지원자 - 김유경

QnA

Q. 자기소개

• 같이 일하고 싶은 동료가 되고 싶은 개발자, 가독성이 좋은 코드, 재사용하기 쉬운 코드, 소통에 어려움이 없는 동료가 되고 싶다.
• 하나의 역할만 수행할 수 있게 작은 단위의 컴포넌트 작성, 여러 커스텀 훅을 분리해서 코드 작성

Q. 기능 구현과 가독성 좋은 코드 어떤 것을 우선시 하나요?

• 기능을 우선시한다. 하지만 개발을 배운 시점부터 분리해서 코드를 짜는 것이 습관화 되어 있다. 초반부터 깔끔하게 짜는 편이다.

Q. 작은 단위의 컴포넌트, 기준이 있는가?

• 공통된 디자인, 비슷한 로직을 사전에 확인한다.

Q. 로직이 중복되는 경우 어떤 패턴을 사용해보았는가?

• 합성컴포넌트, 컴포넌트를 재사용해야하는데 완전히 동일하지 않지만 기본적인 틀을 공유하는 경우 적용

Q. 합성 컴포넌트를 사용하는 입장은 어떻게 고려했는가?

• 자식으로 받도록 하였다.

Q. 메인페이지 스켈레톤 ui 통해 cls 최적화, lcp 수치가 많이 높다. 다른 페이지는 cls 작업을 진행하지 않았는가?

• 맡은 페이지를 먼저 적용했다. 다른 페이지에 한해서는 담당자에게 말해두었다. 이번달까지 쿼리문, 스켈레톤, 반응형 ui등이 마무리 될 예정이다.

Q. 함께하고 싶은 개발자는 어떤 개발자인가?

• 문제점에 대한 해결 과정을 가감없이 동료들에게 공유해주는 동료
• 서로 어려움이 있을 때 적극적으로 송통하고 어려움을 같이 고민하고 이야기 나눌 수 있는 좋은 관계

Q. 타입 세이버 프로젝트에서 데이터 패칭 분할에 대한 내용이 있다. 어떤 이슈가 있었던 거 같다. 그래프QL 방법은 고려해보셨나?

• 잘 몰라서 고려해보지 못했다.

마지막 질문에서 몰랐던 부분 질문해보는 건 어떤가요? 갑자기 그런 생각이 들었어요

Q. axios interceptor 기능을 fetch 함수로 구현했다고 봤는데 구체적으로 어떻게 진행하셨나요?

• 데이터 패칭 함수들의 기본적인 골격이 거의 유사. 헤더 지정해 주는 부분만 하나의 http 클라이언트를 선언해서 그것을 통해 데이터 통신을 할 수 있도록 했다.

error를 캐치해주는 그런 것도 기대하긴 했습니다

Q. 리액트 쿼리란?

• 데이터들을 조금 더 쉽게 에러처리나 로딩 등의 상태를 받아볼 수 있도록 도와주는 것

제가 놓친 것인지는 모르겠으나 일단 데이터를 캐싱해 주는 것도 큰 역할이지 않을까 싶습니다.

Q. 에러처리나 로딩 처리 하신 부분

• isLoading 값을 이용하여 스켈레톤 ui를 표시해 주었다. 에러가 발생했을 때는 토스트를 통해 알렸다.

Q. isLoading과 isFetching의 차이점에 대해서 설명해주세요

• ~~ 잘 모르겠습니다.

첫 fetch라면 isLoading, 재fetch가 진행중이라면 isFetching으로 알고 있습니다.

Q. useMutation도 사용하셨나요? 사용하셨다면 useMutation과 useQuery의 차이점에 대해서 설명해주세요.

• useQuery는 get요청 때 사용하고 useMutation은 patch, put, delete등의 데이터를 수정하거나 삭제하는 등의 요청을 했을 때 사용했습니다.

Q. useMutation을 사용해서 데이터를 업데이트 하는 것은 그냥 fetch를 사용했을 때 어떤 이점이 있나요?

• mutation을 활용하면 데이터 변경을 했을 때 성공했을 때 다른 함수를 실행할 수 있다는 점이 좋았다.
• onSuccess 되었을 때 수정된 데이터를 invalidate 해서 무효화할 수 있다.

성공했을 때 다른 함수를 실행할 수 있다는 부분에서 try...catch문에서도 할 수 있지 않나라는 생각이 들기는 했습니다. 하지만 invalidate는 아닌가 싶어서 따로 꼬리질문은 하지 않았었습니다.

Q. staleTime, cacheTime에 대해서 어떻게 관리하셨는지 궁금합니다.

죄송합니다 cacheTime이 아니라 gcTime이었네요.
gcTime의 기본값은 5분입니다. 사용되지 않거나 비활성 상태인 캐시 데이터가 메모리에 남아 있는 시간입니다.
staleTime의 기본값은 0입니다. 데이터가 오래된 것으로 간주되는 시간입니다.

Q. 동기부여를 얻는 부분

• 같이 고민하고 해결 방법을 가져오고 모두가 만족할 수 있는 방법으로 해결했을 때
• 학습한 부분, 경험이 성취감으로
• 사용자들의 피드백

Q. 리더 스타일인가? 팔로워인가?

• 리더 스타일이다. 팔로워 일 때도 적극적인 팔로워

Q. 본인의 장단점

• 성격이 급하고 감정의 폭이 크다. 너무 신나서 실수하거나 빼먹을 때가 있다.
• 단점을 줄이고자 여러 노력을 했다.
• 그 중 기록하는 습관이 가장 도움이 되었다.

Q. 프로토타입과 프로토타입 체인에 대해서 설명해주세요

• 프로토타입은 객체 지향의 상속과 유사한 효과를 내는 것
• 프로토타입 체인 상에 있는 요소들은 상위에 있는 메서드를 활용할 수 있다.

Q. 코딩테스트를 소홀히 하는 이유

• 모든 것은 변명이지만
• 기존 프로젝트를 리팩토링 하는 것에 우선순위를 두고 시간 투자를 하고 있다.

Q. 본인이 맞지 않다고 생각하는 사람들과 같이 일하게 되었을 때 대처 방법

• 비교적 독립적인 페이지 혹은 기능을 부여할 것 같다.
• 그러고 일대일로 적극 소통할 것

Q. 상사라면?

• 새로운 걸 도입하는 것에 보수적인 측면이 있는 것이라고 생각. 회사에 더 오래 있었다는 것은 저보다 회사의 사정을 잘 알고 있는 것이라고 생각. 그리고 나의 생각도 잘못된 부분이 있을 수 있으니 의견을 따를 것

Q. 가고 싶은 회사의 이상향

• 자유롭게 의견을 나누고 싶어서 수평적인 회사 문화를 원한다

Q. 이상향과 맞지 않는 회사라면?

• 회사의 구성도 자체가 수직적인 것은 괜찮지만 서로 의견을 주고 받는 것도 어렵다면 힘들 것
• 다양한 의견을 나눌 수 있어야 좋은 프로덕트가 나온다고 생각
• 업무까지 수직적인 구조의 연장이라면 힘들 것이다.

Q. 리팩토링 위주로 진행하셨는데 별도로 관심을 두고 공부하는게 있으신가요?

• 최근에는 못했다.
• 이전에는 자바스크립트 책을 읽고 기본적인 원리를 좀 알고자 했고
• 리액트 타입스크립트를 시작했을 대도 책을 통해 활용법을 익혔다.
• 최근에는 리팩토링 위주로 쓰고 있는 라이브러리들을 잘 쓰고 있는지 에러 처리 로딩 처리 같은 와성도를 높이기 위해 고민을 한다.

안한다기 보다는 사용한 라이브러리의 좀 더 깊이 있는 사용법을 익히고 있다고 이야기해도 괜찮을 거 같습니다.

전체적으로 일관성있는 모습을 볼 수 있었던 거 같아요

[minyoung0503]

역할

면접관 - 김민영
지원자 - 이서인 @Seoin02

QnA

0. 자기소개

A.

• 사용자 경험을 최우선적으로 하는 프론트엔드 개발자
• 어떤 문제나 요구사항이든 집요하게 파고들어 반드시 해결하는 집념이 장점
• 계획적으로 일을 처리하는 것을 선호해서 프로젝트 일정 관리에서 강점을 발휘한 경험

---

1. 기자에서 프론트엔드 개발자로 전환하게 된 계기가 무엇인가요?

A.

• 3년 3개월 동안 기자로 일하면서, 주변 사람들의 문제를 해결하고 그들이 더 나은 삶을 살 수 있도록 돕는 역할 → 그 과정에서 문제 해결에 대한 적성 발견
• 업무 환경이나 문화가 성향에 맞지 않다고 느껴, 기자 일을 오래 지속할 수 없겠다는 생각
• 그럼에도 불구하고, 사람들의 삶을 더 나은 방향으로 개선하고자 하는 마음은 여전히 강했음
• 프론트엔드 개발자가 이러한 목표를 실현할 수 있는 직업이라고 생각하여 직무 전환을 준비

1-1. 문제 해결 적성 발견 후 어떤 점에서 개발이 더 매력적으로 다가왔나요?

A.

• 기자로 일할 때는 문제를 해결하는 데 긴 시간이 걸리는 경우가 많았음
• 그에 비해 프론트엔드 개발은 비교적 짧은 시간 안에 요구 사항이나 문제를 해결하고, 그 결과가 눈에 직관적으로 보인다는 점에서 큰 매력

1-2. 기자 경험이 개발자로서 일할 때 어떻게 도움이 되었나요?

A.

• 기자로 일하면서 문제를 해결하기 위해 다양한 소스를 통해 원인을 찾아내려는 집요함을 키움 → 이 태도가 프론트엔드 개발에서도 큰 도움이 될 것이라고 생각
• 기자로서 다양한 직업군과 연령대의 사람들을 만나며 쌓은 커뮤니케이션 능력 → 개발자로서의 협업에 강점이 될 것이라고 생각

---

2. 인증 토큰 자동 갱신 로직을 구현하셨다고 했는데, 그 과정을 설명해 주실 수 있나요?

A.

• Axios Interceptor라는 미들웨어를 사용하여 OAuth 로그인 과정에서 Access Token이 만료되었을 때 Refresh Token으로 교체하는 로직 구현
• Access Token이 2시간 동안 유효하도록 설정되어 있었고, 만료된 후 401 에러가 발생할 경우 Axios Interceptor에서 응답을 가로채 Refresh Token으로 교체

2-1. Axios Interceptor를 활용한 자동 갱신 로직에서 가장 어려웠던 점은 무엇인가요?

A.

• 처음에 작성한 로직은 401 에러를 제대로 감지하지 못해, Access Token이 만료된 후 제대로 동작하지 않았음
• 문제의 원인을 파악한 후, 401 에러가 발생했을 때 Refresh Token으로 교체하도록 수정하여 문제 해결

2-2. Refresh Token과 Access Token의 차이점을 설명해 주세요.

A.

• OAuth 로그인 과정에서 서버는 Access Token, Refresh Token, Redirect URI를 클라이언트로 전달
• Access Token과 Refresh Token의 만료 시간은 2시간이지만, Refresh Token은 Access Token이 만료되었을 때 교체하는 용도로만 사용된다는 점에서 차이가 있음

• Access Token: 짧은 유효 기간을 가지며, API 요청 시 인증을 위해 사용된다. 만료되면 더 이상 사용할 수 없다.
• Refresh Token: 더 긴 유효 기간을 가지며, Access Token이 만료되었을 때 새로운 Access Token을 발급받기 위해 사용된다. Refresh Token은 직접 API 요청에 사용되지 않고, 보통 서버에 안전하게 저장된다.

2-3. 쿠키, 세션 스토리지, 로컬 스토리지에 대해 설명해 주세요.

A.

• 쿠키는 서버와 클라이언트 간 통신 시 사용, 로컬 스토리지와 세션 스토리지는 데이터를 저장하는 용도로 사용
• 로컬 스토리지는 브라우저를 껐다 켜도 데이터가 유지, 세션 스토리지는 브라우저를 닫으면 데이터가 삭제
• 보안 측면에서 쿠키는 HttpOnly 옵션을 설정해 XSS 공격을 방지
• 쿠키는 용량이 약 5KB로 제한된 반면, 로컬 스토리지는 4MB까지 저장 가능
• 쿠키는 요청 헤더에 자동으로 포함되어 전송되는 점이 로컬 스토리지와의 차이점

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

---

3. 반응형 UI 설계 시 가장 주의해야 할 점은 무엇이라고 생각하시나요?

A.

• 핸드폰, PC, 태블릿 등 각 기기의 화면 너비를 적절하게 지정하는 것이 중요
• 미리 팀원들과 소통하지 않고, 이를 제대로 설정하지 않으면 화면 크기가 줄어들면서 반응형 UI가 깨지는 경우 발생

---

4. TypeScript와 JavaScript의 차이점 중, 개발 과정에서 느낀 실질적인 장점은 무엇이었나요?

A.

• 자바스크립트의 장점은 타입을 따로 지정하지 않아도 되기 때문에 코드 작성이 간결하고, 타입 에러를 신경 쓰지 않아도 됨
• 하지만 타입을 명확하게 하지 않으면 런타임 에러가 발생할 수 있고, 예상대로 동작하지 않을 위험이 있어 타입스크립트 사용 습관화

---

5. 이미지 업로드에 presignedUrl 방식을 도입한 이유가 무엇인가요?

A.

• 백엔드 개발자와 소통하면서 여러 방식 조사 → 최종적으로 presignedUrl 방식 선택
• presignedUrl 방식은 서버 자원을 절약할 수 있고, 인증된 URL을 사용하여 통신하기 때문에 보안적으로도 더 안전하다고 판단하여 선택

5-1. presignedUrl 방식을 도입하여 얻은 효과는 무엇인가요?

A.

• 성능 테스트를 직접 해보지는 않았지만, 서버 자원을 절약할 수 있어 파일 업로드가 더 빠르게 진행된 것 같았음

성능 테스트를 해보지 않았다는 언급은 안 해도 되지 않을까요 ?!

---

6. 스터디에서 배운 내용을 실제 프로젝트에 적용한 사례를 설명해 주세요.

A.

• 최근 자바스크립트 딥 다이브를 다시 읽으며 디바운스 관련 최적화를 적용한 경험
• 디바운스는 여러 번 발생하는 이벤트를 모아서 한 번에 처리하는 방식
• 디바운스를 인풋 검색창에 적용 → 검색창에 글자를 입력할 때마다 매번 렌더링이 발생하면 깜빡임이나 서버 부하 문제가 생길 수 있기 때문에, 디바운스를 적용해 최적화한 경험

---

7. 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해서 설명해 주세요.

A.

• 제어 컴포넌트는 상태로 관리를 하고, 비제어 컴포넌트는 ref를 사용해 DOM을 직접 조작하는 방식
• 비제어 컴포넌트를 사용해 인풋을 관리한 이유는 입력할 때마다 DOM을 직접 조작하는 것이 성능 부하가 생길 수 있지만 사용성을 고려했을 때 입력값이 즉각적으로 반영되는 것이 더 중요하다고 판단해, React Hook Form을 활용해 비제어 컴포넌트로 구현

• 제어 컴포넌트: React 상태(state)를 통해 입력 값을 관리하는 컴포넌트로, 입력 필드의 값이 상태에 의존하며, 값이 변경될 때마다 상태가 업데이트된다. 이를 통해 입력 값을 제어하고 즉시 반응할 수 있다.

• 비제어 컴포넌트: ref를 사용해 DOM에서 직접 값을 가져오는 방식으로, 입력 필드의 값이 상태에 의존하지 않고, 필요할 때 ref를 통해 값을 참조하거나 조작한다. 입력값이 즉각적으로 반영되지만, 상태와의 연결이 없으므로 제어가 덜 명확하다.

---

8. 프로젝트내에서 서인님만의 협업을 하는 방식이 있나요?

A.

• 문서화를 중요시하며 PR, 코드 리뷰, 이슈 관리를 주도적으로 하고 Git flow 활용
• 코드 리뷰 문화를 활성화하는 이유는 다양한 의견을 듣고 피드백을 통해 코드를 개선함으로써 더 나은 결과를 얻기 위함
• 문서화를 철저히 하는 이유는 회의에 모든 팀원이 참여하지 못할 경우에도 참고해서 이후 회의 때 원활하게 소통 가능 → 긍정적인 피드백

8-1. 커뮤니케이션에 마찰이 있다면 어떻게 해결하는 편이신가요?

A.

• 감정적이기보다는 근거에 기반한 명확한 소통을 선호
• 포잉마켓 프로젝트에서 백엔드 개발자와 OAuth 구현 과정에서 OAuth flow에 대한 이해가 달라 약간의 마찰 → 관련 공식 문서 등을 참고하여 근거를 들어 설득 → 백엔드 개발자도 수용하여 OAuth 로그인 무사히 구현

8-2. 감정적이라면?

A. 감정적인 상황에서는 제대로 된 대화가 어렵다고 느끼기 때문에, 먼저 시간을 두고 감정이 진정된 후에 다시 소통 시도

---

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

A.

• 전공자들은 대학에서 수년간 공부한 후 취업 시장에 나오지만, 부트캠프를 통해 비교적 짧은 기간에 뛰어들었음
• 더 심도 있는 학습이 필요하다고 느껴서 리액트 공식 문서나 자바스크립트 딥다이브와 같은 공인된 자료를 통해 정확하고 빠르게 깊이 있는 학습을 하려고 노력

---

10. 10년 후에도 개발자를 하고 있을 것 같나요?

A.

• 힘이 닿는 데까지 하고 싶음
• 결과물이 직관적으로 보이는 점, 동료들과의 협업, 새로운 기술을 배우는 것이 즐거움
• 이런 상태가 지속된다면 앞으로 10년 후에도 프론트엔드 개발자로 활동할 것이라고 생각

---

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

A.

• 클라이언트가 서버에 요청을 보내고, 서버가 데이터를 응답하는 방식으로 통신
• 클라이언트는 응답받은 HTML, CSS 등의 데이터를 파싱
• HTML을 파싱하여 DOM 생성 → CSS를 파싱하여 CSSOM 생성 → DOM과 CSSOM을 결합하여 렌더 트리 생성 → 리플로우 → 리페인트 → <script> 태그에 있는 자바스크립트를 파싱하고 기능을 구현

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

---

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

A.

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

---

13. Box Model에 대해 설명해주세요.

A.

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

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

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

---

14. 스코프란 무엇인가요?

A.

• 변수가 참조할 수 있는 범위
• 예를 들어, var로 선언한 변수는 전역을 참조하고, const와 let으로 선언한 변수는 블록 스코프를 가짐

스코프(Scope): 변수, 함수, 객체 등이 접근할 수 있는 범위를 정의하는 개념

1. 전역 스코프(Global Scope): 프로그램 전체에서 접근 가능한 범위. 전역 변수를 선언하면 어떤 함수 안에서도 사용 가능.
2. 지역 스코프(Local Scope): 함수 내에서 선언된 변수의 범위. 함수가 실행될 때만 존재하며, 함수 외부에서는 접근 불가능.

스코프는 변수의 생명주기와 접근성을 결정하므로, 변수 충돌을 방지하고 코드의 가독성을 높이는 데 중요한 역할

14-1. 스코프 체인에 대해서 설명해주세요.

A. 변수가 선언된 범위에서 값을 찾지 못했을 때, 상위 스코프로 계속해서 올라가며 변수를 찾는 과정

스코프 체인(Scope Chain): 자바스크립트에서 변수를 찾는 과정을 설명하는 개념
자바스크립트는 변수를 참조할 때, 가장 먼저 현재 실행 중인 스코프(로컬 스코프)에서 해당 변수를 찾는다. 만약 변수를 찾지 못하면, 외부 스코프로 이동해 변수를 계속해서 검색한다. 이렇게 가장 내부에서 외부로 스코프를 탐색하는 과정을 스코프 체인이라고 한다.

---

15. 객체란 무엇인가요?

A. 중괄호로 감싸져 있으며, 키와 값으로 이루어진 요소

객체는 자바스크립트에서 데이터를 저장하는 한 형태로, 키-값 쌍(property)을 포함하는 데이터 구조이다. 각 키는 문자열이며, 그에 대응하는 값은 숫자, 문자열, 함수 등 다양한 타입이 될 수 있다. 객체는 관련된 데이터를 그룹으로 묶어 관리하거나, 함수와 데이터를 함께 보관하는 데 유용하다.

15-1. 객체와 원시값의 차이는 무엇인가요?

A.

• 원시 값은 불변하는 값, 객체는 변화하는 값
• 할당, 재할당 측면에서 메모리 참조 방식에 차이

• 저장 방식:
  • 원시값: 값 자체가 저장된다. 숫자, 문자열, 불리언, null, undefined, Symbol, BigInt 같은 값들이 원시값이다.
  • 객체: 값이 아니라 참조가 저장된다. 배열, 함수, 객체 등이 이에 해당하며, 메모리 상의 위치(주소)를 참조한다.
• 변경 가능 여부:
  • 원시값: 불변성을 가지며, 값을 변경할 수 없다.
  • 객체: 변경 가능하여 객체 내부의 속성을 수정할 수 있다.
• 비교 방식:
  • 원시값: 값 자체를 비교한다. 두 값이 같으면 true를 반환한다.
  • 객체: 참조(주소)를 비교한다. 동일한 객체를 참조하지 않으면 내용이 같아도 false를 반환한다.

---

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

A. props는 변하는 값, state는 값 자체가 변하진 않음

• Props: 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용된다. 읽기 전용이며, 자식 컴포넌트에서 값을 변경할 수 없다.
• State: 컴포넌트 내부에서 관리되는 데이터로, 컴포넌트 자체가 변화에 따라 직접 수정하고 업데이트할 수 있다. State가 변경되면 해당 컴포넌트는 다시 렌더링된다.

---

17. virtual DOM이 무엇인가요?

A.

• React는 실제 DOM에 직접 접근하지 않고, 가상 DOM을 사용하여 변경된 값을 관리
• 변경 사항이 발생하면 가상 DOM에 그 값을 업데이트하고, 가상 DOM과 실제 DOM을 비교하여 어떤 부분이 변경되었는지를 확인하여 반영하는 과정을 '재조정 알고리즘'이라고 함

Virtual DOM: 실제 DOM의 가벼운 복사본으로, 자바스크립트 객체 형태로 저장된 구조이다. React는 UI 변화를 효율적으로 처리하기 위해 Virtual DOM을 사용한다.

virtual DOM이 좋은 이유에 대해서 설명하세요.

A.

• 성능적으로 렌더링과 리렌더링을 최소화하여 최적화된 성능을 제공
• 개발자가 UI나 복잡한 로직에 대한 변화를 크게 신경 쓰지 않아도 됨

1. 빠른 성능: 실제 DOM 대신 가벼운 Virtual DOM을 사용해 변경 사항을 계산하고, 최소한의 업데이트만 실제 DOM에 반영하여 성능 향상
2. 효율적인 업데이트: 변경된 부분만 업데이트하여 전체 DOM을 다시 렌더링하는 비효율성을 줄일 수 있음
3. 개발 편의성: Virtual DOM을 통해 복잡한 DOM 조작을 자동화하여 개발자가 UI 상태 변화를 쉽게 관리 가능

---

피드백

• 이력서 관련 질문에 답변이 다 너무 좋았어요 !! 내용이 쏙쏙 이해가 잘 됐어요 😌
• 이력서 기반으로 드린 기술 질문은 답변을 다 잘 해주셨지만 이 외의 기술 질문은 연습이 필요할 것 같습니다 !
• 스터디 하면서 말씀드렸던 죄송하다는 말은 굳이 안 하셔도 될 것 같습니당.
• 고생하셨어요 🙇🏻‍♀️

[bokeeeey]

역할

면접관 - 김보경
지원자 - 백지원

QnA

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

A.

1. 고객들이 만족하는 서비스를 제공하는 것을 목표로함
2. 프로덕트 오너쉽 언급

자신감있고 명확한 어조로 이야기하는 부분이 듣기에 좋았던 인상을 받았던것 같읍니다 굿굿

Q. 부트캠프를 진행하시게 된 이유에 대해 말씀해주세요

A. 학교 수업만으로 웹 구현에 어려움이 있었다 ~~~ 언급

조금 더 유리한 스토리로 이끌어갈수 있을거같아요 웹킷 캠프에서 배운 내용을 기반으로 부족했던점을 언급해봐도 좋을거같고,
현업 개발자들의 코드리뷰를 받으면서 부족함이 채워졌던 경험을 이야기하면서 개선되었던 점을 함께 이야기하면서 이끌어나가도 좋은 주제인것 같습니다

Q. 프로젝트에 대해 설명해주세요

A. 반려동물 용품 구매시 구매 비용을 줄일 수 있는 이커머스 사이트

프로젝트 설명을 말씀하시면서 어떤 부분을 특히 신경쓰셨는지 고민이 많았던 부분을 어떤식으로 구현해냈는지 이야기하면서 마치셔도 좋을거같아요

1. 공동구매 조건 설정
2. 실시간 참여 상태 확인
3. 알림 시스템
4. 쉬운 참여 방식의 UX 고민
5. 공동구매 성공 시 flow에서의 고민

Q. 프로젝트 진행에서 어려움은 없으셨는지?

A.

1. 토스페이먼츠 구현에서 어려움이 있었다.
2. 모바일 결제 UI에서 문제가 있었다.
3. 토스에서 제공하는 타입을 다르게 변경하니까 해결되었다.

Q. 결제 기능은 어느 수준까지 알아보고 적용해보셨는지?

A. 공식 문서 참고해서 필수 속성 구현

개인적으로 결제기능에 대한 내용을 들으면서 느껴지는점은 react hook form같은 누구나 사용할 수 있는 API를 가져와서 사용했다.
이러한 인상밖에 받지 못한거같아요 이부분에서는 조금 더 열정을 보여줄 수 있는 스토리를 고민해보셔도 좋을거같습니다

Q. 결제기능을 구현하면서 고려한 UX에 대해 이야기해주세요

A. 제공되는 UX에서는 문제가 없었다.

UX에 관한 질문이었지만 UI에 대한 답변을 해주셨어요.
하지만 이런 부분도 답변에 대해 괜찮은 내용으로 대처한다면 문제없을거라 생각합니다

Q. 다른 프로젝트인 copy killer에 대해 설명해주세요

A.

1. 두가지 부분을 구현하였다..
2. 구현 사항에 대해 막힘없이 이야기함

먼저 어떤 서비스인지 설명하고 그 안에서 구현한내용 그리고 구현 과정에서의 어려움 혹은 스토리를 이야기하는게 더 흥미로울거같습니다.

Q. copy killer 프로젝트를 오래 진행해오신것 같다. 그 과정에서 오는 어려움은 없으셨는지?

A.

1. AI와의 연동에서 오는 어려움
2. 그 외 조금 큰 어려움이 있었다. => 구체적으로 언급은 하지 않음

Q. 외주 내용에 대해서도 설명 가능하신가요?

A.

1. 커뮤니티 앱 개발
2. 에타와 같은 커뮤니티를 개발했다.

구두로 말씀드렸듯이 이력서에도 너무 애매하게 존재하는 부분이고 진행하신걸 입증하실 내용도 없는듯합니다
github주소나 서비스를 구체적으로 기재하시거나 프로젝트 내용 개선안처럼 서비스 내용을 전체적으로 설명하고 그중 지원님께서 구현한 내용을 말씀하시는게 더 구성에 좋을거같아요

Q. 서비스 사용에 대하여

A.

1. AI서버가 꺼져있다.
2. 외주는 일부만 구현해서 따로 기재하지는 못함

개인적으로 서비스를 확인할 수 없어서 너무 아쉬운 부분중에 하나라고 생각해요
서버비용이 얼마 들지 않는다면 지원님 이력서 제출 기간동안에는 부담되지 않는 선에서 서버를 살리는쪽으로 생각해보셔도 좋을거같습니다

Q. 크로스브라우징 이슈를 해결해보신적이 있으신가요?

A. 아직은 없지만 reset css를 사용해서 사전에 방지를 하였다.

간단한 크로스브라우징 이슈에 대해 찾아보고 이러한 작은 헤프닝이 있었다~ 정도로 가볍게 알고계셔도 좋을 내용이라고 생각합니다.
reset css에 대한 내용은 잘못하면 점수가 깎일수 있는 답변이었다고 생각해요

Q. margin, padding 차이점에 대해 설명해주세요

A. 무난히 잘 설명해주셨어요 굿굿~

Q. 실행 컨텍스트에 대해 설명해주세요

A. 잘 모르겠다.

다시 공부... 해야겠죠,,,?

Q. javascript만 사용하는 것과 비교해서 typescript를 사용하는 이유에 대해 설명해주세요

A. 정적 타입 검사 진행으로 코드 작성 시점에 타입 오류를 발견 가능하고 코드의 안정성과 유지보수성 언급

답변좋았어요 굿굿 타입 지정으로 불필요한 메모리 누수를 막을 수 있고, 코드잇 과정중에 typescript 마이그레이션 중 개인적으로 느낀 내용이나 둘 다 사용해보시면서 겪은 헤프닝을 가볍게 이야기하는것도 좋을거같아요

Q. SSR과 CSR의 차이점을 설명해주세요

A. 잘 설명했어요 굿굿

추가적인 질문이 들어온다면 vanilla-js에서 react를 사용할 때 차이점 등 렌더링 사용 타임라인으로 물고 들어올 질문이 많을거같아요

Q. next와 react를 비교해서 설명해주세요

A. 잘못된 답변 설명함

이 부분은 서칭을 한번 진행해보시고 프로젝트 경험을 기반으로 연관지어 말씀하시면 좋은 내용이 완성될거같아요

Q. 전역 상태관리를 경험해보신적이 있으신가요?

A. react query를 통해서 전역 상태관리를 경험함 그 외 경험은 없음

저도 잘 모르는 부분이긴 한데 서버 상태관리 라이브러리인 react query로 전역 상태관리는 일반적인 답변이 아닐 수 있을거같다는 생각이 들어요.
물론 react query로 전역 상태관리가 잘 되어서 그 사례를 이야기해주셨으면 이해가 되었을 수 있지만 해당 답변에서는 아닌듯 했습니다.
지원님 중급이나 고급 프로젝트를 진행하시면서 아마 팀원분들이 진행한 부분이 존재할거라 생각하는데 해당 부분을 경험삼아 이야기하셔도 좋을거같아요
지원님 구현한 코드만 이해하는게 아니라 프로젝트 전반적으로 사용된 코드 내용을 이해할 필요가 있다고 생각합니다
저같은 경우에는 프로젝트 초반에는 context API로 모두 커버가 가능해서 라이브러리 도입을 생각하지 않고 있었지만, 추가기능으로 알림 기능을 구현하면서 전역 상태관리 라이브러리 도입을 고민하게 되었고 ~~~ 를 보고 ~~ 라이브러리를 도입하였고 기존 context API로 구성되어있던 ~~ 부분의 전역 상태도 함께 마이그레이션을 진행하였다 (저는 여기 기여한거 1도 없어요 ㅎㅎ) 를 이야기하게 될 것 같습니다. 여기서 개선된 내용과 느낀점도 나오면 베스트일듯해요

총평

지원님 기술면접에서는 막힘없이 답변을 잘해주셔서 굉장히 좋았다고 생각해요
하지만 이력서나 프로젝트 관련 질문에서 오는 지원님의 인상은 그렇게 흥미롭지 않았습니다 일부로 지원님께서 해당부분을 더 말씀해주셨으면 좋겠다 싶은 부분을 억지로 여쭤보기도 했지만 기업 면접은 이렇게 친절하게 진행되지 않는 만큼 지원님께서 흥미로운 이야기를 전달하지 않으면 관심을 거기에서 끝이날거라 생각해요
이력서나 프로젝트 설명에서 지원님께서 조금 더 답변이나 내용을 보충해서 면접관이 흥미로울 이야기들로 유리한 면접을 이끌어나가시는게 좋을것 같습니다.

[devwqc]

역할

면접관 - 아영, 봉찬
지원자 - 유경

자기소개

같이 일하고 싶은 동료가 되고 싶다. 좋은 코드는 다른 사람이 이해하기 쉽고 재사용하기 쉬운 코드. 그런 코드를 작성하는 동료가 되고 싶다. 개발자가 아닌 동료에게는 소통하기 좋은 동료가 되고 싶다.

너 내 동료가 돼라!

QnA

1. 잘 읽히는 재사용성이 높은 코드를 작성하는 개발자가 되는 것이 목표라고 하셨는데, 좋은 퀄리티로 코드를 작성하면서 프로젝트를 진행하는 것과 엉망이어도 우선 기능이 되는 코드를 작성하는 것 중에서 어떤 것을 선호하시나요?

A. 기능이 우선이긴 하지만 경험이 없을 때부터 코드를 분리하면서 코드를 짜는 거에 습관이 되어 있어서 처음부터 퀄리티를 신경 쓰는 편.

나는 기능을 우선하지만 코드의 퀄리티도 포기하지 않는 다는 점에서 좋은 거 같아요.

1-1. 로직이 중복되는 경우 어떤 패턴을 사용 하셨는지.

A. 주로 모달 컴포넌트에서 로직 중복이 있었고 합성 컴포넌트 사용.

2. 피드비 프로젝트에서 스켈레톤으로 CLS를 개선하셨다고 적어주셨는데 메인 페이지의 경우 CLS는 0이지만 LCP가 3.0s로 높았고, 프로젝트 디테일 페이지는 CLS가 0.3으로 높은 수치가 나왔는데 여기에 대해서 해주실 말씀이 있을까요?

A. 맡은 페이지여서 메인을 먼저 했고 다른 페이지는 그 페이지를 맡은 분들에게 전달은 한 상태여서 아직 작업중인 프로젝트라 개선될 예정이다.

3. 타임 세이버 프로젝트에서 데이터 패칭 분할에 대해서 말씀하셨는데 REST API가 아닌 GraphQL을 활용하면 말씀하신 부분에 대해서 해결책이 될 수도 있을 거 같은데 GraphQL의 도입에 대해서 생각해 보셨나요?

A. GraphQL은 잘 몰라서 고려하지 못했다.

잘 몰라서 고려하지 못한 부분에 대해서는 질문 끝나고 물어봤으면 어땠을까 싶어요.
kakao tech GraphQL
REST API를 사용하면 여러 번의 네트워크 요청이 필요할 때 GraphQL을 사용하면 한번의 네트워크 호출로 사용할 수 있습니다. 근데 유경님이 겪은 문제에 도움이 될 지 모르겠네요.

4. 아토믹한 컴포넌트 구축, 합성 컴포넌트 사용에 대한 언급이 있어요. 합성 컴포넌트를 구축했다면 다른 개발자들이 사용처에서 어떤식으로 사용할 수 있도록 구축하셨을까요?

A. 합성 컴포넌트를 사용하는 추상화된 컴포넌트를 구축하여 다른 개발자들은 합성 컴포넌트를 신경쓰지 않아도 된다.

5. 본인이 생각하시는 함께 일하고 싶은 개발자는 어떤 개발자인가요?

A. 적극적으로 소통하는 개발자.

6. 일할 때 어떤 부분에서 동기부여를 얻으시나요?

A. 사람과 관련된 부분에서는 같이 고민해서 다른 방법을 가지고 얘기해서 둘 다 만족할 수 있는 방법으로 해결했을 때, 지금까지의 경험을 활용했을 때의 성취감. 개인적으로는 내가 만든 서비스가 사용자에게 사용 되었을 때 더 좋은 건 그 사용자에게 피드백이 왔을 때.

7. 본인은 리더에 가깝나요, 아니면 팔로워에 가까운가요?

A. 리더 스타일인 편이고 팔로워 일 때도 적극적인 팔로워로 프로젝트를 진행했다.

8. 본인의 장단점에 대해서 말씀해 주세요.

A.

• 단점: 성격이 급하고 감정의 폭이 크다.
• 단점 극복: 기록을 통해서 급한 성격에 대한 누락을 줄이고 전반적인 일정 관리가 수월해짐.
• 장점: 기록을 잘해서 큰 틀에서 진행 상황을 잘 파악한다.

9. 프로토타입과 프로토타입 체인에 대해서 말씀해 주세요.

A. 객체지향의 상속과 유사한 효과를 내는 것이다. 이런 상속을 내는 것이 프로토타입 체인이다. 상위 요소의 메서드를 사용할 수 있는 점에서 상속과 유사한 거 같다.

10. 코딩 테스트 공부는 잘 하고 계신가요?

A. 잘 안 합니다.

10-1. 코딩 테스트 공부에 소홀한 이유는 무엇인가요?

A. 프로젝트를 리팩토링하는 과정에 우선시해서 투자하고 있다.

11. 아까 본인이 생각하시는 함께 일하고 싶은 개발자는 "소통을 잘하는 사람"이라고 하셨는데 정말 소통도 안 되고 절대 협업 할 수 없을 거 같은 사람이 회사에 있다면 어떻게 하실건가요?

A. 그래도 그 분이 본인의 일은 하실 거니까 그분에게 개인적으로 하는 일들을 맡기고 일정을 계속 확인할 거 같다.

11-1. 본인이 상사인 입장에서 말씀하신 거 같은데 만약 그 사람이 본인에게 일을 주는 상사인 경우에는 어떻게 하실건가요?

A. 너무 보수적이지 않으면 그분의 얘기를 들을 거 같다. 내가 생각하는 것조차 틀린 경우일 수 있기 때문에 따를 거 같다.

12. 가고 싶은 회사의 이상향은 무엇인가요?

A. 의견을 자유롭게 나누고 싶어서 수평적인 분위기를 가진 곳.

12-1. 이상향에 맞지 않은 회사라면 포기할 것인가요?

A. 내가 의견을 내기조차 힘든 수직적인 회사라면 포기할 거 같다. 업무까지 수직이면 힘들 거 같다.

13. 희망 연봉은 어떻게 되시나요?

A. 회사 내규에 따른다.

14. 최근 리팩토링을 계속 하고 계신다고 말씀하셨는데 그 외에 관심을 두고 공부하는 것이 있을까요?

A. 가까운 최근에는 별도로 공부를 하지 않았다. 그 이전에는 자바스크립트 책을 읽고 기본적인 원리를 알고자 했고 처음 리액트과 타입스크립트를 배울 때는 책을 통해서 공부했고 지금은 리팩토링 하면서 프로젝트에서 사용하는 라이브러리의 사용에 대해서 고민을 많이 하고 있다.

전반적인 느낌

• 당돌하고 밝은 에너지가 느껴진다. 내가 채용 담당자라고 했을 때 우리 회사에 들어오면 밝은 에너지가 많이 전파될 거 같아서 긍정적으로 볼 거 같다.
• 대답도 잘한다. 취직만 하면 될 거 같다.

[devwqc]

역할

면접관 - 유경, 봉찬
지원자 - 아영

자기소개

만들고 시도하고 완성하는 것을 좋아한다.
실제로 사용하는 것들이 어떻게 만들어지는지 궁금해서 프론트엔드 시작.
특히 개발자는 협업을 통해 서로 발전하는 면이 매력적으로 느껴짐.

QnA

1. state를 선택할 때 모순을 피하신다고 하셨는데 본인이 생각하시는 모순의 예시가 있을까요?

A. 어떤 state에서 가져올 수 있는 값을 또 다른 state로 선언하는 부분들을 개선.

잘 대답했다고 느꼈다.

2. 코드를 해석하고 이해하는 능력 향상을 위해서 노력하신다고 하셨는데 어떤 노력들을 하고 계신가요?

A. 사실 저의 이상향이였다. 부트캠프를 다닐 때 3번의 프로젝트를 했다. 처음에는 코드리뷰를 안했다. 두 번째는 간략히 하자 했었고 세 번째 했을 때는 그보다 많이 했다고 생각. 코드 리뷰를 하니까 전체적인 프로젝트 흐름을 이해할 수 있었고 코드를 꼼꼼히 보니까 아이디어가 많이 떠오르고 인사이트가 많이 돼서 좋았다. 코드가 너무 길 때는 읽기 힘들었는데 리팩토링 하면서 코드를 많이 볼 수록 인사이트를 많이 얻게 돼서 좋았다. 코드리뷰 할 때 코드를 꼼꼼하게 보는 습관을 기르고자 하고 한번씩 사용하는 라이브러리의 소스를 보는 것도 좋겠다는 생각했다.

3. 트래블록 사이트에서 비로그인 상태에서 도쿄 페이지에 방문하면 로그인을 요구해서 로그인 하면 도쿄 페이지로 이동하게 됩니다. 하지만 로그아웃을 해도 정상적으로 도쿄 페이지에 접근할 수 있는 버그가 있습니다. 여기에 대해서 알고 계신가요?

A. 인지하지 못하고 있다.

3-1. 왜 이런 에러가 발생하는 거 같은가요?

A. 미들웨어 관련 이야기.

사실 인지하지 못하고 계신다고 하셔서 대답 못 할 거라고 생각하고 질문했는데 너무 잘 하신 거 같아서 당황스럽고 아쉽네요.

4. 일할 때 어떤 부분에서 동기부여를 얻으시나요?

A. 동기부여를 받기보다 해야 할 일이라고 생각하고 하는 거 같다.

5. 본인은 리더에 가깝나요, 아니면 팔로워에 가까운가요?

A. 팔로워 스타일인 거 같다.

5-1. 팔로워 스타일로 활동하시는 이유가 있을까요?

A. 리더로서의 단점이 있다고 생각. 다른 팀원이 제대로 참여를 안 한다는 느낌이 들거나 할 때 사정이 있겠지 그래도 할 일은 하겠지하는 마음이 조금 있는 거 같다.

6. 본인의 장단점에 대해서 말씀해 주세요.

• 장점: 맡은 바에 최선을 다한다. 기간 안에 완성하는 것을 목표로 하는 것.
• 단점: 감정을 말로 잘 표현하지 못하는 것. 소통을 해야 하는데 내가 말하기 전에 많은 고민을 하고 굳이 해야 할 말인가 생각이 들어서 다섯가지 말을 준비했다면 그 중에서 하나만 말하는 것이 단점일 수 있다.

6-1. 단점을 극복하기 위해 하는 것은 무엇이 있을까요?

A. 프로젝트 관련해서 말하기 전에 준비과정을 거친다. 내 의견을 뒷받침할 정보들을 찾아보고 대화를 하려고 노력한다.

7. 주소창에 www.google.com을 입력했을 때 브라우저에 렌더링되기까지의 과정에 대해서 설명해 주세요.

A. 네트워크 부분은 잘 모르겠지만... 아는 만큼 말하면 google.com을 가지고 dns 서버로 ip 주소를 받고 그 ip 주소로 html을 요청한다. html을 해석하면서 css, js를 요청하고 html이 그려지면 dom, css가 그려지면 cssom ...

모른다고 했는데 잘 말한 거 같아서 굳이 모른다고 안 해도 될 거 같아요.

7-1. 리플로우와 리페인트를 둘 다 거치지 않는 과정과 CSS에 대해서 아시나요?

A. 잘 모르겠다.

composition 단계가 최종적으로 브라우저 윈도우 화면에 픽셀을 렌더링하는 과정. 레이어를 합성하는 단계.
Transform, Opacity가 대표적이다.

8. 리액트를 공부한 이유는 무엇인가요?

A. 많은 사람들이 사용한다는 것이 큰 장점이 될 거 같다. SPA로 페이지 이동을 했을 때 빠른 전환을 할 수 있다는 장점.

8-1. SPA로 빠르게 페이지 이동이 가능한 이유는 무엇인가요?

A. 빈 HTML과 JS 번들을 받게 된다. JS를 해석해서 빈 페이지를 채우는데 페이지 이동할 때 이미 받은 JS로 렌더링을 할 수 있기 때문에 빠른 페이지 전환이 가능하다고 생각한다.

9. 희망 연봉은 어떻게 되시나요?

A. 회사 내규에 따르도록 하겠다.

전반적인 느낌

• 대답 잘한다.
• 한번 당황했는지 얼굴이 붉어졌다.
• 다들 졸업해도 될 거 같다.
• 이력서에 링크 클릭 안 되는 현상 해결 필요.
• “배열과 객체의 일부를 변경해야~ 부수 효과를 피할 수 있도록 합니다.” 이 내용은 너무 기본적인 부분이라 지워도 되지 않을까 싶다.

[seolsis]

0. 1분 자기소개

타전공 2년 반 실무경험 하다가 데이터 구현에서 어려움이 있어서 시각화 분야에 속해서 웹 시각화 자바스크립트 독학 준비하다 부캠 알게 돼서 수료 후에 커리어 전환

1. GIS 데이터 시각화를 어떻게 진행하셨나요? 사용한 도구나 기술 스택에 대해 설명해주세요.

• 이해가 어려운 부분이 많앗다 삼차원이라
• 발주를 주신 공무원들이나 나아가 서비스가 완성되엇을 때 민원인들이나 시민분들이 접근을 해서 좌표 데이터를 수치만 보면 이해하기 힘들음
• 공간정보 데ㅣ터가 어떻게 생격는지 그리고 삼차원이다보니 시뮬레이션이 가능
• 클라이언트분이 원하는 데이터를 가공해서 시각적으로 그려 변화가 이뤄져왔다는 것을 구현함

2. 재수정이 어려운 데이터 작업에서 발생한 민원을 해결한 방법에 대해 설명해주세요.

적합한 질문인지 모르겠어서 질문하지 않았습니다.

3. 코드 컨벤션 준수율을 100% 가까이 유지했다고 하셨는데, 팀원들과의 협업에서 이를 어떻게 실현하셨나요?

• 전반적인 셋팅
• 진행한 프로젝트 이전에 경험이 몇 번 있었는데 해당 프로젝트를 진행할 때마다 코드 스타일이나 작성 방식이 상이해서 다른 분들의 코드를 봤을 때 잘 이해 안되는 부분이 존재하기도 하고 스타일이 달라 어려움이 많았음
• 초기 셋팅을 진행
• 처음부터 이런 일이 최소한으로 발생하게끔 esLint를 fm식으로 적용
• 코드 리뷰에서 얼리 리턴, 삼항연산자 등 가독성을 해치는 것을 컨벤션 수준에서 사용하지 말자고 주도함

4. 커스텀 키보드 사이트에서 사용자 선택에 따른 상태를 스토어에 저장한다고 했는데, 어떤 상태 관리 라이브러리를 사용했으며 이유는 무엇인가요?

• 주스탄드를 사용
• 이커머스에 맞는 성격의 프로젝트다 보니 유저가 장바구니에 어떤 데이터를 담는지 필요하고 유저가 봣던 상품에 히스토리를 담는경우가 잇어서 그 때도 사용
• 커스텀하는 부분이 다섯가지 종류가 있어서 커스텀 진행하면서 유저가 선택한 것들이 저장되고 상태가 장바구니로 넘어오게 되는 상태로 구현

5. TossPayments를 활용하여 구현한 결제의 전반적인 Flow를 설명해 주세요.

ui부분은 건드릴게 없었고
결제를 진행하게 되면 결제 성공 시 유저분들께 폭죽을 쏘는 라이브러리를 적용
팀원은 과하다 생각을 하였음
결제 성공 시 한번에 폭죽을 터뜨려 성공 나타냄
실패 이유를 띄워주고 상호작용을 연결하는데 노력을 기울임

결제 성공 시, 실패 시 flow도 결제의 전반적인 flow로 설명이 되겟지만 면접관 입장에서는 서버와 클라이언트의 동작이 어떻게 되는지 설명해주시는게 더 좋을 것 같아요.

• 구매자가 결제하기 버튼을 클릭
• 결제하기 버튼의 클릭 이벤트로 결제 요청 메서드를 호출하고 결제창 로드
• 구매자가 결제 정보를 불러오면 카드사는 결제 정보를 확인하고 인증이 성공하면 성공 URL로 리다이렉트
• 서버 측에서는 성공 URL의 쿼리 파라미터 값을 결제 승인 API의 요청 응답으로 추가하고 API 호출
• 카드사는 구매자의 계좌에서 금액을 차감하고 API 응답으로 결제 결과 확인 가능

6. 페이지 로드 성능 최적화와 관련해 다른 성능 지표인 LCP, FID도 함께 개선하셨는지, 개선하였다면 어떻게 개선했는지 말씀해주실 수 있나요?

최적화를 구현 상황에만 신경쓰고 구현 이후에는 따로 적용한 부분은 존재하지 않음
구현 중 마주친 부분들이 넥스트를 사용한 이후로 이미지 최적화 꼽듯이 우리도 이미지 최적화에 있어서는 넥스트에 많이 의존
스켈레톤 적용이 힘들었음(이유 파악 아직 못함)
placeholder를 좀 구현해보자. 이미지 레이아웃 시프트가 최대한 발생하지 않도록 해보자

함께 개선하지 않았더라면 대답이 힘들 수 있겠다 생각이 되었었는데 사용하지 않은 대신 어떻게 했는지 잘 얘기해주신 것 같아요.

7. 젠스코리아에서 일하시다가 그만둔 이유가 있으신가요?

• 공기업을 준비하려고 했음
• 도시정보 쪽 일
• 공기업 준비에 있에서 큰 어려움이 없겠다 생각해서 도전
• 목표하는 기업에서 최소한의 인력을 뽑고 보인 입장에서는 마지막 커리어를 위한 도전이었음
• 개발아닌 개발하면서 아쉬웠던 부분을 보완하고자 함
• 사기업에서 큰 어려움이 없을 것 같아서
• 소프트스킬을 활용해 취업 준비

조금 더 정리해서 설명해주시면 좋을 것 같아요.

8. useDebouncedInvalidate를 어떻게 구현하였는지 설명해주실 수 있나요? (주요 로직이나 알고리즘)

• 쿼리를 초기화 시키고 인벨리에이션을 시키고 초기화된 데이터를 활용하는 로직이 있엇고 로직에서 쿼리 초기화를 적용하는 식으로 구현을 하다보니 적용이 되고 안되고 하는 부분이 존재하게 되었음
• 디바운싱을 적용해서 잠깐의 딜레이를 주자
• 의도했던대로 적용이 잘 될 것 같다 해서 적용

9. 성능 개선이 실제로 어떻게 이루어졌는지 어떤 지표로 확인하셨나요?

• 쿼리가 항상 초기화 될 때마다 해당 기능이 쿼리를 사용하는 로직이 항상 돌아갔는데 디바운싱이 입력값을 입력할때마다 로직이 돌아가면 메모리 차원에서 누수가 큼
• 쿼리 초기화 때마다 로직이 동작하면 굉장히 누수가 크겠다
• 간헐적 문제 해결 위해 수치로 확인하지 않아도 개선됨을 느낌

10. 이 훅을 적용했을 때 사용자 경험 측면에서 어떤 긍정적인 효과가 있었는지 구체적으로 설명해주세요.

직접적으로 드러난 부분은 없었음
메모리 차원에서 간접적으로 경험

11. Context API에 대해 설명해주세요.

리액트 전역상태관리 api
사용예시 ⇒ 다국어 지원, 다크모드 등

- React의 내장 API - 앱에서 컴포넌트에게 props를 사용하지 않고 필요하 데이터를 쉽게 공유할 수 있도록 함 - 모든 컴포넌트에서 사용할 수 있는 데이터를 전달할 때 유용 - 즉, 깊이 여부와 무관하게 데이터가 필요한 컴포넌트에서만 불러다가 사용할 수 있는 것

12. TDD란 무엇인가요?

테스트 코드의 일종
테스트코드에 대해 강조 개발 시장
잘 모르지만 적용 시도 중

- TDD(Test-Driven Development)는 테스트 주도 개발 방법론 - 개발자가 코드를 작성하기 전에 먼저 테스트 케이스를 작성하고 이를 통과시키는 것을 중심으로 개발을 진행하는 방법 - 코드 품질을 향상시키고 버그를 미리 발견하여 개선하는 데 도움 - 코드 변경 시 이전에 작성된 테스트 케이스를 수행하여 기존 코드의 영향을 미치는 부분을 파악하고, 안정적인 코드 개발에 도움

13. 클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇일까요?

잘모르겠습니다.

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

14. 프로세스와 스레드에 대해 설명해주세요.

잘모르겠습니다

프로세스는 메모리 상에서 실행 중인 프로그램, 스레드는 프로세스 안에서 실행되는 흐름 단위

15. Promise와 Callback의 차이를 설명해주세요.

callback은 동작이 호출되었을 때 콜백으로 지정된 동작을 수행해라
promise는 비동기 처리에서 사용되는 개념
원시적인 비동기처리에서는 .then으로 콜백 hell이 일어날 수 있어 가독성을 해침

• Callback
  • callback을 사용하면 비동기 로직의 결과값을 처리하기 위해 callback 안에서만 처리를 해야하고, callback 밖에서는 비동기에서 온 값을 알 수 없음
  • 비동기 로직의 결과를 다음 비동기로 전달해서 실행해야 할 때 콜백은 점점 깊어져 가독성이 안좋아짐
• Promise
  • 비동기에서 온 값이 promise 객체에 저장되기 때문에 코드 작성 용이
  • .then 메소드를 통해 저장되어 있는 값을 원하는 때에 상용 가능하고 코드의 깊이가 깊어지지 않고 이해하기 쉬움

16. 왜 state를 직접 바꾸지 않고 useState를 사용해야 하나요?

잘 모르겠습니다.

리액트는 메모리 주소를 통해 값이 변경되었다는 것을 판단하기 때문에 새로운 객체를 만들어서 할당해야 함 따라서 이를 위해 useState를 사용

17. 본인의 강점을 마지막으로 강조해주세요.

불만이 되게 많음
일하고 있는 집단에 대한 불만 x
작업한 내용에 대한 코드를 말하는 것
성격상 잘 지나치지 못함
길가에 버려진 커다란 쓰레기를 지나치지 못하고 치우는 것처럼
치워야할 과제로 다가오는 코드
지나치지 않고 치우게 되는 행동력

전반적인 느낌

• 전반적으로 매끄럽게 잘 얘기해주신 것 같습니다.
• 사전에 정리가 안된 질문에 대해서는 반복적으로 말씀하시는 경향이 있는 것 같아 정리해보시면 좋을 것 같아요.
• 제가 질문 드린 기술 질문은 질문 중에서도 별표⭐ 질문이였기 때문에 정리해서 키워드를 외워두시면 좋겠습니다.
• 6번은 저도 배웠던 것 같아요. 사용하지 않았더라도 단답으로 끝내지 않고 대답해주신 부분에서 저도 배울 수 있었고 좋게 들었습니다.
• 수고하셨습니다!