├── .eslintignore ├── .eslintrc.js ├── .github └── workflows │ └── ci.yml ├── .gitignore ├── README.md ├── __mocks__ └── react-redux.js ├── assets ├── general.gif ├── images │ ├── interviews-default.png │ ├── intro1.png │ ├── intro2.png │ ├── intro3.png │ ├── intro4.png │ └── intro4_temp.png ├── interviews.gif └── preview.png ├── babel.config.js ├── codecept.conf.js ├── data └── interviews.json ├── favicon.ico ├── fixtures ├── interview-categories.js ├── interview-questions.js ├── interviews.js ├── quiz.js └── term.js ├── index.html ├── jest.config.js ├── jest.setup.js ├── jsconfig.json ├── mocks └── api │ ├── auth │ └── POST.json │ ├── interview │ ├── categories │ │ └── GET.json │ ├── question │ │ └── 1 │ │ │ └── GET.json │ └── questions │ │ └── POST.json │ └── interviews │ └── GET.json ├── package-lock.json ├── package.json ├── src ├── App.jsx ├── App.test.jsx ├── components │ ├── common │ │ ├── ButtonStyled.jsx │ │ ├── ConfirmAlert.jsx │ │ ├── ConfirmAlert.test.jsx │ │ ├── CustomLazyLoadImage.jsx │ │ ├── Footer.jsx │ │ ├── Footer.test.jsx │ │ ├── GuideStepList.jsx │ │ ├── GuideStepList.test.jsx │ │ ├── HamburgerButton.jsx │ │ ├── HamburgerButton.test.jsx │ │ ├── Header.jsx │ │ ├── Header.test.jsx │ │ ├── Loading.jsx │ │ ├── QuizHeader.jsx │ │ └── QuizHeader.test.jsx │ ├── interviews │ │ ├── Interviews.jsx │ │ ├── Interviews.test.jsx │ │ ├── InterviewsCheck.jsx │ │ ├── InterviewsCheck.test.jsx │ │ ├── InterviewsFeedBack.jsx │ │ ├── InterviewsFeedBack.test.jsx │ │ ├── InterviewsFinish.jsx │ │ ├── InterviewsFinish.test.jsx │ │ ├── InterviewsItem.jsx │ │ ├── InterviewsItem.test.jsx │ │ ├── QuizErrorMessage.jsx │ │ ├── QuizErrorMessage.test.jsx │ │ ├── QuizIntro.jsx │ │ └── QuizIntro.test.jsx │ └── practice │ │ ├── CategoriesList.jsx │ │ ├── CategoriesList.test.jsx │ │ ├── CategoryItem.jsx │ │ ├── CategoryItem.test.jsx │ │ ├── InterviewCategories.jsx │ │ ├── InterviewCategories.test.jsx │ │ ├── InterviewQuestions.jsx │ │ ├── InterviewQuestions.test.jsx │ │ ├── QuestionItem.jsx │ │ ├── QuestionItem.test.jsx │ │ ├── QuestionList.jsx │ │ └── QuestionList.test.jsx ├── config │ ├── assetsTransformer.js │ └── assetsTransformer.test.js ├── containers │ ├── common │ │ ├── HeaderContainer.jsx │ │ ├── HeaderContainer.test.jsx │ │ ├── QuizHeaderContainer.jsx │ │ └── QuizHeaderContainer.test.jsx │ ├── interviews │ │ ├── InterviewsCheckContainer.jsx │ │ ├── InterviewsCheckContainer.test.jsx │ │ ├── InterviewsContainer.jsx │ │ ├── InterviewsContainer.test.jsx │ │ ├── InterviewsFeedBackContainer.jsx │ │ ├── InterviewsFeedBackContainer.test.jsx │ │ ├── InterviewsFinishContainer.jsx │ │ ├── InterviewsFinishContainer.test.jsx │ │ ├── QuizIntroContainer.jsx │ │ └── QuizIntroContainer.test.jsx │ └── practice │ │ ├── InterviewCategoriesContainer.jsx │ │ ├── InterviewCategoriesContainer.test.jsx │ │ ├── InterviewQuestionsContainer.jsx │ │ └── InterviewQuestionsContainer.test.jsx ├── css │ └── react-transitions.css ├── index.css ├── index.jsx ├── layout │ ├── BaseLayout.jsx │ ├── BaseLayout.test.jsx │ ├── InterviewsLayout.jsx │ └── InterviewsLayout.test.jsx ├── modules │ ├── reducer.js │ ├── reducer.test.js │ └── store.js ├── pages │ ├── common │ │ ├── MainPage.jsx │ │ ├── MainPage.test.jsx │ │ ├── NotFoundPage.jsx │ │ └── NotFoundPage.test.jsx │ ├── interviews │ │ ├── InterviewsCheckPage.jsx │ │ ├── InterviewsCheckPage.test.jsx │ │ ├── InterviewsFeedBackPage.jsx │ │ ├── InterviewsFeedBackPage.test.jsx │ │ ├── InterviewsFinishPage.jsx │ │ ├── InterviewsFinishPage.test.jsx │ │ ├── InterviewsIntroPage.jsx │ │ ├── InterviewsIntroPage.test.jsx │ │ ├── InterviewsPage.jsx │ │ ├── InterviewsPage.test.jsx │ │ ├── InterviewsProblemPage.jsx │ │ └── InterviewsProblemPage.test.jsx │ └── practice │ │ ├── InterviewPracticePage.jsx │ │ └── InterviewPracticePage.test.jsx ├── services │ ├── __mock__ │ │ └── storage.js │ ├── api.js │ ├── api.test.js │ ├── storage.js │ └── storage.test.js └── utils │ ├── index.js │ └── index.test.js ├── steps.d.ts ├── steps_file.js ├── test ├── interviews_check_page_test.js ├── interviews_feeback_page_test.js ├── interviews_finish_page_test.js ├── interviews_intro_page_test.js ├── interviews_page_test.js ├── interviews_problems_page_test.js └── main_page_test.js └── webpack.config.js /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/* 2 | coverage/* -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es6: true, 5 | jest: true, 6 | }, 7 | extends: [ 8 | 'plugin:react/recommended', 9 | 'airbnb', 10 | ], 11 | globals: { 12 | Atomics: 'readonly', 13 | SharedArrayBuffer: 'readonly', 14 | context: 'readonly', 15 | Feature: 'readonly', 16 | Scenario: 'readonly', 17 | actor: 'readonly', 18 | given: 'readonly', 19 | Before: 'readonly', 20 | }, 21 | parserOptions: { 22 | ecmaFeatures: { 23 | jsx: true, 24 | }, 25 | ecmaVersion: 11, 26 | sourceType: 'module', 27 | }, 28 | plugins: [ 29 | 'react', 30 | ], 31 | rules: { 32 | indent: ['error', 2], 33 | 'no-trailing-spaces': 'error', 34 | curly: 'error', 35 | 'brace-style': 'error', 36 | 'no-multi-spaces': 'error', 37 | 'space-infix-ops': 'error', 38 | 'space-unary-ops': 'error', 39 | 'no-whitespace-before-property': 'error', 40 | 'func-call-spacing': 'error', 41 | 'space-before-blocks': 'error', 42 | 'keyword-spacing': ['error', { before: true, after: true }], 43 | 'comma-spacing': ['error', { before: false, after: true }], 44 | 'comma-style': ['error', 'last'], 45 | 'comma-dangle': ['error', 'always-multiline'], 46 | 'space-in-parens': ['error', 'never'], 47 | 'block-spacing': 'error', 48 | 'array-bracket-spacing': ['error', 'never'], 49 | 'object-curly-spacing': ['error', 'always'], 50 | 'key-spacing': ['error', { mode: 'strict' }], 51 | 'arrow-spacing': ['error', { before: true, after: true }], 52 | 'jsx-a11y/label-has-associated-control': ['error', { assert: 'either' }], 53 | 'react/prop-types': 'off', 54 | 'linebreak-style': 'off', 55 | 'no-proto': 'off', 56 | }, 57 | }; 58 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: build 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | build-and-deploy: 7 | runs-on: ubuntu-latest 8 | 9 | strategy: 10 | matrix: 11 | node-version: [12.x] 12 | 13 | steps: 14 | - name: Checkout 15 | uses: actions/checkout@v2.3.1 16 | with: 17 | persist-credentials: false 18 | 19 | - name: Install 20 | run: npm ci 21 | 22 | - name: Lint 23 | run: npx eslint --ext .js,.jsx src test 24 | 25 | - name: Run unit tests 26 | run: npm run test:unit 27 | 28 | - name: Run E2E tests 29 | run: | 30 | npm run test 31 | env: 32 | HEADLESS: true 33 | 34 | - name: Build 35 | run: npm run build 36 | 37 | - name: Deploy 38 | if: github.ref == 'refs/heads/master' 39 | uses: JamesIves/github-pages-deploy-action@3.5.9 40 | with: 41 | ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} 42 | BASE_BRANCH: master 43 | BRANCH: gh-pages 44 | FOLDER: dist -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Node.js 2 | node_modules 3 | 4 | ## Mac OS 5 | .DS_* 6 | 7 | ## VS Code 8 | .vscode 9 | 10 | ## CodeceptJS 11 | output 12 | 13 | ## Jest 14 | coverage 15 | 16 | ## jetbrains 17 | .idea 18 | 19 | ## Build 20 | dist/* 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Dev-Interview React Project 3 | 4 | 개발자를 위한 셀프형 피드백에 기반한 모의 인터뷰 프로젝트 5 | 6 | (Simple mock interview project based on self-feedback for developers) 7 | 8 | > 이름이 CheckYourSelf 에서 Dev-Interview로 변경되었습니다. 9 | 10 | ![workflow_badge](https://github.com/CodeSoom/dev-interview-kwonmory/workflows/build/badge.svg?branch=master) 11 | 12 | # Introduce_소개 13 | 14 | ## Background_배경 15 | 16 | 저를 포함하여 많은 개발자 또는 개발자 지망생분들께서 이직과 취업을 준비하고 있습니다. 17 | 18 | 준비 중간 과정으로 **기술 면접**이 있으며 **준비**가 **필요**합니다. 19 | 20 | 기술 면접에는 요구사항을 주고 코드를 짜고 설명하는 방식을 진행하는 회사도 있고 지식을 물어보는 방식과 같이 회사 마다 다양한 방식으로 개발자의 역량을 살펴보고 있습니다. 21 | 22 | 그 중 `간단하게 지식을 물어보는 방식으로 개발자 인터뷰 준비를 할 수 있는 환경`이라도 있다면 도움이 될 것 같다고 생각하게 되어서 `Dev-Interview`를 만들어보았습니다. 23 | 24 | 그러면 **어떻게 하면 도움이 될까**라는 부분이 핵심이였습니다. 25 | 26 | 다양한 준비 방법이 있고 좀 더 인터뷰 환경에 가깝게 하는 것이 좋다고 생각했습니다. 27 | 28 | 그리고 추가적으로 2가지를 부가적으로 이용하면 좋겠다고 생각했습니다. 29 | 30 | > 1. 인출 효과 31 | 32 | 인출 효과를 이용한 방법(습득한 지식을 밖으로 표출하여 학습하는 방법)이 효과적이라고 생각했습니다. (하단 참고서적 참고) 33 | 34 | 인출 효과 방법 중 자신이 학습한 내용을 토대로 눈으로만 읽는 것이 아닌 말로 표현함으로써 말하기 위해서 생각을 하는 과정에서 학습한 지식을 단기기억에서 장기기억으로 넘어가는 것이 효과적이라고 생각합니다. 35 | 36 | > 2. 피드백하기 37 | 38 | 학습에서 중요한건 자신이 학습한 지식에 대해서 피드백을 가져보는 시간이 중요하다고 생각합니다. 자신이 어떤 점을 알고 있고 어떤 점을 모르고 있는지 흔히 말하는 자신을 아는 메타인지가 중요합니다. 자신을 돌아보는 시간을 가짐으로써 부족한 부분을 채워 나갈 수 있습니다. 본 프로젝트에선 스스로 돌아보는 셀프 피드백을 생각해보았습니다. 39 | 40 | > 참고서적 41 | 42 | > - [함께자라기](https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=%ED%95%A8%EA%BB%98+%EC%9E%90%EB%9D%BC%EA%B8%B0&oquery=%EC%99%84%EB%B2%BD%ED%95%9C+%EA%B3%B5%EB%B6%80%EB%B2%95&tqi=U1g3Gdp0J1ZssM2%2Bw9wssssss-340386) 43 | 44 | > - [소소하지만 확실한 공부법](https://search.naver.com/search.naver?sm=tab_sug.top&where=nexearch&query=%EC%86%8C%EC%86%8C%ED%95%98%EC%A7%80%EB%A7%8C+%ED%99%95%EC%8B%A4%ED%95%9C+%EA%B3%B5%EB%B6%80%EB%B2%95&oquery=%ED%95%A8%EA%BB%98+%EC%9E%90%EB%9D%BC%EA%B8%B0&tqi=U1g38lp0JXVssFi8op8ssssssiR-284863&acq=%EC%86%8C%EC%86%8C%ED%95%98%EC%A7%80%EB%A7%8C+%ED%99%95%EC%8B%A4%ED%95%9C+&acr=2&qdt=0) 45 | 46 | > - [완벽한 공부법](https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=%EC%99%84%EB%B2%BD%ED%95%9C+%EA%B3%B5%EB%B6%80%EB%B2%95&oquery=%EB%A9%94%ED%83%80%EC%9D%B8%EC%A7%80&tqi=U1g31wp0YidssnxLbLossssssUR-159310) 47 | 48 | ## 부가적인 소개 49 | 50 | > 개발적인 부분?을 간단하게 소개한다면 51 | 52 | 리액트를 이용했으며, TDD공부 하면서 TDD로 코드를 작성하며 개발해 나간 프론트 엔드 프로젝트입니다. 53 | 54 | 유닛 테스트, 통합 테스트와 E2E 테스트 코드를 작성해보며 주로 어떻게 테스트하고 어떤 부분을 테스트 하면 좋을지에 대한 많은 고민을 하면서 즐겁게 개발해나갔습니다. 55 | 56 | > 백엔드 부분은? 57 | 58 | 프로젝트를 시작할 때, 프론트엔드 부분이 주 관심사여서 초반 개발 환경으로 webpack-dev-server로 mock api를 사용함으로써 백엔드부분을 해결했습니다. 59 | 60 | 그 후 배포환경으로 현재 프로젝트 버전(v1.0)에는 백엔드 서버를 구현할 필요가 없다고 판단하고 api 요청 시 `/data 폴더` 안 `interviews.js`의 데이터를 가져와서 사용하고 있습니다. 61 | 62 | (추후 타입스크립트를 이용해 NodeJs로 추가하고 싶습니다.) 63 | 64 | > CI/CD 65 | 66 | CI/CD는 Github Actions 을 이용하였으며, CD는 개발 도중 Github Pages 를 이용하다가 배포시에 [Netlify](https://www.netlify.com/)을 통해 배포 중입니다. 67 | 68 | ## 시연 화면 69 | 70 | > 심플하게 반응형 페이지로 만들었습니다. 71 | 72 | ![시연 영상 일반화면](./assets/general.gif) 73 | 74 | > 메인 기능인 인터뷰즈(모의 인터뷰) 모습 75 | 76 | ![시연 영상 인터뷰즈화면](./assets/interviews.gif) 77 | 78 | # 접속 URL 79 | 80 | > Netlify(무료 버전)을 사용하고 있어 대역폭이 낮아 페이지를 불러오는데 시간이 약간 걸립니다.. 😭 81 | 82 | https://bit.ly/33oGLai 83 | 84 | # Tech Stack_기술 스택 85 | 86 | > 일반 87 | 88 | - [React(Hooks)](https://ko.reactjs.org/) 89 | - [Redux Toolkit](https://redux-toolkit.js.org/) 90 | - [Redux](https://redux.js.org/) 91 | - [Redux Thunk](https://github.comreduxjss/redux-thunk) 92 | - [Emotion(styled)](https://emotion.sh/docs/styled) 93 | - ..등 94 | 95 | > 개발환경 96 | 97 | - [Webpack(webpackkdev-server)](https://webpack.js.org/guides/development/#usingwebpackkdevv-server) 98 | - [Eslint](https://eslint.org/) 99 | - ..등 100 | 101 | > 테스트관련 102 | - [Jest](https://jestjsioo/) 103 | - [React Testing Library](https://testing-library.com/) 104 | - [codeceptjs](https://codeceptioo/) 105 | - ..등 106 | 107 | > 라이브러리 108 | 109 | - [react-confirm-alert](https://www.npmjs.com/package/react-confirm-alert) 110 | - [react-lazy-load-image-component](https://www.npmjs.com/package/react-lazy-load-image-component) 111 | - [react-quill](https://www.npmjs.com/package/react-quill) 112 | - ..등 113 | 114 | # 프로젝트에 데이터 추가하기 115 | 116 | 사이트 링크에 데이터를 추가할 수 있습니다. [문제 추가하기](https://github.com/CodeSoom/dev-interview-kwonmory/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%97%90-%EB%AC%B8%EC%A0%9C-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0) 117 | 118 | 또는 119 | 120 | Fork를 하여 개인적으로 이용할 수 있습니다. [개인으로 이용하기](https://github.com/CodeSoom/dev-interview-kwonmory/wiki/%EA%B0%9C%EC%9D%B8%EC%9C%BC%EB%A1%9C-%EC%9D%B4%EC%9A%A9%ED%95%98%EA%B8%B0) 121 | 122 | # 프로젝트 회고록 123 | 124 | - [1&2주 차 주간 회고록](https://blog.kwonmory.com/codesoom/codesoom-project-week1-2-retrospective) 125 | - [3주 차 주간 회고록](https://blog.kwonmory.com/codesoom/codesoom-project-week3-retrospective) 126 | - [4&5주 차 주간 회고록](https://blog.kwonmory.com/codesoom/codesoom-project-week4-5-retrospective) 127 | - [6주 차 주간 회고록](https://blog.kwonmory.com/codesoom/codesoom-project-week6-retrospective) 128 | - [최종 회고록](https://blog.kwonmory.com/codesoom/ending-codesoom) 129 | 130 | # 주 차별 진행 내역 131 | 132 | - [1주 차 진행 상황과 목표 링크](https://github.com/CodeSoom/dev-interview-kwonmory/issues/1) 133 | - [2주 차 진행 상황과 목표 링크](https://github.com/CodeSoom/dev-interview-kwonmory/issues/8) 134 | - [3주 차 진행 상황과 목표 링크](https://github.com/CodeSoom/dev-interview-kwonmory/issues/27) 135 | - [4&5주 차 진행 상황과 목표 링크](https://github.com/CodeSoom/dev-interview-kwonmory/issues/30) 136 | - [6주 차 진행 상황과 목표 링크](https://github.com/CodeSoom/dev-interview-kwonmory/issues/64) 137 | 138 | # Getting Started_시작하기 139 | 140 | ```bash 141 | 142 | 1. npm install 143 | 144 | 2. npm start 145 | 146 | 3. Open http://localhost:8080 147 | 148 | ``` 149 | 150 | ## Watching The Testing Code_테스트 코드 감시하기 151 | 152 | ```bash 153 | 154 | npm run watch 155 | 156 | ``` 157 | 158 | ## Lint Test_린트 검사하기 159 | 160 | ```bash 161 | 162 | npm run lint 163 | 164 | ``` 165 | 166 | ## Unit Test_유닛 테스트 167 | 168 | ```bash 169 | 170 | npm run test:unit 171 | 172 | ``` 173 | 174 | ## Integration Test_통합 테스트 175 | 176 | ```bash 177 | 178 | npm run test # lint 검사가 제외된 테스트 179 | 180 | # or 181 | 182 | npm run test:lint # lint 검사가 포함되어있는 테스트 183 | 184 | ``` 185 | 186 | ## End to End Test_종단 테스트 187 | 188 | ```bash 189 | 190 | npm run test:e2e 191 | 192 | ``` 193 | 194 | ## Coverage Test_테스트 커버리지보기 195 | 196 | ```bash 197 | 198 | npm run coverage 199 | 200 | ``` 201 | 202 | ## Production Build_운영 환경으로 빌드하기 203 | 204 | ```bash 205 | 206 | npm run build 207 | 208 | ``` 209 | 210 | ## Development Build_개발 환경으로 빌드하기 211 | 212 | ```bash 213 | 214 | npm run build:dev 215 | 216 | ``` 217 | -------------------------------------------------------------------------------- /__mocks__/react-redux.js: -------------------------------------------------------------------------------- 1 | export const useDispatch = jest.fn(); 2 | export const useSelector = jest.fn(); 3 | -------------------------------------------------------------------------------- /assets/general.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeSoom/dev-interview-kwonmory/754ae1076478a93375bb819cc49fc2475e3d278d/assets/general.gif -------------------------------------------------------------------------------- /assets/images/interviews-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeSoom/dev-interview-kwonmory/754ae1076478a93375bb819cc49fc2475e3d278d/assets/images/interviews-default.png -------------------------------------------------------------------------------- /assets/images/intro1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeSoom/dev-interview-kwonmory/754ae1076478a93375bb819cc49fc2475e3d278d/assets/images/intro1.png -------------------------------------------------------------------------------- /assets/images/intro2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeSoom/dev-interview-kwonmory/754ae1076478a93375bb819cc49fc2475e3d278d/assets/images/intro2.png -------------------------------------------------------------------------------- /assets/images/intro3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeSoom/dev-interview-kwonmory/754ae1076478a93375bb819cc49fc2475e3d278d/assets/images/intro3.png -------------------------------------------------------------------------------- /assets/images/intro4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeSoom/dev-interview-kwonmory/754ae1076478a93375bb819cc49fc2475e3d278d/assets/images/intro4.png -------------------------------------------------------------------------------- /assets/images/intro4_temp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeSoom/dev-interview-kwonmory/754ae1076478a93375bb819cc49fc2475e3d278d/assets/images/intro4_temp.png -------------------------------------------------------------------------------- /assets/interviews.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeSoom/dev-interview-kwonmory/754ae1076478a93375bb819cc49fc2475e3d278d/assets/interviews.gif -------------------------------------------------------------------------------- /assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeSoom/dev-interview-kwonmory/754ae1076478a93375bb819cc49fc2475e3d278d/assets/preview.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | '@babel/preset-env', 5 | { 6 | targets: { 7 | node: 'current', 8 | }, 9 | }, 10 | ], 11 | '@babel/react', 12 | ], 13 | plugins: ['emotion'], 14 | }; 15 | -------------------------------------------------------------------------------- /codecept.conf.js: -------------------------------------------------------------------------------- 1 | const { setHeadlessWhen } = require('@codeceptjs/configure'); 2 | 3 | // turn on headless mode when running with HEADLESS=true environment variable 4 | // HEADLESS=true npx codecept run 5 | setHeadlessWhen(process.env.HEADLESS); 6 | 7 | exports.config = { 8 | tests: './test/*_test.js', 9 | output: './output', 10 | helpers: { 11 | Puppeteer: { 12 | url: 'http://localhost:8080', 13 | show: true, 14 | windowSize: '1200x900', 15 | }, 16 | }, 17 | include: { 18 | I: './steps_file.js', 19 | }, 20 | bootstrap: null, 21 | mocha: {}, 22 | name: 'project-react-1-kwonmory', 23 | plugins: { 24 | retryFailedStep: { 25 | enabled: true, 26 | }, 27 | screenshotOnFail: { 28 | enabled: true, 29 | }, 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeSoom/dev-interview-kwonmory/754ae1076478a93375bb819cc49fc2475e3d278d/favicon.ico -------------------------------------------------------------------------------- /fixtures/interview-categories.js: -------------------------------------------------------------------------------- 1 | const interviewCategories = [ 2 | { 3 | id: 1, 4 | name: 'Database', 5 | }, 6 | { 7 | id: 2, 8 | name: 'Network', 9 | }, 10 | { 11 | id: 3, 12 | name: 'Operation System', 13 | }, 14 | { 15 | id: 4, 16 | name: 'Javascript', 17 | }, 18 | { 19 | id: 5, 20 | name: 'FrontEnd', 21 | }, 22 | { 23 | id: 6, 24 | name: 'Ios', 25 | }, 26 | ]; 27 | export default interviewCategories; 28 | -------------------------------------------------------------------------------- /fixtures/interview-questions.js: -------------------------------------------------------------------------------- 1 | const interviewQuestions = [ 2 | { 3 | id: 1, 4 | title: '인덱스(Index)란 무엇인가요?', 5 | contributor: [ 6 | { 7 | id: 1, 8 | name: '귀여운강아지', 9 | }, 10 | { 11 | id: 2, 12 | name: '화난강아지', 13 | }, 14 | ], 15 | categories: [ 16 | { 17 | id: 1, 18 | name: 'database', 19 | }, 20 | ], 21 | reputation: { 22 | like: 10, 23 | unlike: 5, 24 | }, 25 | created_at: '2019-01-30 17:37:07', 26 | updated_at: '2019-01-30 17:37:07', 27 | }, 28 | { 29 | id: 2, 30 | title: '왜 index 를 생성하는데 b-tree 를 사용하나요?', 31 | contributor: [ 32 | { 33 | id: 3, 34 | name: '관리자', 35 | }, 36 | ], 37 | categories: [ 38 | { 39 | id: 1, 40 | name: 'database', 41 | }, 42 | ], 43 | created_at: '2019-02-30 17:37:07', 44 | updated_at: '2019-02-30 17:37:07', 45 | }, 46 | { 47 | id: 3, 48 | title: 'Hoisting에 대해서 설명해주세요.', 49 | contributor: [ 50 | { 51 | id: 1, 52 | name: '귀여운강아지', 53 | }, 54 | ], 55 | categories: [ 56 | { 57 | id: 1, 58 | name: 'javascript', 59 | }, 60 | ], 61 | reputation: { 62 | like: 1, 63 | unlike: 2, 64 | }, 65 | created_at: '2019-03-30 17:37:07', 66 | updated_at: '2019-03-30 17:37:07', 67 | }, 68 | { 69 | id: 4, 70 | title: 'SJF(Shortest - Job - First)의 문제점은 무엇이 있나요?', 71 | contributor: [ 72 | { 73 | id: 1, 74 | name: '귀여운강아지', 75 | }, 76 | ], 77 | categories: [ 78 | { 79 | id: 1, 80 | name: 'operation system', 81 | }, 82 | ], 83 | reputation: { 84 | like: 0, 85 | unlike: 0, 86 | }, 87 | created_at: '2019-03-30 17:37:07', 88 | updated_at: '2019-03-30 17:37:07', 89 | }, 90 | { 91 | id: 5, 92 | title: 'HTTP의 문제점에 대해서 설명해주세요.', 93 | contributor: [ 94 | { 95 | id: 1, 96 | name: '귀여운강아지', 97 | }, 98 | ], 99 | categories: [ 100 | { 101 | id: 1, 102 | name: 'network', 103 | }, 104 | ], 105 | reputation: { 106 | like: 100, 107 | unlike: 55, 108 | }, 109 | created_at: '2019-05-30 17:37:07', 110 | updated_at: '2019-05-30 17:37:07', 111 | }, 112 | ]; 113 | 114 | export default interviewQuestions; 115 | -------------------------------------------------------------------------------- /fixtures/interviews.js: -------------------------------------------------------------------------------- 1 | const mockInterviews = [ 2 | { 3 | id: 1, 4 | title: '프론트엔드 면접 문제 은행 시리즈1', 5 | description: '프론트엔드 일반 문제를 풀어봅시다~', 6 | image: { 7 | id: 1, 8 | url: 'https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/02/Blog_Front-End-Dev.jpg.webp', 9 | alt: '이미지', 10 | }, 11 | source: 'https://h5bp.org/Front-end-Developer-Interview-Questions/translations/korean/', 12 | tags: [ 13 | { 14 | id: 1, 15 | title: 'frontend', 16 | }, 17 | { 18 | id: 2, 19 | title: 'general', 20 | }, 21 | ], 22 | default_limit_second: 300, 23 | problems: [ 24 | { 25 | id: 1, 26 | title: '어제/이번 주에 무엇을 공부하셨나요?', 27 | limit_second: 180, 28 | }, 29 | { 30 | id: 2, 31 | title: '코딩을 할 때 당신을 들뜨게 하거나 흥미를 끄는 것들은 무엇인가요?', 32 | limit_second: 180, 33 | }, 34 | { 35 | id: 3, 36 | title: '최근에 당신이 경험한 기술적인 문제는 무엇이고 그것을 어떻게 해결했나요?', 37 | }, 38 | { 39 | id: 4, 40 | title: '버전 관리 시스템은 어떤 것들을 사용해보셨습니까?', 41 | limit_second: 120, 42 | }, 43 | { 44 | id: 5, 45 | title: '당신이 웹 페이지를 만들 때의 과정을 설명해주실 수 있을까요?', 46 | }, 47 | { 48 | id: 6, 49 | title: '당신이 프로젝트에 합류했습니다. 근데 그들은 Tab을 이용하고, 당신은 Space를 사용했습니다. 어떻게 하실 건가요?', 50 | }, 51 | { 52 | id: 7, 53 | title: 'CSS 애니메이션과 JavaScript 애니메이션의 차이점에 관해 설명해주세요.', 54 | }, 55 | ], 56 | }, 57 | { 58 | id: 2, 59 | title: '프론트엔드 면접 문제 은행 시리즈2', 60 | description: 'HTML에 대해서 문제를 풀어봅시다.', 61 | image: { 62 | id: 1, 63 | url: 'https://cdn.educba.com/academy/wp-content/uploads/2018/09/Top-Uses-Of-HTML.jpg', 64 | alt: '이미지', 65 | }, 66 | source: 'https://h5bp.org/Front-end-Developer-Interview-Questions/translations/korean/', 67 | tags: [ 68 | { 69 | id: 1, 70 | title: 'frontend', 71 | }, 72 | { 73 | id: 2, 74 | title: 'html', 75 | }, 76 | ], 77 | default_limit_second: 300, 78 | problems: [ 79 | { 80 | id: 1, 81 | title: 'doctype이 무엇을 하는 것인가요?', 82 | }, 83 | { 84 | id: 2, 85 | title: '표준모드(standards mode)와 쿽스모드(quirks mode)의 다른 점은 무엇인가요?', 86 | }, 87 | { 88 | id: 3, 89 | title: 'data-속성은 무엇을 하는 것인가요? 사용했을 때 이점은 무엇인가요?', 90 | }, 91 | { 92 | id: 4, 93 | title: '쿠키(Cookies)와 세션저장소(sessionStorage)와 로컬저장소(localStorage)의 차이점을 설명해주세요.', 94 | }, 95 | { 96 | id: 5, 97 | title: '