갈등 해결 면접 답변 - galdeung haegyeol myeonjeob dabbyeon

기술관련 질문

제너레이터가 무엇인가?

이터레이터이자 이터러블을 생성하는 함수

목차 Show

• 기술관련 질문
• 제너레이터가 무엇인가?
• 얕은 복사 깊은 복사가 무엇이고 개발할 때 어떤 영향을 미칠까?
• 리액트가 없었을때는 어떻게 state를 관리했을까?
• 웹을 구성하는 요소는 무엇이 있나?
• 리액트 컴포넌트가 리렌더링 되는 경우는 무엇이 있나?
• 리액트의 용도가 무엇인가?
• 웹페이지 성능 최적화를 위해서는 어떤 방법을 사용할 수 있나?
• TDD 개발 경험이 있나? Test를 왜 작성할까? TDD 개발이 좋다고 생각하는 이유는?
• Hover시에 모달이 뜨게 하고싶다면 css를 사용할 것인가 js를 사용할 것인가? 그 이유는 무엇인가?
• setState는 내부적으로 어떻게 동작할까?
• Redux와 context api의 차이점이 무엇인가?
• useMemo와 useCallback의 차이점이 무엇인가?
• 객체지향 프로그래밍이란 무엇인가?
• 브라우저와 nodejs의 공통점과 차이점은?
• Javascript 작동원리를 Stack과 Queue 관련하여 설명해보면?
• 왜 다른 프레임워크 말고 리액트를 사용했나?
• DOM이 무엇이고, Real-DOM과 React-DOM의 차이는 무엇인가?
• React Hooks의 장점,단점?
• 자바스크립트 디버깅 툴을 사용해 본 적 있나?
• 팀 프로젝트는 어떻게 진행했나? 에자일, 스크럼 등을 경험했나? 일정관리 툴은 어떤걸 사용했나?
• 회사 웹사이트를 보고 변경하면 좋을것 같다고 생각한 UI등이 있는가?
• RESTful API란 무엇인가?
• 기술 관련된 정보는 어디서 얻는가?
• MongoDB사용한 경험이 있는데 왜 다른 데이터베이스 말고 이걸 사용했나? 장점이 뭔가?
• 현재 공부하고 있는 기술은 무엇이고 어땠나?
• SSR이 필요한 이유가 뭔가? 첫 로딩속도밖에 없나? 단점은 무엇인가?
• JWT를 통해 인증하는 과정은 어떻게 되나?
• 싱글스레드란? setTimeout이 0이면 순서는?
• 비동기처리 과정, async await언제 사용하나?
• 주로 개발할 때 모르는 부분은 어떻게 공부하고 해결하는가?
• 팀원들과의 협업에 문제는 발생하지 않았나?
• CSS animation, JS animation 차이는?
• 기본 질문
• 담배, 술 하는지?
• 회사에 대해서 궁금한 점이 있나?
• 자기소개
• 대기업도 있는데 왜 스타트업을 선택했나? 왜 우리회사를 지원했나?
• 자신의 강점, 단점은 무엇이라고 생각하나?
• 취업 후 팀 내에서 마음이 안맞는 사람과 갈등이 발생했을때 어떻게 대처할 것인가? 부당한 대우를 받는다면?

얕은 복사 깊은 복사가 무엇이고 개발할 때 어떤 영향을 미칠까?

불변성

리액트가 없었을때는 어떻게 state를 관리했을까?

웹을 구성하는 요소는 무엇이 있나?

리액트 컴포넌트가 리렌더링 되는 경우는 무엇이 있나?

리액트의 용도가 무엇인가?

웹페이지 성능 최적화를 위해서는 어떤 방법을 사용할 수 있나?

TDD 개발 경험이 있나? Test를 왜 작성할까? TDD 개발이 좋다고 생각하는 이유는?

Hover시에 모달이 뜨게 하고싶다면 css를 사용할 것인가 js를 사용할 것인가? 그 이유는 무엇인가?

setState는 내부적으로 어떻게 동작할까?

Redux와 context api의 차이점이 무엇인가?

useMemo와 useCallback의 차이점이 무엇인가?

객체지향 프로그래밍이란 무엇인가?

브라우저와 nodejs의 공통점과 차이점은?

Javascript 작동원리를 Stack과 Queue 관련하여 설명해보면?

왜 다른 프레임워크 말고 리액트를 사용했나?

Vue또한 잠시 학습해봤지만 리액트가 더 자유도가 높다고 생각합니다. React에서 visible이라는 state에 따라서 컴포넌트를 관리하려고 한다면 &&연산자를 사용해도 되고, 삼항연산자를 사용해도 됩니다. 하지만 뷰에서는 v-if를 사용하는 방법밖에 없습니다. 또한 뷰에서 새로운 컴포넌트를 생성한다면 template, script,style을 따로 생성해줘야하기 때문에 속도 Issue가 없다면 React를 사용하고 싶었습니다.

DOM이 무엇이고, Real-DOM과 React-DOM의 차이는 무엇인가?

DOM은 Document Object Model입니다.HTML요소 각각을 노드로 합니다. DOM을 통해서 javascript로 접근하여 노드들을 조작할 수 있습니다.
React-DOM은 vitrual dom입니다. Real dom의 경우 노드 요소들이 조작될 때마다 모든 요소들을 업데이트합니다. 단 하나의 항목만 변경하더라도 모든 요소들이 업데이트되니 성능 저하문제가 발생할 수 있습니다. virtual dom은 이러한 문제를 해결하기 위해서 가상의 객체를 만들고 스냅샷을 찍고 변경사항을 비교하면서 변경된 부분만 적용되도록 해서 성능을 개선합니다.

React Hooks의 장점,단점?

클래스형 컴포넌트보다 코드가 짧다. 생애주기 api를 useEffect하나로 처리할 수 있는 등. 그리고 class컴포넌트에서는 this키워드를 예상하고 추적하는 것에 있어서 실수가 발생할 가능성이 높습니다.
단점은 hooks의 반복문,조건문 혹은 중첩된 함수에서 호출될 수 없다는 규칙때문에 코드의 복잡성이 증가될 수 있습니다.

자바스크립트 디버깅 툴을 사용해 본 적 있나?

ESLint 사용해봤습니다.

팀 프로젝트는 어떻게 진행했나? 에자일, 스크럼 등을 경험했나? 일정관리 툴은 어떤걸 사용했나?

(아직 경험이 없습니다)

회사 웹사이트를 보고 변경하면 좋을것 같다고 생각한 UI등이 있는가?

회사 홈페이지 살펴보고 가기.

RESTful API란 무엇인가?

REST란 HTTP 통신에서 자원과 method를 명시하여 해당 자원에 대한 CRUD 정보를 나타내는 것을 말한다. Method의 종류로는 get, post, put, delete등이 있습니다.
이러한 REST 기반으로 서비스 api를 구현한 것을 말합니다.

기술 관련된 정보는 어디서 얻는가?

구글이나 네이버에서 it관련 기사들을 관심 항목으로 등록해놓고 보기도 하고 it관련 커뮤니티나 유튜브를 통해서 얻기도 합니다.

MongoDB사용한 경험이 있는데 왜 다른 데이터베이스 말고 이걸 사용했나? 장점이 뭔가?

MongoDB는 기본적으로 JSON형식으로 데이터를 저장하고 쿼리언에도 Javascript를 기반으로 하기 때문에 사용하기 편리하고 Nodejs와의 호환성도 좋아서 사용했습니다.

현재 공부하고 있는 기술은 무엇이고 어땠나?

NextJs를 공부중입니다. 라우팅 기능을 따로 구현하지 않아도 돼서 매우 편리했고 SSR을 사용해서 CSR과 달리 초기에 빈 화면을 보여주지 않아도 되어서 UX에 긍정적인 영향을 줄 거라고 생각했습니다.

SSR이 필요한 이유가 뭔가? 첫 로딩속도밖에 없나? 단점은 무엇인가?

SSR이 필요한 가장 큰 이유는 검색엔진 최적화입니다. CSR의 경우 html파일에 root만 들어있고 content가 비어있기 때문에 데이터 크롤링 시에 봇이 얻을 수 있는 정보가 없고, 따라서 검색시의 노출이 줄어듭니다. SSR은 HYDRATION이라는 과정이 필요합니다. 페이지를 먼저 렌더링한 후에 자바스크립트 코드들을 적용하기 때문에 렌더링이 끝난 순간 모든 기능이 작동하는 CSR과 달리 시간간격이 존재합니다.

JWT를 통해 인증하는 과정은 어떻게 되나?

브라우저에서 로그인
서버에서 유저를 위한 웹토큰을 시크릿 키로 암호화해서 만듦
브라우저로 웹토큰을 보냄
브라우저에서 웹 토큰과 리퀘스트를 함께 보냄
서버에서 변조되었는지 확인하고 변조되지 않았다면 사인을 해줌 사인 후에는 시크릿 키를 이용해서 암호화를 풀고 내부에 있는 유저정보를 얻어서 정보를 보내줌
좋은점은 서버는 아무것도 기억할 필요가 없다(세션 데이터베이스 더 만들 필요가 없다)
브라우저에서 필요한 정보를 기억하는것
jwt 세가지 구조로 이루어짐
header, payload, signature
header,payload는 base64로 인코딩되어있다.
그리고 signature는 시크릿 키와 함께 header,payload를 암호화해놓은것.
서버에서는 받은 웹토큰에서 헤더와 페이로드와 시크릿 키를 이용해서 똑같이 암호화 문자열을 만들고 그게 signature내용이랑 똑같은지 확인한다.
그러므로 secret key만 잘 관리하면 변조될 위험이 없다

싱글스레드란? setTimeout이 0이면 순서는?

자바스크립트의 메인 스레드인 이벤트 루프는 스택이고 싱글스레드이기 때문에 싱글스레드 언어이지만 nodejs나 웹 브라우저같은 멀티스레드 환경에서 동작한다. 자바스크립트는 스택에 있는 명령어들을 하나씩 처리하지만 setTimeout과 같은 코드는 브라우저 내부의 저장공간에서 대기하고, 완료되었을 때 브라우저의 큐로 이동해서 stack이 비었을때만 삽입해준다. 그래서 setTimeout이 0이라고 해도 나중에 실행된다.

비동기처리 과정, async await언제 사용하나?

비동기처리에는 Promise객체를 사용한다. Promise는 pending, fulfilled, rejected의 상태를 가지고 then혹은 catch 체이닝을 이용하여 처리할 수도 있고, async await을 사용할수도 있다. async가 붙은 함수는 비동기함수가 되고 http 통신을 하는 메소드 앞에 await을 붙여서 Promise를 반환받는다. try catch를 이용해서 에러도 처리해줄수 있다.

주로 개발할 때 모르는 부분은 어떻게 공부하고 해결하는가?

공식문서를 먼저 찾아보고, 해결 안되는 문제가 있으면 stackoverflow 등의 개발자 커뮤니티를 통해 답을 얻습니다.

팀원들과의 협업에 문제는 발생하지 않았나?

영화 상세페이지를 개발하던 팀원의 일정이 늦어져서 좋아요, 댓글 등의 마이페이지 정보를 제공하는 페이지를 만들 수 없었던 경우가 있었다. 그렇게 막히는 부분은 함께 코드를 살펴보고 에러를 해결하면서 우선적으로 처리했습니다.

CSS animation, JS animation 차이는?

애니메이션을 세밀하게 제어해야 하는 경우 JS를 사용 합니다.
JS는 GPU를 통한 하드웨어 가속을 제어할 수 있씁니다. CSS 애니메이션의 경우 -webkit-transform : translate3d 같은 특정 속성에 의해 무분별하게 GPU를 사용해서 모바일에서 경우에 성능 하락이 발생할 수 있습니다.

기본 질문

담배, 술 하는지?

안합니다

회사에 대해서 궁금한 점이 있나?

개발인력이 어느정도 되는지, 개발프로세스가 어떻게 되는지(에자일 방식인지), 기술 스택, 현재 진행하고 있는 업무, 특별한 개발 문화

자기소개

예시) 저는 소통과 비판에 항상 열린 자세로 임하며
동료들과 협업하는 것을 좋아합니다.
제로베이스라는 부트캠프 과정을 진행했으며 우수 수강생으로도 선정되어 팀 프로젝트를 진행한 경험이 있습니다.
더 좋은 코드를 작성하는 프론트엔드 개발자가 되기 위하여 고민하고 끊임없이 공부합니다.

대기업도 있는데 왜 스타트업을 선택했나? 왜 우리회사를 지원했나?

저는 개발자로서의 성장을 중요시합니다.
대기업에서는 단조로운 일을 맡게 되거나 자신의 기여한 바를 한눈에 파악하기 어렵다는 이야기를 많이 들었습니다. 저는 자체 서비스를 개발하는 스타트업에서 일하며 애정을 가지고 자부심을 느낄 수 있는 소프트웨어를 만드는 데 기여하고, 함께 성장하고 싶습니다.

자신의 강점, 단점은 무엇이라고 생각하나?

저는 문제가 발생하더라도 침착하고 감정기복이 심하지 않은 편입니다. 예를 들면 프로젝트 중 팀원 한명이 예고없이 나갔을때도 스트레스를 받거나 당황하기보다는 침착하게 해결방법을 생각하고 대처했습니다.
저의 단점은 결과를 빨리 보고 싶어하는 경향입니다. 팀 프로젝트를 진행하면서도 일정이 너무 타이트해서 팀원들이 약간 부담스러워했던 적이 있습니다. 하지만 에러가 발생했을때는 무시하고 넘어가지 않고 꼼꼼히 살펴보고 해결합니다.

취업 후 팀 내에서 마음이 안맞는 사람과 갈등이 발생했을때 어떻게 대처할 것인가? 부당한 대우를 받는다면?

그 사람과의 대화를 통해 최대한 원만하게 갈등을 해결하려고 하겠지만 불가능할 경우 상사에게 도움을 청하겠습니다. 그럼에도 아무런 조치가 이루어지지 않는다고 해도 퇴사하거나 계속해서 싸우지는 않고 프로젝트의 진행을 우선하여 최대한 접촉을 피하는 게 좋을 것 같습니다.
(갈등이 일어나면 퇴사하는지, 팀 분위기를 어지럽히는지 알아보기 위한 질문)