모아프렌즈 면접 준비

주요 서비스

- ㈜모아프렌즈는 재테크, 커리어개발, 여가 등 직장인이 관심사를 가질만한 라이프스타일 콘텐츠를 소개하고 참여를 유도하고 있습니다. 평생직장이라는 개념이 사라지고 직장인들의 N잡 과 부수입 창출에 대한 관심도가 높아지면서 새로운 경험 및 네트워킹을 찾아가는 수요가 꾸준 하게 증가하고 있습니다. - 앱(App) 및 웹(Web) 환경에서 서비스를 구현하고 있으며, 회원관리, 콘텐츠 업로드, 예약, 결제 등의 기능을 제공하고 있습니다. - 소자본 및 제한된 인력으로 마케팅 역량이 부족한 개인과 소상공인을 위한 멤버십 솔루션으로 확장 할 예정이며, ICT 인력으로 멤버십 서비스에 대한 기획 및 개발을 진행 하고자 합니다.

서비스 목표

커뮤니티 및 멤버십 서비스 ‘모아’ 활성화 - 커뮤니티 서비스 ‘모아‘ 유지보수 및 개발 - 멤버십 및 신규 서비스 기획 (UI/UX) - 멤버십 서비스 개발 및 론칭 목표

 

웹 개발자 파트 요구사항

- 블라인드 채용 진행
- 우대전공: 컴퓨터 공학과 학사 (또는 졸업 예정자)
- 프론트앤드: 하이브리드 앱 등

-멤버십 서비스에 대한 기획 및 개발을 진행
 하고자 합니다.

자기소개

안녕하십니까 소통을 좋아하는 프론트엔드 개발자 박수범입니다.

내가 한 행위에 대해 가장 신속하고 직관적이게 보여주며, 나의 성장을 화면단으로 직접 확인 할 수 있는 프론트엔드를 좋아하기 떄문에 개발을 시작하게 되었습니다.

또한 프론트엔드 개발자란 하드스킬 외에도 소프트스킬또한 중요한 직무라고 생각합니다.
기획자와 디자이너,백엔드개발자,서비스사용자 이 다양한 포지션에서 프론트엔드개발자는 중재자 역할을 한다고 생각합니다.

개인방송/요식업을 병행하면서, 다양한 종류의 사람들을 만났고, 이들과 소통하는방법을 몸으로 배웠습니다.
그렇기에 저만의 강점을 뽑으라면, 커뮤니케이션에 능한 개발자 라고 소개하고싶습니다.

 

인성면접 예상질문

1.학점이 왜 이렇게 낮나요?

• 네. 우선 사실대로 말씀드리면 학창 시절 저는 학업 외에 다른 부분에 더 관심이 많은 학생이었습니다. 고등학교 수험 생활 이후 대학교 때는 최대한 많은 경험을 해보자는 목적 하에, 아르바이트 경험, e스포츠 대회 준비, 여행 등 다양한 경험에 좀 더 신경쓰느라 학생의 본분인 학업에 다소 소홀히 임했던 것이 사실입니다.
  이러한 이유로 지금의 낮은 학점을 받게 되었고, 바꿀 수 없는 과거 결과에 대해서는 지금도 매우 아쉽게 생각하고 있습니다.
  낮은 학점이란 단점을 보완하기위해 실무적인 능력을 키우기 위해 더욱 노력했고, 당시에 사용하지 못한 배움에 대한 열정을 cs스터디,사이드프로젝트 진행 등 실무적인 경험을 쌓는데에 사용하고있습니다.

2.공백기에 대하여

• 어릴때부터 제가 만든 결과물을 주변사람들에게 보여주고, 그것을 이용 해 줄때 기쁨을 느꼈습니다.
  그러다보니 자신만의 콘텐츠를 만들어 시청자들에게 제공하는 스트리머와, 음식을 만들어 손님에게 제공하는 요식업을 하고싶다는 생각이 가슴 한켠에 남아있었습니다.
  대학생활을 하면서도 지금이 아니면 경험해보지 못한 꿈들의 욕구를 해소 할 시간이 없을 것 같다고 생각했고
  3학년이 되던해에 휴학을하고 군대를 다녀와 방송과 주방에서 요리를 배워 요식업을 시작했습니다.
  약 1년 후 코로나를 겪으면서 장사와 방송을 모두 접게되었습니다
  주변에서는 저를 위로하며 걱정해줬지만, 저는 오히려 후련했습니다.
  경험하지 못했던 것에 대한 갈증이 채워졌고 더 홀가분했던것같습니다.
  가슴한켠에 갈증을 모두 해소하고 나니 내가 해야 할 일이 또렷이 보이고, 개발이 재밌다고 느껴졌습니다.
  1년반이 공백기가 아쉽지 않은건 아니지만, 그 시간동안 분명히 배운게 있습니다.
  방송을 하며 사람과 커뮤니케이션 하는방법, 남들 앞에서 떨지않고 나의 의견을 피력하는방법을 배웠고
  요식업을 하면서 고객의 니즈를 생각하게되고, 사소한 긍정적인 경험이 상대에게 어떻게 다가오는지에 대해 배웠습니다. 그렇기에 저는 공백가 분명 저의 인생에 좋은 양분이 되었다고 생각합니다.

3.회사 지원이유

• 모아프렌즈에서 서비스중인 모아는 불특정 다수를 타겟하기보단, 직장인들을 타겟하는 서비스입니다.
  그렇기 때문에 개발과정에서 보편적인 서비스보다 좀 더 디테일하고 깊은 고민이 필요할거라고 생각합니다.
  그 과정에서 많은 성장이 있을거라고 생각했습니다.
  또한 .웹앱에도 관심이 많아 -앱(App) 및 웹(Web) 환경에서 서비스를 구현하고 있는 모아에서 얻어가는게 많을것이라고 생각해서 지원했습니다.

 

4.팀원과 갈등 상황 해결

• 현재 진행중인 프로젝트 초기 기획단계에서 있었던 갈등입니다.
  팀원은 이번 프로젝트를 리액트 네이티브를 이용하여 앱으로 만들길 원했습니다.
  그 이유는 웹으로 서비스를 만들었을 때, 사용자 확보에 한계가 있고 웹으로 사용자를 받으려면 SSR을 통한  SEO최적화가 필요한데, 그에 따른 next.js에 대한 러닝커브보다 리액트 네이티브에 대한 러닝커브가 낮을거라고 판단했다는게 팀원의 의견이였고 일부 동의했다.
  하지만 리액트를 사용한지도 고작 4개월이 지난 시점에서, 리액트 네이티브를 학습하면서 동시에 구현목표에 도달하기에는 어려움이 많을것이라고 생각했고 리액트 네이티브에 대한 러닝커브도 생각해봐야 한다는 의견을 냈습니다.
  상대가 원하는것과 내가원하는것을 정확히 파악해야 했고, 그 결과 해당 팀원은 앱을통한 배포로 사용자확보를, 저는 기존 개발스택을 유지하여 완성도 높은 서비스를 만들자는게 서로의 의견이였습니다.
  팀원의 의견에 타당성이 없는것도 아닌지라 의견을 존중해야 한다고 생각했고, 그에대한 방안으로 PWA를 제시했습니다.
  PWA는 HTML, CSS, 자바스크립트와 같은 웹 기술들을 사용해 만드는 앱을 말합니다. PWA는 네이티브 앱보다 빨리 개발할 수 있으며 푸시 알림이나 오프라인 지원과 같은 네이티브 앱의 특징들을 모두 제공합니다.
  이 방법을 사용하면 기존의 개발스택을 유지한체로 앱스토어에 배포또한 가능하기 떄문에 모두의 니즈를 만족시킬 수 있었습니다.

기술면접 예상질문

1.팀 프로젝트를 진행하면서 겪었던 문제

• 음원스트리밍 서비스 프로젝트를 진행 할 당시, 저는 로그인/인증보안 부분을 담당하게됐습니다.
  Oauth 로그인을 구현해야했는데, 당시 제가 알고있기론, Oauth라 함은 프론트엔드에서 클라이언트키를 보내어 인가코드만 받아서 서버로 넘겨주면 서버에서 해당 인가코드를 이용하여 엑세스토큰을 발급받고, 그 엑세스 토큰을 이용하여 유저의 sns정보를 받아오는걸로 알고 있었습니다. 그렇기에 클라이언트에서는 인가코드받 받아서 post요청을 통해 인가코드를 넘겨주는 로직을 작성했었습니다. 하지만 백엔드 Oauth 파트를 담당하시는 팀원분이 처음이다보니 서버쪽 코드를 구현함에 있어서 많은 어려움이 있었고 예상했던 기한내에 구현하지 못 할 수도 있다는 생각이 들었습니다. 데드라인이 정해져있는 프로젝트 특성상 마냥 이해하실때까지 미룰 수 없었고, 또 로그인이 되어야 테스트 가능한 기능들도 많았기때문에 백엔드분과 상의후에  프론트엔드에서 Oauth 의 모든 로직구현을 하게됐습니다.
  물론 클라이언트단에서 직접 유저의 정보를받아오고, 저장하는 그러한 방법이 통상적인 방법과 다르다는 건 인지했지만, 충분히 리팩토링을 통하여 개선할 여지가있었고, 무엇보다 기한내에 100은 아니더라도 80프로이상의 결과물은 내야한다고 생각하여 그렇게 진행했습니다.
  결과적으로는 제가 Oauth를 진행하는동안 담당 백엔드분은 다른 기능구현에 좀 더 힘을 줄 수 있어 다른 팀원들의 부담이 덜게 되었습니다.

 

2.프로젝트 애니스쿨을 진행한 이유 

• 리액트를 처음 배우고 기본적인 crud를 구현하고 나니, 마치 굉장한 걸 만든것같고 뭐든 만들 수 있을거 같은 느낌이 들었습니다.
  이러한 자신감이 생겼을 때 무엇이든 만들어 봐야겠다라고 생각했고 웹 퍼블리셔 경력이있는 동기분과 프로젝트를 기획했습니다.
  구글링을 통해 알아보니 첫 토이프로젝트로는 보통 투두리스트,틱택토,클론코딩 등을 한다고 나왔습니다.
  하지만 그러한 프로젝트들은 결국 실사용자들은 거의 없는, 프로젝트를 위한 프로젝트라고 생각했기에 하고 싶지 않았습니다.
  굉장히 참신하지 않아도, 대단한 로직이 아니더라도 내 주변사람 누군가 유용하게 쓰이는 프로젝트를 만들고 었습니다. 디스코드는 프로필 이미지를 업로드 가능한데, 본인 얼굴을 걸어놓기 애매한 디스코드 특성상 대체할만한 이미지가 필요했고, 실제로 다른 동기들은 제 각각의 프로필이미지를 업로드 하여 쓰고있었습니다.
  이것을 보고 같은기수 동기들끼리 비슷한 프로필이미지를 사용하게된다면 동기간의 조그마한 소속감을 가질 수 있지 않을까? 라는 생각에서 시작하게 되었습니다.

3.RESTFUL API란?

• RESTFUL 이란 REST의 원리를 따르는 시스템을 의미한다.
• REST API를 제공하는 웹 서비스를 RESTful하다고 할 수 있다
• 이해하기 쉽고 사용하기 쉬운 REST API를 만드는 것
• URL (Uniform Resource Locator) 만으로 내가 어떤 자원을 제어하려고 하는지 알 수 있어야 한다. 
• 행위는 명시적이어야 한다.
• 마침 얼마전에도 RESTFUL API에 대해 짧게 고민 할 수 있는 기회가 있었습니다.
  좋아요 취소에 관한 API요청이였는데, 좋아요를 누를 시 Liked라는 키가 true로 변경되고 취소시, false로 변경되는 로직으로 구현되어있었습니다. 취소요청은 delete 요청이였는데, 사실 liked라는 값이 true=>false로 변경되는거지 삭제되는것이 아닌데 delete가 맞는가? 라는 의문을 생겼고, 저는 여러데이터 중 liked라는 키의 값만 바뀌는것이니 patch요청이 맞지 않냐는 의견을 냈고 백엔드 팀원분이 테이블에서는 실제로 값이 삭제되기떄문에 delete가 좀더 restful하다고 설명을 해주셔서 의문이 풀렸던 경험이 있습니다.
  
  
  

4.반응형 웹은 무엇이고, 그 장단점은 무엇인지에 대해 설명하세요

• 반응형 웹 디자인이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미합니다.
• 반응형 웹의 장점으로는 검색엔진(SEO) 최적화 유리, 모바일 대응에 유리함 과 같은 것들이 있으며,
• 반응형 웹의 단점으로는 사이트의 속도 저하, 웹브라우저 호환성 문제, 디자인의 자유도 저하 등이 있습니다.

5.CSR과 SSR의 차이?

CSR

• CSR은 클라이언트 사이드 렌더링의 약자로 말그대로 렌더링이 클라이언트쪽에서 일어나는것을 말한다.
• 요청을 받는 즉시 서버는 클라이언트에 HTML과 JS를 모두 보내준다.
• 클라이언트는 그것을 받아 렌더링을 시작한다.
• 모든 HTML과 스크립트를 불러오기때문에 첫페이지 로딩시간이 느리다.
• 낮은 SEO(Search Engine Optimization) -> 검색엔진 최적화의 어려움, 낮은 검색 순위
• 서버자원이 적게든다.
• TTI와 TTV가 동시에 이루어진다.
• 사용자 인터렉션이 중요한 페이지라면 SSR보다는 CSR 방식이 적절하다.

SSR

• SSR은 서버 사이드 렌더링의 약자로 렌더링이 서버에서 일나는것을 말한다
• 서버에서 렌더링 준비를 모두 끝마친 상태로 클라이언트에 저장된다
• 필요한 부분의 HTML과 스크립트만 불러오기때문에 첫페이지 로딩시간이 빠르다
• 하지만 다른페이지로 이동한다거나 상호작용을 했을 때마다 새로운 리소스를 받아와야 하기때문에 이미 리소스를 다 받아온 CSR보다 느리다.
• 서버자원이 많이든다.(부하가 많이 걸린다.)
• TTI와 TTV가 공백시간이 존재한다.
• 검색 엔진의 색인이 필요한 경우
• 콘텐츠가 주를 이루는 뉴스나 강의 페이지 같은 경우

6.React Hook의 사용 규칙에 대해 설명하세요

• 리액트 훅은 반복문, 조건문, 중첩된 함수내에서 호출하면 안 됩니다. 이 규칙을 지키면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 훅이 호출되는 것이 보장됩니다.
• 리액트 훅은 일반적인 javascript 함수에서 호출하면 안 됩니다. 이 규칙을 지키면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있습니다.

7.토큰기반 인증 방식 많이 사용하는데 토큰을 어디에 저장하면 좋을까?

• 제 생각에 로컬스토리지에 저장하는게 좋다고 생각합니다.
  그 펏이유는 정보저장 공간에서 압도적으로 유리합니다.
  그러나 쿠키도 CSRF 공격 위험에 노출된다는 단점이 있지만 XSS 공격이 범위가 크고 대처가 어렵기 때문에 쿠키에 저장하는 것이 나을 것 같다고 생각합니다.

8.이벤트루프와 태스크큐 / 마이크로큐에 대해 설명?

이벤트루프

• 이벤트루프란 자바스크립트 엔진이 아닌 브라우저가 가지고있는 장치이다.
• 콜스택과 태스크큐와 마이크로큐를 감시하며, 콜스택이 비어있을 시, 태스크큐와 마이크로큐에서 태스크를 가져와 콜스택에 넣어준다.
• 우선순위는 마이크로큐가 먼저 콜스택에 들어간다.

9.버츄얼 DOM은 무엇인가? DOM과의 차이 설명

•  가상돔은 추상화된 DOM을 뜻한다. 기존 DOM을 조작하고 렌더링하는 부분에서 오는 시간을 줄인다. DOM과 유사한 객체를 메모리에 올려놓고, 변경 사항이 생기면 가상돔을 바꾸고, 실제 돔에서는 변경 사항만 변경하여 더 반응성 빠른 웹을 구현할 수 있다. 리액트도 가상돔을 이용하여 구현되어있다. 

 

10. Promise와 async await 의 차이점

Promise

• Promise는 자바스크립트에서 비동기 처리에 사용되는 객체이다.
  내용은 실행 되었지만 결과를 아직 반환하지 않은 객체라고 이해해도 좋다.
• 비동기 처리가 완료 되지 않았다면 Pending, 완료 되었다면 Fulfilled, 실패하거나 오류가 발생하였다면 Rejected 상태를 갖는다.

Async Await

• 콜백이나 프로미즈의 단점을 해소하고자 만들었다.
• async 함수 내에서 await 을 통해 Promise의 반환값을 받아 올 수 있다.

둘의 차이점은 첫번째로 async await 이 promise보다 코드 가독성면에서 간결하다

두번째로 에러 핸들링이 용의하다는 차이점이있습니다.

 

11.React가 바닐라에 비해 좋았던점

• virtual DOM을 사용해서 어플리케이션의 성능을 향상시킴
• 서버, 클라이언트 사이드 렌더링 지원이 가능함
• 컴포넌트의 가독성이 높고 간단하여 유지보수가 쉬움
• 다른 프레임워크와도 혼용이 가능

11.useEffect 훅을 언제 사용하면 좋고 어떻게 동작하는지 더 자세히 설명해줄 수 있는지?

• 저는 주로 한번만 값을 받아오면 되는 날씨데이터같은 api를 요청할 때 사용합니다.
  useEffect의 디펜던시 어레이를 빈 배열로 남겨두면, 컴포넌트가 마운트 되면서 처음 1회만 이펙트함수가 실행되게 됩니다.
  또는 원하는 값이 변경될때만 이펙트함수를 호출 할 수도 있습니다.
  이렇듯 불필요한 데이터요청을 막고, 데이터값이 바뀔때마다 데이터를 최신화 해줘야 할 때 좋다고 느꼈습니다.

 

12.rebase와 merge의 차이

• Merge는 branch를 통합하는 것이고, Rebase는 branch의 base를 옮긴다.
• 커밋 히스토리를 깔끔하게 관리하고 싶거나 개발 브랜치의 수가 많다면 rebase / 브랜치가 많지않고, 간단하게 사용하려면 merge를 사용하는게 좋다고 알고있습니다.

13.리액트 라이프사이클에대해 설명해주세요

• 리액트의 라이프사이클은 크게 4가지로 설명할 수 있습니다. 최초로 컴포넌트 객체가 생성될 때 한 번 수행되어지는 componentDidMount()와 초기에 화면을 그려줄 때와, 업데이트가 될 때 호출되는 render()가 있습니다. 그리고 컴포넌트의 속성 값 또는 상태값이 변경되면 호출되어지는 componentDidUpdate()와 마지막으로 컴포넌트가 소멸될 때 호출되어지는 componentWillUnmount()가 라이프사이클의 역할입니다.

14. SPA란?

• SPA(Single Page Application)는 서버로부터 첫 페이지만 받아오고 이후에는 동적으로 페이지를 구성하는 웹 어플리케이션을 뜻한다. 데이터를 수정, 조회할 때 동적으로 페이지를 구성하여 페이지가 새로고침 되지 않고 다른 페이지로 넘어가지 않는다.

 

프로그레시브 웹 앱(PWA: Progressive Web App)

PWA는 하이브리드 앱과 비슷하지만 약간 다르다. 기본적으로 사용자들에게 네이티브 앱의 느낌을 주면서도 웹 브라우저에서 바탕화면에 바로가기를 추가하여 특별한 다운로드와 인스톨 과정 없이 기본 앱처럼 사용할 수 있다는 것이 특징이다. 오프라인에서도 사용할 수도 있고 알림 메시지도 받을 수 있고 iOS보다 안드로이드가 훨씬 용이하긴 하지만 디바이스들의 하드웨어적인 기능(카메라나 GPS 같은)을 사용할 수도 있다.

PWA는 각 플랫폼에 최적화된 사용자 경험을 기반으로 하며, PWA만을 위한 언어나 프레임워크 또는 PWA만을 위한 전문 개발자도 필요가 없다. 리액트(React)나 앵귤러(Angular)만 있으면 만들 수 있다.

언제 유용한가?

• 기본 앱의 기능이 있는 다중 플랫폼 앱 필요
• 많은 사용자들이 다양한 채널을 통해 동시 접속할 때도 동일한 서비스를 제공하고자 할 때
• 강력한 전자 상거래 서비스를 제공할 때

15.하이브리드앱이란?

• 웹앱과 네이티브앱의 장점을 합친 형태
• 개발은 웹개발언어로하고 패키징과정에서 네이티브 개발 언어를 활용해야한다.
• 개발은 웹개발과 동일하게 하기때문에 네이티브앱에대한 깊은 이해가 필요치 않고,
  그러면서도 웹앱에선 불가능했던 디바이스 자체 기능에 접근이 가능하다는 장점이있다.

 

16. CORS란 무엇인가

브라우저에서는 보안적인 이유로 크로스 오리진에 대한 HTTP요청들을 제한한다.

만약 크로스오리진에 대한 요청을 하려면 서버의 동의를구하고, 이를 동의한다면 브라우저는 요청을 허락하고 동의하지 않는다면 요청을 거절합니다.

이러한 교차출처의 허락을 구하고 거절하는 메커니즘을 HTTP-HEADER를 이용하는데 이를 CORS라고 부릅니다.