๐Ÿš€ ๋ธ”๋กœ๊ทธ ์ด์ „ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ธ์ฆ๋ฐฉ์‹: ์ฟ ํ‚ค, ์„ธ์…˜, ํ† ํฐ(JWT)

September 10, 2022

์™œ ๋“ฑ์žฅํ–ˆ์„๊นŒ? HTTP ํ†ต์‹ ์€ ์š”์ฒญ(Request) โ†’ ์‘๋‹ต(Response)์ด ์ข…๋ฃŒ๋˜๋ฉด ์—ฐ๊ฒฐ์„ ๋Š์–ด๋ฒ„๋ฆผ Connectionless(๋น„์—ฐ๊ฒฐ์„ฑ): ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋ฒ„์— ์š”์ฒญ์„ ํ–ˆ์„ ๋•Œ, ์š”์ฒญ์— ๋งž๋Š” ์‘๋‹ต์„ ๋ณด๋‚ธ ํ›„ ์—ฐ๊ฒฐ์„ ๋Š๋Š” ์ฒ˜๋ฆฌ๋ฐฉ์‹ Stateless(๋ฌด์ƒํƒœ์„ฑ): ํด๋ผ์ด์–ธํŠธ์˜ ์ƒํƒœ ์ •๋ณด๋ฅผ ๊ฐ€์ง€์ง€ ์•Š๋Š” ์„œ๋ฒ„ ์ฒ˜๋ฆฌ๋ฐฉ์‹(ํด๋ผ์ด์–ธํŠธ์™€ ์ฒซ ๋ฒˆ์งธ ํ†ต์‹ ์— ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผโ€ฆ


React.js๋Š” ์™œ ์“ธ๊นŒ?

June 20, 2022

React ํŠน์ง• JavaScript Frontend Framework(Library) ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•œ ์„ ์–ธ์ ์ด๊ณ  ํšจ์œจ์ ์ด๋ฉฐ ์œ ์—ฐํ•œ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ โ€œ์ปดํฌ๋„ŒํŠธโ€๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ์ž‘๊ณ  ๊ณ ๋ฆฝ๋œ ์ฝ”๋“œ์˜ ํŒŒํŽธ์„ ์ด์šฉํ•˜์—ฌ ๋ณต์žกํ•œ UI๋ฅผ ๊ตฌ์„ฑํ•˜๋„๋ก ๋•์Šต๋‹ˆ๋‹ค. SPA(Single Page Application) Component ๊ธฐ๋ฐ˜ Virtโ€ฆ


JavaScript ๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ Node.js

May 30, 2022

Node.js๋ž€ chrome์˜ JavaScript ํ•ด์„์—”์ง„ V8๋กœ๋ถ€ํ„ฐ ๊ฐœ๋ฐœ๋œ JavaScript ๋Ÿฐํƒ€์ž„(์‹คํ–‰) ํ™˜๊ฒฝ nvm(node version management) npm(node package management) yarn Node.js๋ฅผ ์“ฐ๋Š” ์ด์œ  non-blocking I/O ์ฝ”๋“œ๊ฐ€ ์งง๊ณ  ์‰ฌ์›€ blocking: ์š”์ฒญ๋ฐ›์€ ํ•จ์ˆ˜ ์ž‘์—…์„ ๋ชจ๋‘ ๋งˆ์ณ์•ผ โ€ฆ


[Git] ๊ธฐ๋ณธ ๋ช…๋ น์–ด๋“ค

May 20, 2022

Clone(ํด๋ก ) ์›๊ฒฉ ์ €์žฅ์†Œ๋ฅผ ๋กœ์ปฌ ์ €์žฅ์†Œ์— ๋ณต์ œ Branch(๋ธŒ๋žœ์น˜) ๋™์‹œ์— ๋‹ค์–‘ํ•œ ์ž‘์—…์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ถ„๋ฆฌ๋œ ์ž‘์—…์˜์—ญ ๋ธŒ๋žœ์น˜ ์ƒ์„ฑ ๋ธŒ๋žœ์น˜ ์‚ญ์ œ Checkout(์ฒดํฌ์•„์›ƒ) ๋ธŒ๋žœ์น˜ ์ „ํ™˜ ๋ธŒ๋žœ์น˜ ์ƒ์„ฑ๊ณผ ์ „ํ™˜ ๋ธŒ๋žœ์น˜ ์กฐํšŒ Commit(์ปค๋ฐ‹) ์ปค๋ฐ‹ ์ถ”๊ฐ€ ์ปค๋ฐ‹ ์ƒํƒœ ์ปค๋ฐ‹ ๋ฉ”์‹œ์ง€ Push(ํ‘ธ์‹œ) ์›๊ฒฉ ์ €์žฅ์†Œ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ์ปฌ ์ €์žฅ์†Œ์— ๊ฐ€์ ธ์™€ ๋ณ‘โ€ฆ


CSR, SSR / SPA, MPA์— ๋Œ€ํ•œ ์ดํ•ด

May 10, 2022

CSR(Client Side Rendering) ์ตœ์ดˆ์— ํ•œ๋ฒˆ ์„œ๋ฒ„์—์„œ ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ๋กœ๋”ฉํ•˜์—ฌ ๋ณด์—ฌ์ฃผ๊ณ , ์ดํ›„์—๋Š” ํด๋ผ์ด์–ธํŠธ์˜ ์š”์ฒญ์ด ์˜ฌ ๋•Œ ๋ฆฌ์†Œ์Šค๋ฅผ ์„œ๋ฒ„์—์„œ ์ œ๊ณตํ•œ ํ›„, ํด๋ผ์ด์–ธํŠธ๊ฐ€ ํ•ด์„ํ•˜๊ณ  ๋ Œ๋”๋งํ•จ ๋ชจ๋“  html๊ณผ static ํŒŒ์ผ์ด ๋กœ๋“œ๋  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ ค์•ผ ํ•จ SEO(๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”)๊ฐ€ ์–ด๋ ค์›€ SSR(Server Side Rendering) ์™„์ „ํ•œ hโ€ฆ


Gatsby ๊ฐœ๋ฐœ๊ธฐ๋ก _github page ๋ฐฐํฌ์„ค์ •

May 01, 2022

๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ๋กœ Gatsby๋ฅผ ์„ ํƒํ•œ ํ›„, ์„œ๋ฒ„ ๋ฐฐํฌ์— ๋Œ€ํ•ด ๊ณ ๋ฏผํ•˜๋‹ค github-page๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฐฐํฌํ•˜๊ธฐ๋กœ ํ•˜์˜€์Šต๋‹ˆ๋‹ค. github์™€ ์—ฐ๋™์ด ๋˜๋ฉฐ ์‚ฌ์šฉ๋ฒ•์ด ์–ด๋ ต์ง€ ์•Š๋‹ค๋Š” ์žฅ์ ์œผ๋กœ ์„ ํƒํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. 1. github-page repository ์ƒ์„ฑ repository name:  2. gatsby template ์„ ํƒ gatsby templateโ€ฆ


๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ์— Gatsby๋ฅผ ์‚ฌ์šฉํ•œ ์ด์œ 

April 30, 2022

Gatsby๋Š” JAM Stack์„ ํ™œ์šฉํ•œ ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ ํ”„๋ ˆ์ž„์›Œํฌ JAM Stack? : JavaScript : API : Markup JavaScript, API, HTML์ด๋‚˜ CSS ๋“ฑ์„ ์นญํ•˜๋Š” MarkUp์œผ๋กœ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์„ฑํ•˜๋Š” ์Šคํƒ Jamstack is an architecture designed to make the web fasteโ€ฆ


HTML, DOM ์ฐจ์ด

April 20, 2022

HTML์ด๋ž€ HTML(HyperText Markup Language)์€ ์›น์„ ์ด๋ฃจ๋Š” ๊ฐ€์žฅ ๊ธฐ์ดˆ์ ์ธ ๊ตฌ์„ฑ ์š”์†Œ๋กœ, ์›น ์ฝ˜ํ…์ธ ์˜ ์˜๋ฏธ์™€ ๊ตฌ์กฐ๋ฅผ ์ •์˜ํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. HTML ์ด์™ธ์˜ ๋‹ค๋ฅธ ๊ธฐ์ˆ ์€ ์ผ๋ฐ˜์ ์œผ๋กœ ์›น ํŽ˜์ด์ง€์˜ ๋ชจ์–‘/ํ‘œํ˜„ (CSS), ๋˜๋Š” ๊ธฐ๋Šฅ/๋™์ž‘ (JavaScript)์„ ์„ค๋ช…ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋œ๋‹ค. DOM์ด๋ž€ โ€œDocument(HTML)์— ์ ‘๊ทผํ•ด์„œ, Obโ€ฆ


JavaScript ์—”์ง„(V8, Spider Monkey)

April 10, 2022

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ž€ โ€˜์›นํŽ˜์ด์ง€(HTML)์— ์ƒ๋™๊ฐ์„ ๋ถˆ์–ด๋„ฃ๊ธฐ ์œ„ํ•ดโ€™ ๋งŒ๋“ค์–ด์ง„ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ์˜ค๋Š˜๋‚  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์—์„œ ๊ฐ€์žฅ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ์–ธ์–ด์ด๋ฉฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ธŒ๋ผ์šฐ์ €๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์„œ๋ฒ„์—์„œ๋„ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์™ธ์—๋„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„(JavaScript engine)์ด๋ผ ๋ถˆ๋ฆฌ๋Š” ํŠน๋ณ„ํ•œ ํ”„๋กœ๊ทธ๋žจ์ด ๋“ค์–ด ์žˆ๋Š” ๋ชจ๋“  ๋””๋ฐ”์ด์Šค์—์„œ๋„ ๋™์ž‘โ€ฆ


์›น ๋ธŒ๋ผ์šฐ์ € ๋™์ž‘์›๋ฆฌ, http๋ž€?

April 03, 2022

1. ์›น ๋ธŒ๋ผ์šฐ์ € ๋™์ž‘์›๋ฆฌ ์ž…๋ ฅํ•œ ์‚ฌ์ดํŠธ์˜ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ index.html์„ ๊ฐ€์ ธ์˜ค๋ฉฐ html ํŒŒ์ผ์— ์ข…์†๋œ ํŒŒ์ผ(js, css, image ๋“ฑ)์„ ๋งŒ๋‚  ๋•Œ๋งˆ๋‹ค ์„œ๋ฒ„๋กœ ๋ฅผ ๋ณด๋‚ด ๋ฐ›์•„์˜จ๋‹ค. ์›น ํด๋ผ์ด์–ธํŠธ ํ•„์š”ํ•œ ํŒŒ์ผ๋“ค(html,js,css...)์„ ๋‹ค์šด๋ฐ›์•„ ํ•ด์„(๋ Œ๋”๋ง)ํ•˜์—ฌ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ฃผ๋Š” ํ”„๋กœ๊ทธ๋žจ(๋ธŒ๋ผ์šฐ์ €) ์›น ์„œ๋ฒ„ ํด๋ผ์ด์–ธํŠธ์˜ ์š”์ฒญ(url)์— ๋”ฐ๋ผ โ€ฆ