-
์น๊ฐ๋ฐ ๊ธฐ๋ณธ ๋ฐฐ๊ฒฝ์ง์๐ปProgramming/Web 2023. 3. 16. 22:05
HTML/CSS/React.js: ํ๋ก ํธ์๋ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ์ฌ์ฉ๋๋ ์ธ์ด๋ค.
์คํ๋ง ๋ถํธ: ์คํ๋ง์ผ๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ๋์ ํ์ํ ์ค์ ์ ๊ฐํธํ๊ฒ ์ฒ๋ฆฌํด์ฃผ๋ ๋ณ๋์ ํ๋ ์์ํฌ(์ถ์ฒ: https://www.codestates.com/blog/content/์คํ๋ง-์คํ๋ง๋ถํธ)
AWS: ํด๋ผ์ฐ๋ ํ๋ซํผ. ์ปดํจํ , ์คํ ๋ฆฌ์ง, ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๊ฐ์ ์ธํ๋ผ ๊ธฐ์ ๋ถํฐ, ์ธ๊ณต์ง๋ฅ, ๋ฐ์ดํฐ ๋ ์ดํฌ ๋ฐ ๋ถ์, ์ฌ๋ฌผ ์ธํฐ๋ท ๋ฑ์ ๊ธฐ์ ๊น์ง ํด๋ผ์ฐ๋๋ก ํ ์ ์๋ ๊ฑฐ์ ๋ชจ๋ ๊ฒ์ ๊ตฌ์ถ ๊ฐ๋ฅํ ์๋ง์กด ์น ์๋น์ค.
(์ฌ๊ธฐ์ ํ๋ก๋์ ํ๊ฒฝ์ด๋? ์ํํธ์จ์ด ๋ฐ ๊ธฐํ ์ ํ์ด ์ค์ ๋ก ์ต์ข ์ํํธ์จ์ด ๋ฐ ๊ธฐํ ์ ํ์ด ์ค์ ๋ก ์ต์ข ์ฌ์ฉ์๊ฐ ์๋ํ ์ฉ๋๋ก ์๋ํ๋ ์ค์ ์ ์ค๋ช ํ๊ธฐ ์ํด ๊ฐ๋ฐ์๊ฐ ์ฃผ๋ก ์ฌ์ฉํ๋ ์ฉ์ด-์ถ์ฒ:https://ko.theastrologypage.com/production-environment)
HTTP(HyperText Transfer Protocol): ์ ํ๋ฆฌ์ผ์ด์ ๋ ๋ฒจ์ ํ์ดํผํ ์คํธ๋ฅผ ๋น ๋ฅด๊ฒ ๊ตํํ๊ธฐ ์ํ ํ๋ง๋๋ก ์๋ฒ์ ํด๋ผ์ด์ธํธ์ ์ฌ์ด์์ ์ด๋ป๊ฒ ๋ฉ์์ง๋ฅผ ๊ตํํ ์ง์ ๋ํ ๊ท์ฝ. ์ฐ๋ฆฌ๊ฐ ์ธํฐ๋ท์ ์ฌ์ฉํ ๋, ์์ http://๋ฅผ ๋ถ์ด๋๋ฐ, ์ด๊ฒ ๋ฐ๋ก ํ๋กํ ์ฝ์ ์ฌ์ฉํด์ ์ ๋ณด๋ฅผ ๊ตํํ๊ฒ ๋ค๋ ๋ง์ด๋ค. ๋คํธ์ํฌ ํ๋กํ ์ฝ.
ํ์ดํผ ํ ์คํธ๋?: ์ด๊ธฐ์ ์๋ฏธ๋ ๋ค๋ฅธ ๋ฌธ์๋ก ํฅํ๋ ๋งํฌ๊ฐ ์๋ ํ ์คํธ. ํ์ดํผ ํ ์คํธ๋ฅผ ์ง์ ํ๊ธฐ ์ํด์๋ HyperText Markup Language->HTML์ ์ฌ์ฉํด์ผํจ.
HTTP๋ ์ด๋ป๊ฒ ๋์ํ๋๊ฐ?
์ฌ์ฉ์๋ ๋ธ๋ผ์ฐ์ ๋ผ๋ ๋งค๊ฐ์ฒด(?)๋ฅผ ํตํด ์๋ฒ์ HTTP ์์ฒญ์ ๋ณด๋ผ ์ ์๋ค.(์ฃผ์์ฐฝ์ ์ํ๋ ๋งํฌ๋ฅผ ์น๊ฑฐ๋ ๋ณต์ฌํ์ฌ ์ํฐ๋ฅผ ๋๋ฆ์ผ๋ก์จ.) ๊ทธ๋ฆฌ๊ณ ์ด ์๋ฒ๋ ์ด request๋ฅผ ๋ฐ์ HTTP์๋ต์ ๋ธ๋ผ์ฐ์ ์ ๋์์ค๋ค(๋๋๋ง).
HTTP ์์ฒญ
์ด ์์ฒญ์๋ ์ก์ ์์ ๋ค์ํ ์ ๋ณด๊ฐ ๋ด๊ฒจ ์๋ค. HTTP์์ฒญ์๋ ์ฌ๋ฌ๊ฐ์ง ๋ฉ์๋๋ค(GET, POST, PUT, DELETE)์ด ์๋ค. ์ด ๋ฉ์๋๋ฅผ ํตํด์ ํธ์คํธ์๊ฒ ์ํ๋ ์์ฒญ์ ํ๋ ๊ฒ(์ง์ ํ ์์์ ํ๊ณ ์ถ์ ์์ ์ ์๋ ค์ฃผ๋)์ด๋ค.
HTTP ์๋ต
HTTP ์๋ต ์ฝ๋์๋ ์ํ ์ฝ๋๊ฐ ์๋ค.
์ด ์ํ์ฝ๋์์, ์๋ฅผ๋ค์ด 200์ ์ฑ๊ณต์ ์ผ๋ก ์์ฒญ์ ์ฒ๋ฆฌํ๋ค๋ ์๋ฏธ์ด๋ค. 404๋ ํด๋น ๋ฆฌ์์ค๋ ์กด์ฌํ์ง ์๋๋ค๋ ์๋ฏธ, 403๋ ํด๋น ์ก์ ์์๊ฒ ๋ฆฌ์์ค์ ์ ๊ทผํ ์ ์๋ ๊ถํ์ด ์๋ค๋ ์๋ฏธ, 500์ ์๋ฒ์ ์๋ฌ๋ก ์ธํด ์์ฒญ์ ์ฒ๋ฆฌํ ์ ์๋ค๋ ์๋ฏธ. ์์ ์ธ๊ธํ ๊ฒ ์ธ์๋ ๋ค๋ฅธ ์ํ์ฝ๋๋ค๋ ์กด์ฌํ๋ค. ๋, ์๋ต ์ฝ๋์๋ ๋ฏธ๋์ด ํ์ (๋น๋์ค, ํ ์คํธ, ์ด๋ฏธ์ง...)์ ๋ํ๋ด๋ ์ฝ๋๋ ์๋ค.
JSON(JavaScript Object Notation)
๊ฐ์ฒด(object)๋ฅผ ํํํ๊ธฐ ์ํ ํ ์คํธ. ํค์ ๊ฐ(key and value)๋ก ๊ฐ์ฒด๋ฅผ ํํํ ๋ฌธ์์ด. JavaScript์์ ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ ํ์๊ณผ ๊ฐ๊ธฐ ๋๋ฌธ์ JavaScript Object Notation์ด๋ผ๊ณ ํ๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ค๋ฅธ ์ ํ๋ฆฌ์ผ์ด์ ์ผ๋ก ๊ฐ์ฒด๋ฅผ ์๋ก ๋๊ฒจ์ฃผ๊ณ ๋๊ฒจ๋ฐ์์ผ ํ๋ ์ํฉ์ด๋ผ๊ณ ํ์์ ๋ ์ด ์ ํ๋ฆฌ์ผ์ด์ ๋ค์ ์๋ก ๋ค๋ฅธ ์ธ์ด์ ์ํคํ ์ฒ๋ฅผ ์ฌ์ฉํ์ฌ ์๋ก ํต์ ํ๊ธฐ ์ด๋ ต๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์๋ก๊ฐ ์ดํดํ ์ ์๋ ํํ๋ก ๊ฐ์ฒด๋ฅผ ๋ฐ๊ฟ์ฃผ์ด์ผ ํ๋ค. ์ด๋ ๊ฒ ๊ฐ์ฒด๋ฅผ ์ ๋ฌํ๊ฑฐ๋ ์ ์ฅํ๊ธฐ ์ํด์ ๋ค๋ฅธ ํ์์ผ๋ก ๋ฐ๊พธ๋ ์์ ์ ์ง๋ ฌํ, ๊ทธ ๋ฐ๋์ ์์ ์ ์ญ์ง๋ ฌํ๋ผ๊ณ ํจ. ๊ทธ ๋ฐฉ๋ฒ์ด ๋ฐ๋ก JSON์ด๋ค.
{
"name":"sujin"
"age":13
}
์ด๋ฐ์์ผ๋ก ๊ฐ์ฒด๋ฅผ ํํํ๋ค.
JSON์ ์๋ฃํ: Boolean, ์ซ์, ๋ฌธ์์ด, ์ค๋ธ์ ํธ, ๋ฐฐ์ด
์๋ฒ๋?
์๋ฒ๋ ํ๋ก๊ทธ๋จ์ด๋ค. ์๋ฒ๋ network operation์ ์ํํ๋ ํ๋ก๊ทธ๋จ.
์ ์ ์น ์๋ฒ๋?
HTTP ์๋ฒ ์ค์์๋ ๋ฆฌ์์ค ํ์ผ์ ๋ฐํํ๋ ์๋ฒ๋ฅผ ์๋ฏธ. ์๋ฅผ๋ค์ด ํด๋ผ์ด์ธํธ๊ฐ file.html ์์ฒญ์ ์๋ฒ๋ก ๋ณด๋ด๋ฉด ์ ์ ์น ์๋ฒ๋ ์ง์ ๋ ๋๋ ํ ๋ฆฌ ๊ฒฝ๋ก์์ file.html์ ์ฐพ์์ HTTP ์๋ต ๋ฐ๋์ ๋ฃ์ด์ ์ ์กํ๋ค. ์ด ๋ ์ ์ ์น ์๋ฒ๋ ์ด file.html์ ์๋ฌด๋ฐ ์์ ๋ ํ์ง ์๊ณ , ํ์ผ์ ๊ทธ๋๋ก ๋ฐํํ๋ค. ๊ทธ๋์ ์ ์ ์น ์๋ฒ์ด๋ค.
์ ์ ์น ์๋ฒ์ ์: ์ํ์น, Nginx ๋ฑ
๋์ ์น ์๋ฒ๋?
๋์ ์น ์๋ฒ๋ ์์์ ๋งํ ์ ์ ์น ์๋ฒ์ ๋ค๋ฅด๊ฒ ํ์ผ์ ๊ทธ๋๋ก ๋ฐํํ์ง ์๋๋ค. ๋์ ์น ์๋ฒ๋ ์์ฒญ์ ์ฒ๋ฆฌํ๊ณ , ๊ทธ ์ฒ๋ฆฌํ ๊ฒฐ๊ณผ์ ๋ฐ๋ผ ์๋ต ๋ฐ๋๋ฅผ ๋ณ๊ฒฝํ๊ฑฐ๋ ๋์ฒดํ์ฌ ๋ณด๋ธ๋ค. ์ด๋ค ์์ฒญ์ด๋์ง ๊ฐ์ ํ์ผ์ ๊ทธ๋๋ก ๋ฐํํ๋ ์ ์ ์น ์๋ฒ์ ๋ค๋ฅด๊ฒ ๋์ ์น ์๋ฒ๋ ํด๋ผ์ด์ธํธ, ๋งค๊ฐ๋ณ์์ ๋ฐ๋ผ ๊ฐ์ ์์ฒญ์ด๋ผ๋ ๋ค๋ฅด๊ฒ ์๋ต์ ๋ฐ์ ์ ์๋ค.
์๋ฐ ์๋ธ๋ฆฟ ์ปจํ ์ด๋/์์ง์ด๋?
์๋ฒ ํ๋ก๊ทธ๋จ.
CRUD
-> Create, Retrieve, Update, Delete
์์ฑ, ๊ฒ์, ์์ , ์ญ์ ๋ค ๊ฐ์ง ๊ธฐ๋ณธ ๊ธฐ๋ฅ์ ์๋ฏธ.
REST API๋?(์ถ์ฒ, ์์ฃผ ์์ธํ๊ณ ์น์ ํ ๋์์์ผ๋ ๋ณด๋๊ฒ์ ์ถ์ฒํฉ๋๋ค!-https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html)
REST API๋ฅผ ์ค๋ช ํ๊ธฐ์ ์์ REST์ ์๋ฏธ๋ฅผ ์์๋ณด์. REST๋ Representational State Transfer์ ์ฝ์๋ก ์์์ ์ด๋ฆ์ผ๋ก ๊ตฌ๋ถํ์ฌ ํด๋น ์์์ ์ํ(์ ๋ณด)๋ฅผ ์ฃผ๊ณ ๋ฐ๋ ๋ชจ๋ ๊ฒ์ ์๋ฏธํ๋ค. API๋ Application Programming Interface์ ์ฝ์๋ก ๋ฐ์ดํฐ์ ๊ธฐ๋ฅ์ ์งํฉ์ ์ ๊ณตํ์ฌ ์ปดํจํฐ ํ๋ก๊ทธ๋จ๊ฐ ์ํธ์์ฉ์ ์ด์งํ๋ฉฐ, ์๋ก ์ ๋ณด๋ฅผ ๊ตํ ๊ฐ๋ฅํ๊ฒ ํ๋๋ก ํ๋ ๊ฒ. ๊ทธ๋์ REST API๋ REST๊ธฐ๋ฐ์ผ๋ก ์๋น์ค API๋ฅผ ๊ตฌํํ๋ ๊ฒ์ด๋ค. ์ต๊ทผ OpenAPI, ๋ง์ดํฌ๋ก ์๋น์ค ๋ฑ์ ์ ๊ณตํ๋ ์ ์ฒด ๋๋ถ๋ถ์ REST API๋ฅผ ์ ๊ณตํ๋ค.
'๐ปProgramming > Web' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Web] ์น ์๋ฒ(Web Server)์ WAS(Web Application Server)์ ์ฐจ์ด (0) 2024.04.16