[FastAPI] Tutorial(1)
ยท
๐Ÿฅ Web/โšก Back-end | FastAPI
โ€ป FastAPI Tutorial์„ ๊ณต๋ถ€ํ•˜๋ฉฐ ์ดํ•ดํ•œ๋Œ€๋กœ ์ž‘์„ฑํ•œ ๋‚ด์šฉ์œผ๋กœ, ์‹ค์ œ ๋‚ด์šฉ๊ณผ ๋‹ค๋ฅด๊ฑฐ๋‚˜ ํ‹€๋ฆฐ ๋ถ€๋ถ„์ด ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ์ฆ‰์‹œ ๋ฐ˜์˜ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. โ€ป ์ค‘๊ฐ„์— ์ดํ•ดํ•˜์ง€ ๋ชปํ•ด ์˜์–ด๋กœ ์˜ฎ๊ฒจ๋‘” ๋ถ€๋ถ„์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ถ”ํ›„ ์ˆ˜์ •ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. https://fastapi.tiangolo.com/ko/tutorial/ ์ž์Šต์„œ - ์‚ฌ์šฉ์ž ์•ˆ๋‚ด์„œ - ๋„์ž…๋ถ€ - FastAPI ์ž์Šต์„œ - ์‚ฌ์šฉ์ž ์•ˆ๋‚ด์„œ - ๋„์ž…๋ถ€ ์ด ์ž์Šต์„œ๋Š” FastAPI์˜ ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ๋Šฅ์„ ๋‹จ๊ณ„๋ณ„๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. ๊ฐ ์„น์…˜์€ ์ด์ „ ์„น์…˜์„ ๊ธฐ๋ฐ˜ํ•ด์„œ ์ ์ง„์ ์œผ๋กœ ๋งŒ๋“ค์–ด ์กŒ์ง€๋งŒ, ์ฃผ์ œ์— ๋”ฐ๋ผ ๋‹ค๋ฅด๊ฒŒ fastapi.tiangolo.com 1. ์ฒซ๊ฑธ์Œ 1. FastAPI import from fastapi import FastAP..
[CSS] 3. CSS ๊ธฐ์ดˆ ์ด์ •๋ฆฌ
ยท
๐Ÿฅ Web/๐ŸŽจ Front-end
๋ธ”๋กœ๊ทธ์— ์›น ๊ธ€์„ ์—…๋กœ๋“œํ•˜์ง€ ์•Š์€์ง€ ์–ด๋งˆ๋ฌด์‹œํ•œ ์‹œ๊ฐ„์ด ์ง€๋‚ฌ์ง€๋งŒ(...) ์ฒœ์ฒœํžˆ ๋‹ค์‹œ ๋ฐฑ์—…ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ์€ CSS ๊ธฐ์ดˆ์ž…๋‹ˆ๋‹ค. ๊ฐœ์ธ์ ์œผ๋กœ๋Š” ์ด ๊ธฐ๋ณธ ๋ฌธ๋ฒ•๋งŒ ์–ด๋А์ •๋„ ์•Œ๋ฉด ๊ทธ ๋‹ค์Œ์€ ๊ทธ๋ฆฌ ์–ด๋ ต์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™์•„์š”. ์‚ฌ์‹ค CSS๊ฐ€ ์ œ ๋ง์„ ์ž˜ ๋“ค์–ด์ฃผ๋Š” ํŽธ์€ ์•„๋‹ˆ์ง€๋งŒ ์•„๋ฌดํŠผ ๋ฌธ๋ฒ•์€ ์–ด๋ ต์ง€ ์•Š์Šต๋‹ˆ๋‹ค ^!^ 1. CSS ๊ธฐ์ดˆ ํ˜•์‹ Selector{ property: value; } css๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์œ„์™€ ๊ฐ™์€ ํ˜•์‹์„ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค. Selector๋ผ๊ณ  ์“ด ์‹๋ณ„์ž๋ฅผ ํ†ตํ•ด์„œ ์ ‘๊ทผ ๋ฐ ์ ์šฉ์„ ๊ฐ€๋Šฅ์ผ€ ํ•ฉ๋‹ˆ๋‹ค. h2 { color: red; } p { color: pink; } // html CSS head์— ์œ„์™€๊ฐ™์ด ์ž‘์„ฑํ•˜๊ณ  ๋‚˜๋ฉด h2ํƒœ๊ทธ์˜ ์ปฌ๋Ÿฌ๋Š” red๋กœ, p ํƒœ๊ทธ์˜ ์ปฌ๋Ÿฌ๋Š” pink๋กœ ๋ฐ”๋€๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์•Œ ์ˆ˜ ์žˆ๋“ฏ์ด, h..
[SQL] SQL ์ค‘๊ธ‰
ยท
๐Ÿฅ Web/โ” Back-end | etc.
์ง€๋‚œ๋ฒˆ ๊ธ€์— ์ด์–ด์„œ Mode์˜ SQL ํŠœํ† ๋ฆฌ์–ผ์„ ์ฝ๊ณ  ์ •๋ฆฌํ•˜๊ณ  ์‹ค์Šตํ•ด๋ณด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ Count๋ฅผ ํฌํ•จํ•œ ๊ธฐ์ดˆ ์‚ฐ์ˆ ์—ฐ์‚ฐ ๋ฐฉ๋ฒ•, ์กฐ๊ฑด, ๊ทธ๋ฆฌ๊ณ  join์— ๋Œ€ํ•ด์„œ ๋‹ค๋ค„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ž˜๋ชป ์ดํ•ดํ–ˆ๊ฑฐ๋‚˜ ์˜ค๋ฅ˜๊ฐ€ ์žˆ๋Š” ๋ถ€๋ถ„์€ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ์ •๋ง ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! Mode์—์„œ ๋กœ๊ทธ์ธ ํ›„ ์ƒˆ report๋ฅผ ๋งŒ๋“œ์…”์„œ ๋”ฐ๋ผํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋งํฌ ์•„๋ž˜์— ๋‹ฌ์•„๋‘๊ฒ ์Šต๋‹ˆ๋‹ค. https://app.mode.com/ Count SELECT COUNT(*) FROM tutorial.aapl_historical_stock_price ํŠน์ • ์—ด์˜ ํ–‰์˜ ์ˆ˜๋ฅผ ๊ณ„์‚ฐํ•ฉ๋‹ˆ๋‹ค. *์„ ์ž…๋ ฅํ•˜๋ฉด ์ „์ฒด ํ–‰์˜ ์ˆ˜๋ฅผ ์ถœ๋ ฅํ•ฉ๋‹ˆ๋‹ค. high๋ฅผ ์ž…๋ ฅํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” null์ด ์•„๋‹Œ ํ–‰์˜ ์ˆ˜๋ฅผ ๊ณ„์‚ฐํ•ฉ๋‹ˆ๋‹ค( *๋ณด๋‹ค ํ•ญ์ƒ ์ž‘์•„์š”! ) ์—ด์„ ์…€ ์ˆ˜๋„, ์ˆซ์ž๊ฐ€ ์•„๋‹Œ ๋ฐ์ดํ„ฐ..
[SQL] SQL ๊ธฐ์ดˆ
ยท
๐Ÿฅ Web/โ” Back-end | etc.
3ํ•™๋…„์ด๋‚˜ ๋๋Š”๋ฐ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ์ข€ ์•Œ๊ธด ์•Œ์•„์•ผ๋˜์ง€ ์•Š๊ฒ ๋‚˜ ์‹ถ์€ ๋งˆ์Œ์œผ๋กœ SQL ๋ฌธ๋ฒ•์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ณต๋ถ€ํ•ด์„œ ์˜ฌ๋ ค๋ณด๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. Mode์˜ SQL ํŠœํ† ๋ฆฌ์–ผ์„ ์ฝ๊ณ  ์ •๋ฆฌํ•˜๊ณ  ์‹ค์Šตํ•ด๋ณด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ž˜๋ชป ์ดํ•ดํ–ˆ๊ฑฐ๋‚˜ ์˜ค๋ฅ˜๊ฐ€ ์žˆ๋Š” ๋ถ€๋ถ„์€ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ์ •๋ง ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! Mode์—์„œ ๋กœ๊ทธ์ธ ํ›„ ์ƒˆ report๋ฅผ ๋งŒ๋“œ์…”์„œ ๋”ฐ๋ผํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋งํฌ ์•„๋ž˜์— ๋‹ฌ์•„๋‘๊ฒ ์Šต๋‹ˆ๋‹ค. https://app.mode.com/ SQL์ด๋ž€? SQL(Structured Query Language)์€ ๊ด€๊ณ„ํ˜• ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ์„ค๊ณ„๋œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. SELECT - FROM ํ•œ ๋ฒˆ์— ํ•˜๋‚˜์˜ select๋งŒ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, SELECT๋กœ FROM์—์„œ ๊ฐ€์ ธ์˜จ ๋ฐ์ดํ„ฐ์˜ ์—ด์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. SELECT A, B, ..
[HTML] 2. HTML5 2
ยท
๐Ÿฅ Web/๐ŸŽจ Front-end
์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์ง€๋‚œ ๋ฒˆ์— ์ด์–ด HTML5์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ๋‹ค๋ฃจ๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฒˆ์— ์ง‘์ค‘์ ์œผ๋กœ ์•Œ์•„๋ณผ ๋ถ€๋ถ„์€ input ํƒœ๊ทธ์™€ form ํƒœ๊ทธ์˜ method, input ํƒœ๊ทธ, ๊ทธ๋ฆฌ๊ณ  ์ฃผ์„์ž…๋‹ˆ๋‹ค. 1. input ํƒœ๊ทธ์™€ ์†์„ฑ form์€ ์ž…๋ ฅ ์–‘์‹์ž…๋‹ˆ๋‹ค. ๊ตฌ๊ธ€ ํผ๊ณผ ๊ฐ™์€ ๊ฒƒ๋“ค์„ ์‚ฌ์šฉํ•ด๋ณด์…จ๋‹ค๋ฉด ์ถฉ๋ถ„ํžˆ ์˜ˆ์ƒํ•˜์‹ค ์ˆ˜ ์žˆ์œผ์‹คํ…๋ฐ, form ํƒœ๊ทธ ๋‚ด๋ถ€๋Š” input ํƒœ๊ทธ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. form ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ์— ๋Œ€ํ•ด์„œ๋Š” ๋‘ ๋ฒˆ์งธ์—์„œ ๋ง์”€๋“œ๋ฆฌ๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. input ํƒœ๊ทธ๋Š” ์•„์ฃผ ๋งŽ์€ ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ง€๊ธˆ๊นŒ์ง€ ์ œ๊ฐ€ ์›น ๊ณต๋ถ€๋ฅผ ํ•˜๋ฉด์„œ ๊ฐ€์žฅ ๋งŽ์ด ๋ณธ ์†์„ฑ์€ type, value, placeholder, name ์ •๋„๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜๋‚˜์”ฉ ์ฐจ์ฐจ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ฃ ! ์ „์ฒด input ํƒœ๊ทธ์˜ ์†์„ฑ์—๋Š” ๋‹ค์Œ ur..
[HTML] 1. HTML5 ๊ธฐ์ดˆ
ยท
๐Ÿฅ Web/๐ŸŽจ Front-end
์›น์„ ๊ณต๋ถ€ํ•˜๊ณ ์ž ํ•˜์‹œ๋Š” ๋ถ„๋“ค์ด ๋ช‡์ฒœ ๋ฒˆ์ด๊ณ  ๋ฌธํ„ฑ์„ ๋ฐŸ์•˜๋‹ค ๋Œ์•„๊ฐ€์‹œ๋Š” ๊ทธ ๋ถ€๋ถ„(์‚ฌ์‹ค ์ œ ๊ฒฝํ—˜๋‹ด์ž…๋‹ˆ๋‹ค), ๋ฐ”๋กœ HTML์— ๋Œ€ํ•ด ์˜ค๋Š˜ ๋‹ค๋ค„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. HTML์€ HyperText Markup Language์˜ ์•ฝ์ž๋กœ, WWW(world wide web)์˜ ํ•ต์‹ฌ ์–ธ์–ด์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ์ดํ›„์— ๋‹ค๋ค„์งˆ CSS, JavaScript๋„ ๊ฒฐ๊ตญ HTML์— ๊ธฐ๋ณธ ํ† ๋Œ€๋ฅผ ๋‘๊ณ  ๊ทธ ์•ˆ์—์„œ ๋”ํ•ด์ง€๊ณ  ์ž‘๋™ํ•˜๊ฒŒ ๋˜์ฃ . ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” HTML์˜ ๊ธฐ์ดˆ์— ๋Œ€ํ•ด์„œ ๋‹ค๋ค„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. 1. HTML ๊ตฌ์„ฑ HTML์€ ์ง€๊ธˆ ๋‹ค์„ฏ๋ฒˆ์งธ ๋ฒ„์ „์„ ๋งž์ดํ–ˆ์Šต๋‹ˆ๋‹ค. HTML5๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ์ด์œ ๋„ ๊ฑฐ๊ธฐ์— ์žˆ์Šต๋‹ˆ๋‹ค. HTML์€ Tag๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. HTML5๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ๊ธฐ๋ณธ ํ˜•์‹์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. hello there! ๊ฐ€์žฅ ์œ„์— ์ด ๋ฌธ์„œ๊ฐ€ ์–ด๋–ค..