이력서관련 질문 리스트

https://www.youtube.com/watch?v=7VcG--ufRXc 

자기소개를 포함한 팀스파르타 지원한 지원동기

• 안녕하십니까 성장하는 프론트엔드 개발자 박준수입니다.
  • 다른이의 피드백을 진지하게 받아들이고 자신이 자신에게도 피드백을 하여 메타인지를 하며 더 나아가 피드백하는 방식을 피드백하여 에자일하게 실력이 상승하는 개발자가 성장하는 개발자라고 생각합니다.
  • 애자일 방법론을 적용하기 위해서 블로그와 유튜브를 운영하고 있고, 시간이 날때마다 틈틈이 다시 보며 내가 진정으로 이 지식을 알고 있는지 또 다른 효과적인 피드백 방식이 있지는 않은지 고민합니다. 또한 서비스에서 유저에게 구글애널리틱스나 구글폼을 통한 설문조사로 피드백을 받아 서비스를 개선하는 데도 노력합니다.
• 저는 같이 코딩하는 것의 가치를 알고 나의 지식을 쉽게 설명하는 것에 보람을 느끼는 개발자입니다.
  • 주로 블로그와 유튜브를 사용하여 쉽게 설명하고자 노력합니다.
  • 블로그에는 개발자로서 그때 그때 느꼈던 감정과 회고, 그리고 알고리즘과 이론들을 적는 편이고
  • 유튜브에는 프로젝트와 하나의 기술질문에 대한 답변을 정리하는 식으로 설명을 올리는 편입니다.
• 그리고 어떻게 하면 유저가 좀 더 편안하게 서비스를 이용할 지 고민하는 것을 좋아하는 개발자입니다.
  • 구글 애널리틱스와 서비스내의 구글 폼으로 만든 설문조사를 넣어 피드백을 받고 노션으로 문서화하여 하나씩 개선한 경험이 있습니다.
  • 구글애널리틱스 서비스의 회원가입 절차를 마치면 gtag.js 스크립트가 나오는데 이 부분을 서비스의 index.html의 붙여넣으면 됩니다.
  • 날짜별 유저 유입량과 평균적으로 머무르는 시간을 확인할 수 있었습니다.
• 마지막으로 데이터의 흐름에 따라 데이터를 가공하고 시각화하는 것에 즐거움을 느끼는 개발자입니다.
  • 프론트엔드 개발자에게 데이터는 곧 상태라고 생각합니다.
  • 즉, 동적인 웹에서 유저와의 인터렉션을 통해 바뀌는 상태값의 흐름을 먼저 그려보고 그 데이터들을 가공하여 유저에게 효과적으로 보여주는 것이 중요하다고 생각합니다.
  • 저는 이 상태관리를 위해 redux-toolkit을 사용하여 전역적으로 상태관리를 하고 단방향 데이터 흐름체계로 서비스를 구현했습니다.

• 유저와의 인터렉션으로 view에서 action이 생기면 dispatcher를 통해 Store에 가고 이때 store에서 reducer를 통해 전달받은 action의 payload를 통해 상태변경을 진행하고 이렇게 변경된 상태는 view에 반영되게 됩니다.
  • 양방향은 인터렉션이 생겼을 때 입력에 따라 뷰가 모델을 업데이트할때고 있으며 하나의 모델만이 아닌 다른 모델을 업데이트 해야할 때도 생겨서 하나의 변경이 다수의 변경을 일으키게 되어 복잡성이 증가합니다.
  • 단방향은 데이터의 일관성을 향상시키고 버그 발생 원인을 쉽게 파악할 수 있습니다.
• 제가 팀스파르타에 지원하게 된 동기는
  • 팀스파르타의 인재상 중 말을 예쁘게 하는 사람과 성장을 갈망하는 사람 부분에서 각각 겸손이 ‘나의 생각이 틀릴 수도 있다’는 오류가능성을 인정하는 것 이라는 문구와
    • 항해99를 진행하며 몇차례는 마음속으로 깊이 새긴 말이었는데
    • 소크라테스가 말한 ‘내가 아는 단 한가지는 나는 모른다는 것’이라는 말입니다.
    • 이 말 뜻을 저는 항상 겸손하며, 자만할 수 있는 상황은 남을 상처입히고 성장을 둔하게 하며 인사이트를 얻는데 방해가 되기 때문에 절대 피하고 항상 다른이에게 배우라는 뜻으로 받아들였습니다.
  • 일에만 몰입할 수 있는 환경을 제공해줄테니 그 환경속에서 마음껏 일하며 행복하실 수 있는 분이면 좋겠다는 문구가 공감이 가고 또 너무 마음에 들어서 지원하게 되었습니다.
    • 지금까지는 돈이나 시간, 커뮤니티 때문에 몰입하기 쉽지 않아 성장하고 싶어도 막히는 부분이 있어 목마름이 있었는데 그 부분을 해결해주고 마음껏 성장하라는 문구가 너무 마음에 다가왔습니다.

팀스파르타의 3가지 핵심 가치가 어떤 뜻인지? 그리고 각각 경험한 사례 제시하기

• 빠르게
  • 문제와 해결책을 잘 정리해 핵심만 간결하게 하는 것입니다.
  • 실전프로젝트의 후반부 유저 피드백을 통해 시도하지 못한 계획을 따르기보다는 유저피드백 사항을 최우선으로 하여 계획보다는 변화에 대응하고 문서보다는 작동하는 소프트웨어 집중했습니다.
• 와우하게
  • 예측 불가능한 순간에 유저에게 감동을 드리는 것입니다.
  • 유저 flow를 그려보니 기존의 방식대로면 가로스크롤이 pc에서는 휠로만 움직이고 클릭으로 움직이게 해도 마우스클릭을 해제하면 클릭된 것으로 처리되어 미리 모바일과 같은 방식으로 스크롤되게 구현하고 스크롤이후 클릭을 해제해도 클릭이벤트가 발생하지 않도록 구현했습니다.
• 진정성있게
  • 가족에게 권할 수 없는 제품이면 마케팅을 멈추고 제품을 바꾸는 것입니다.
  • 무한스크롤에서 마지막페이지일 경우에도 서버로 끊임없이 요청을 보내 기능은 작동하지만 성능적으로 안 좋은 이슈가 있었습니다. 이 이슈는 UX적으로 좋지않은 기억을 줄 것 이기에 서버에게 마지막페이지 이후의 페이지를 호출하면 특정에러를 보내주게 요청했고 이 에러를 받으면 더이상 서버로 요청을 보내지 않게 설계했습니다.

stack과 queue를 구현하는 알고리즘을 화이트보드에 써봐라.

class Stack {
  constructor() {
    this.arr = [];
    this.index = 0;
  }
  push(item) {
    this.arr[this.index++] = item;
  }
  pop() {
    if (this.index <= 0) return null;
    const result = this.arr[--this.index];
    return result;
  }
}

let stack = new Stack();

class Queue {
  constructor() {
    this.storage = {};
    this.front = 0;
    this.rear = 0;
  }
  
  size() {
    if (this.storage[this.rear] === undefined) {
      return 0;
    } else {
      return this.rear - this.rear + 1;
    }
  }
  
  add(value) {
    if (this.size() === 0) {
      this.storage['0'] = value;
    } else {
      this.rear += 1;
      this.storage[this.rear] = value;
    }
  }
  
  popleft() {
    let temp;
    if (this.front === this.rear) {
      temp = this.storage[this.front];
      delete this.storage[this.front];
      this.front = 0;
      this.rear = 0;
    } else {
      temp = this.storage[this.front];
      delete this.storage[this.front];
      this.front += 1;
    }
    return temp;
  }
}

개발하면서 우선순위로 생각하는 것?

• 이 서비스에서 업무의 가치와 요구의 이유가 명확한 요구사항들 중 이득이 명확하게 보이는 일을 찾는 것과
  • 저희 서비스의 경우 사진 업로드기능이 패션을 공유하는데 있어 시각적인 효과가 극대화 되고 사진이 있어야 비교가 쉽기 때문에 이 기능을 최우선으로 구현했습니다.
• 반대로 업무의 가치와 요구의 이유가 불명확한 쓸데없는 일을 구분하는 것입니다.
  • 이런 업무는 모든 코드에 주석을 다는 일입니다.
  • 개발실력이 증가하면서 코드자체가 말을 하는 경우 주석을 달 필요는 없다고 생각합니다.

회사를 결정할 때 중요하게 생각하는 것은 무엇인지?

• 애자일하게 성장할 수 있는 환경입니다.
• 즉, 피드백을 즉각적으로 받을 수 있으며
• 앞으로 수정할 수 있는 기회가 있어야 하고
• 이렇게 개선하는 능력 그 자체에 대해 고민을 하는 문화가 있는 부분을 중요하게 생각합니다.

답을 찾아내는 방법

1. Google
   1. 영어로도 꼭 검색을 할 것!
2. Stack Overflow
   1. site:stackoverflow.com을 붙이면 스택오버플로우만 보여줌
3. Github
   1. issue나 PR을 잘 확인하고 비슷한 질문있는지 확인
4. Official Docs
5. 생활 코딩
   1. 페이스북의 생활코딩 그룹이 한국의 스택오버플로우 역할을 한다.

code-splitting에 대한 설명

• 웹팩에서 번들링할때 파일을 분리하는 작업을 코드 스플리팅이라고 합니다.
• 이것은 더 나은 사용자 경험을 위해 코드를 비동기적으로 로딩하는 방법입니다.
• 예를들어 페이지가 3개이면 하나의 페이지를 들어가는 동안 다른 페이지정보는 필요하지 않을 확률이 높기 때문에
• 이런 파일들을 분리하여 지금 사용자에게 필요한 파일만 불러올 수가 있다면 로딩도 빠르게 이루어지고 트래픽도 줄어 사용자 경험이 좋아질 수가 있습니다.
• 또한 fallback이라는 props를 통해 로딩중에 loader를 보여줄 수 있었습니다.

주변 인물 탐색 로직에 대한 설명

• DB에 기본적으로 유저가 카카오맵을 off하게 상태를 저장해놓아져 있고 서버에 통신을 주고받으며 유저가 자신의 위치를 다른사람에게 공개할지를 선택할 수 있게 구현했습니다.
• 유저가 카카오맵 컴포넌트로 들어오면 navigator.geolocation API를 통해 유저의 위치를 받고 이를 서버에게 보내줍니다.
• 서버에서는 이 정보를 토대로 그 유저 주변의 유저들의 위치정보가 담긴 배열을 클라이언트에게 보내주고
• 클라이언트는 이 정보를 토대로 지도를 그리고 그 위에 마커를 표시합니다.

useCallback과 throttle을 이용한 무한스크롤 최적화 개선 사례

• useEffect이용 최초 렌더링시 실행되는 함수에 addEventListener로 스크롤이벤트 등록한다.
• 이때 의존성배열은 paging과 loading입니다.
• 스크롤이벤트로 등록된함수는 throttle사용해서 조건인 100px이하에 위치할때 500ms마다 요청을 보내게 합니다.
• 또한 요청을 보내는 함수는 useCallback을 의존성배열에 paging을 사용해서 만약 paging에 변동사항이 없으면 계속 사용할 수 있게 합니다.

커스텀 드롭다운, 드래그 가로스크롤등의 라이브러리 이용 최소화 설명

• 드롭다운은 세부메뉴박스가 mount인지 unmount인지 나타내주는 상태값이 필요했고 이를 isOpen이라는 변수에 저장했습니다.
• 이 isOpen은 드롭다운 메뉴와 클릭이벤트로 바뀌게 되고 단순히 드롭다운을 클릭해서 열고 닫고는 드롭다운에 클릭이벤트를 걸어주어 해결했습니다.
• 문제는 UX적으로 드롭다운 이외의 공간 클릭 감지였는데
  • useEffect의 의존성배열에 isOpen을 넣어주고
  • useRef로 드롭다운을 참조하고
  • 드롭다운메뉴클릭은 event.target과 ref.current가 같아지는때이므로 이것에 !를 붙여 드롭다운 이외 클릭을 구현합니다.
• 마지막으로 클린업함수에서 이벤트를 해제함으로써 동일한 이벤트를 계속 등록하지 않도록했습니다.

---

• 가로스크롤은 useRef를 이용해 DOM에 접근하여 scrollLeft를 얻고
• onMouseDown,Up,Move,Leave의 이벤트와
• DOM을 이용해 스크롤 총 길이와, 화면에보이는 스크롤 길이, 이동한 스크롤 길이, 클릭시(Down)시 x좌표의 변수를 사용합니다.
• isDrag변수가 true일때만 onMouseMove가 발생하도록하고
• Move시 현재 클릭한 pageX에 움직인 스크롤길이scrollLeft를 startX로 하여 스크롤이 이동한 상태에서도 잘 움직일 수 있게 구현했습니다.
• isDrag가 true일때(onMouseDown시)
  • scrollRef.curerent.scrollLeft = startX - e.pageX(움직이면서 변하는 스크롤 위치)로 scrollLeft의 값을 설정했습니다.
• throttled변수와 setTimeout으로 throuttle을 구현하여 100ms 로 delay시켜 호출을 끊어주었습니다.

LCP 최적화를 위한 이미지 표현방식 변환 설명

• Google은 LCP에 빨리 도착하는 한 사용자가 LCP에 어떻게 도달하는지는 신경 쓰지 않는다는 점이 있습니다.
• cssom트리가 dom트리보다 이후에 파싱과정이 있기 때문에 기본적으로 느릴 수 밖에 없습니다.
• 따라서 css의 backgroundImage가 아닌 html의 img태그를 사용했습니다.

틴데이터에서 새로고침시 로그인 유지가 안되는 부분 어떻게 개선했는지

• 최상위 컴포넌트인 app.js에서 useEffect를 이용해서 토큰값을 기준으로 백과 통신해서 로그인을 판단하게 해서 개선했습니다.
• 이제는 redux-persist를 이용해서 새로고침해도 state 값이 사라지지 않도록, localstorage 에 저장할 것 같습니다.