์ „์ฒด ๊ธ€ 16

Ch3. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ๊ณผ ์‹คํ–‰ ๋ฐฉ๋ฒ•

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰ ํ™˜๊ฒฝ 1. ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝHTML, CSS, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ์›นํŽ˜์ด์ง€๋ฅผ ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ๋ Œ๋”๋ง → DOM API ์ œ๊ณต (HTML ์š”์†Œ๋ฅผ ์„ ํƒํ•˜๊ฑฐ๋‚˜ ์กฐ์ž‘ํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ)→ ํŒŒ์ผ ์‹œ์Šคํ…œ ์ œ๊ณตX (Web API FileReader๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ง€์ •ํ•œ ํŒŒ์ผ์„ ์ฝ์–ด ๋“ค์ด๋Š” ๊ฒƒ์€ ๊ฐ€๋Šฅ)โ—๏ธ๋ธŒ๋ผ์šฐ์ €๋ฅผ ํ†ตํ•ด ๋‹ค์šด๋กœ๋“œ๋˜์–ด ์‹คํ–‰๋˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์‚ฌ์šฉ์ž ์ปดใ…ํ„ฐ์˜ ๋กœ์ปฌ ํŒŒ์ผ์„ ์‚ญ์ œํ•˜๊ฑฐ๋‚˜ ์ˆ˜์ •ํ•˜๊ณ  ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์œผ๋ฉด ์•…์„ฑ ์ฝ”๋“œ์— ๊ทธ๋Œ€๋กœ ๋…ธ์ถœ๋œ ๊ฒƒ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€์ด๊ธฐ ๋•Œ๋ฌธ์— ํŒŒ์ผ ์‹œ์Šคํ…œ์ด ์—†๋‹ค.ECMAScript์™€ DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker ๊ฐ™์€ ํด..

Ch2. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ž€?

๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์˜ ํ‘œ์ค€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด 1995๋…„, ์›น ๋ธŒ๋ผ์šฐ์ € ์‹œ์žฅ์„ ์ง€๋ฐฐํ•˜๊ณ  ์žˆ๋˜ ๋„ท์Šค์ผ€์ดํ”„ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ฆˆ๋Š” ์›นํŽ˜์ด์ง€์˜ ๋ณด์กฐ์ ์ธ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•˜๋Š” ๊ฒฝ๋Ÿ‰ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋ฅผ ๋„์ž…ํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๊ณ , ๊ทธ๊ฒƒ์ด ๋ธŒ๋žœ๋˜ ์•„์ดํฌ๊ฐ€ ๊ฐœ๋ฐœํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์ด๋‹ค. 1996๋…„ 3์›”, ๋„ท์Šค์ผ€์ดํ”„ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ฆˆ์˜ ์›น ๋ถ€๋ผ์šฐ์ €์ธ ๋„ท์Šค์ผ€์ดํ”„ ๋‚ด๋น„๊ฒŒ์ดํ„ฐ2์— ํƒ‘์žฌ๋˜์—ˆ๊ณ  ๋ชจ์นด๋กœ ๋ช…๋ช…๋ฌ๋‹ค. 1996๋…„ 8์›”, ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ƒ ๋ฒ„์ „์ธ JScript๋ฅผ ์ถœ์‹œํ•˜๊ณ  ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ์–ด 3.0์— ํƒ‘์žฌํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋„ท์Šค์ผ€์ดํ”„ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์ฆˆ์™€ ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ๋Š” ์ž์‚ฌ ๋ธŒ๋ผ์šฐ์ €์˜ ์‹œ์žฅ ์ ์œ ์œจ์„ ๋†’์ด๊ธฐ ์œ„ํ•ด ์ž์‚ฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋งŒ ๋™์ž‘ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ฒฝ์Ÿ์ ์œผ๋กœ ์ถ”๊ฐ€ํ•˜๊ธฐ ์‹œ์ž‘ํ•˜์—ฌ JScript์™€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ํ‘œ์ค€ํ™”๋˜์ง€ ๋ชปํ•˜๊ณ  ์ ๋‹น..

Ch1. ํ”„๋กœ๊ทธ๋ž˜๋ฐ

ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋ž€ ์ผ์ข…์˜ ์ปดํ“จํ„ฐ์™€์˜ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ์ปดํ“จํ„ฐ๋Š” 0๊ณผ 1๋ฐ–์— ์•Œ์ง€ ๋ชปํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ์šฐ๋ฆฌ๋Š” ์ปดํ“จํ„ฐ๊ฐ€ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์„ ์ •๋„๋กœ ์ •ํ™•ํ•˜๊ณ  ์ƒ์„ธํ•œ ์š”๊ตฌ์‚ฌํ•ญ์„ ์„ค๋ช…ํ•ด์•ผ ํ•˜๋Š” ์ž‘์—…์ด ํ•„์š”ํ•˜๋‹ค. ์ด ์ž‘์—…์ด ์ปดํ“จํ„ฐ์™€์˜ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜, ์ฆ‰ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ปดํ“จํ„ฐ์˜ ์ž…์žฅ์—์„œ ๋ฌธ์ œ๋ฅผ ๋ฐ”๋ผ๋ด์•ผ ํ•œ๋‹ค. ์ด ๋ฌธ์ œ๋ฅผ ๋ฐ”๋ผ๋ณผ ๋•Œ ํ•„์š”ํ•œ ์‚ฌ๊ณ ๊ฐ€ Computational Thinking(์ปดํ“จํŒ… ์‚ฌ๊ณ )์ด๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์šฐ๋ฆฌ๋Š” "๋“ฃ๋‹ค" ๋˜๋Š” "ํฌ๋‹ค"์™€ "์ž‘๋‹ค"๋ผ๋Š” ํ–‰๋™์ด๋‚˜ ์ƒ๋Œ€์ ์ธ ๋น„๊ต๋ฅผ ๋‹น์—ฐํ•˜๊ฒŒ ๋ฐ›์•„๋“ค์ธ๋‹ค. ํ•˜์ง€๋งŒ ์ปดํ“จํ„ฐ๋Š” ๋ฐ›์•„๋“ค์ด์ง€ ๋ชปํ•˜์—ฌ "๋“ฃ๋‹ค" ๋˜๋Š” "ํฌ๋‹ค"์™€ "์ž‘๋‹ค"๋ฅผ ์ •ํ™•ํ•œ ์ˆ˜์น˜๋กœ ํ‘œํ˜„ํ•˜๊ณ  ์•Œ๋ ค์ค˜์•ผ ํ•œ๋‹ค. ๋‹ค์Œ ์‚ฌ์ง„์€ "๊ฑท๋‹ค"๋ผ๋Š” ๊ฒƒ์„ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํ•  ๋•Œ ์„ค๊ณ„ํ•œ ๊ฒƒ์ด๋‹ค. ์ฆ‰, "๊ฑท๋‹ค", "๋“ฃ๋‹ค", "..

Recoil Getting Starting

React ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ƒํƒœ(State) React์—์„œ ์ƒํƒœ(State)๋Š” ์ปดํฌ๋„ŒํŠธ ์•ˆ์—์„œ ๋™์ ์œผ๋กœ ๋ณ€ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์˜๋ฏธํ•œ๋‹ค. ๋ณ€์ˆ˜, ๊ฐ์ฒด, ํ•จ์ˆ˜ ๋“ฑ ์ด๋Ÿฐ ๊ฒƒ๋“ค์ด ์ƒํƒœ๊ฐ€ ๋œ๋‹ค.์˜ˆ๋ฅผ ๋“ค์–ด, ํ•จ์ˆ˜ ๊ฐ™์€ ๊ฒฝ์šฐ์—๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•  ๋•Œ๋งˆ๋‹ค ํ•˜๋‚˜์˜ ๋ณ€์ˆ˜์ธ ์ˆซ์ž๋ฅผ ์ฆ๊ฐ€์‹œํ‚ค๋Š” ๊ธฐ๋Šฅ์ด ๋‹ด๊ฒจ์žˆ๋Š” ํ•จ์ˆ˜๊ฐ€ ์žˆ๋‹ค๋ฉด ๊ทธ ํ•จ์ˆ˜๋Š” ์ƒํƒœ๊ฐ€ ๋œ๋‹ค. ์ƒํƒœ๊ด€๋ฆฌ ์ด์œ  ์ž‘์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ๋Š” ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์€ ๊ฐ„๋‹จํ•˜๋‹ค. ๋Œ€ํ‘œ์ ์œผ๋กœ useState๊ฐ€ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์ปค์ง€๊ณ  ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ƒํ˜ธ์ž‘์šฉํ•  ๋•Œ, ์ƒํƒœ ๊ด€๋ฆฌ๋Š” ์ ์  ๋ณต์žกํ•ด์ง‘๋‹ˆ๋‹ค. ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ์— useState๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์—†๊ณ  props๋กœ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์—๋„ ํ•œ๊ณ„๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์‚ฌ์šฉ์ž ์ •๋ณด์— ๋Œ€ํ•œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋‹ด๊ฒจ์žˆ๋Š” ์ƒํƒœ..

Recoil 2024.07.04

[์„ธ ๋ฒˆ์งธ ์Šคํ”„๋ฆฐํŠธ]5. ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ดˆ: React + TypeScript (11์ฃผ์ฐจ)

๐Ÿ˜‰   ํƒ€์ž…์Šคํฌ๋ฆฝํŠธํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ์™œ ํ•„์š”ํ•œ๊ฐ€์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๊ฐ€ ๋„ˆ๋ฌด ์ง€์ €๋ถ„ํ•˜๋‹ค์ฝ”๋“œ์˜ ์Šค์ผ€์ผ์ด ์ปค์ง€๋ฉด์„œ ์ฝ”๋“œ ๊ด€๋ฆฌ๊ฐ€ ๋˜์ง€ ์•Š๋Š”๋‹คํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์€ ์ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ฐ˜๋ณด๋‹ค ๋ฒ„๊ทธ๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์‰ฝ๋‹ค๊ฐ•๋ ฅํ•œ ๋†’์€ ํ€„๋ฆฌํ‹ฐ์˜ ์ฝ”๋“œ๋ฅผ ์ƒ์‚ฐํ•  ์ˆ˜ ์žˆ๋‹คํƒ€์ž…์Šคํฌ๋ฆฝํŠธ = ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ + ํƒ€์ž…์ฒดํฌํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํ™˜๊ฒฝ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ฝ”๋”ฉํ•˜๋ฉด ๋™์ž‘ํ•จ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ™˜๊ฒฝ์— ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ฝ”๋”ฉํ•˜๋ฉด ๋™์ž‘์•ˆํ•จ npm i -g typescript -> node.js ์„ค์น˜ ํ›„tsc ๋ช…๋ น์–ด ์‚ฌ์šฉ ๊ฐ€๋Šฅtsc app.tstsc --init -> tsconfig.jsontsc -w app.ts (w : watch) ํƒ€์ž… ์ถ”๋ก (Type Inference) ๊ธฐ๋Šฅํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” ํƒ€์ž… ์ถ”๋ก  ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ๋ณ€์ˆ˜์˜ ํƒ€์ž…์„ ์ž๋™์œผ๋กœ ํŒ๋‹จํ•  ์ˆ˜ ์žˆ๋‹ค..

[์„ธ ๋ฒˆ์งธ ์Šคํ”„๋ฆฐํŠธ]5. ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ดˆ: React + TypeScript (10์ฃผ์ฐจ)

๐Ÿ˜„   ์—ฐ์‚ฐ์ž์ •์ ์ธ ๋ฐ์ดํ„ฐ๋“ค์„ ์œ ๊ธฐ์ ์œผ๋กœ ํ–‰๋™ํ•˜๊ฒŒ ํ•˜์—ฌ ์ƒˆ๋กœ์šด ๊ฐ€์น˜๋ฅผ ์ฐฝ์ถœํ•ด ๋‚ด๋Š” ๊ฒƒex. ํ•™์ƒ๋“ค ๊ณผ๋ชฉ๋‹น ์„ฑ์  ๋ฐ์ดํ„ฐ๋Š” ๊ทธ ์ž์ฒด๋กœ ์˜๋ฏธ๊ฐ€ ์—†์Œ์ด์  ๋ฐ ํ‰๊ท ์„ ๋ฐ์ดํ„ฐํ™” ํ•ด์•ผ ๊ทธ ์˜๋ฏธ๊ฐ€ ์žˆ์Œ์‚ฐ์ˆ  ์—ฐ์‚ฐ์ž์‚ฌ์น™ ์—ฐ์‚ฐ์ด ๊ธฐ๋ณธ๋ง์…ˆ(+)๋บ„์…ˆ(-)๊ณฑ์…ˆ(*)๋‚˜๋ˆ—์…ˆ(/)๋‚˜๋จธ์ง€(%)๋Œ€์ž… ์—ฐ์‚ฐ์ž์˜ค๋ฅธ์ชฝ์— ์žˆ๋Š” ๊ฐ’์„ ์™ผ์ชฝ์— ๋Œ€์ž…ํ•˜๋Š” ์—ญํ• ๋Œ€์ž… ์—ฐ์‚ฐ์ž์™€ ์‚ฐ์ˆ  ์—ฐ์‚ฐ์ž๋ฅผ ํ˜ผ์šฉํ•ด์„œ ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํ•จ๋Œ€์ž…(=)๋ง์…ˆ ํ›„ ๋Œ€์ž…(+=)๋บ„์…ˆ ํ›„ ๋Œ€์ž…(-=)๊ณฑ์…ˆ ํ›„ ๋Œ€์ž…(*=)๋‚˜๋ˆ—์…ˆ ํ›„ ๋Œ€์ž…(/=)๋‚˜๋จธ์ง€ ๋Œ€์ž…(%=)์ฆ๊ฐ ์—ฐ์‚ฐ์ž์ฆ๊ฐ€ ์—ฐ์‚ฐ์ž์™€ ๊ฐ์†Œ ์—ฐ์‚ฐ์ž์˜ ์ค„์ž„๋งa๊ฐ’ ์ฆ๊ฐ€ ํ›„ ์—ฐ์‚ฐ(++a)์—ฐ์‚ฐ ํ›„ a๊ฐ’ ์ฆ๊ฐ€(a++)a๊ฐ’ ๊ฐ์†Œ ํ›„ ์—ฐ์‚ฐ(--a)์—ฐ์‚ฐ ํ›„ a๊ฐ’ ๊ฐ์†Œ(a--)๊ด€๊ณ„ ์—ฐ์‚ฐ์ž๋‘ ๊ฐœ์˜ ํ”ผ์—ฐ์‚ฐ์ž๋กœ ๊ด€๊ณ„๋ฅผ ๋”ฐ์ง€๋Š” ์—ฐ์‚ฐ์ž๋กœ, ๊ฐ™์€์ง€ ๋‹ค๋ฅธ์ง€ ์–ด๋А์ชฝ์ด ํฐ์ง€ ์ž‘์€..

์Šคํ”„๋ฆฐํŠธ 2 ํ”„๋กœ์ ํŠธ: Node.js ๊ธฐ๋ฐ˜์˜ REST API ๊ตฌํ˜„ & [์„ธ ๋ฒˆ์งธ ์Šคํ”„๋ฆฐํŠธ]5. ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ดˆ: React + TypeScript (9์ฃผ์ฐจ)

๐Ÿ”’   ์˜ˆ์™ธ ์ฒ˜๋ฆฌif / else → try / catch*JWT*1) TokenExpiredError: ์œ ํšจ๊ธฐ๊ฐ„์ด ์ง€๋‚œ ํ† ํฐ = ๋งŒ๋ฃŒ๋œ ํ† ํฐ2) JsonWebTokenError: ๋ฌธ์ œ ์žˆ๋Š” ํ† ํฐtry...catch์ˆ˜๋งŽ์€ (๊ฐœ๋ฐœ์ž๊ฐ€ ์˜ˆ์ƒํ•˜์ง€ ๋ชปํ•œ) ์—๋Ÿฌ(์‹ค์ˆ˜, ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ์ž˜๋ชป ํ•œ ๊ฒƒ, DB๊ฐ€ ์‘๋‹ต์„ ์ž˜๋ชป ...)๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฌธ๋ฒ•์ •์ƒ์ ์œผ๋กœ ์‹คํ–‰๋˜๋Š” ์ฝ”๋“œ A;if (A์—์„œ ๋ฐœ์ƒํ•œ ์‹ค์ˆ˜1) {} else if (A์—์„œ ๋ฐœ์ƒํ•œ ์‹ค์ˆ˜2) {} ...์‹ค์ˆ˜1, ์‹ค์ˆ˜2 ... ๋น„์Šทํ•œ ๋ถ„๋ฅ˜๋“ค๋ผ๋ฆฌ ๋ฌถ์–ด์„œ ๋ˆ„๊ตฐ๊ฐ€.. ๋”ฐ๋กœ ๊ด€๋ฆฌ๋ฅผ ํ•ด์ฃผ๋ฉด ์ข‹๊ฒ ๋‹ค..try{// A์ฝ”๋“œ ์‹คํ–‰} catch (err) {// ์˜ˆ์™ธ ์ฒ˜๋ฆฌ}์—๋Ÿฌ ๊ฐ์ฒด์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๊ณ ๋Œ€ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค์˜ ๋…ธ๊ณ ๋ฅผ ๋ณด๊ณ , "๋‚ด์žฅ" ์—๋Ÿฌ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด๋’€์–ด์š”.JWT๋ผ๋Š” ..

์Šคํ”„๋ฆฐํŠธ 2 ํ”„๋กœ์ ํŠธ: Node.js ๊ธฐ๋ฐ˜์˜ REST API ๊ตฌํ˜„ (8์ฃผ์ฐจ)

๐Ÿงจ ์ข‹์•„์š” ๊ฐœ์ˆ˜ ์„ธ์„œ books ํ…Œ์ด๋ธ”์— ์ปฌ๋Ÿผ ์ถ”๊ฐ€ํ•ด์„œ ์ถœ๋ ฅํ•ด์ฃผ๊ธฐ ๋„์„œ ํ…Œ์ด๋ธ” ์ „์ฒด ์กฐํšŒ - SELECT * FROM books; - SELECT ์ปฌ๋Ÿผ๋ช…1, ์ปฌ๋Ÿผ๋ช…2, ... FROM ํ…Œ์ด๋ธ”๋ช…; ๋„์„œ ํ…Œ์ด๋ธ” ์ „์ฒด ์กฐํšŒ + ์ปฌ๋Ÿผ 1๊ฐœ ์ถ”๊ฐ€ํ•˜๊ธฐ SELECT*, ๊ฐ’ AS ์ƒˆ๋กœ ์ถ”๊ฐ€ํ•  ์ปฌ๋Ÿผ๋ช… FROM ํ…Œ์ด๋ธ”๋ช…; SELECT*, (๊ฐ ํ–‰๋งˆ๋‹ค likes ํ…Œ์ด๋ธ”์— liked_book_id๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ํ–‰ ์ˆ˜) AS likes FROM books; SELECT*, (SELECT count(*) FROM likes WHERE books.id=liked_book_id) AS likes FROM books; ๐Ÿชญ ์„œ๋ธŒ(sub) ์ฟผ๋ฆฌ : ์ฟผ๋ฆฌ ์•ˆ์— ์ฟผ๋ฆฌ ๐Ÿชญ count() : ํ–‰ ๊ฐœ์ˆ˜ ๐Ÿชญ AS : ์ปฌ๋Ÿผ ๋ณ„์นญ ๐Ÿงฐ ๋ฐฉ๊ธˆ INSER..