Replies: 6 comments 1 reply
-
역할면접관 - 이서인 QnA0. 1분 자기소개
1. ‘Youtube CopyKiller’는 AI 중점 프로젝트로 보입니다. 프로젝트에서 프론트엔드로서 구현한 주요 기능을 2가지 설명해주세요.
1-1. 해당 기능을 구현하면서 기억에 남는 트러블 슈팅이나 고민했던 부분을 말씀해주세요.
2. ‘Youtube CopyKiller’와 ‘Neighbor-Food’ 프로젝트에서 MUI를 사용했던데, 사용한 이유가 뭔가요?
3. ‘Neighbor-Food’ 프로젝트에 본인이 한 커밋이 없습니다. 이유를 설명해주세요.
4. ‘포잉마켓’ 프로젝트에서 장바구니 기능 구현 시 sessionStorage를 사용한 이유를 설명해주세요.
4-1. localStorage, cookie의 특징을 sessoinStorage와 비교해 설명해주세요.
5. 토스페이먼츠 API 결제 flow를 설명해주세요.
5. ‘포잉마켓’ 프로젝트에서 장바구니 리액트 쿼리를 사용해 낙관적 업데이트를 구현하셨던데, 구현 방식을 설명해주세요.
6. 본인이 생각하는 개발자에게 가장 중요한 덕목이 무엇인가요?
6-1. 본인은 그 덕목을 가지고 있나요? 가지고 있지 않다면 어떻게 노력 중인지 말씀해주세요.7. 가상 DOM과 실제 DOM의 차이점을 설명해주세요.
7-1. 가상 DOM을 사용한 리액트의 동작 원리를 설명해주세요.
7-2. 가상 DOM을 사용한 리액트의 장점과 단점을 설명해주세요.
8. 자바스크립트의 스코프 체인을 설명해주세요.
|
Beta Was this translation helpful? Give feedback.
-
역할면접관 - 윤아영 QnA1. 팀프로젝트를 진행함에 있어 코드 리뷰를 통해 활발한 활동을 하였는데 갈등 상황이 있을 때는 어떻게 대처하였나?
2. 타입스크립트를 사용하신 이유?
2-1. 타입 스크립트의 이점?
예상 답변: 타입을 지정할 수 있다. 타입 스크립트는 정적 타입 기반으로 컴파일을 하는 과정에서 타입이 결정된다. 컴파일 과정에서 타입을 지정하기 때문에 컴파일 에러를 예방할 뿐 아니라, 손쉬운 디버깅이 가능해집니다. 3. AWS를 사용하신 이유가 무엇인가?
3-1. 배포 과정(순서)에 대해서 설명해주실 수 있는가?
예상 답변: 안정적이고 빠르게 DNS 관리할 수 있다. 사용자가 웹사이트에 빠르게 접근할 수 있어 SEO에 중요한 페이지 로딩 속도를 개선, 확장성과 고가용성을 제공하기 때문에 트래픽이 급증하더라도 도메인 서비스가 중단되지 않고 안정적으로 웹사이트에 접근할 수 있다. 이는 검색엔진에서 웹사이트의 신뢰성을 높이는데 기여한다. SSL/TLS 설정의 용이성이 있다. SEO에서 중요한 https 보안 설정을 위해 aws의 acm과 함께 route53을 사용하면 손쉽게 ssl 인증서를 발급받고 유지 관리할 수 있습니다. https는 검색 엔진에서 신뢰성을 높이는 중요한 요소입니다. 4. next.js에서 fetch 캐싱을 지원하는데 tanstack-query를 사용한 이유는 무엇인가?
예상 답변 : 개인화 되지 않은 요청을 할 때에는 fetch의 기본 캐시 옵션인 force-cache로 요청의 응답이 원격 서버에 캐싱 됩니다. 하지만 개인화된 요청인 경우, force-cache를 사용하면 모든 사용자가에게 동일한 응답을 반환하게 됩니다. 그래서 api와의 통신 과정에서 개인화된 요청은 원격 서버에 캐싱 되어서는 안됩니다. 이 경우, 새로고침 및 라우트 캐시 말료될 때마다 api 호출이 발생하므로 client-side에서 tanstack-query를 사용하여 브라우저 메모리에 개인화된 요청에 대한 응답을 캐시하고 queryKey와 staleTime으로 캐시를 관리합니다. 5. 동기와 비동기에 대해서 설명해주세요
5-1. 자바스크립트는 어떻게 동작하는가?
예상 답변 : 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기 처리라고한다. 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다는 장점이 있지만 앞선 태스크가 종료될 때까지 이후 태스크들이 블로킹되는 단점이 있다. 비동기 처리 방식은 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하므로 블로킹이 발생하지 않는다는 장점이 있지만, 태스크의 실행 순서가 보장되지 않는 단점이 있다. 예상 답변 : 바스크립트는 싱글스레드로 동작합니다. 한 번에 하나의 작업만 처리 할 수 있습니다. 자바스크립트의 동시성을 지원하는 것은 이벤트 루프다. 이벤트 루프는 브라우저에 내장되어 있는 기능 중 하나로 대부분의 자바스크립트 엔진은 콜스택과 힙으로 구성되어 있습니다. 태스크가 요청이되면 콜스택을 통해 순차적으로 실행됩니다. 비동기 처리에서 소스코드의 평가와 실행을 제외한 모든 처리는 자바스크립트 엔진을 구동하는 환경인 브라우저 또는 Node.js가 담당한다. 브라우저 환경은 태스크큐와 이벤트 루프를 제공하는데 태스크큐에는 비동기 함수의 콜백함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역이고, 이벤트 루프는 콜 스택에 현재 실행중인 실행 컨텍스트가 있는지 태스크 큐에 대기중인 함수가 있는지 반복적으로 확인하면서 콜스택이 비어있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로 태스크큐에 대기중인 함수를 콜스택으로 이동시킨다. 6. SSR, CSR의 차이점
예상 답변 : ssr에서는 웹 페이지의 초기 렌더링이 서버에서 이루어집니다. 사용자가 웹페이지에 접근할 때, 서버는 html, css, 그리고 초기 상태의 javascript를 포함하는 완전한 페이지를 생성하여 사용자의 브라우저로 보냅니다. 이 방식은 사용자가 페이지를 빠르게 볼 수 있게 하지만, 서버에 부담을 줄 수 있으며, 페이지의 상호작용이 가능해지기까지의 시간이 늘어날 수 있습니다. 검색엔진 최적화에 유리하며, 초기 로딩 시 사용자에게 콘텐츠를 빠르게 제공할 수 있는 이점이 있습니다. csr에서는 초기 렌더링이 사용자의 브라워저에서 이루어집니다. 서버는 html과 초기 로딩을 위한 javascript 파일만을 보내고, 자바스크립트가 브라우저에서 실행되어 페이지를 동적을 생성합니다. 이 방식은 서버의 부하를 줄일 수 있으며, 사용자가 한 번의 초기 로딩 후에는 매끄러운 페이지 전환 경험을 할 수 있도록 합니다. 하지만 초기 로딩 시간이 길어질 수 있고 검색 엔진 최적화 측면에서 불리할 수 있습니다. 7. 호이스팅이란?
예상 답변 : 변수선언문이 코드의 선두로 끌어 올려지는 것처럼 동작하는 자바스크립트 고유의 특징. var로 선언했을 때 호이스팅이 일어나 undefined로 초기화되어 선언문 이전에 변수에 접근할 수 있습니다. 그래서 의도한 결과와 다르게 동작할 수 있습니다. |
Beta Was this translation helpful? Give feedback.
-
역할면접관 - 봉찬 1분 자기소개도전을 두려워하지 않는 프론트엔드 개발자 김민영입니다. QnAQ. 팀 내 효율적인 커뮤니케이션으로 일정 관리, 목표 달성 계획 능력을 키우셨다고 말씀해 주셨는데 프로젝트를 진행하면서 일정을 맞추지 못한 경험이 있으실까요?A. 포잉마켓을 처음 진행하기 전에 크게 크게 일정을 관리하고 시작 했는데도 불구하고 오류가 발생한다던지 개인적인 사정이 생겨서 일이 미뤄지는 일이 있었는데 그때 계속 소통하면서 일정을 조율했고 만약 제가 정해진 시간에 하지 못 할 거 같으면 그 시간을 허투로 버리지 않았고 다른 팀원들한테 도와줄 거 없는 지 여쭤보고 도움을 드리다가 다시 제가 다시 투입될 수 있는 상황이 되면 다시 그쪽으로 투입하면서 진행했습니다. Q. 본인의 장단점에 대해서 말씀해 주세요.A. 제가 요즘 느끼는 가장 큰 장점은 피드백 수용을 되게 잘한다는 장점이 있는데 개발이든지 전에 했던 직업의 일이든지 주변 사람들이나 팀원들이 이런식으로 개선을 해줬으면 좋겠다 혹은 이런식으로 하면 좋겠다라고 피드백을 주면 그거에 대해서 저만의 고집을 부리지는 않았고 아 이러한 이유가 있구나 하면서 뭐든지 적합한 이유가 있다면 다 수용하면서 진행했었구요 그리고 단점이라하면 음... 제가 예전에는 이거에 대해서 지식이 살짝 부족하면 이거를 드러내고 싶지 않아서 개발이든 다른 일이든 진행을 하다가 어려운게 있으면 저 혼자 해결하려고 하면서 그 시간을 되게 딜레이 시키는 경험을 가지고 있는데 그러다 보니까 저한테는 가장 작은 문제였음에도 불구하고 저 혼자 이렇게 꽁꽁 숨기고 있어서 그게 스노우 볼처럼 커지는 경험이 있었어요. 그래서 그런 경험을 통해 내가 모른다는 것을 부끄러워 하지 않고 작은 거라도 팀원들이든 주변사람들이랑 소통하면서 공유해야겠다라는 해결방안을 얻게 되었습니다. Q. 실시간 데이터 송수신과 관련된 내용이 되게 많아요. 포잉마켓에서도 그런 내용들이 주된 내용이고 그런데 소켓을 사용하다보면 많은 이슈가 있을 거 같아요. 이슈가 있었으면 어떤 이슈가 있었고 그걸 해결하기 위해서 어떤 노력들을 했는지 말씀해 주시면 감사하겠습니다.A. 가장 큰 이슈는 클라이언트와 서버의 연결이 끊어지는 경우가 있었는데 이런 경우에 자동으로 재연결해주는 기능을 Socket.IO에서 제공해주고 있었어요 그래서 이를 활용해서 부득이하게 연결이 끊어진다 하더라도 데이터 손실이 되지 않고 연결이 다시 이루어졌을 때 필요한 데이터를 클라이언트에 다시 재전송하는 방식으로 데이터 일관성을 유지해 왔습니다. Q. 이력서에 남기신 배포 링크에 들어가면 소켓이랑 관련된 에러가 발생하고 있는 거 같은데 이를 인지하고 계신가요?A. 네 인지하고 있습니다. Q. 왜 이런 에러가 발생하는지 알고 계실까요?A. 데이터를 전송하지 않았는데도 불구하고 계속 불필요한 데이터가 전송되는 것 때문에 계속 통신이 이루어지는 것으로 알고 있습니다. Q. 그럼 이거를 해결하기 위한 어떤 노력을 하셨을까요?A. 아직 리팩토링 진행 중이라서 거기까지 손을 대진 않았습니다.
Q. 직관일기라는 프로젝트를 7월부터 시작하셨어요 지금 9월이면 프로젝트를 시작한지 기간이 좀 된 거 같은데 아직도 기획 단계인데 제 생각에는 일정이 좀 늦는 거 같아요 여기에 대해서 어떻게 생각하실까요?A. 아 저도 제가 진행했던 부트캠프 이후에 생긴 커뮤니티에서 사이드 프로젝트를 모집하길래 들어갔던거여서 저는 사실 부트캠프 수료생 아니면 취업 준비생분들만 이루어진 단체인줄 알았는데 들어가서 보니까 직장이랑 병행하시는 분들이 꽤 많아서 처음에는 원래 만들어진 서비스를 다시 앱으로 마이그레이션 하는 방식으로 진행하려고 했지만 저희가 회의를 한 결과 그것보다 아예 새로 뒤집어서 만들자는 의견이 나와서 처음에는 다른 서비스랑 차별화를 두기 위해 계속 찾아보고 계속 경험하면서 한 달을 쓴 거 같구요 지금은 기획은 거의 된 거 같은데 디자이너 분이 두 분인데도 불구하고 직장이랑 병행하고 계셔서 디자인을 아직 기다리는 상황입니다. Q. 이벤트 버블링과 캡처링에 대해서 말씀해 주세요.A. 이벤트 버블링이랑 캡처링은 우선 브라우저에서 이벤트가 발생했을 때 이벤트가 DOM 트리 내에서 어떻게 전파되는 지에 대한 방식인데 우선 버블링은 이벤트가 발생한 곳에서 시작해서 상위 요소로 전파되는 방식이구요 자식 요소에서 발생한 이벤트가 부모 요소로 전파되고 최종적으로 최상위 요소인 window까지 전파됩니다. 이벤트 버블링의 장점은 이벤트를 하나의 상위 요소에만 연결해서 하위 요소에서 발생하는 이벤트를 처리할 수 있다는 장점을 가지고 있는데 이게 이벤트 위임이라고 하고 이벤트 위임을 사용하면 성능 최적화에 유리하다고 알고 있습니다. 또 이벤트 캡처링은 이벤트 버블링이랑 반대로 상위 요소에서 하위 요소로 전파되는 방식인데 최상위 요소에서 이벤트가 발생하면 하위 요소까지 순차적으로 내려가면서 이벤트가 전달됩니다. 그래서 이벤트 전파 과정이 아마 아 아닙니다. 이벤트 캡처링은 기본적으로 비활성화 되어있는 걸로 알고 있어서 기본적으로 브라우저는 이벤트 버블링을 사용하지만 캡처링을 활성화 하려면 이벤트 리스너에서 따로 처리를 해야 하는 걸로 알고 있습니다.
Q. 그럼 이벤트 버블링과 캡처링을 막는 방법은 어떤 것이 있을까요?A. 이벤트 버블링과 캡처링을 막는 방법이 event. ... stopPro... 어떤 메서드가 있는 것으로 알고 있는데 그 메서드의 역할이 이벤트의 전파를 중단시키는 역할이기 때문에 이벤트가 버블링 또는 캡처링 될 때 그 단계를 지나서 더 이상 상위 또는 하위 요소로 전파되는 것을 막는 것으로 알고 있습니다. 그래서 사용할 때는 이벤트 핸들러 안에서 사용해야 하고 그 메서드를 호출하는 즉시 현재 이벤트가 더 이상 전달되지 않습니다.
Q. 이벤트 버블링 말씀하시면서 이벤트 위임에 대해서 말씀하셨는데요 이벤트 객체에서 target과 currentTarget의 차이는 무엇일까요?A. target이랑 currentTarget이 이벤트가 발생한 요소와 관련된... 사실 잘 모르겠습니다.
Q. 박스 모델에 대해서 말씀해 주세요.A. 웹 페이지에서 HTML 요소를 다룰 때 사용하는 건데 웹 페이지의 모든 요소가 네모난 박스로 이루어져 있고 이 박스는 네 가지 영역으로 구분되어 있다고 해서 박스 모델이라는 이름이 지어졌구요. 그래서 박스 모델의 요소는 content, padding, margin, border 이렇게 총 네 가지가 있고 이 각 요소가 페이지에서 차지하는 크기랑 위치를 결정합니다. 그래서 네 결정합니다.
Q. 포잉마켓에서 SCSS를 사용하셨는데 CSS를 다루는 방법에는 CSS, 전처리기, CSS in JS, Tailwind, ... 중에서 특히 SCSS를 사용하신 이유가 있으실까요?A. 제가 사용하면서 제일 좋았던 점은 프로젝트 내에서 계속 사용하는 border 크기라던지 어떤 특징이나 색깔이 있는데 색깔을 변수명으로 지정해서 그 변수를 재사용 할 수 있는 가장 큰 장점이 있었구요 그 변수를 사용하고 만약에 대표 색깔을 바꾼다고 하더라도 모든 파일에서 그 색깔을 바꾸는 것이 아니라 변수로 지정한 파일에서 색깔만 바꾸면 되는 거니까 재사용과 유지보수성이 용이 했었구요. 그리고 제가 가장 많이 사용했던 것 중에서 하나는 중첩으로 스타일을 지정할 수 있었는데 컴포넌트 안에서 사용할 때 하나의 예를 들어 div 박스가 있으면 div 박스 안에 중첩된 많은 태그들이 있을텐데도 불구하고 태그 안에서 그 큰 div 박스 안에서 중첩된 스타일링을 적용할 때 그 다 분리 시켜 놓으면 나중에 유지보수 하기도 어렵고 중첩된 기능을 딱 봤을 때 이해하기도 조금 복잡한 단점이 있었는데 대괄호를 묶어서 중첩해서 스타일을 하니까 하나로 묶어서 볼 수 있고 구조화 시킬 수 있었다는 장점이 있었습니다.
Q. 네스팅 문법이 어떤 선택자 안에서 &를 붙여서 자식 요소에 접근하는 것을 말씀하시는 게 맞을까요?&는 가장 큰 요소에서 예를 들어 버튼이라고 치면 버튼을 클릭했을 때 아니면... 그 &는 하나의 자식 요소를 구분할 때 사용 했었고 제가 방금 말씀드렸던 중첩 요소는 하나의 큰 div 박스를 묶고 그 안에 여러 개의 스타일링이 넣어져 있을 때 원래는 하나같이 다 분리해서 같은 줄에 넣으면 아 이게 여기 있겠구나 예상할 수 있었지만 SCSS를 사용하면 가장 큰 div에 스타일링을 집어넣고 그 안에서 자식 요소의 클래스명을 집어 넣어서 중첩을 하면 아 이게 그 큰 하나의 div 박스 안에 있는 스타일링이 다 여기에 들어가 있는 거구나 할 수 있었습니 Q. 말씀하신 변수의 사용이나 중첩된 사용이 일반 CSS에서도 다 지원하는 것으로 알고 있는데 여기에 대해서 알고 계셨나요?A. 어 근데 물론 다들 중복되는 기능을 가지고 있지만 저는 SCSS를 사용할 때 반복되는 스타일이나 방금 말했던 색깔이나 스타일의 변경을 해야 할 때 그렇게 복잡한 요구사항을 다룰 때 SCSS에 유용하다고 생각합니다. Q. CSR과 SSR에 대해서 설명해 주세요.A. 우선 CSR은 클라이언트 사이드 렌더링으로 클라이언트 예를 들어 브라우저에서 자바스크립트를 사용해서 HTML을 생성하고 렌더링하는 방식이라서 초기에는 아무 외형이 없는 HTML 파일이 렌더링 되고 자바스크립트 파일이 실행된 이후에 필요한 부분을 화면에 표시하는 방식이구요. 그래서 처음에는 빈 페이지가 렌더링 되고 그 다음에 자바스크립트로 필요한 부분을 화면에 표시하는 방식 때문에 사용자 경험이 조금 빠르고 SPA라고 싱글 페이지 어플리케이션 구현에 유리해서 페이지를 전환할 때 전체 페이지가 다시 새로 렌더링 되는 것이 아니라 바뀌는 부분만 렌더링 되기 때문에 빠르게 화면 전환이 되고 이에 반해 아까 말했던 거처럼 초기 로딩 속도가 느리고 처음에는 빈페이지가 로드되고 나중에 자바스크립트가 실행된 이후에 컨텐츠가 생성되기 때문에 초기 HTML이 비어져있는 경우에 의해서 SEO 성능이 떨어지는 것으로 알고 있습니다.
Q. 자바스크립트의 이벤트 루프에 대해서 말씀해 주세요.A. 이벤트 루프가 그 자바스크립트는 싱글 스레드라서 한 번에 하나의 작업을 처리할 수 있지만 이벤트 루프를 사용해서 멀티 스레드처럼 여러 개의 작업을 처리할 수 있는 것처럼 보이는데, 이벤트 루프가 콜 스택과 태스크 큐와 브라우저에서 제공하는 Web APIs와 같이 순환을 하면서 자바스크립트의 비동기 처리를 진행시켜 주는데 비동기 함수가 딱 호출될 때 콜스택에 들어가게 되는데 함수 안에서 비동기 함수가 있어서 그 함수가 실행될 때까지 기다리는 것이 아니라 실행이 완료됐다고 치고 그 비동기 함수를 호출한 전체적인 함수가 스택에서 제거가 되고 그 안에 있던 비동기 함수는 콜백 함수들이 대기하고 있는 태스크 큐에 들어가게 됩니다. 그래서 태스크 큐에 들어가게 됐는데 이벤트 루프가 계속 순환을 하다가 콜스택이 비었는지 콜스택에 들어가 있는 함수들이 다 호출되고 작업이 끝났는지 확인이 끝나고 나면 태스크 큐에 대기중인 콜백함수를 순차적으로 가져와서 실행하면서 이 과정을 통해 비동기 처리를 합니다.
Q. 자기소개에 보면 도전을 즐기는 개발자라고 하셨는데 지금까지 어떤 도전들을 해오셨을까요?A. 우선 제가 딱 졸업을 하자마자 전공과 완전 관계가 없는 필라테스 지도자 자격증을 따고 작년까지 필라테스 강사 일을 해왔구요 애초에 처음에 시작할 때도 저는 완전히 전공과 다른 직종이고 기존에 해왔다고 하더라도 제가 수업을 받는 입장이지 지도자 입장은 아니였기 때문에 처음에 자격증을 따러 갔을 때도 저에게는 가장 큰 도전이라고 생각했고 자격증을 딴다고 하더라도 실제 돈을 내고 오시는 수업에 투입된다는 거 자체가 굉장히 어려운 도전이었다고 생각해요. 그런 큰 도전을 했음에도 불구하고 지금은 또 필라테스 강사랑은 완전히 별개인 프론트엔드 개발자에 대한 커리어 전환의 도전을 하고 있습니다. Q. 그럼 개발자의 길을 걸으면서 하신 도전은 있을까요?A. 애초에 시작한 거부터 큰 도전이었다고 생각하고 솔직히 말하자면 부트캠프 내에서는 이미 정해진 커리큘럼이 이어져 있고 이거 하세요 하면 해야 하는 입장이니까 수업 듣는 학생처럼 진행했지만 부트캠프 과정이 아예 끝나고 수료한 시점에 제가 사이드 프로젝트를 아예 모르는 사람들과 아예 교류가 없던 사람들과 진행하는데 여기에 지원했다는 것도 도전이고 어디에 소속되어 있지 않고 혼자서 준비를 하고 있는 거기 때문에 하루 하루가 도전인 거 같다. Q. 그럼 필라테스 강사를 하시다가 개발자를 해야겠다. 프론트엔드 개발자를 해야겠다. 하신 이유는 어떤 것이죠?A. 우선 필라테스 강사 직업 특성으로 동료와의 유대는 전혀 없고 유대보다는 경쟁 의식이 활발한 직종이다 보니까 일을 하면서 뭔가 되게 혼자 로봇처럼 수업을 진행하는 것 같고 외롭다는 생각을 많이 해서 그때 딴에서 제가 사람들을 많이 만나는 영어 회화 스터디 같은 거를 해본 적이 있는 거기 안에서 비전공자 개발자랑 친해져서 얘기를 나눴던 경험이 있었어요. 그런데 처음에는 솔직히 말해서 개발자, 코딩, cs 같은 거를 들었을 때 이거는 학교를 안 나오면 절대 내가 해볼 수 없는 직종이겠다 생각을 했던 적이 있었는데, 그분은 심지어 비전공자고 그냥 자기가 관심이 있어서 학원 아무 곳이나 등록해서 그때 딴에서 3년동안 회사를 다닌 분이었는데 제가 그 얘기를 듣자마자 재밌겠다 싶어서 컴퓨터 학원이라고 검색을 했던 적이 있었는데 제가 그때 검색했던 컴퓨터 학원들은 모든 거를 알려주는 학원이었고 백, 프론트, AI 다 알려주는 학원이고 제가 뭘 배우는 지 뭘 좋아하는 지 모르겠어서 그냥 나혼자 cs 같은 거 살짝 건드리면서 준비를 해봐야겠다고 생각을 했었는데 인터넷에 검색한 알고리즘 때문에 인스타에 코드잇 스프린트 광고가 떠서 그냥 들어가 봤는데 제가 그때 뭘 배우는지 어떻게 진행하는지 제가 엄청 많이 고민했던 문제점들을 다 해결해주는 느낌이어서 나라에서 지원한다는데 그냥 작은 분야 딱 하나의 분야니까 공부를 한번 해보자 막연하게 들어갔지만 저랑 너무 잘 맞아서 6개월이라는 시간동안 너무 즐기면서 잘 할 수 있었다. Q. 잘 맞는다고 하셨는데 어떤 점에서 그런 것들을 느끼셨나요?A. 제가 예전에 했던 필라테스 강사 직업은 하나의 사람에 대해서 몸에 대한 문제점... 한 사람의... 한 사람에 대해서 제가 어느 정도 수업을 진행하고 그 한 사람에 대해서 수업을 진행한다고 하더라도 하루 아침에 몸이 싹 좋아지고 교정되는 것이 아니니까 수업을 진행하면서도 개인마다 차이가 있어서 결과적인 부분에서 더디다는 느낌을 받아서 되게 답답했던 경험이 있었는데 프론트엔드는 제가 딱 하는 만큼 화면에 보이고 직관적으로 뭐가 문제고 뭘 어떻게 해결해야 되고 그리고 그런 것 때문에 매력을 느꼈던 거 같습니다. 결과가 직관적으로 보인다는 것에 대해서 Q. useState와 useEffect를 사용해서 데이터를 fetching 할 때 주의할 점은 어떤 것들이 있을까요?A. useEffect나 useState를 사용해서 데이터를 fetching 할 때 가장 큰 문제점은 무한 루프, 계속 돌아가는 문제점도 있었고 그리고 또 불필요한 메모리가 생성돼서 서버에 부담을 주는 문제점을 가지고 있었는데 우선 useEffect 자체는 비동기로 설정을 할 수 없어서 비동기 함수를 내부에서 호출해야 하는데 내부에서 호출할 때 만약에 상태가 업데이트 되면 리 렌더링이 발생하기 때문에 useEffect의 마지막에 작성하는 의존성 배열을 제대로 지정해야 불필요한 데이터가 호출되는 것을 방지할 수 있었는데 만약에 의존성 배열을 제대로 설정하지 않으면 처음에 말했던 거 처럼 계속 무한으로 호출하는 경우가 있었습니다. 그리고 또 useState 같은 경우에는 useState 자체가 비동기적으로 작동하기 때문에 제가 바라던 대로 상태를 업데이트 한 직후에 그 상태를 참조할 경우 제가 원하는 값이 아니라 다른 전의 값이나 다른 값일 수 있기 때문에 상태 업데이트 직후에 데이터를 참조할 때는 주의할 점이 많다고 생각합니다. 그래서 이전 상태에 의존을 하면서 새로운 상태를 업데이트를 해야 하는 경우에 콜백함수로 관리를 했었습니다. 그리고 이 두 가지를 할 때 에러 처리가 굉장히 중요했던 거 같은데 데이터 fetch 하면서 발생하는 에러를 useEffect 안에서 처리를 해야 사용자가 오류를 인지할 수 있습니다. Q. useEffect에서 fetch를 해서 useState로 관리를 할 때 race condition이라는 개념이 있어요. 이런 개념도 찾아보면 좋을 거 같아요. 공식 문서에 나와있습니다.A. 아 감사합니다.
function SearchResults({ query }) {
const [results, setResults] = useState([]);
const [page, setPage] = useState(1);
useEffect(() => {
let ignore = false;
fetchResults(query, page).then(json => {
if (!ignore) {
setResults(json);
}
});
return () => {
ignore = true;
};
}, [query, page]);
function handleNextPageClick() {
setPage(page + 1);
}
// ...
}Q. 자바스크립트 this에 대해서 아시는 만큼 설명해 주시면 되겠습니다.A. this가 자바스크립트에서 컨텍스트를 참조하는 키워드로 알고 있고요. 그래서 함수나 메서드가 호출될 때 그 함수나 메서드를 속한 객체를 가리키고 가리킨 this에 값은 호출되는 방식에 따라서 다르게 보여지는 걸로 알고 있습니다. 그래서 우선 전역 컨텍스트에서 this는 전역 객체를 가리키고 함수에서의 this는 호출하는 방식에 따라서 달라지는데 일반 함수를 호출할 때 this는 전역 객체를 가리키고 메서드를 호출할 때는 메서드를 호출한 객체를 가리키는 걸로 알고 있습니다. 그리고 또 화살표 함수에서의 this는 그 화살표 함수는 값을 가지지 않고... 아 화살표 함수는 잘 모르겠구요. 생성자 함수의 this가 new 키워드와 함께 호출되고 그 호출될 때 새로 생성된 객체를 가리키는 걸로 알고 있습니다.
Q. 화살표 함수는 상위 스코프의 this를 가리킵니다.A. 아 감사합니다. Q. 타입스크립트의 interface와 type의 차이에 대해서 말씀해 주세요.A. interface는 확장이나 다른 거랑 병합할 때 병합이 가능하다는 특징을 가지고 있고 그래서 클래스나 객체를 명시적으로 정의할 때 사용하는 알고 있구요. 그래서 아마 인터페이스는 객체를 정의할 때 사용하지만 지금까지 말했던 interface와 다르게 type은 객체에 묶여있는 것이 아니라 객체 말고 다양한 타입의 값을 정의할 때 사용하고 그리고 interface와 다르게 확장을 할 수 없는데 여러 개의 타입을 조합해서 복잡한 타입을 하나의 타입으로 정리할 수 있는 것으로 알고 있습니다. 그래가지고 그 객체의 타입을 정의하거나 병합하는 경우에는 interface를 사용하고 객체뿐만 아니라 복잡한 타입을 정의해야 할 때는 type을 사용해야 하는 걸로 알고 있습니다.
Q. 타입스크립트를 사용하신 이유가 있을까요? 타입스크립트를 사용하면서 얻었던 장점들이 있을까요?A. 자바스크립트 특성으로 타입이 딱 지정되어 있지 않으니까 데이터를 받아오는 경우나 여러 페이지에서 하나의 컴포넌트를 사용하는 경우에 타입이 지정되어 있지 않은 단점 때문에 데이터를 일관성 시키기도 어렵고 타입이 정확하게 지정되어 있지 않으니까 유지보수 하기에도 어렵다는 문제점이 있었는데 타입 스크립트에서는 타입을 딱 지정해서 컴파일을 할 때 타입에 대한 오류를 발견해서 이런 타입 에러를 예방할 수 있고 타입을 딱 하나로 지정해 놨으니까 타입이 일치하지 않는 함수를 호출할 때나 잘못된 접근을 할 때 사전에 방지할 수 있다는 장점을 가지고 있습니다. 그리고 또 이제 대부분 소규모 프로젝트가 아니라 대규모 프로젝트면 파일도 엄청 많고 들어오는 팀원들의 수도 많을텐데 타입을 명확하게 지정해 놓으면 내가 작성한 코드가 아니더라도 아 이게 이거구나 하면서 코드의 이해를 도와주는 거 같습니다.
Q. 저희 회사가 아무래도 규모가 크고 대단한 사람을 뽑아야 하기 때문에 질문을 많이 드리겠습니다.A. 아... Q. 클로저에 대해서 아시는 만큼 설명해 주세요.A. 클로저는 내가 아니 내가 아니라 클로저는 자바스크립트 안에서 함수가 딱 선언 됐을 때의 환경을 기억하는 것을 말하는데 그래서 크게 보자면 딱 함수와 선언된 함수와 선언된 함수의 환경이 스코프 이 두 가지를 결합한 하나의 단어라고 설명을 하겠습니다. 그래가지고 클로저의 특징 중에 하나가 클로저를 사용하면 외부에서 함부로 접근할 수 없게 캡슐화 하고 은닉화 할 수 있다는 특징을 가지고 있어서 그 특징 때문에 데이터를 보호하고 정보가 노출되지 않고 은닉하는데 유용하다는 장점이 있고 그리고 클로저는 함수가 호출된 이후에도 함수 내부에 선언된 변수를 기억할 수 있기 때문에 그래서 그 함수를 호출했을 때 상태를 지속적으로 유지하고 함수를 호출할 때마다 이전 상태를 참조할 수 있는 거로 알고 있습니다. 그래서 이러한 특징 때문에 클로저가 함수형 프로그래밍에서 매우 유용한 거로 알고 있어서 고차함수를 함께 사용할 때 좋은 걸로 알고 있습니다.
Q. 어려운 질문에 앞서서 가볍게 말씀드릴게요. 기업을 선택하시는 어떠한 조건 같은게 있을까요?A. 저는 딱 기업을 선택할 때 홈페이지나 공고를 많이 보는데 공고나 홈페이지에 자세한 내용이 들어있지 않고 뭉뚱그려서 설명이 적혀 있으면 사실 저는 아무것도 모르고 홈페이지랑 공고를 보고 지원하는 건데 회사에 대한 이해가 떨어지면 저도 준비를 하고 면접을 볼 때 그만큼 진심이 떨어진다는 생각을 가지고 있기 때문에 딱 선택을 할 때 공고와 홈페이지에 자세한 내용이 있는지 내가 어느 정도 이해를 가지고 임할 수 있는지 중요하게 생각하는 거 같습니다. Q. 그럼 어떤 회사에서 일을 해보고 싶나요?A. 저는 이커머스랑 교육에 제일 관심이 많구요 그중에서도 이커머스에 관심이 더 많은데 자세한 분류를 따지자하면 의류, 패션, 뷰티쪽에 관심이 많은 거 같습니다. Q. 우리 회사는 가고 싶은 회사에 부합하지 않는 거 같은데 지원하신 이유가 있을까요?A. 여기 회사가 어딘데요... 제가 바라는 거는 정말 바라는 거 뿐이고 그게 아니더라도 저는 어딜 가도 잘할 수 있을 거라는 확신이 있기 때문에 사실 제가 필라테스 강사 일을 하기 전에도 필라테스가 재밌어서 좋아서 지도자 준비를 했던 건데 사실 좋아서 하는 거랑 제가 일로해서 하는 거랑은 아예 다른 구분이라고 생각을 해서 그냥 바라는게 그거고 그게 아니어도 뭐든지 잘해낼 자신 있습니다. Q. 그럼 희망하시는 연봉은 어떻게 될까요?A. 저는 아직 신입이기 때문에 3500 이상만 바라고 있습니다. Q. 3500...A. 네... Q. 브라우저의 동작 방식에 대해서 말씀해 주시면 되겠습니다.A. 브라우저는 우선 사용자가 내가 원하는 URL을 딱 입력해서 들어가게 되면 브라우저 자체에서 서버로 사용자가 이렇게 요청했다는 거를 전송하고 그 이후에 서버는 필요한 데이터를 준비한다음에 그거에 대한 응답을 HTTP 응답을 브라우저에 전송합니다. 그 응답에는 요청을 했을 때 제대로 요청을 했는지에 대한 상태 코드나 뭐 헤더나 그런 것들이 포함되고 브라우저는 서버에서 받은 HTML 문서를 파싱해서 DOM Tree를 생성합니다. 그리고 HTML 문서는 파싱 했으니까 CSS 문서를 파싱해서 CSSOM Tree를 생성하고 이 두 개의 DOM Tree랑 CSSOM Tree를 결합해서 렌더 트리를 생성하게 됩니다. 렌더 트리를 생성했으니까 그 렌더 트리를 사용해서 화면에 어떤 요소를 표시할 지 계산을 한다음에 그 계산한 거를 바탕으로 요소의 크기나 위치 같은 레이아웃 계산을 하고 레이아웃 계산이 완료되면 브라우저 자체에서 그 레이아웃 계산된 것을 바탕으로 화면에 실제로 렌더링하게 됩니다. 이 과정을 페인팅이라고 하구요 마지막으로 페인팅 된 것을 페인팅 된 것이 하나는 아닐테니까 페인팅 된 것을 다 이렇게 모아서 사용자가 요청한 화면을 사용자가 요청한 페이지를 화면서 딱 표시하고 여러 개의 표시된 것을 이렇게 이렇게 합쳐서 하나의 화면이 완성되는 것으로 알고 있습니다. 그래서 화면을 완성했으니까 자바스크립트를 실행해야 하는데 아까 CSS나 HTML 파싱했던 것처럼 자바스크립트를 파싱해서 뭘 생성하는데 그 생성하는 단어가 생각이 안 나고 그래서 그 생성한 거를 컴파일하고 컴파일에서 에러가 안 나면 코드를 실행한 다음에 자바스크립트가 실행된 거에 따라서 아까 생성됐던 DOM을 수정하거나 아니면 업데이트해서 스타일을 변경시키거나 아니면 페이지의 내용이 변경되는 상황이 발생할 수 있구요 또 자바스크립트에 있던 코드의 내용 때문에 레이아웃이랑 페인팅 했던 작업이 다시 수행되는 경우도 있습니다.
Q. 우리 회사가 코딩 테스트는 따로 보지 않았는데 평소에 코딩 테스트 공부는 진행하고 계신가요?A. 어... 부트캠프 과정 중에서는 꾸준히 진행했었는데 그 수료한 이후에서는 코딩 테스트를 사실 열심히는 하지 않았지만 계속 제가 직접 풀었다기 보다는 남이 풀었던 거를 본 다음에 아 이런식으로 풀어야겠다는 학습한 경험이 많았습니다. Q. 협업을 중요하게 생각하시는데 회사에 들어가서 아 이사람이랑은 협업이 절대 안 될 거 같다는 사람이 있을 때 어떻게 대처할 수 있을 지 말씀해 주세요.A. 제가 협업하면서 힘들었던 팀원 유형이 무책임한 팀원이었고요 무책임한 팀원을 보면 솔직히 말해서 기획 단계에서부터 그런 팀원이 보이더라구요 그리고 솔직히 프로젝트를 진행하다보면 사람들이 PR 올리거나 계속 회의를 할텐데 그 회의를 참여하는 태도부터가 불성실한게 보이니까 저딴에서는 그 자리에서 뭐라고 하기 보다는 그냥 그러려니 하고 저 뿐만 아니라 그런 분들은 대부분 다른 팀원들도 어느정도 인지하고 있기 때문에 제가 해야 될 일을 우선적으로 하고 해당 팀원이 하고 있는 부분을 제가 투입돼서 같이 한다던가 같이 하면 살짝은 덜 무책임할 테니까 같이 한다거나 아니면 그냥 아예 가져와서 제가 한다거나 이런식의 경험을 가지고 있습니다. Q. 요즘은 어떤 것에 관심을 두고 공부를 하고 계신가요?A. 요즘은 유독 제 주변에서 AI 관련된 것을 많이 관심을 가지고 있고 요즘 공고에서도 AI 언급이 굉장히 많아서 AI를 사용해서 개인 프로젝트도 진행해 보고 싶고 그리고 AI를 어떻게 해야 잘 활요하면서 저한테 득이 될 수 있을까 많이 고민하고 있는 거 같습니다. |
Beta Was this translation helpful? Give feedback.
-
역할면접관 - 김민영 지원자 - 정봉찬 질문0. 자기소개A. 1. DX를 개선하는 것이 어떻게 UX에 기여한다고 생각하시나요 ?A. 2. Vue.js를 독학하여 프로젝트를 성공적으로 완료한 경험에 대해 말씀해주세요.A. 2-1. Vue.js와 React를 비교했을 때 차이점은 무엇인가요 ?A.
3. 팀 내 커뮤니케이션에서 중요한 요소는 무엇이라고 생각하시나요 ?A. 서로 믿는다는 마음을 보여주는 것, 신뢰하는 걸 보여주는 것이 가장 좋은 것 같습니다. 3-1. 같이 일하기 싫은 팀원은 어떤 팀원인가요 ?A. 예전에 경험한 바로 아무런 얘기도 연락도 없이 잠적하는 팀원입니다. 3-2. 그럼 팀 내에서 해당 팀원때문에 문제가 생긴다면 팀장이나 리더로서 어떻게 해결하실 건가요 ?A. 잠적한 팀원에게 연락을 취해서 얘기를 나눠보는 방식으로 해보고 만약 연락이 안 되면 남아있는 인원들끼리라도 사기를 돋구어 줄 거 같습니다. 4. 쿠키, 세션 스토리지, 로컬 스토리지의 차이점을 설명해주세요.A.
4-1. 쿠키, 세션 스토리지, 로컬 스토리지 중 어떤 저장소를 선택할지 결정하는 기준은 무엇인가요 ?A. 검색어를 유지할 때 로컬 스토리지를 사용하고 백엔드와 통신할 때 쿠키를 사용합니다. 4-2. 쿠키와 로컬 스토리지를 함께 사용하는 경우, 충돌이나 데이터 일관성 문제를 방지하기 위한 전략이 있으신가요 ?A. 전역 스토리지는 최대한 지양하는 편인 거 같습니다. 5. GitHub Actions를 사용하여 CI/CD 파이프라인을 구축하는 과정을 설명해주세요.A. 6. 웹 페이지의 성능을 고려할 때 HTML 파일에서 <script>태그를 어디에 위치시키는 게 좋을지 설명해 주세요.A. 끝에 <script> 태그를 넣거나, 스크립트에 defer 속성을 추가하는 것입니다. 이렇게 하면 HTML 파싱이 완료된 후에 스크립트가 실행되므로 페이지 로딩 속도와 성능이 개선됩니다. 6-1. 태그 내에 <script>태그를 위치시키는 건 잘못된 건가요?A. 아니요. 잘못된 건 아니지만 끝에 위치시키거나 defer 속성을 사용하는 것이 성능에 더 좋을 것 같습니다. 7. box model에 관해 설명해주세요.A.
7-1. box model이 브라우저에서 어떻게 동작하는지 설명해주세요.A.
8. 실행 컨텍스트에 대해 설명해주세요.A.
8-1. 실행 컨텍스트 관점에서 클로저에 대해 설명해주세요.A.
9. 풀스택 경험이 있는데도 불구하고 프론트엔드로 정한 이유가 무엇인가요 ?A. 10. 상태 관리 라이브러리에 대해 설명해주세요.A.
10-1. Jotai를 선호하신다고 하셨는데 앞서 말했던 상태관리와 비교해주세요.A. 11. React 관련 세미나를 열게된다면, 어떤 주제로 열고 싶나요 ?A. 전역 상태 관리를 주제로 열고 싶습니다. 11-1. 어떤 순서로 세미나를 진행하실 예정이신가요 ?A. 전역 상태를 사용할 수 밖에 없는 이유 → 전역 상태에 대한 문제점 → 개선 방법 12. 앞으로 프론트엔드 개발자로서 어떤 기술적 방향으로 성장하고 싶나요 ?A. |
Beta Was this translation helpful? Give feedback.
-
역할면접관 - 백지원 QnAQ. 1분 자기소개 해주세요.A. Q. 크로스 브라우징 문제를 해결한 경험이 있나요? 어떤 브라우저에서 문제가 발생했고, 어떻게 해결했나요?A.
Q. 레이아웃 시프트가 사용자 경험에 미치는 영향을 어떻게 최소화 했나요?A.
Q. 가장 자신있다고(본인이 원하는 성과를 냈다고) 생각하는 프로젝트는 무엇이고 어떤 역할을 했나요?A. Q. 토큰 자동 갱신을 위한 ‘Axios Interceptor’ 설정 방법을 설명해 주실 수 있나요?A. Q. Presigned URL 방식으로 이미지 업로드를 구현한 이유는 무엇인가요?A. Q. 리액트에서 상태관리를 하는 이유는 무엇인가요? 그리고 평소에 어떻게 상태관리를 하시는지 설명해 주세요.A. Q. 작업 중 팀원과 의견에 충돌이 발생하면 어떻게 해결하나요? 경험이 있다면 경험을 토대로 말씀해주세요.A. Q. 전직이 기자이셨는데 기자의 어떤 점을 프론트엔드 기술에 접목시킬 수 있을까요?A. Q. var, let, const의 호이스팅을 TDZ와 관련하여 설명해주세요.A. Q. 타입스크립트를 사용하는 이유는 무엇인가요?A.
Q. CSR, SSR의 차이점을 설명해주세요.A. Q. 어떤 경우에 CSR, SSR을 사용하면 좋을까요?A.
|
Beta Was this translation helpful? Give feedback.
-
|
잘 정리해주셔서 감사해요 지원님 |
Beta Was this translation helpful? Give feedback.
-
역할면접관 - 김보경 QnAQ. 1분 자기소개를 해주세요A. 내용은 나쁘지 않았지만 지원동기에 대한 내용을 보충했으면 더 좋았을것 같다. QnAQ. 프로젝트에서 어떤 역할을 수행하였는지?A. input컴포넌트를 만들고 초기 페이지와 초기 여행 생성 페이지를 맡았습니다
QnAQ. next.js를 사용한 이유는 무엇인가요?A.
QnAQ. 검색어 노출을 진행해 보았는지?A. 메타데이터 설정으로 url입력시 썸네일에 로드되도록 적용까지는 완료하였음
QnAQ. 공통 인터셉터 기반 API요청 모듈 구현A.
QnAQ. 프로젝트 안에서 프론트엔드적으로 가장 잘 표현한 부분이 있을까요? (질문을 잘못한거같은데 요지는 UI/UX를 잘 표현한 부분을 말씀드린겁니다)A. 검색했을때 동작에 디바운스를 적용한 내용을 말씀하시면서 더 나은 최적화나 경험을 고민하는 부분을 잘 표현한것 같다고 이야기하였음
QnAQ. 현재 이력서에는 프로젝트 내용 외에는 별다른 내용이 없는것 같습니다. 아영님은 어떤 사람인가요?A. 이부분은 개인적으로 듣기에는 많이 횡설수설 하신것 같습니다.
QnAQ. 개발을 시작하게 된 동기가 무엇인가요?A. 여러 매체에서 개발자를 다루다보니 궁금증이 생겼다. 무언가를 만드는 것을 좋아하는 성향을 가졌다. 실제로 사용하고있던 서비스들이 어떻게 만들어지는지 궁금해서 선택하였다. 실제 성과물을 만들어가면서 보람을 느꼈다.
QnAQ. 크로스 브라우징 경험이 있나요?A. 아직 없음
QnAQ. 시멘틱 마크업에 대해 설명해주세요A. 태그에 의미가 있는 태그를 사용하는 것을 의미합니다. 의마가 있는 태그를 사용했을때 SEO최적화에 도움이 되며, 개발자들 끼리 코드의 의미를 파악하는데 도움이 됩니다. QnAQ. margin과 padding의 차이점A.
QnAQ. HTTP와 HTTPS 의 차이를 알고계신가요?A. 보안적인 측면에서 차이가 난다. SSL/TLS인증이 필요한 것으로 강화되었다고 생각하는데 확실히 모르겠다고 답변
QnAQ. 클로저가 무엇인지 그리고 JavaScript에서 어떤 경우에 활용하면 좋을지 예시와 함께 설명해 주세요.A.
QnAQ. var, let, const를 중복선언 허용, 스코프, 호이스팅 관점에서 서로 비교해주세요A.
QnAQ. React에서 contextAPI에 대해 설명해주세요.A. Props드릴링이 일어날때 사용하는것으로 자식과 부모 사이에 depth가 존재해서 여러 경로를 통해 props를 전달하게 될 때 가독성을 위해 도입하여 사용하는 것
QnAQ. 전역 상태관리 경험이 있으신가요?A. 아직 직접적으로 관리해본 경험은 없다.
QnAQ. 브라우저 렌더링 과정에 대해서 설명해주세요A.
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
매회 차마다 "[n 회차] Study"라는 제목으로 디스커션이 올라오면 아래 템플릿으로 면접관의 입장에서 댓글 달아주시면 됩니다.
QnA를 작성하실 때는 면접관 역할에서 본인이 했던 질문과 지원자의 답변 내용을 작성하면 됩니다.
답변 내용을 전부 받아 적기 힘들면 키워드 위주로 작성해 주셔도 됩니다.
기술 질문은 예상 답변도 작성해 주시면 감사드립니다.
Beta Was this translation helpful? Give feedback.
All reactions