profile
๐ŸŽ The journey is the reward.
ํƒœ๊ทธ ๋ชฉ๋ก
์ „์ฒด๋ณด๊ธฐ (71)ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค(3)์•Œ๊ณ ๋ฆฌ์ฆ˜(2)scope(2)React(2)git(2)git-hub(1)JS V8 Engine(1)ํŒจํ„ด(1)session(1)@media , Responsive Design(1)typescript(1)Context api, redux, mobx, swr(1)undefined(1)virtual DOM(1)destructuring assignment(1)๋™๊ธฐ/๋น„๋™๊ธฐ(1)atomic ํŒจํ„ด(1)promise(1)container - presentation(1)SPA vs MPA(1)LazyLoad vs PreLoad(1)Static, Dynamic Routing(1)token, XSS, CSRF(1)Visual Studio Code(1)DNS(1)๋น„๊ต์—ฐ์‚ฐ์ž(1)Throttling & Debouncing(1)REST(1)memoization(1)state prev(1)callback(1)SEO (CSR, SSR, SSG)(1)async-awiat(1)๋ผ์šฐํŒ…(1)Shallow Copy & Deep Copy(1)Shallow Routing(1)HTTPS vs HTTP(1)null(1)js closure(1)Class / Functional Component(1)React Currting(1)useEffect(1)NaN(1)node.js(1)JavaScript(1)VDOM(1)SQL vs NOSQL(1)conditional rendering(1)webpack(1)observable(1)hoisting(1)Import & Export(1)filter, map, every(1)CI/CD(1)template literals(1)TS Generic(1)Optimistic UI(1)docker(1)local storage(1)let const var(1)useRef(1)CSS(1)reduce(1)Rest-API vs GraphQL-API(1)Promise All(1)๋””๋ฐ”์šด์Šค์™€ ์Šค๋กœํ‹€(1)flatten, unflatten(1)HoF(1)React state, props(1)HoC(1)Object.keys(), values(), entries(), assign()(1)github(1)JSX(1)cookie(1)Recursive Functions(1)State Lifting(1)regexp(1)try catch(1)state lifecycle(1)๊ถŒํ•œ๋ถ„๊ธฐ(1)ES6(1)Pagination vs Infinite Scroll(1)
post-thumbnail

nodejs ์„œ๋ฒ„ ์ƒ์„ฑํ•˜๊ธฐ

ํด๋”์™€ ํŒŒ์ผ ์ƒ์„ฑํ•˜์—ฌ ์œ„์™€ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ ,ํ„ฐ๋ฏธ๋„์—์„œ npm init -y ์ž…๋ ฅ

2023๋…„ 2์›” 9์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Container-Presentation ํŒจํ„ด

ํ”„๋กœ์ ํŠธ๊ฐ€ ์ปค์ง€๊ณ  ๊ธฐ๋Šฅ์ด ๋‹ค์–‘ํ•ด์ง€๊ณ  ์ฝ”๋“œ๊ฐ€ ๋Š˜์–ด๋‚ ์ˆ˜๋ก ํ•˜๋‚˜์˜ ํŒŒ์ผ์— ๋ชจ๋“  ์ฝ”๋“œ๋ฅผ ๋‹ด๋Š” ๊ฒƒ์€ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค. ํ”„๋กœ์ ํŠธ์— ๋”ฐ๋ผ์„œ ํด๋”์™€ ํŒŒ์ผ๋“ค์€ ์„ธ๋ถ„ํ™”๋˜๋ฉฐ ๊ตฌ์กฐ๊ฐ€ ๋งค์šฐ ๋ณต์žกํ•ด ์งˆ ์ˆ˜ ์žˆ๋‹ค.์ด๋•Œ ์ฒด๊ณ„์ ์œผ๋กœ ์ •๋ˆ๋œ ํŒŒ์ผ๊ณผ ํด๋”๊ตฌ์กฐ๋Š” ๊ฐ€๋…์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์— ์žˆ์–ด์„œ ๊ต‰์žฅํžˆ ์ค‘์š”ํ•˜๋‹ค.์‹ค๋ฌด

2023๋…„ 1์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Modern React with Redux

๋ฆฌ์•กํŠธ๋ฅผ ์ฒ˜์Œ ์‹œ์ž‘ํ• ๋•Œ,src ํด๋” ๋‚ด์— index.js ํŒŒ์ผ์—์„œ React์™€ ReactDOM ๋‘๊ฐ€์ง€๋ฅผ ๊ฐ€์žฅ ๋จผ์ € import ํ•œ๋‹ค.React : Library that defines what a component is and how multiple components

2023๋…„ 1์›” 1์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—ฐ์Šตํ•˜๊ธฐ

์ฝ”ํ…Œ๋ฅผ ์œ„ํ•˜์—ฌ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์—ฐ์Šตํ•ด๋ณด๊ณ  ์žˆ๋‹ค.์ƒํ’ˆ ๋ชฉ๋ก ๊ทธ๋ฆฌ๊ธฐ ์„ฑ๊ณต!๋ฆฌ์•กํŠธ๊ฐ€ ์–ผ๋งˆ๋‚˜ ํŽธํ•œ์ง€ ์ƒˆ์‚ผ ๋А๋ผ๊ฒŒ ๋˜์—ˆ๋‹ค ^^

2022๋…„ 12์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

RESTful Routing

REST ๋Š” Representational State Transfer ์˜ ์•ฝ์ž์ด๋‹ค.https://www.learnhowtoprogram.com/c-and-net/basic-web-applications/introduction-to-restful-routing

2022๋…„ 11์›” 21์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

[JavaScript] ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ํ’€์ด

๐Ÿ“Œ ์ดํ•ด๊ฐ€ ์•ˆ๋˜๋Š” ๋ฉ”์†Œ๋“œ ๋ฐฉ์‹

2022๋…„ 10์›” 1์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

[JavaScript] ์•Œ๊ณ ๋ฆฌ์ฆ˜ / ์ž์—ฐ์ˆ˜ ๋’ค์ง‘์–ด ๋ฐฐ์—ด๋กœ ๋งŒ๋“ค๊ธฐ

์ž์—ฐ์ˆ˜ ๋’ค์ง‘์–ด ๋ฐฐ์—ด๋กœ ๋งŒ๋“ค๊ธฐ ์ž์—ฐ์ˆ˜ n์„ ๋’ค์ง‘์–ด ๊ฐ ์ž๋ฆฌ ์ˆซ์ž๋ฅผ ์›์†Œ๋กœ ๊ฐ€์ง€๋Š” ๋ฐฐ์—ด ํ˜•ํƒœ๋กœ ๋ฆฌํ„ดํ•ด์ฃผ์„ธ์š”. ์˜ˆ๋ฅผ๋“ค์–ด n์ด 12345์ด๋ฉด [5,4,3,2,1]์„ ๋ฆฌํ„ดํ•ฉ๋‹ˆ๋‹ค. > ๋‚˜์˜ ์ฝ”๋“œ ์ฒ˜์Œ์—” answer์— push ํ•  ๋•Œ Number๋กœ ๋ฐ”๊ฟ”์ฃผ์ง€ ์•Š์•„์„œ ๋ชจ๋‘ ๋ฌธ์ž๋กœ

2022๋…„ 9์›” 30์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

[JavaScript] ์•Œ๊ณ ๋ฆฌ์ฆ˜ / ์ •์ˆ˜ ์ œ๊ณฑ๊ทผ ํŒ๋ณ„

์ž„์˜์˜ ์–‘์˜ ์ •์ˆ˜ n์— ๋Œ€ํ•ด, n์ด ์–ด๋–ค ์–‘์˜ ์ •์ˆ˜ x์˜ ์ œ๊ณฑ์ธ์ง€ ์•„๋‹Œ์ง€ ํŒ๋‹จํ•˜๋ ค ํ•ฉ๋‹ˆ๋‹ค. n์ด ์–‘์˜ ์ •์ˆ˜ x์˜ ์ œ๊ณฑ์ด๋ผ๋ฉด x+1์˜ ์ œ๊ณฑ์„ ๋ฆฌํ„ดํ•˜๊ณ , n์ด ์–‘์˜ ์ •์ˆ˜ x์˜ ์ œ๊ณฑ์ด ์•„๋‹ˆ๋ผ๋ฉด -1์„ ๋ฆฌํ„ดํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์™„์„ฑํ•˜์„ธ์š”.์˜ค๋‹ต์œ„์˜ ๊ฒฐ๊ณผ๋Š” ์•„๋ฌด๋ฆฌ ํ•ด๋„ -1

2022๋…„ 9์›” 30์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

git log ํ›„ ํ™”๋ฉด์„ ๋‚˜๊ฐ€๋ ค๋ฉด?

ํ„ฐ๋ฏธ๋„์—์„œ ์ปค๋ฐ‹ ๋กœ๊ทธ๋ฅผ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด git log๋กœ ๋‚ด์—ญ์„ ํ™•์ธ ํ›„,์ปจํŠธ๋กค ์—˜ ๋˜๋Š” ์ปจํŠธ๋กค ์”จ๋ฅผ ๋ˆŒ๋Ÿฌ๋„ ์ข…๋ฃŒ๋˜์ง€ ์•Š๋Š”๋‹ค. ์ด๋•Œ ๋‚ด์—ญ์„ ํ™•์ธํ–ˆ๋‹ค๋ฉด Qํ‚ค๋ฅผ ๋ˆŒ๋Ÿฌ ๋กœ๊ทธ ํ™”๋ฉด์„ ๋น ์ ธ ๋‚˜์˜ฌ์ˆ˜ ์žˆ๋‹ค ^^

2022๋…„ 9์›” 29์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

CSS 4

static๋•Œ๋ฌธ์— top/left๊ฐ€ ๋จนํžˆ์ง€ ์•Š๋Š”๋‹ค.

2022๋…„ 9์›” 3์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Visual Studio Code ์‹œ์ž‘ํ•˜๊ธฐ

Visual Studio Code๋Š” ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ์—์„œ ๊ฐœ๋ฐœ๋œ Code Editor์ด๋‹ค ์„ค์น˜ : https://code.visualstudio.com/Visual Studio Code๋ฅผ ์„ค์น˜ํ•˜๊ณ  ๋ณธ๊ฒฉ์ ์œผ๋กœ ์ž‘์—…ํ•˜๊ธฐ ์ „ ๋ช‡๊ฐ€์ง€ Extension์„ ์„ธํŒ…์„ ํ•ด์ฃผ๋ฉด ํ›จ

2022๋…„ 8์›” 27์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

JS V8 Engine & Node.js

JS V8 Engine# Javascript ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ฐ์ฒด(object) ๊ธฐ๋ฐ˜์˜ ์Šคํฌ๋ฆฝํŠธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ด๋‹ค. **HTML๋กœ ์›น์˜ ๋‚ด์šฉ์„ ์ž‘์„ฑํ•˜๊ณ , CSS๋กœ ์›น์˜ ์‹œ๊ฐ์ ์ธ ๋ถ€๋ถ„์„ ๋””์ž์ธํ•˜๋ฉฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ๋Š” ์›น์˜ ๊ธฐ๋Šฅ ๋™์ž‘์„ ๊ตฌํ˜„ํ•œ๋‹ค. **

2022๋…„ 8์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

webPack

Webpack์€ ์˜์กด ๊ด€๊ณ„์— ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, CSS, ์ด๋ฏธ์ง€ ๋“ฑ์˜ ๋ฆฌ์†Œ์Šค๋“ค์„ ํ•˜๋‚˜ ๋˜๋Š” ์—ฌ๋Ÿฌ๊ฐœ์˜ ํŒŒ์ผ๋กœ ๋ฒˆ๋“ค๋งํ•˜๋Š” ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ๋‹ค. Webpack์„ ์‚ฌ์šฉํ•˜๋ฉด ์˜์กด ๋ชจ๋“ˆ์ด ํ•˜๋‚˜์˜ ํŒŒ์ผ๋กœ ๋ฒˆ๋“ค๋ง๋˜๋ฏ€๋กœ ๋ณ„๋„์˜ ๋ชจ๋“ˆ ๋กœ๋”๊ฐ€ ํ•„์š”์—†๋‹ค.

2022๋…„ 8์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

Virtual DOM

Virtual DOM

2022๋…„ 8์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

TS Generic

any vs unknownany ํƒ€์ž…์ด๋ž€?โ€™์–ด๋– ํ•œ ๊ฒƒ์ด๋“ ์ง€, ๋ˆ„๊ตฌ๋“ ์ง€โ€™ ๋ผ๋Š” ๋œป์œผ๋กœ, ์–ด๋– ํ•œ ํƒ€์ž…์ด ์ž…๋ ฅ๋˜๋”๋ผ๋„ ์ „๋ถ€ ํ—ˆ์šฉํ•˜๋Š” ํƒ€์ž…์ด๋‹ค. ์š”์†Œ์— any ํƒ€์ž…์„ ๋ถ€์—ฌํ•  ๊ฒฝ์šฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด๋‚˜ ๋งˆ์ฐฌ๊ฐ€์ง€๊ฐ€ ๋œ๋‹ค.unknown ํƒ€์ž…์ด๋ž€?โ€™์•Œ ์ˆ˜ ์—†๋‹ค, ๋ชจ๋ฅธ๋‹คโ€™ ๋ผ

2022๋…„ 8์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

null & undefined

# null ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ null์€ ๋ณ€์ˆ˜์— ๊ฐ’์ด ์—†๋‹ค๋Š” ๊ฒƒ์„ ์˜๋„์ ์œผ๋กœ ๋ช…์‹œ(์˜๋„์  ๋ถ€์žฌ international absence)ํ• ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. ๋ณ€์ˆ˜์— null์„ ํ• ๋‹นํ•˜๋Š” ๊ฒƒ์€ ๋ณ€์ˆ˜๊ฐ€ ์ด์ „์— ์ฐธ์กฐํ•˜๋˜ ๊ฐ’์„ ๋”์ด์ƒ ์ฐธ์กฐํ•˜์ง€ ์•Š๊ฒ ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค. # undefi

2022๋…„ 8์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

let, const, var

JavaScript์—์„œ ๋ณ€์ˆ˜ ์„ ์–ธ ๋ฐฉ์‹์€ ํฌ๊ฒŒ `var`, `let`, `const` ์„ธ๊ฐ€์ง€๋กœ ๋‚˜๋‰œ๋‹ค. # var var๋Š” ๋ณ€์ˆ˜ ์„ ์–ธ์— ์žˆ์–ด์„œ ํฐ ๋‹จ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ๋จผ์ € ์„ ์–ธํ•œ ๋ณ€์ˆ˜๊ฐ€ ์žˆ์–ด๋„ ๋‹ค์‹œ ๋™์ผํ•œ ๋ณ€์ˆ˜๋ช…์œผ๋กœ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ• ์ˆ˜ ์žˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๋˜๋ฉด ์ด์ „์— ์„ ์–ธํ•œ

2022๋…„ 8์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

ES6์˜ ํŠน์ง•

ECMAScript 2015๋Š” JavaScript์˜ ๋‘ ๋ฒˆ์งธ ์ฃผ์š” ๊ฐœ์ •ํŒ์ด๋‹ค. ECMAScript 2015๋Š” ES6 ๋ฐ ECMAScript 6์œผ๋กœ๋„ ์•Œ๋ ค์ ธ ์žˆ๋‹ค.

2022๋…„ 8์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

[JavaScript] ํ• ๋‹น, ๋™๋“ฑ, ๋น„๊ต ์—ฐ์‚ฐ์ž

=, ==, === ์ฐจ์ด์ ์„ ๋น„๊ตํ•ด๋ณด์ž ## ํ• ๋‹น์—ฐ์‚ฐ์ž (=) ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ `=` ๋Š” ์ผ๋ฐ˜ ์ˆ˜ํ•™์—์„œ์˜ ๊ฐ™๋‹ค๋ผ๋Š” ์˜๋ฏธ๊ฐ€ ์•„๋‹ˆ๋ผ ๋ฐ์ดํ„ฐ๋ฅผ ํ• ๋‹นํ•ด์ค€๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.

2022๋…„ 8์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท

CI/CD

CI/CD๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ๋‹จ๊ณ„๋ฅผ ์ž๋™ํ™”ํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋ณด๋‹ค ์งง์€ ์ฃผ๊ธฐ๋กœ ๊ณ ๊ฐ์—๊ฒŒ ์ œ๊ณตํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. CI/CD์˜ ๊ธฐ๋ณธ ๊ฐœ๋…์€ ์ง€์†์ ์ธ ํ†ตํ•ฉ, ์ง€์†์ ์ธ ์„œ๋น„์Šค ์ œ๊ณต, ์ง€์†์ ์ธ ๋ฐฐํฌ์ด๋‹ค.

2022๋…„ 8์›” 26์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท