๐Ÿ‘จโ€๐Ÿ’ปย About.

๋‹ค์–‘ํ•œ ๊ฒƒ์„ ์‹œ๋„ํ•ด ์ƒˆ๋กœ์šด ์ง€์‹์„ ์–ป๋Š” ๊ฒƒ์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค.

์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ๋” ํšจ์œจ์ ์œผ๋กœ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๋งŽ์ด ๊ณ ๋ฏผํ•˜๊ณ  ์ด์•ผ๊ธฐํ•˜๋Š”๊ฒƒ์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค.

์‚ฌ์šฉ์ž์˜ ํŽธ์˜์„ฑ์„ ๊ณ ๋ คํ•˜์—ฌ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒƒ์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค.

์ž์‹ ์˜ ์—…๋ฌด๋ฅผ ์ฑ…์ž„๊ฐ ์žˆ๊ฒŒ ์ˆ˜ํ–‰ํ•˜๋ฉฐ, ๋Š์ž„์—†์ด ๋ฐœ์ „ํ•˜๊ธฐ ์œ„ํ•ด ํ•ญ์ƒ ์ž๊ธฐ๊ฐœ๋ฐœ์— ๋…ธ๋ ฅํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“–ย Project.

DOTORI

Untitled

Frontend Leader

V1

2022.01.23 ~ 2023.04.02

https://github.com/Team-Ampersand/Dotori-client

V2

2023.2.3 ~ ์„œ๋น„์Šค์ค‘

https://github.com/Team-Ampersand/Dotori-client-v2

DOTORI

DOTORI ํšŒ๊ณ ๋ก

์†Œ๊ฐœ

Dormitory(๊ธฐ์ˆ™์‚ฌ) ๋ผ๋Š” ๋‹จ์–ด์—์„œ ๋งŒ๋“ค์–ด์ง„ Dotori ํ”„๋กœ์ ํŠธ๋Š”

ํ•™๊ต ๊ธฐ์ˆ™์‚ฌ์˜ ์ž์Šต์‹ ์ฒญ, ์•ˆ๋งˆ์˜์ž ์‚ฌ์šฉ, ๊ทœ์ • ์œ„๋ฐ˜, ๊ธฐ์ƒ์Œ์•… ์‹ ์ฒญ ๋“ฑ์„ ์›น์‚ฌ์ดํŠธ๋กœ ๊ฐ„ํŽธํ•˜๊ฒŒ ๊ด€๋ฆฌ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“  ์›น์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค.

220๋ช…์˜ ์ „๊ต์ƒ์ด ์‚ฌ์šฉ์ค‘์ด๊ณ  ๋งค์ผ ํ‰๊ท  5000๋ฒˆ์ด์ƒ์˜ ํŠธ๋ž˜ํ”ฝ์ด ๋ฐœ์ƒํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ˆ˜ํ–‰์—…๋ฌด

V1

ํ”„๋กœ๋ชจ์…˜ ํŽ˜์ด์ง€ ์ œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž…, ๋ฉ”์ธํŽ˜์ด์ง€ ๋ฐ˜์‘ํ˜•, ์œ ์ง€๋ณด์ˆ˜ ํ–ˆ์Šต๋‹ˆ๋‹ค.

V2

SSR + SWR ์„ ์‚ฌ์šฉํ•ด SSR, CSR ํ™˜๊ฒฝ์—์„œ ๋” ์ข‹๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.

Atomic ๋””์ž์ธ ํŒจํ„ด์„ ์‚ฌ์šฉํ•œ ํŒŒ์ผ๊ตฌ์กฐ๋กœ ๋” ํšจ์œจ์ ์ด๊ณ  ์œ ์ง€๋ณด์ˆ˜๊ด€์ ์—์„œ ๋” ์ข‹๊ฒŒ ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋‹คํฌ๋ชจ๋“œ, ํ† ํฐ, SEO ์„ค์ •์„ ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ฑ„๋„ํ†ก์„ ์ด์šฉํ•ด ์‚ฌ๊ฐ์Œค๊ณผ์˜ ์ผ๋Œ€์ผ ๋ฌธ์˜ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.

**Axios interceptor**๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ http ์š”์ฒญ์— ๋Œ€ํ•œ ์ฝ”๋“œ ์ค‘๋ณต์„ ์ œ๊ฑฐํ–ˆ์Šต๋‹ˆ๋‹ค.

middleware ๋ฅผ ์‚ฌ์šฉํ•ด ๋กœ๊ทธ์ธ์—ฌ๋ถ€์—๋”ฐ๋ผ url ์ง์ ‘์ ‘๊ทผ์„ ๋ง‰์•˜์Šต๋‹ˆ๋‹ค.

ํ”„๋กœ๋ชจ์…˜, ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž…, ๋ฉ”์ธ ํŽ˜์ด์ง€ ์ œ์ž‘, ๋ฐ˜์‘ํ˜• ํ–ˆ์Šต๋‹ˆ๋‹ค.

React-hook-form ์„ ์‚ฌ์šฉํ•ด ํšจ์œจ์ ์œผ๋กœ state ๋ฅผ ๊ด€๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.

env-cmd ๋ฅผ ์ด์šฉํ•ด ๊ฐœ๋ฐœํ™˜๊ฒฝ๊ณผ ์šด์˜ํ™˜๊ฒฝ ํ™˜๊ฒฝ๋ณ€์ˆ˜๋ฅผ ๋ถ„๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.

Dynamic Import ์„ ์‚ฌ์šฉํ•ด pre-rendering ์ด ํ•„์š”์—†๋Š” ๋ถ€๋ถ„์„ csr ๋กœ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค.

React-easy-crop ์„ ์‚ฌ์šฉํ•ด ์ด๋ฏธ์ง€๋ฅผ ํ”„๋กœํ† ํƒ€์ž…์œผ๋กœ ์ˆ˜์ •๊ฐ€๋Šฅํ•˜๊ฒŒ ํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ธฐ์ˆ 

  Next.js, Typescript, Emotion.js , Recoil, Axios, Swr, Env-cmd

์‹œํ–‰์ฐฉ์˜ค

V1

V2


Devlog

Untitled

Design, Frontend

V1

2022.4.16 ~ 2022.7.4

React-project/vlog at main ยท HWANBINYOO/React-project

์›น ์ฒซ ๋ฐฐํฌํ›„๊ธฐ

V2

2023.3.12 ~ 2023.4.13

GitHub - Devlog-v2/front: ๊ฐœ๋ฐœ์ž๋“ค์„ ์œ„ํ•œ ๋ธ”๋กœ๊ทธ front ๋ถ€๋ถ„

์†Œ๊ฐœ

Developer Blog ์˜ ์•ฝ์ž์ธ Devlog ๋Š”

๊ฐœ๋ฐœ์ž๋“ค์„ ์œ„ํ•œ ๋ธ”๋กœ๊ทธ ํ”Œ๋žซํผ์„ ์ œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ˆ˜ํ–‰์—…๋ฌด

V1

remark-gfm ๋ฅผ ์‚ฌ์šฉํ•ด ๋งˆํฌ๋‹ค์šดํ˜•์‹์œผ๋กœ ๋ธ”๋กœ๊ทธ๋ฅผ CRUD๊ฐ€ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ–ˆ์Šต๋‹ˆ๋‹ค.

AWS S3 + CloudFront ์„ ์‚ฌ์šฉํ•ด ๋ฐฐํฌํ–ˆ์Šต๋‹ˆ๋‹ค.

ํ”„๋กœํ•„,๊ฒŒ์‹œ๊ธ€,๋กœ๊ทธ์ธ,ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€ ์ œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.

V2

๋Œ“๊ธ€, ์ข‹์•„์š” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

next.js ๋กœ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๋ฐ ssr ํ™˜๊ฒฝ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ๊ฒŒ ํ–ˆ์Šต๋‹ˆ๋‹ค.

ํ”„๋กœํ•„์— ์ž”๋”” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•ด์„œ ์‚ฌ์šฉ์ž๋“ค์ด ๋ธ”๋กœ๊ทธ๋ฅผ ์“ธ ๋•Œ๋งˆ๋‹ค ์ž”๋””๊ฐ€ ์ฑ„์›Œ์ง€๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.

vercel ์„ ์‚ฌ์šฉํ•ด ๋ฐฐํฌํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ธฐ์ˆ 

Next.js, Typescript, Emotion.js, Recoil, Axios, Remark-gfm, Nookies

์‹œํ–‰์ฐฉ์˜ค

V2


WTM

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2023-11-21 แ„‹แ…ฉแ„’แ…ฎ 2.57.04.png

Design, Frontend

2023.11.13 ~ 2023.12.30

https://github.com/WTM-whatTodayMedia/front-v2

WTM ํšŒ๊ณ ๋ก

แ„’แ…ชแ„†แ…งแ†ซ แ„€แ…ตแ„…แ…ฉแ†จ 2024-01-06 แ„‹แ…ฉแ„’แ…ฎ 4.05.34.gif

์†Œ๊ฐœ