shion-log
๐Ÿ“‚ Categories
๐Ÿท๏ธ Tags โ–พ
๐Ÿ’ป Profile
profile_image
Shion
frontend developer
๋ฐ์ดํ„ฐ๋กœ ๋” ๋‚˜์€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์„ค๊ณ„ํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž
๐Ÿ”Ž Search
๐Ÿ“‚ All Posts
๐Ÿ’ป Dev

GitHub Actions์™€ ํ…Œ์ŠคํŠธ ๊ธฐ๋ฐ˜ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์ถ•๊ธฐ

2025๋…„ 7์›” 13์ผ

CI/CD
๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป Project

์™œ Next.js์—์„œ Kakao Map Script๊ฐ€ ๋กœ๋“œ๋˜์ง€ ์•Š์„๊นŒ?

2025๋…„ 7์›” 9์ผ

Redux Store์™€ Script strategy ์†์„ฑ์œผ๋กœ window.kakao.maps ํƒ€์ž… ์—๋Ÿฌ ํ•ด๊ฒฐ ๊ณผ์ •

Redux
Next.js
KakaoMap
๐Ÿ’ป Dev

JavaScript ๋ชจ๋“ˆ ์‹œ์Šคํ…œ๊ณผ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €, ๊ทธ๋ฆฌ๊ณ  Yarn PnP ํ™˜๊ฒฝ ๊ตฌ์„ฑ๊ธฐ

2025๋…„ 5์›” 5์ผ

๋ชจ๋“ˆ ์‹œ์Šคํ…œ ์ดํ•ด๋ถ€ํ„ฐ Yarn PnP ๊ธฐ๋ฐ˜ ๋ชจ๋…ธ๋ ˆํฌ ํ™˜๊ฒฝ ๊ตฌ์„ฑ ๋ฐ ๋ชจ๋“ˆ ๊ฒฝ๋กœ ๋ฌธ์ œ ํ•ด๊ฒฐ๊นŒ์ง€ ์ •๋ฆฌ

Module
TypeScript
React
Webpack
JavaScript
PnP
CommonJS
ES Module
Monorepo
๐Ÿ’ป Dev

JavaScript ๋ชจ๋“ˆ ์‹œ์Šคํ…œ๊ณผ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ €

2025๋…„ 5์›” 2์ผ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ชจ๋“ˆ ์‹œ์Šคํ…œ ์—ญ์‚ฌ์™€ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ € ์ด๋ก  ์ •๋ฆฌ

JavaScript
CommonJS
Closure
Scope
๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป Project

FormData๋ฅผ ์ด์šฉํ•œ ํŒŒ์ผ ์—…๋กœ๋“œ ๊ธฐ๋Šฅ ๊ตฌํ˜„๊ธฐ

2025๋…„ 4์›” 28์ผ

FormData ๊ธฐ๋ฐ˜ ํŒŒ์ผ ์ฒ˜๋ฆฌ, ๋‹ค๊ตญ์–ด ํŒŒ์ผ๋ช… ๋Œ€์‘, ๋‹ค์ค‘ ํŒŒ์ผ ์—…๋กœ๋“œ ๋ฐ Strict Mode ๋Œ€์‘ ๋“ฑ ์‹ค์ œ ์„œ๋น„์Šค ํ’ˆ์งˆ์„ ๋†’์ด๊ธฐ ์œ„ํ•œ ๊ฐœ์„  ์ž‘์—…

React
axios
๐Ÿ’ป Dev
์ „์—ญ ์ƒํƒœ์™€ render prop์œผ๋กœ ํ•ด๊ฒฐํ•œ ๋ชจ๋‹ฌ ๋ฆฌํŒฉํ† ๋ง ๊ณผ์ •

์ „์—ญ ์ƒํƒœ์™€ render prop์œผ๋กœ ํ•ด๊ฒฐํ•œ ๋ชจ๋‹ฌ ๋ฆฌํŒฉํ† ๋ง ๊ณผ์ •

2025๋…„ 4์›” 21์ผ

๋„๋ฉ”์ธ๋งˆ๋‹ค ์ œ๊ฐ๊ฐ์ด๋˜ ๋ชจ๋‹ฌ ๊ตฌ์กฐ๋ฅผ ์ •๋ฆฌํ•œ ๋ฆฌํŒฉํ† ๋ง ๊ธฐ๋ก

React
Recoil
๐ŸŒ Web

๋ธŒ๋ผ์šฐ์ €๋ž€

2025๋…„ 3์›” 14์ผ

๋ธŒ๋ผ์šฐ์ €๋ž€ ๋ฌด์—‡์ด๊ณ , ์ธํ„ฐ๋„ท์— ์กด์žฌํ•˜๋Š” ๋ฐฉ๋Œ€ํ•œ ์ •๋ณด ์† ์‚ฌ์šฉ์ž๋Š” ์–ด๋–ป๊ฒŒ ์›ํ•˜๋Š” ์ •๋ณด๋ฅผ ์ฐพ์•„๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ฑธ๊นŒ

๐ŸŒ Web

์™œ ์šฐ๋ฆฌ๋Š” ๋” ์ด์ƒ jQuery๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๊ฐ€

2025๋…„ 3์›” 14์ผ

์‹ค์ œ DOM์— ์ง์ ‘ ์ ‘๊ทผํ•˜์ง€ ์•Š๊ณ  ์ตœ์†Œํ•œ์œผ๋กœ ์‹ค์ œ DOM์— ๋ฐ˜์˜ํ•ด ๋ถˆํ•„์š”ํ•œ Reflow/Repaint๋ฅผ ์ค„์ด๊ณ  ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•˜๋Š” ๋ฐฉ๋ฒ•

๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป Project
์‹ค์ œ ๋ฐ์ดํ„ฐ ๊ธฐ๋ฐ˜ ApexCharts ์ฐจํŠธ ๊ตฌํ˜„ ๊ธฐ๋ก

์‹ค์ œ ๋ฐ์ดํ„ฐ ๊ธฐ๋ฐ˜ ApexCharts ์ฐจํŠธ ๊ตฌํ˜„ ๊ธฐ๋ก

2025๋…„ 3์›” 5์ผ

apexCharts
Dashboard
๐Ÿ’ป Dev
๋ฐ์ดํ„ฐ ํ•„ํ„ฐ๋ง ๋กœ์ง, ์–ด๋””์„œ ์ฒ˜๋ฆฌํ•˜๋Š”๊ฒŒ ์ข‹์„๊นŒ?

๋ฐ์ดํ„ฐ ํ•„ํ„ฐ๋ง ๋กœ์ง, ์–ด๋””์„œ ์ฒ˜๋ฆฌํ•˜๋Š”๊ฒŒ ์ข‹์„๊นŒ?

2025๋…„ 1์›” 7์ผ

๊ณต์ง€์‚ฌํ•ญ ๋กœ๋”ฉ ์ด์Šˆ๋ฅผ ๊ณ„๊ธฐ๋กœ ํด๋ผ์ด์–ธํŠธ vs ์„œ๋ฒ„ ํ•„ํ„ฐ๋ง์˜ ์žฅ๋‹จ์ ์„ ๋น„๊ตํ•˜๊ณ , ์„œ๋ฒ„ ํ•„ํ„ฐ๋ง์ด ์ผ๋ฐ˜์ ์œผ๋กœ ๋” ์ ํ•ฉํ•œ ์ด์œ ๋ฅผ ์ •๋ฆฌํ•จ

Daily
React
TypeScript
React Query
Filtering
๐Ÿ’ป Dev
React ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง๊ณผ ์ƒํƒœ ์ดˆ๊ธฐํ™”: ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ๋ช…์ฃผ๊ธฐ๋ฅผ ์ดํ•ดํ•˜๋‹ค

React ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง๊ณผ ์ƒํƒœ ์ดˆ๊ธฐํ™”: ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ๋ช…์ฃผ๊ธฐ๋ฅผ ์ดํ•ดํ•˜๋‹ค

2024๋…„ 12์›” 17์ผ

์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์„ ํ™œ์šฉํ•ด ๋ชจ๋‹ฌ ์žฌ์˜คํ”ˆ ์‹œ ์ดˆ๊ธฐํ™” ๋ฌธ์ œ ํ•ด๊ฒฐ

React
useForm
Recoil
useModal
๐Ÿ’ป Dev
๋ชจ๋‹ฌ ๋‚ด๋ถ€ ๊ฐ’ ์ดˆ๊ธฐํ™”๊ฐ€ ๋˜์ง€ ์•Š๋Š” ์ด์œ , ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์œผ๋กœ ํ•ด๊ฒฐํ•˜๋‹ค

๋ชจ๋‹ฌ ๋‚ด๋ถ€ ๊ฐ’ ์ดˆ๊ธฐํ™”๊ฐ€ ๋˜์ง€ ์•Š๋Š” ์ด์œ , ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์œผ๋กœ ํ•ด๊ฒฐํ•˜๋‹ค

2024๋…„ 12์›” 16์ผ

Rendered more hooks than during the previous render ์—๋Ÿฌ ํ•ด๊ฒฐ ๊ณผ์ •

React
๐Ÿ’ป Dev
์„œ๋ฒ„ ํ†ต์‹  ๊ด€๋ฆฌ ๋„๊ตฌ React Query์— ๋Œ€ํ•ด ๊ฐ–๊ณ  ์žˆ๋˜ ์˜คํ•ด

์„œ๋ฒ„ ํ†ต์‹  ๊ด€๋ฆฌ ๋„๊ตฌ React Query์— ๋Œ€ํ•ด ๊ฐ–๊ณ  ์žˆ๋˜ ์˜คํ•ด

2024๋…„ 12์›” 13์ผ

์บ์‹ฑ ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ๋ถˆํ•„์š”ํ•œ API ์š”์ฒญ์„ ์ค„์ด๊ณ  ๋ฐ์ดํ„ฐ ๋™๊ธฐํ™”๋ฅผ ์ž๋™ํ™”ํ•˜์—ฌ ๊ฐœ๋ฐœ ํšจ์œจ์„ฑ์„ ๋†’์—ฌ์ฃผ๋Š” React Query

React
React Query
๐Ÿ’ป Dev
Git Cherry Pick์œผ๋กœ ์ปค๋ฐ‹ ๋‚ด์—ญ ๋ณต์‚ฌํ•˜๊ธฐ

Git Cherry Pick์œผ๋กœ ์ปค๋ฐ‹ ๋‚ด์—ญ ๋ณต์‚ฌํ•˜๊ธฐ

2024๋…„ 12์›” 12์ผ

์ž˜๋ชป๋œ ๋ธŒ๋žœ์น˜์—์„œ ์ž‘์—…ํ•˜๊ณ  ์žˆ๋Š” ๊ฑธ ์•Œ์•˜๋‹ค๋ฉดโ€ฆ

Git
๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป Project
์‚ฌ์†Œํ•œ ๋ณ€์ˆ˜๋ช… ๋ณ€๊ฒฝ์ด ๋ถˆ๋Ÿฌ์˜จ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„์˜ ์›์น™

์‚ฌ์†Œํ•œ ๋ณ€์ˆ˜๋ช… ๋ณ€๊ฒฝ์ด ๋ถˆ๋Ÿฌ์˜จ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„์˜ ์›์น™

2024๋…„ 12์›” 10์ผ

Blog
๐Ÿ’ป Dev
ํ”„๋กญ ๋“œ๋ฆด๋ง(Props Drilling)์€ ์ง€์–‘ํ•ด์•ผ ํ•˜๋Š”๊ฐ€?

ํ”„๋กญ ๋“œ๋ฆด๋ง(Props Drilling)์€ ์ง€์–‘ํ•ด์•ผ ํ•˜๋Š”๊ฐ€?

2024๋…„ 11์›” 19์ผ

๐ŸŽจ UI/UX
๋ฝ์ปค ๊ทธ๋ฆฌ๋“œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ฐ ์Šคํƒ€์ผ๋ง ๊ฐœ์„  โ€“ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค๊ธฐ (Part 3)

๋ฝ์ปค ๊ทธ๋ฆฌ๋“œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ฐ ์Šคํƒ€์ผ๋ง ๊ฐœ์„  โ€“ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค๊ธฐ (Part 3)

2024๋…„ 6์›” 17์ผ

๋ฝ์ปค Part3. ์ง€๋‚œ ๋ฝ์ปค ๊ธฐ๋Šฅ๋„ ๋ณต์Šตํ•ด๋ณด์ž

Recoil
Atom
axios
React Query
React
๐ŸŽจ UI/UX
๋ฝ์ปค ๊ทธ๋ฃน ๋ฐ ๋ฝ์ปค๋ฃธ ํ•„ํ„ฐ๋ง โ€“ ์ง€์ ๋ณ„ ์กฐ๊ฑด ๋ Œ๋”๋ง ๋กœ์ง (Part 2)

๋ฝ์ปค ๊ทธ๋ฃน ๋ฐ ๋ฝ์ปค๋ฃธ ํ•„ํ„ฐ๋ง โ€“ ์ง€์ ๋ณ„ ์กฐ๊ฑด ๋ Œ๋”๋ง ๋กœ์ง (Part 2)

2024๋…„ 6์›” 12์ผ

๋ฝ์ปค Part2. ์ง€์ ๋ณ„ ๋ฝ์ปค ๊ทธ๋ฃน ๋ชฉ๋ก๊ณผ ์„ ํƒํ•œ ๊ทธ๋ฃน์˜ ๋ฝ์ปค๋ฃธ ๋ณด์—ฌ์ฃผ๊ธฐ

Recoil
Atom
axios
React Query
React
๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป Project
๋ฝ์ปค ๊ทธ๋ฃน ์ƒ์„ฑํ•˜๊ธฐ โ€“ ์œ ๋™์ ์ธ ๋ฐฐ์น˜๋„ ๊ตฌ์กฐ ์„ค๊ณ„ (Part 1)

๋ฝ์ปค ๊ทธ๋ฃน ์ƒ์„ฑํ•˜๊ธฐ โ€“ ์œ ๋™์ ์ธ ๋ฐฐ์น˜๋„ ๊ตฌ์กฐ ์„ค๊ณ„ (Part 1)

2024๋…„ 6์›” 9์ผ

์‚ฌ์šฉ์ž ์ •์˜ ๋ฐฐ์น˜ ๊ธฐ๋ฐ˜ ๋ฝ์ปค ๊ทธ๋ฃน ์ƒ์„ฑ ๊ธฐ๋Šฅ ๊ตฌํ˜„

Recoil
React Query
React
๐ŸŽจ UI/UX
์นดํ…Œ๊ณ ๋ฆฌ์™€ ์ƒํƒœ์— ๋”ฐ๋ฅธ ์ƒ‰์ƒ ๊ด€๋ฆฌ ๋กœ์ง ์ •๋ฆฌ

์นดํ…Œ๊ณ ๋ฆฌ์™€ ์ƒํƒœ์— ๋”ฐ๋ฅธ ์ƒ‰์ƒ ๊ด€๋ฆฌ ๋กœ์ง ์ •๋ฆฌ

2024๋…„ 5์›” 29์ผ

์นดํ…Œ๊ณ ๋ฆฌ์™€ ์ƒํƒœ์— ๋”ฐ๋ฅธ ์ƒ‰์ƒ ์ฝ”๋“œ๋ฅผ theme ๊ธฐ๋ฐ˜์œผ๋กœ ๊ด€๋ฆฌ

React
styled-components
๐ŸŒ Web
์„œ๋ฒ„์™€์˜ ํ†ต์‹  ํ๋ฆ„ ์ •๋ฆฌ: HTTP ์š”์ฒญ๋ถ€ํ„ฐ React Query ์ ์šฉ๊นŒ์ง€

์„œ๋ฒ„์™€์˜ ํ†ต์‹  ํ๋ฆ„ ์ •๋ฆฌ: HTTP ์š”์ฒญ๋ถ€ํ„ฐ React Query ์ ์šฉ๊นŒ์ง€

2024๋…„ 5์›” 28์ผ

React Query๋ฅผ ๋„์ž…ํ•˜์—ฌ HTTP ์š”์ฒญ๊ณผ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ํ†ตํ•ฉํ•œ ๊ตฌ์กฐ๋กœ ๊ฐœ์„ ํ•œ ๊ณผ์ •

axios
React Query
HTTP
useQuery
useMutation
API
๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป Project
ApexCharts ๊ธฐ๋ฐ˜ ๋Œ€์‹œ๋ณด๋“œ ์ฐจํŠธ ๊ตฌ์„ฑ ๊ธฐ๋ก

ApexCharts ๊ธฐ๋ฐ˜ ๋Œ€์‹œ๋ณด๋“œ ์ฐจํŠธ ๊ตฌ์„ฑ ๊ธฐ๋ก

2024๋…„ 5์›” 26์ผ

์‹ค์ œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ApexCharts ์ฐจํŠธ ๊ตฌํ˜„

Project
apexCharts
๐Ÿ’ป Dev
Create React App ๋Œ€์‹  Vite๋ฅผ ์„ ํƒํ•œ ์ด์œ ์™€ ํ™˜๊ฒฝ ๊ตฌ์„ฑ ๊ธฐ๋ก

Create React App ๋Œ€์‹  Vite๋ฅผ ์„ ํƒํ•œ ์ด์œ ์™€ ํ™˜๊ฒฝ ๊ตฌ์„ฑ ๊ธฐ๋ก

2024๋…„ 1์›” 19์ผ

CRA ๋Œ€์‹  Vite๋กœ ํ”„๋กœ์ ํŠธ ์ดˆ๊ธฐํ™” ๋ฐ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์„ฑ

ESLint
Prettier
tsconfig
Vite
React
TypeScript
vite-tsconfig-paths
๐Ÿ’ป Profile
Shion
frontend developer
๋ฐ์ดํ„ฐ๋กœ ๋” ๋‚˜์€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์„ค๊ณ„ํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž
๐Ÿ’ฌ Contact
github
email
linkedin