Search

Supple

์‚ฌ์šฉ ๊ธฐ์ˆ 
ElasticSearch PostgreSQL Prisma GraphQL Express.js React Next.js TypeScript Material UI

VPC ๊ตฌ์„ฑ, VPN ์„ค์ • (2021.6)

์™ธ๋ถ€์—์„œ์˜ DB ์ ‘๊ทผ์„ ์ฐจ๋‹จํ•˜๊ธฐ ์œ„ํ•œ VPC ๊ตฌ์„ฑ. ๋‚ด๋ถ€ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ ‘์†ํ•  ์ˆ˜ ์žˆ๋„๋ก VPN ์„ค์ •
โ€ข
๊ฐ™์€ ๋ฆฌ์ „์˜ ํผ๋ธ”๋ฆญ ์„œ๋ธŒ๋„ท์— ์„œ๋ฒ„ EC2 ์ธ์Šคํ„ด์Šค ์‹คํ–‰, DB๋Š” ํ”„๋ผ์ด๋น— ์„œ๋ธŒ๋„ท์— ์—ฐ๊ฒฐ.
โ€ข
ํผ๋ธ”๋ฆญ ์„œ๋ธŒ๋„ท์€ ๋ชจ๋“  ์ธํ„ฐ๋„ท ํŠธ๋ž˜ํ”ฝ์„ ํ—ˆ์šฉํ•˜๊ณ , ํ”„๋ผ์ด๋น— ์„œ๋ธŒ๋„ท์€ ๊ฐ™์€ VPC ๋‚ด์˜ ํผ๋ธ”๋ฆญ ์„œ๋ธŒ๋„ท์—์„œ์˜ ํŠธ๋ž˜ํ”ฝ๋งŒ ํ—ˆ์šฉํ•˜์—ฌ VPC ์™ธ๋ถ€์—์„œ์˜ DB ์ ‘๊ทผ ์ฐจ๋‹จ
โ€ข
๋กœ์ปฌ ๊ฐœ๋ฐœ, CI ๋“ฑ VPC ์™ธ๋ถ€์˜ ํŠน์ • ์ปดํ“จํ„ฐ์—์„œ DB์— ์ ‘๊ทผํ•˜๋Š” ๊ฒฝ์šฐ๋ฅผ ์œ„ํ•ด VPN ํด๋ผ์ด์–ธํŠธ ์—”๋“œํฌ์ธํŠธ ์„ค์ •
โ€ข
easy-rsa๋กœ ์ƒํ˜ธ์ธ์ฆ ํ‚ค ๋ฐœ๊ธ‰ํ•˜์—ฌ ACM์—์„œ ์ธ์ฆ์„œ ๊ด€๋ฆฌํ•˜๊ณ  AWS VPN Client ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ ๋กœ์ปฌ์—์„œ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•จ

์บ์‹œ, ์ƒ์  ํŽ˜์ด์ง€ UI ๊ฐœ์„  ๋ฐ ์„ค์น˜ ์œ ๋„ ์ด๋ฒคํŠธ ๊ฐœ๋ฐœ (2021.6~6.28)

ํ™•์žฅํ”„๋กœ๊ทธ๋žจ ์„ค์น˜ ์œ ๋„๋ฅผ ์œ„ํ•œ ์นด๋“œ, ๋ชจ๋‹ฌ ๋ฐ ์บ์‹œ ๋ฆฌ์›Œ๋“œ ์ด๋ฒคํŠธ ๊ฐœ๋ฐœ
โ€ข
์ƒ์  ํŽ˜์ด์ง€: '์ปคํ”ผ/์Œ๋ฃŒ' ์ƒํ’ˆ์ด ๋ฐ”๋กœ ๋œฐ ์ˆ˜ ์žˆ๊ฒŒ ๋ณ€๊ฒฝ
โ€ข
์บ์‹œ: ์บ์‹œ๊ฐ€ ๋ˆˆ์— ์ž˜ ๋„๋„๋ก ์นด๋“œ์— ๊ณจ๋“œ ์ปฌ๋Ÿฌ ํ…Œ๋‘๋ฆฌ ์ถ”๊ฐ€
์ด๋ฏธ์ง€
โ€ข
์„ค์น˜ ์œ ๋„: ์„ค์น˜ ์œ ๋„๋ฅผ ์œ„ํ•œ ์„ค์น˜ ์นด๋“œ ๋ฐ ๋ชจ๋‹ฌ ๊ฐœ๋ฐœ / ์ด๋ฒคํŠธ ๊ฐœ๋ฐœ
โ—ฆ
์˜ค๋Š˜ ํ•˜๋ฃจ ์•ˆ๋ณด๊ธฐ ๋“ฑ ๊ธฐ๋Šฅ ๊ตฌํ˜„ ์‹œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด localForage ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ indexedDB์— ๋ฐ์ดํ„ฐ ์ €์žฅ
โ—ฆ
ํ™•์žฅํ”„๋กœ๊ทธ๋žจ ์ตœ์ดˆ ์„ค์น˜ ์œ ์ €์—๊ฒŒ ์บ์‹œ๋ฅผ ๋ฆฌ์›Œ๋“œํ•˜๋Š” ์ด๋ฒคํŠธ ๊ธฐ๋Šฅ ๊ฐœ๋ฐœ

์ฝ˜ํ…์ธ  ๋ณ‘๋ชฉ ํ˜„์ƒ ํ•ด๊ฒฐ์„ ์œ„ํ•œ ๋ฆฌ๋ทฐ ์ž๋™ํ™”, ๋ฐ์ดํ„ฐ ์ŠคํŠœ๋””์˜ค ์ผ์ผ ์ง€ํ‘œ ์•Œ๋ฆผ(2021.3~4.9)

๋ฆฌ๋ทฐ ๋ณ‘๋ชฉ ๋ฌธ์ œ ํ•ด๊ฒฐ, ์ฝ˜ํ…์ธ  ๋ฐœํ–‰ ์ˆ˜๋ฅผ ์ผ์ •ํ•˜๊ฒŒ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๋ฆฌ๋ทฐ ์ž๋™ํ™” ๋„์ž…
โ€ข
์—˜๋ผ์Šคํ‹ฑ์„œ์น˜๋กœ ์ฝ˜ํ…์ธ  ํƒœ๊น… ์ž๋™ํ™”, ๋จธ์‹ ๋Ÿฌ๋‹์œผ๋กœ ๋ฆฌ๋ทฐ์–ด๊ฐ€ ์ˆ˜๋™์œผ๋กœ ํƒœ๊น… ์‹œ ์ฝ˜ํ…์ธ ์— ๋งž๋Š” ํƒœ๊ทธ ์ถ”์ฒœ
โ—ฆ
์—˜๋ผ์Šคํ‹ฑ์„œ์น˜๋กœ ๋™์˜์–ด, ์‚ฌ์ „์„ ํ†ตํ•ด ํ•ด๋‹น ํƒœ๊ทธ์— ๋งž๋Š” ํฌ์ŠคํŠธ๋ฅผ ๊ฒ€์ƒ‰ํ•ด ํƒœ๊น…. cli ์ปค๋งจ๋“œ๋กœ ๋งŒ๋“ค์–ด lightsail์— ๋ฐฐํฌ. crontab์œผ๋กœ ๋งค์ผ ์‹คํ–‰๋˜๋„๋ก ์Šค์ผ€์ค„๋งํ•ด ํฌ๋กค๋ง๋œ ์ฝ˜ํ…์ธ ๋ฅผ ์ผ๊ด„ ํƒœ๊น…
โ—ฆ
OneVsRestClassifier๋ฅผ ์‚ฌ์šฉํ•œ ์„ ํ˜• ๋ถ„๋ฅ˜ ๋ชจ๋ธ๋กœ Multi-Label-Classification ์ž‘์—… ํ›„, fastapi๋กœ ๋นŒ๋“œํ•˜์—ฌ lightsail์— ๋ฐฐํฌ
โ€ข
๊ตฌ๊ธ€ ๋ฐ์ดํ„ฐ ์ŠคํŠœ๋””์˜ค๋กœ DB์™€ ์—ฐ๋™ํ•ด ๋ฆฌ๋ทฐ ๋Œ€๊ธฐ ์ˆ˜ ๋ฐ ๋ฐœํ–‰ ์ˆ˜๋ฅผ ๋ณด๊ณ ์„œ๋กœ ์ž‘์„ฑํ•ด ๋งค์ผ ์Šฌ๋ž™์œผ๋กœ ์•Œ๋ฆผ
โ€ข
๋ฆฌ๋ทฐ๋Œ€๊ธฐ ์ฝ˜ํ…์ธ ๊ฐ€ 2,847๊ฐœ์—์„œ 1๊ฐœ๋กœ ๊ฐ์†Œ
โ€ข
๊ฐœ๋ฐœ ์ฝ˜ํ…์ธ ๋Š” ๋งค์ผ 20๊ฐœ์”ฉ ๋ฐœํ–‰๋˜๋„๋ก ์Šค์ผ€์ค„๋ง

ํ”„๋กœ์ ํŠธ ํ™˜๊ฒฝ, ์ƒ์‚ฐ์„ฑ ๊ฐœ์„ (2021.2)

Github ํ”„๋กœ์ ํŠธ ๊ด€๋ฆฌ ๋ฐ ํด๋ผ์ด์–ธํŠธ ์ตœ์ ํ™” ์ง„ํ–‰
โ€ข
ํด๋ผ์ด์–ธํŠธ์—์„œ ํŠน์ • ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ๊ฐ€ ๋„ˆ๋ฌด ์ปค์„œ ๊ฐ€๋…์„ฑ์ด ๋–จ์–ด์ง€๊ณ  ์ˆ˜์ •์ด ์‰ฝ์ง€ ์•Š์•„ ์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ
โ€ข
ํ™•์žฅํ”„๋กœ๊ทธ๋žจ์˜ ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ๋ฅผ ๊ฐ€๋ณ๊ฒŒ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๋ฒˆ๋“ค์‚ฌ์ด์ฆˆ ์ตœ์ ํ™” ์ง„ํ–‰
โ—ฆ
next-budle-analyzer๋กœ ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ ๋ถ„์„ํ•˜์—ฌ ํฌ๊ธฐ๊ฐ€ ํฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋Œ€์ฒด
โ—ฆ
์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…์œผ๋กœ ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ๊ฐ€ ํฐ ์ƒ์  ํŽ˜์ด์ง€ ๊ฐœ์„ 
โ—ฆ
๋ผ์ดํŠธํ•˜์šฐ์Šค ํผํฌ๋จผ์Šค ์ ์ˆ˜ ์ƒ์Šน, shop ํŽ˜์ด์ง€ ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ 156ํผ์„ผํŠธ ๊ฐ์†Œ
โ—ฆ
์ดํ›„, size-limit ์•ก์…˜์œผ๋กœ ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ ์ฒดํฌ ๋ฐ ์ œํ•œ
โ€ข
sentry ํ”„๋กœ์ ํŠธ์˜ ๊นƒํ—™ ์•ก์…˜ ์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ์ฐธ๊ณ ํ•ด, ๊นƒํ—™ action/cache ์‚ฌ์šฉํ•˜์—ฌ ์•ก์…˜ ์‹คํ–‰ ์‹œ๊ฐ„ ๊ฐ์†Œ
โ€ข
ํŒ€์›๊ณผ ์ƒ์˜ํ•˜์—ฌ gitmoji, PR template ๋“ฑ์„ ํ™œ์šฉํ•ด git commit, merge ์ „๋žต, PR ๋ถ€๋ถ„ ๊ฐœ์„ 
๊ด€๋ จ ํฌ์ŠคํŠธ

์บ์‹œ ์ ๋ฆฝ, ์ฟ ํฐ ๊ตฌ๋งค/์กฐํšŒ/์ทจ์†Œ/์žฌ์ „์†ก API, ํด๋ผ์ด์–ธํŠธ, ์–ด๋“œ๋ฏผ ๊ฐœ๋ฐœ(2020.12 ~ 2021.1)

์ œํœด ์—…์ฒด์ธ KTMHows์˜ ๋ช…์„ธ์„œ๋ฅผ ์ฐธ๊ณ ํ•ด ์ฟ ํฐ ๊ตฌ๋งค,์กฐํšŒ,์ทจ์†Œ,์žฌ์ „์†ก API ๊ฐœ๋ฐœ
โ€ข
์ฟ ํฐ ๋ฆฌ์ŠคํŠธ, ์ƒ์„ธ ์กฐํšŒ ๋ฐ ์ทจ์†Œ, ์žฌ์ „์†ก ๊ด€๋ฆฌ ์–ด๋“œ๋ฏผ ๊ฐœ๋ฐœ
โ€ข
์ฟ ํฐ ๋ฆฌ์ŠคํŠธ, ์ƒ์„ธ ํŽ˜์ด์ง€ ํด๋ผ์ด์–ธํŠธ ๊ฐœ๋ฐœ
โ€ข
ํ™•์žฅํ”„๋กœ๊ทธ๋žจ ๋ฉ”์ธ ํ”ผ๋“œ์—์„œ ๋žœ๋ค์œผ๋กœ ์บ์‹œ๊ฐ€ ๋œจ๋„๋ก ํด๋ผ์ด์–ธํŠธ ๊ฐœ๋ฐœ
โ€ข
์บ์‹œ ์ ๋ฆฝ ์–ด๋ทฐ์ง• ๋ฐฉ์ง€
โ—ฆ
์ ๋ฆฝ ์‹œ ๋ฆฌ์บก์ฐจ(v3) ์ฒดํฌํ•ด ๋ด‡ ํ™œ์šฉํ•œ ์–ด๋ทฐ์ง• ๋ฐฉ์ง€
โ—ฆ
์„œ๋ฒ„์— sentry ์ถ”๊ฐ€ํ•˜์—ฌ ์บ์‹œ ์ ๋ฆฝ ์–ด๋ทฐ์ง•, ์ฟ ํฐ ์ „์†ก ์‹คํŒจ ๋“ฑ ๋ชจ๋‹ˆํ„ฐ๋ง

์‚ฌ๋‚ด ๋‰ด์Šค๋ ˆํ„ฐ ์Šฌ๋ž™๋ด‡ '์„œํ”Œํƒ€์ž„์ฆˆ' ๊ฐœ๋ฐœ(2020.11 ~ 2020.12)

์‚ฌ๋‚ด ์ง์›๋“ค์˜ ์ฝ˜ํ…์ธ  ๊ฒ€์ˆ˜๋ฅผ ์žฅ๋ คํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ์ธ DM์œผ๋กœ ์ผ์ • ์‹œ๊ฐ์— ํฌ์ŠคํŠธ๋ฅผ ๋ณด๋‚ด์ฃผ๋Š” ์Šฌ๋ž™๋ด‡ ๊ฐœ๋ฐœ.
โ€ข
Slack Review Bot API ๊ฐœ๋ฐœ. ์–ด๋“œ๋ฏผ์—์„œ ์Šฌ๋ž™๋ด‡์— ๊ฐ€์ž…ํ•  ์ˆ˜ ์žˆ๋„๋ก Slack OAuth ๊ฐœ๋ฐœ
โ€ข
๋ฆฌ๋ทฐ์–ด์˜ ์„ ํ˜ธ ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ์ง€์ •ํ•ด ๊ฐœ๋ฐœ์ž์—๊ฒŒ๋Š” ๊ฐœ๋ฐœ ์ฝ˜ํ…์ธ , ๊ทธ ์™ธ์˜ ๋ฆฌ๋ทฐ์–ด์—๊ฒŒ๋Š” ํŠธ๋ Œ๋“œ ์ฝ˜ํ…์ธ  ์ „์†ก
โ€ข
์ฝ”๋“œ ๋นŒ๋“œ๋กœ ํฌ๋ก  ์Šค์ผ€์ค„๋Ÿฌ๋ฅผ ์„ค์ •ํ•ด ๊ฐ€์ž…๋œ ๋ฆฌ๋ทฐ์–ด์—๊ฒŒ ๋งค์ผ ํฌ์ŠคํŠธ 3๊ฐœ์”ฉ ์ „์†ก. ์ „์†ก ์‹คํŒจ ์‹œ ์ฑ„๋„์— ์•Œ๋ฆผ

ํด๋ผ์ด์–ธํŠธ ๋‹คํฌ๋ชจ๋“œ ๊ฐœ๋ฐœ(2020.10 ~ 2020.11)

์„œ๋ฒ„์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์—์„œ๋„ ํ™”๋ฉด ๊นœ๋ฐ•์ž„ ์—†์ด ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๋„๋ก ๋‹คํฌ๋ชจ๋“œ ๊ฐœ๋ฐœ
โ€ข
์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์‹คํ–‰๋  ๋•Œ๊นŒ์ง€ HTML ๋ Œ๋”๋ง์ด ์•ˆ๋˜๋Š” ์ ์„ ํ™œ์šฉ, ์ปฌ๋Ÿฌ๋ชจ๋“œ ์„ค์ •ํ•˜๋Š” ์ธ๋ผ์ธ ์Šคํฌ๋ฆฝํŠธ ์ฃผ์ž…
โ€ข
๋‹คํฌ๋ชจ๋“œ, ๋ผ์ดํŠธ๋ชจ๋“œ ์Šคํƒ€์ผ์—๋Š” css variable์„ ์‚ฌ์šฉํ•ด ์ปฌ๋Ÿฌ๋ชจ๋“œ ๋ณ€์ˆ˜๊ฐ€ ๋ฐ”๋€Œ๋ฉด ๋ฐ”๋กœ ํ™”๋ฉด์— ์ ์šฉ

์ฝ˜ํ…์ธ  ์ˆ˜๊ธ‰์„ ์œ„ํ•œ Scraper ๊ฐœ๋ฐœ(2020.10)

โ€ข
ํ•ด์ปคํ†ค์—์„œ ์‚ฌ์šฉํ–ˆ๋˜ og-scraper ๋ฐ cheerio, ์„œ๋น„์Šค API ๋“ฑ์œผ๋กœ ๋„๋ฉ”์ธ ๋ณ„ ์Šคํฌ๋ ˆ์ดํผ ๊ฐœ๋ฐœ
โ€ข
๋ฉ”์‹œ์ง€ํ ๋ฐฉ์‹์œผ๋กœ DB์— ํด๋ง, ํฌ๋กค๋ง๋œ ๋งํฌ๊ฐ€ DB์— ์Œ“์ด๋ฉด ํ•ด๋‹น ๋งํฌ์˜ ํŽ˜์ด์ง€๋ฅผ ์Šคํฌ๋ ˆ์ดํ•‘
โ€ข
cli ์‹คํ–‰์ด ๊ฐ€๋Šฅํ•˜๋„๋ก commander ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ scrape ์ปค๋งจ๋“œ ๊ฐœ๋ฐœ
โ€ข
AWS์˜ lightsail ์ธ์Šคํ„ด์Šค์— pm2๋กœ ์‹คํ–‰ํ•˜์—ฌ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ์ƒ์‹œ ์Šคํฌ๋ ˆ์ดํ•‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ฐœ๋ฐœ
โ€ข
์ผ๋ณ„ ํ‰๊ท  70๊ฐœ์˜ ์ฝ˜ํ…์ธ  ํฌ๋กค๋ง

์„œํ”Œ ํด๋ผ์ด์–ธํŠธ ํ”„๋กœ์ ํŠธ ํ™˜๊ฒฝ ๊ตฌ์ถ• + ํด๋ผ์ด์–ธํŠธ ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ(2020.8 ~ 2020.9)

โ€ข
next.js, material-ui, emotion, apollo client๋กœ ํด๋ผ์ด์–ธํŠธ ํ™˜๊ฒฝ ๊ตฌ์ถ•
โ€ข
release-it์„ ์‚ฌ์šฉํ•œ ๊นƒํ—™ ์•ก์…˜์œผ๋กœ Lighthouse CI, Chrome Extension ๋ฐฐํฌ ์ž๋™ํ™”
โ€ข
์‚ฌ์ด๋“œ๋ฐ”, ํ—ค๋” ์ปดํฌ๋„ŒํŠธ, ๋กœ๊ทธ์ธ ์นด๋“œ, ๊ด€์‹ฌํƒœ๊ทธ ์„ค์ • ๋‹ค์ด์–ผ๋กœ๊ทธ, ์˜คํ”„๋ผ์ธ ํŽ˜์ด์ง€ ๊ฐœ๋ฐœ
โ€ข
๊ด€์‹ฌํƒœ๊ทธ ์„ค์ • ๋‹ค์ด์–ผ๋กœ๊ทธ์—์„œ ์ง์—… ๋ณ„ ์ถ”์ฒœ ํƒœ๊ทธ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋„๋ก API, Client, Admin ๊ฐœ๋ฐœ