Skip to content

Commit

Permalink
Merge pull request #61 from HalamLee/docs/readme/#60
Browse files Browse the repository at this point in the history
docs: λ¦¬λ“œλ―Έ μž‘μ„±
  • Loading branch information
HalamLee committed Jul 1, 2023
2 parents 363b5b3 + 1d964c5 commit 276f46e
Showing 1 changed file with 207 additions and 1 deletion.
208 changes: 207 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,208 @@
# Interviz
πŸ€– chatGPTλ₯Ό μ΄μš©ν•œ 개발 κΈ°μˆ λ©΄μ ‘ μ—°μŠ΅ μ‚¬μ΄νŠΈ (λ…Έμ½”λ“œ & AI 개발 κ²½μ§„λŒ€νšŒ: 싱컀톀 μΆœν’ˆ ν”„λ‘œμ νŠΈ)

![image](https://github.com/HalamLee/Interviz/assets/87893624/f631bba9-e911-4d56-9b63-8112644fa78c)

πŸ”— [μ „κ΅­ λ…Έμ½”λ“œ & AI 개발 κ²½μ§„λŒ€νšŒ: 싱컀톀 μ‹œμ¦Œ2 우승 πŸ†](https://m.blog.naver.com/synctree/223143163356)

<br>

> κΈ°μ—… μ—”ν„°ν”Œμ—μ„œ μ£Όμ΅œν•œ μ‹±μ»€ν†€μ΄λΌλŠ” 해컀톀에 μ°Έμ—¬ν•΄ λͺ¨λ“  μž‘μ—…μ„ 혼자 μ§„ν–‰ν–ˆμœΌλ©°, λ°±μ—”λ“œλ₯Ό μžμ‚¬ λ…Έμ½”λ“œ 툴인 μ‹±ν¬νŠΈλ¦¬λ₯Ό μ΄μš©ν•΄ κ°œλ°œν–ˆμŠ΅λ‹ˆλ‹€.
>
> 싱컀톀에 μ°Έμ—¬ν•˜κ²Œ 되며 μ‹±ν¬νŠΈλ¦¬λ₯Ό 처음 μ ‘ν–ˆκ³ , ν•™μŠ΅ 기간인 2023.6.12(μ›”) - 6.16(금) λ™μ•ˆ μ‹±ν¬νŠΈλ¦¬ ν•™μŠ΅ 및 기획과 λ””μžμΈμ„ ν–ˆμŠ΅λ‹ˆλ‹€.
>
> 이후 2023.6.17(ν† ) - 6.25(일) 9일 λ™μ•ˆ ν”„λ‘ νŠΈμ—”λ“œμ™€ λ°±μ—”λ“œ κ°œλ°œμ„ ν•΄μ„œ ν”„λ‘œμ νŠΈλ₯Ό μ™„μ„±ν–ˆμŠ΅λ‹ˆλ‹€.
>
> ν˜„μž¬ λ°±μ—”λ“œλŠ” μ‹±μ»€ν†€μ—μ„œ μž‘μ—…ν•œ μ‹±ν¬νŠΈλ¦¬λ‘œ κ°œλ°œλ˜μ–΄ 있으며, 좔후에 μ„œλΉ„μŠ€λ₯Ό μ—…λ°μ΄νŠΈν•˜λ©° Node.js둜 λ§ˆμ΄κ·Έλ ˆμ΄μ…˜ν•  κ³„νšμž…λ‹ˆλ‹€.
<br>

## μ„œλΉ„μŠ€ μ†Œκ°œ

Interviz : interview + visualization

면접을 μ‹œκ°ν™”ν•΄μ„œ μ—°μŠ΅ν•  수 μžˆλ‹€λŠ” 뜻으둜,
ChatGPTλ₯Ό μ΄μš©ν•΄ μ‚¬μš©μžμ˜ 상황에 λ”°λ₯Έ κΈ°μˆ λ©΄μ ‘ μ§ˆλ¬Έμ„ μ œκ³΅ν•΄μ£Όλ©°,
μ‚¬μš©μžμ˜ 닡변에 ν”Όλ“œλ°±κ³Ό λͺ¨λ²”해섀을 μ œκ³΅ν•΄μ£ΌλŠ” μ„œλΉ„μŠ€μž…λ‹ˆλ‹€.

<br>

## κΈ°λŠ₯ μ†Œκ°œ

![image](https://github.com/HalamLee/Interviz/assets/87893624/648e50c6-3eb2-4847-afd0-e0155e9ffa83)

<br>

### 1. λ°˜μ‘ν˜•

![image](https://github.com/HalamLee/Interviz/assets/87893624/fbbb4b58-bc95-4776-b290-8c8c464bd089)

> μ‚¬μš©μžκ°€ μ–΄λ– ν•œ 기기둜 μ„œλΉ„μŠ€λ₯Ό μ‚¬μš©ν•˜λ”λΌλ„ λΆˆνŽΈν•¨μ„ λŠλΌμ§€ μ•Šλ„λ‘ ν•˜κΈ° μœ„ν•΄ λ°˜μ‘ν˜• μž‘μ—…μ„ ν–ˆμŠ΅λ‹ˆλ‹€.
<br>
<br>

### 2. μŠ€ν”Œλž˜μ‹œ 슀크린

<img width="300" src="https://github.com/HalamLee/Interviz/assets/87893624/2cbd3487-c225-4101-8092-894556ed7439"/>

> μ‚¬μš©μžμ—κ²Œ 마치 μ–΄ν”Œμ„ μ‚¬μš©ν•˜λŠ” 것과 같은 λŠλ‚Œμ˜ 효과λ₯Ό μ£ΌκΈ° μœ„ν•΄ μ„Έμ…˜μ„ μ‚¬μš©ν•΄ μŠ€ν”Œλž˜μ‹œ 슀크린 효과λ₯Ό μ£Όμ—ˆμŠ΅λ‹ˆλ‹€.
>
> μ„œλΉ„μŠ€κ°€ λ Œλ”λ§λ˜μ—ˆμ„ λ•Œ μ„Έμ…˜ μŠ€ν† λ¦¬μ§€μ— μŠ€ν”Œλž˜μ‹œ 슀크린의 μ—¬λΆ€λ₯Ό νŒλ‹¨ν•˜λŠ” ν‚€κ°€ μžˆλŠ”μ§€ ν™•μΈν•©λ‹ˆλ‹€.
> <br>
> λ§Œμ•½ ν•΄λ‹Ή ν‚€κ°€ μ—†λ‹€λ©΄ μŠ€ν”Œλž˜μ‹œ μŠ€ν¬λ¦°μ„ λ„μš°κ³  킀와 값을 μΆ”κ°€ν•©λ‹ˆλ‹€.
<br>
<br>

### 3. μ‚¬μš©μž 정보 μž…λ ₯

<img width="300" src="https://github.com/HalamLee/Interviz/assets/87893624/f0e9c5f6-ce4d-40b4-bef5-69e2f1819220" />

> μ‚¬μš©μžλ‘œλΆ€ν„° κΈ°μˆ μŠ€νƒκ³Ό μ—°μ°¨, 직ꡰ에 λŒ€ν•œ 정보λ₯Ό μž…λ ₯ λ°›κ³ , μŠ¬λΌμ΄λ“œλ°”λ₯Ό 톡해 질문의 개수λ₯Ό μ„€μ •ν•©λ‹ˆλ‹€.
<br>
<br>

### 4. μž…λ ₯ν•œ μ‚¬μš©μž 정보에 μ•Œλ§žλŠ” λ©΄μ ‘ 질문 리슀트 생성

<img width="300" src="https://github.com/HalamLee/Interviz/assets/87893624/5dbcf875-227a-48e3-a7e4-746c2529d5fc" />

> μ‚¬μš©μžλ‘œλΆ€ν„° 받은 정보와 질문 개수λ₯Ό ChatGPTμ—κ²Œ 보내 μ‚¬μš©μžμ—κ²Œ μ•Œλ§žλŠ” λ©΄μ ‘ 질문 리슀트λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.
<br>
<br>

### 5. λ‹΅λ³€ μ‹œ μ‚¬μš©μžμ—κ²Œ ν”Όλ“œλ°±κ³Ό μ§ˆλ¬Έμ— λŒ€ν•œ λͺ¨λ²”ν•΄μ„€ 제곡

<img width="300" src="https://github.com/HalamLee/Interviz/assets/87893624/f4fe8553-167d-40e1-933e-793b56679855" />

> μ‚¬μš©μžλŠ” μƒμ„±λœ 질문 λ¦¬μŠ€νŠΈμ—μ„œ 선택을 ν•  수 있으며, λ‹΅λ³€ μ‹œ μ‚¬μš©μžκ°€ ν•œ λ‹΅λ³€μ˜ ν”Όλ“œλ°±κ³Ό μ§ˆλ¬Έμ— λŒ€ν•œ λͺ¨λ²”해섀을 μ œκ³΅ν•©λ‹ˆλ‹€.
<br>
<br>

### 6. μ„œλΉ„μŠ€μ— λŒ€ν•œ ν”Όλ“œλ°±μ„ ν•  수 μžˆλŠ” 곡간 마련

<img width="300" src="https://github.com/HalamLee/Interviz/assets/87893624/3acd9243-d3a5-4ae2-89fd-56d2d4cd3b3c" />

> μ‚¬μš©μžμ—κ²Œ λΆˆνŽΈν•¨μ„ λŠλΌμ§€ μ•Šλ„λ‘, 더 λ‚˜μ€ μ„œλΉ„μŠ€λ₯Ό λ§Œλ“€κΈ° μœ„ν•΄ μ„œλΉ„μŠ€μ— λŒ€ν•œ ν”Όλ“œλ°±μ„ ν•  수 μžˆλŠ” 곡간을 μ€€λΉ„ν–ˆμŠ΅λ‹ˆλ‹€.
>
> 싱컀톀은 끝이 λ‚¬μ§€λ§Œ 이후에도 μ‚¬μš©μžμ˜ ν”Όλ“œλ°±μ„ λ°”νƒ•μœΌλ‘œ 더 λ‚˜μ€ μ„œλΉ„μŠ€λ₯Ό λ§Œλ“€λ„λ‘ κ°œμ„ ν•  μ˜ˆμ •μž…λ‹ˆλ‹€.
<br>
<br>
<br>

## 핡심 기술

### Frontend

<img src="https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=React&logoColor=white">
<img src="https://img.shields.io/badge/TypeScript-1572b6?style=flat-square&logo=TypeScript&logoColor=white">
<img src="https://img.shields.io/badge/Next.js-000000?style=flat-square&logo=Next.js&logoColor=white">
<img src="https://img.shields.io/badge/styled components-DB7093?style=flat-square&logo=styled-components&logoColor=white"/>
<img src="https://img.shields.io/badge/Axios-5A29E4?style=flat-square&logo=Axios&logoColor=white"/>

<img src="https://img.shields.io/badge/ESLint-4B32C3?style=flat-square&logo=ESLint&logoColor=white"/>
<img src="https://img.shields.io/badge/Node.js-339933?style=flat-square&logo=Node.js&logoColor=white">
<img src="https://img.shields.io/badge/Yarn-2C8EBB?style=flat-square&logo=Yarn&logoColor=white"/>

<br>

### Backend

<img src="https://img.shields.io/badge/SyncTree-5CCE59?style=flat-square&logoColor=white"/>
<img src="https://img.shields.io/badge/OpenAI-412991?style=flat-square&logo=OpenAI&logoColor=white"/>
<img src="https://img.shields.io/badge/Postman-FF6C37?style=flat-square&logo=Postman&logoColor=white"/>

<br>

### Product management & Design

<img src="https://img.shields.io/badge/Notion-000000?style=flat-square&logo=Notion&logoColor=white"/>
<img src="https://img.shields.io/badge/Figma-F24E1E?style=flat-square&logo=Figma&logoColor=white">

<br>
<br>

## API

| 질문 리슀트 | 닡변에 λŒ€ν•œ ν”Όλ“œλ°±κ³Ό λͺ¨λ²”ν•΄μ„€ |
| :----------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------: |
| <img src="https://github.com/HalamLee/Interviz/assets/87893624/ab140aea-9a45-43dc-91ba-6860284b4f20"/> | <img src="https://github.com/HalamLee/Interviz/assets/87893624/611e3f77-6de6-4921-aebd-0d79a6b7a25f" /> |

<details>
<summary>질문 리슀트 API Example</summary>

Request:

{

"techStack": "javascript",

"yearsOfExperience": "μ‹ μž…",

"partOfDevelopment": "ν”„λ‘ νŠΈμ—”λ“œ",

"numberOfQuestion": "2"

}


Response:

{

"result": [

{

"id": 1,

"question": "μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ ν΄λ‘œμ €(Closure)에 λŒ€ν•΄ μ„€λͺ…ν•΄μ£Όμ„Έμš”."

},

{

"id": 2,

"question": "μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ 이벀트 μœ„μž„(Event delegation)이 무엇인지 μ„€λͺ…ν•΄μ£Όμ„Έμš”."

}

]

}

</details>

<details>
<summary>닡변에 λŒ€ν•œ ν”Όλ“œλ°±κ³Ό λͺ¨λ²”ν•΄μ„€ API Example</summary>

Request:

{

"question": "μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ ν˜Έμ΄μŠ€νŒ…(Hoisting)이 무엇인지 μ„€λͺ…ν•΄μ£Όμ„Έμš”.",

"userAnswer": "잘 λͺ¨λ₯΄κ² μŠ΅λ‹ˆλ‹€."

}


Response:

{

"result": {

"feedback": "'잘 λͺ¨λ₯΄κ² μŠ΅λ‹ˆλ‹€.'λΌλŠ” 닡변은 λ©΄μ ‘κ΄€μœΌλ‘œμ„œ λ©΄μ ‘μžμ—κ²Œ μ›ν•˜λŠ” 닡변이 μ•„λ‹™λ‹ˆλ‹€. ν˜Έμ΄μŠ€νŒ…μ€ μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ λ³€μˆ˜μ™€ ν•¨μˆ˜ 선언이 μŠ€μ½”ν”„μ˜ μƒλ‹¨μœΌλ‘œ λŒμ–΄μ˜¬λ €μ§€λŠ” ν˜„μƒμ„ λ§ν•©λ‹ˆλ‹€. μ΄λŠ” μ½”λ“œμ˜ μ‹€ν–‰ μˆœμ„œμ™€λŠ” 상관없이 λ³€μˆ˜μ™€ ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•  수 μžˆλŠ” 이점을 μ œκ³΅ν•©λ‹ˆλ‹€. ν˜Έμ΄μŠ€νŒ…μ€ λ³€μˆ˜ 선언은 ν•΄λ‹Ή μŠ€μ½”ν”„μ˜ μƒλ‹¨μœΌλ‘œ, ν•¨μˆ˜ 선언은 전체 μŠ€μ½”ν”„μ˜ μƒλ‹¨μœΌλ‘œ λŒμ–΄μ˜¬λ €μ§€λ©°, λ³€μˆ˜ μ΄ˆκΈ°ν™”λŠ” μ›λž˜ μœ„μΉ˜μ—μ„œ μ΄λ£¨μ–΄μ§‘λ‹ˆλ‹€. μ΄ν•΄ν•˜κ³  μžˆλŠ”μ§€ ν™•μΈν•˜κΈ° μœ„ν•΄ λ©΄μ ‘μžμ—κ²Œ ν˜Έμ΄μŠ€νŒ…μ˜ μ˜ˆμ‹œλ‚˜ μ£Όμ˜ν•΄μ•Ό ν•  점 등을 더 μžμ„Ένžˆ μ„€λͺ…ν•΄λ³΄μ„Έμš”.",

"answer": "ν˜Έμ΄μŠ€νŒ…μ€ μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ λ³€μˆ˜ 및 ν•¨μˆ˜ 선언이 μŠ€μ½”ν”„μ˜ μ΅œμƒλ‹¨μœΌλ‘œ λŒμ–΄μ˜¬λ €μ§€λŠ” ν˜„μƒμ„ λ§ν•©λ‹ˆλ‹€. μ΄λŠ” μ½”λ“œμ˜ μ‹€ν–‰ 전에 λ³€μˆ˜ 및 ν•¨μˆ˜ 선언이 μ²˜λ¦¬λ˜μ–΄ ν•΄λ‹Ή μŠ€μ½”ν”„ λ‚΄μ—μ„œ μ‚¬μš©ν•  수 있게 λ©λ‹ˆλ‹€. λ³€μˆ˜ ν˜Έμ΄μŠ€νŒ…μ€ λ³€μˆ˜ 선언이 μŠ€μ½”ν”„μ˜ μ΅œμƒλ‹¨μœΌλ‘œ λŒμ–΄μ˜¬λ €μ§€μ§€λ§Œ, μ΄ˆκΈ°ν™”λŠ” κ·Έ μžλ¦¬μ— λ‚¨μ•„μžˆκ²Œ λ©λ‹ˆλ‹€. λ”°λΌμ„œ λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜κΈ° 전에 μ‚¬μš©ν•˜λ©΄ `undefined`둜 값이 ν• λ‹Ήλ©λ‹ˆλ‹€.ν•¨μˆ˜ ν˜Έμ΄μŠ€νŒ…μ€ ν•¨μˆ˜ 선언문이 μŠ€μ½”ν”„μ˜ μ΅œμƒλ‹¨μœΌλ‘œ λŒμ–΄μ˜¬λ €μ§€λ©°, ν•¨μˆ˜ ν‘œν˜„μ‹μ€ ν˜Έμ΄μŠ€νŒ…λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. λ”°λΌμ„œ ν•¨μˆ˜ 선언문은 μ„ μ–Έ 전에 ν˜ΈμΆœν•  수 μžˆμŠ΅λ‹ˆλ‹€.ν˜Έμ΄μŠ€νŒ…μ€ μ½”λ“œμ˜ 가독성과 μœ μ§€λ³΄μˆ˜λ₯Ό μ–΄λ ΅κ²Œ λ§Œλ“€ 수 μžˆμœΌλ―€λ‘œ, λ³€μˆ˜ 및 ν•¨μˆ˜ 선언은 μŠ€μ½”ν”„ μƒλ‹¨μ—μ„œ λͺ…μ‹œμ μœΌλ‘œ μž‘μ„±ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€."

}

}

</details>

0 comments on commit 276f46e

Please sign in to comment.