Giter VIP home page Giter VIP logo

dev-interview-kwonmory's Introduction

Dev-Interview React Project

개발자를 위한 셀프형 피드백에 기반한 모의 인터뷰 프로젝트

(Simple mock interview project based on self-feedback for developers)

이름이 CheckYourSelf 에서 Dev-Interview로 변경되었습니다.

workflow_badge

Introduce_소개

Background_배경

저를 포함하여 많은 개발자 또는 개발자 지망생분들께서 이직과 취업을 준비하고 있습니다.

준비 중간 과정으로 기술 면접이 있으며 준비필요합니다.

기술 면접에는 요구사항을 주고 코드를 짜고 설명하는 방식을 진행하는 회사도 있고 지식을 물어보는 방식과 같이 회사 마다 다양한 방식으로 개발자의 역량을 살펴보고 있습니다.

그 중 간단하게 지식을 물어보는 방식으로 개발자 인터뷰 준비를 할 수 있는 환경이라도 있다면 도움이 될 것 같다고 생각하게 되어서 Dev-Interview를 만들어보았습니다.

그러면 어떻게 하면 도움이 될까라는 부분이 핵심이였습니다.

다양한 준비 방법이 있고 좀 더 인터뷰 환경에 가깝게 하는 것이 좋다고 생각했습니다.

그리고 추가적으로 2가지를 부가적으로 이용하면 좋겠다고 생각했습니다.

  1. 인출 효과

인출 효과를 이용한 방법(습득한 지식을 밖으로 표출하여 학습하는 방법)이 효과적이라고 생각했습니다. (하단 참고서적 참고)

인출 효과 방법 중 자신이 학습한 내용을 토대로 눈으로만 읽는 것이 아닌 말로 표현함으로써 말하기 위해서 생각을 하는 과정에서 학습한 지식을 단기기억에서 장기기억으로 넘어가는 것이 효과적이라고 생각합니다.

  1. 피드백하기

학습에서 중요한건 자신이 학습한 지식에 대해서 피드백을 가져보는 시간이 중요하다고 생각합니다. 자신이 어떤 점을 알고 있고 어떤 점을 모르고 있는지 흔히 말하는 자신을 아는 메타인지가 중요합니다. 자신을 돌아보는 시간을 가짐으로써 부족한 부분을 채워 나갈 수 있습니다. 본 프로젝트에선 스스로 돌아보는 셀프 피드백을 생각해보았습니다.

참고서적

부가적인 소개

개발적인 부분?을 간단하게 소개한다면

리액트를 이용했으며, TDD공부 하면서 TDD로 코드를 작성하며 개발해 나간 프론트 엔드 프로젝트입니다.

유닛 테스트, 통합 테스트와 E2E 테스트 코드를 작성해보며 주로 어떻게 테스트하고 어떤 부분을 테스트 하면 좋을지에 대한 많은 고민을 하면서 즐겁게 개발해나갔습니다.

백엔드 부분은?

프로젝트를 시작할 때, 프론트엔드 부분이 주 관심사여서 초반 개발 환경으로 webpack-dev-server로 mock api를 사용함으로써 백엔드부분을 해결했습니다.

그 후 배포환경으로 현재 프로젝트 버전(v1.0)에는 백엔드 서버를 구현할 필요가 없다고 판단하고 api 요청 시 /data 폴더interviews.js의 데이터를 가져와서 사용하고 있습니다.

(추후 타입스크립트를 이용해 NodeJs로 추가하고 싶습니다.)

CI/CD

CI/CD는 Github Actions 을 이용하였으며, CD는 개발 도중 Github Pages 를 이용하다가 배포시에 Netlify을 통해 배포 중입니다.

시연 화면

심플하게 반응형 페이지로 만들었습니다.

시연 영상 일반화면

메인 기능인 인터뷰즈(모의 인터뷰) 모습

시연 영상 인터뷰즈화면

접속 URL

Netlify(무료 버전)을 사용하고 있어 대역폭이 낮아 페이지를 불러오는데 시간이 약간 걸립니다.. 😭

https://bit.ly/33oGLai

Tech Stack_기술 스택

일반

개발환경

테스트관련

라이브러리

프로젝트에 데이터 추가하기

사이트 링크에 데이터를 추가할 수 있습니다. 문제 추가하기

또는

Fork를 하여 개인적으로 이용할 수 있습니다. 개인으로 이용하기

프로젝트 회고록

주 차별 진행 내역

Getting Started_시작하기

1. npm install

2. npm start

3. Open http://localhost:8080

Watching The Testing Code_테스트 코드 감시하기

npm run watch

Lint Test_린트 검사하기

npm run lint

Unit Test_유닛 테스트

npm run test:unit

Integration Test_통합 테스트

npm run test  # lint 검사가 제외된 테스트

# or

npm run test:lint # lint 검사가 포함되어있는 테스트

End to End Test_종단 테스트

npm run test:e2e

Coverage Test_테스트 커버리지보기

npm run coverage

Production Build_운영 환경으로 빌드하기

npm run build

Development Build_개발 환경으로 빌드하기

npm run build:dev

dev-interview-kwonmory's People

Contributors

hannut91 avatar kwonmory avatar wholemann avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

dev-interview-kwonmory's Issues

하단 깃헙 링크가 인지가 어렵네요.

현재 링크 걸린 텍스트 옆에 깃헙 아이콘 달고 같이 묶어서 링크 걸고

footer 텍스트 자체를 조금만 더 키우는 것도(이상하면 pass) 괜찮을 거 같아요.

메인 이미지 크기

메인 이미지 크기 크게 동일하게 크게하여 내용이 보일 수 있도록 하기

1주차 진행

키워드 : (인터뷰 = 면접)

이 앱을 언제 사용하나요?

  • 취업 인터뷰 준비를 도와주는 서비스

제약 조건은 무엇인가요?

인터뷰 질문 리스트

  • 모든 사람은 인터뷰 질문들을 볼 수 있습니다.
  • 인터뷰 질문들은 다양한 유형을 가지고 있습니다.

<-- v1에선 해당 부분을 불필요하다고 판단되어 반영하지 않았습니다.
인터뷰 질문

  • 각 인터뷰 질문은 여러 개의 카테고리에 속할 수 있다.
  • 질문에 대한 답변은 제시하지 않는다.(스스로 학습한다)
  • 각 인터뷰 질문은 평가가 이루어지며, 질 좋은 인터뷰 질문과 질 나쁜 인터뷰 질문으로 평가된다.
  • 질문 등록은 인증된 사람만 가능하다.(회원은 유지하지 않는다.)
  • 회원이 인터뷰 질문을 올려주는 행위를 기여라고 한다.
  • 개인에게 메모 할 수 있는 기능을 추가해준다.

-->

인터뷰즈(챌린지)

  • 사용자는 자신이 학습한 내용을 검증할 수 있다.
  • 모든 사람은 인터뷰 챌린지를 자유롭게 이용할 수 있다.
  • 챌린지가 시작을 하게 되면 이용자는 문제를 한 문제씩 볼 수 있으며, 그에 대한 답을 텍스트가 아닌 음성으로 제출한다.
  • 챌린지가 끝나고 나중에 자신이 확인 할 수 있다. (피드백을 위함)
  • 녹음은 자유롭게 최대 3분까지 가능하다.
  • 챌린지가 끝난 뒤 문제별로 자신이 답변한 녹음된 내용을 들을 수 있다.

구체적인 사례는 무엇인가요?

~기술 면접을 준비하기 위해서 인터넷에 인터뷰와 관련된 질문들이 깃허브나 블로그에 게시 되고 있지만, 모두 흩어져 있다. ~

첫번째 목표로 다양한 인터뷰 질문들을 한 곳에서 보는 것이다.

두번째 목표는 챌린지를 통해 자신이 정말 알고 있는지를 체크해준다.

이번주에 구현 할 기능을 우선 순위대로 작성해주세요.

  • 개발 환경 세팅
    • 린트
    • webpack
    • babel
    • test 등
  • 반응형 헤더 영역
    • 로그인 시 변경

3주차 진행

3주차 목표

08월 12,19일에 수정됨

원래 계획 했던 부분

  1. 인터뷰 리스트를 클릭 했을 때, 해당 질문에 대한 추가 정보를 해당 컴포넌트 바로 하단에 추가하여 보여준다. (추가로 보여줄 부분은 질문에 대한 답변)
  2. 리스트에 추가로 평판을 넣어준다.

작업 리스트

  • 인터뷰 디테일 페이지 제작하기
  • InterviewQuestion 리스트에 평판 추가
  • 리스트에 나열된 Question 클릭하면 답변 출력

08월 19일 기준으로 바뀐 부분

  1. 인터뷰 리스트 페이지는 인터뷰 리스트만 보여주는 용도로 사용한다. (개발은 진행되었지만 v1에서는 불필요하다고 판단되어 반영하지 않았습니다.)
  2. 인터뷰 리스트 페이지 내 각 인터뷰 질문들은 인기도를 추가로 가진다. (개발은 진행되었지만 v1에서는 불필요하다고 판단되어 반영하지 않았습니다.)

작업 리스트

  • 인터뷰 리스트 페이지 내 인터뷰에 인기도를 추가한다.
  • 챌린지 페이지를 구상한다.
  • 챌린지 페이지 일부 작성한다.

3주차 회고에서 적혀있듯이, 원래 계획 했던 부분들을 진행하면서 반복되는 코드 작성과 되돌리기로 인해 3주차에 코드 반영은 없었다. ㅜ 🙁

3주차에 수정되었던 부분들은 4주차로 추가로 작업한다.

미래 계획

  • 인터뷰즈(=챌린지) 부분은 4주차에서 5주차

2주차 진행

2주차 목표

  1. 사용자가 인터뷰 질문들을 볼 수 있다. (개발했지만, v1버전에선 당장 불필요하다고 해서 이용하지는 않는다.)
  2. 질문 리스트 페이지의 UI는 최대한 최대한 심플하게 간다! (반응형은 기본이다!) (개발했지만, v1버전에선 당장 불필요하다고 해서 이용하지는 않는다.)

작업 리스트

  • CI를 위해 lint설정, unit test 설정, e2e test 설정, github page deploy 추가한다.
  • 인터뷰 질문 리스트 페이지를 개발한다.(개발했지만, v1버전에선 당장 불필요하다고 해서 이용하지는 않는다.)
  • 질문 페이지를 구현한다. (이게 좀 많이 걸릴 듯) 🤯 (질문 페이지 작성이 불필요해서 삭제 되었다.)
  • 푸터 구현하기(질문 리스트 페이지에서 불필요해서 삭제 되었다. -> 추후 제작되었습니다.)

받은 피드백

  • new line 추가해주기
  • coverage 100% 달성하기
  • 작업 우선순위 지정하기
  • 한번에 한 문제만 집중하기

구상하기

<-- v1에서는 사용하지 않습니다.

인터뷰 질문 리스트 페이지

  • 질문 유형에 따라 구분되어서 보여준다. (왼쪽 또는 오른쪽에 분류)
  • 질문 제목에 질문을 보여주도록 한다.
  • 질문 리스트에는 질문 제목, 질문 유형을 달아둔다. (나중에 추가로 인기도도 추가한다.)
  • 상단에 이쁜 슬로건 형식도 넣어주자.

-->

뒤로가기

뒤로가기 이거 막기로 했었는데, 까먹었다.

수정하기!

api 호출시 오류 발생시

api 호출 할 때, 현재는 console로 처리해주고 있다.

이 부분을 네트워크 오류 유형에 따라 어떻게 처리할 것인지 고민을 해보고, 에러 대한 처리를 추가해주자.

6주차 진행

6주차 목표

  1. 드디어 프로젝트를 마무리한다.
  2. 문서 정리를 한다.
  3. 마구잡이로 작성했던 회고록을 정리한다.

작업 리스트

  • 외부 api를 json 형태의 js 파일로 대체한다.
  • 성능을 고려하여 최적화를 해준다.(메소드 부분)
  • 성능을 고려하여 최적화를 해준다.(컴포넌트 부분)
  • 간단하게 푸터 영역을 만든다.
  • 메인 페이지를 구상한다.
  • 메인 페이지를 제작한다.
  • 더미 데이터를 제대로 추가한다.
  • 운영시 데이터를 어떻게 받을 것인지 정한다.
  • 인터뷰 연습 부분을 없앨지 고민을 해본다.
  • E2E 테스트를 까먹었다 작성하자.
  • 도메인 연결하기
  • 배포하기
  • 구글 아날리틱스 추가하기

생각

  1. 오우.. 아직도 생각보다 할게 많네... 오우.... 오우....... 내 성격상 대충은 못하겠고... 오우........오우........하....
  2. 마무리까지 이번주 다 써야 할 듯하다..

api 구조 변경

quiz.quiz 로 되어있는 부분을 quiz.problems 로 변경하기

데이터는 백엔드 서버?

백엔드 서버를 굳이 둘 필요가 없다고 생각했다.

js 파일에 데이터를 저장해서 해도 충분히 서비스로서 이용할 수 있다.

바꾸자.

인터뷰 질문 리스트 페이지 구현

면접 질문의 정보

  • 면접 질문
  • 면접 질문 유형
  • 답변의 수
  • 면접 난이도
  • 질문과 관련된 회사명들(출제)

질문 유형 구분

  • 회사별
  • 질문 유형별

고려해야할 부분

  • 페이지네이션

4&5주차 진행

4,5주차 목표

  1. 인터뷰 리스트 페이지 작업을 완료한다.
  2. 챌린 페이지를 구상하고 개발을 시작한다.

사용자는

  1. 사용자는 인터뷰 리스트들이 무엇이 있는지 확인이 가능하다.
  2. 챌린지 기본 기능들을 이용할 수 있다.

작업 리스트

  • 인터뷰 리스트 페이지 내 인기도를 추가
  • 인터뷰즈 페이지 구상하기
  • 인터뷰즈 페이지 만들기
  • 인터뷰즈 상태관리 컴포넌트 만들기
  • 인터뷰즈 프리젠테이션 컴포넌트 만들기
  • 인터뷰즈 페이지 디자인 적용하기
  • 인터뷰즈의 문제 페이지 제작하기(문제 보여주고, 다음 페이지로 넘어갈 수 있도록)
    • 인터뷰즈 안내 페이지 만들기
    • 문제 페이지 만들기
  • 인터뷰즈 페이지에서 퀴즈 인트로 페이지로 이동하는 부분
  • 문서 정리하기

받은 피드백

  • PR 제목이 길며 구체적이지 않다.
  • PR 내용에 너무 많은 작업을 가지고 있다.
  • 컴포넌트명은 구체적으로 한다.(스타일이라도)
  • Emotion의 기본은 Object 스타일이니 Object 스타일로 사용하자.
  • 테스트 코드를 봤을 때 무엇을 테스트 하려는지 의도가 보여야한다.

생각

  1. 백엔드 부분은 어떻게 할지 고민해야함
  2. E2E 테스트 코드 작성해야함

미래

  • 서비스 소개 페이지 제작
  • 푸터 영역 추가
  • 사용자 인증
  • 질문 등록 페이지

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.