โจํ์ฅ์์ 2์ผ์ฐจ
๐๐ป Javascript(fetch) + React
fetch
const endpoint = "https://jsonplaceholder.typicode.com/todos/1";
fetch(endpoint).then(async (response) => {
const data = await response.json();
console.log(data);
});
const endpoint = "https://jsonplaceholder.typicode.com/todos/1";
fetch(endpoint)
.then((response) => response.json())
.then((data) => console.log(data));
async function getToDo() {
const endpoint = "https://jsonplaceholder.typicode.com/todos/1";
const response = await fetch(endpoint);
const data = await response.json();
console.log(data);
}
api๋ฅผ ๋ถ๋ฌ์ค๋ fetchํจ์๋ฅผ ์ด๋ ๊ฒ ๋ค์ํ ๋ฐฉ๋ฒ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค.
await๋ ๋ง๊ทธ๋๋ก ๊ฐ์ ๋ฐ์๋๊น์ง ๊ธฐ๋ค๋ฆฐ๋ค๋ ์๋ฏธ
โ๏ธasyncํจ์๋ฅผ ์์ฐ๋ฉด ๊ทธ ์์ ๋ธ๋ก๋ค์์ awaitํจ์๋ฅผ ์ฌ์ฉํ ์ ์๋ค
Promise.all
์ฌ๋ฌ ๊ฐ์ ํ๋ก๋ฏธ์ค(Promise)๋ฅผ ๋ฐฐ์ด ํํ๋ก ๋ฐ์ ์ด๋ค์ด ๋ชจ๋ ์ดํ(fulfilled)๋๊ฑฐ๋ ํ๋๋ผ๋ ๊ฑฐ๋ถ(rejected)๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฐ ํ, ๊ฒฐ๊ณผ๋ฅผ ๋ฐฐ์ด๋ก ๋ฐํํ๋ ๋ฉ์๋์ ๋๋ค. ์ด๋ ๋ณ๋ ฌ๋ก ์ฌ๋ฌ ๋น๋๊ธฐ ์์ ์ ์ํํ๊ณ , ๋ชจ๋ ์์ ์ด ์๋ฃ๋ ํ์ ๋ค์ ๋จ๊ณ๋ก ์งํํ๊ณ ์ ํ ๋ ์ ์ฉํ๋ค.
Promise.all(iterable);
//iterable์ ํ๋ก๋ฏธ์ค๋ค๋ก ์ด๋ฃจ์ด์ง ๋ฐฐ์ด์ด๋ ์ดํฐ๋ฌ๋ธ ๊ฐ์ฒด
const promise1 = new Promise(resolve => setTimeout(() => resolve('First'), 1000));
const promise2 = new Promise(resolve => setTimeout(() => resolve('Second'), 500));
const promise3 = new Promise(resolve => setTimeout(() => resolve('Third'), 1500));
Promise.all([promise1, promise2, promise3])
.then(values => {
console.log(values); // ['First', 'Second', 'Third']
})
.catch(error => {
console.error(error); // If any of the promises is rejected, the catch block will be executed.
});
Promise.all์ ๋ชจ๋ ํ๋ก๋ฏธ์ค๊ฐ ์ดํ๋ ํ์ then ๋ธ๋ก์ ์คํํ๋ฉฐ, values ๋ฐฐ์ด์ ๊ฐ ํ๋ก๋ฏธ์ค์ ๊ฒฐ๊ณผ๊ฐ ์์๋๋ก ์ ์ฅ๋ฉ๋๋ค. ๋ง์ฝ ํ๋์ ํ๋ก๋ฏธ์ค๋ผ๋ ๊ฑฐ๋ถ๋๋ค๋ฉด, catch ๋ธ๋ก์ด ์คํ๋ฉ๋๋ค.
๋ณ๊ฒฝ์
async function main() {
const nowPlayingMovies = await getMovies(nowPlayingEndpoint);
renderMovies(nowPlayingMovies, "now-playing-movies-list");
const topRatedMovies = await getMovies(topRatedEndpoint);
renderMovies(topRatedMovies, "top-rated-movies-list");
}
main์ด๋ผ๋ asyncํจ์๋ก wrapping ํจ์๋ก ๊ฐ์ธ await๋ฅผ ์ด์ฉํด ๋๊ฐ์ง api๋ฅผ ๋ฐ์์ค๋ ํจ์๋ฅผ ๋ง๋ค์๋ค.
โจ ์ด ๋ฐฉ๋ฒ์ ์ง๋ ฌ์ ์ผ๋ก ํ๋ํด, ๊ฐ ํจ์๊ฐ api๋ฅผ ๋ฐ์์ค๋๋ฐ 3์ด์ฉ ๊ฑธ๋ฆฐ๋ค๊ณ ๊ฐ์ ํ๋ค๋ฉด, mainํจ์ ์ฝ๋๋ 6์ด์ ์์์๊ฐ์ด ๊ฑธ๋ฆด๊ฒ์ด๋ค.
๋ณ๊ฒฝํ
const getNowPlayingMoviesPromise = getMovies(nowPlayingEndpoint);
const getTopRatedMoviesPromise = getMovies(topRatedEndpoint);
const [nowPlayingMovies, topRatedMovies] = await Promise.all([
getNowPlayingMoviesPromise,
getTopRatedMoviesPromise,
]);
renderMovies(nowPlayingMovies, "now-playing-movies-list");
renderMovies(topRatedMovies, "top-rated-movies-list");
โจ promise.all์ ์ฌ์ฉํ๋ฉด ๋ณ๋ ฌ์ ์ผ๋ก ์ฌ์ฉ๊ฐ๋ฅํ๊ธฐ์, ํ๋ก๋ฏธ์ค ๋ฐฐ์ด๋ค์ ๋ฃ์ด์ฃผ๋ฉด 6์ด๊ฐ ์๋ 3์ด๋ค์ ์๋ต์ด ์ฌ ๊ฒ์ด๋ค.
๐๐ป ๋น์ฐํ, ์ฌ๋ฌ๊ฐ์ api๋ฅผ ๋ฐ์์ฌ๋, ๋ณ๋ ฌ์ ์ผ๋ก ์ฒ๋ฆฌํด์ผ ์ ๋ฆฌํ๋ค.
npm
- JavaScript ํ๋ก์ ํธ ์ด๊ธฐํ
- JavaScript ํ๋ก์ ํธ์ ํ์ํ ๋ค์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๊ณ ๊ด๋ฆฌํ๋ ค๋ฉด ํ๋ก์ ํธ๋ฅผ ์ด๊ธฐํ ํด์ผํ๋ค.
- ๋ช ๋ น์ด: npm init ๋๋ npm init -y
- ํจํค์ง ์ค์น
- ํ๋ก์ ํธ์ ํ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ค์นํ๋ ๊ฒ
- ๋ช ๋ น์ด: npm intsall ํจํค์ง์ด๋ฆ
- ์์: npm install express
- ํจํค์ง ์ ๊ฑฐ
- ์ด๋ฏธ ์ค์น๋ ํจํค์ง๋ฅผ ํ๋ก์ ํธ์์ ์ ๊ฑฐ
- ๋ช ๋ น์ด: npm uninstall ํจํค์ง์ด๋ฆ
- ์์: npm uninstall express
- ์คํฌ๋ฆฝํธ ์คํ
- package.json ํ์ผ์ ์ ์ํ ์คํฌ๋ฆฝํธ๋ฅผ npm ๋ช ๋ น์ด๋ก ์คํํ ์ ์์ด์.
- ๋ช ๋ น์ด: npm run ์คํฌ๋ฆฝํธKey
- ex) npm run start - pacakge.json ํ์ผ์ scripts ๋ถ๋ถ์ ์ ์๋ start ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ๋ค.
npm start์ npm build์ ์ฐจ์ด
npm start:
- npm start ๋ช ๋ น์ด๋ ์ฃผ๋ก ๊ฐ๋ฐ์๊ฐ ํ๋ก์ ํธ๋ฅผ ๊ฐ๋ฐ ํ๊ฒฝ์์ ์คํํ ๋ ์ฌ์ฉ๋ฉ๋๋ค.
npm build:
- npm build ๋ช ๋ น์ด๋ ์ฃผ๋ก ํ๋ก๋์ ํ๊ฒฝ์ ๋ฐฐํฌํ๊ธฐ ์ ์ ํ๋ก์ ํธ๋ฅผ ๋น๋ํ ๋ ์ฌ์ฉ๋ฉ๋๋ค.
- ๋น๋๋ ์์ค ์ฝ๋๋ฅผ ์ต์ ํํ๊ณ ๋ฒ๋ค๋งํ์ฌ ์ฑ๋ฅ์ ํฅ์์ํค๊ณ , ๋ถํ์ํ ํ์ผ์ ์ ๊ฑฐํ์ฌ ์ต์ข ์ ํ์ ๋ง๋ญ๋๋ค.
โจbuildํ๋ฉด, build๋ผ๋ ํ์ผ์ด ์์ฑ๋๋ค!
useState
state ๊ฐ์ ๋ณ๊ฒฝํ๋ ๋ฐฉ๋ฒ
1. updateํจ์์ ์ํ๋ ๊ฐ์ ๋ฃ๋๋ค.
setCounter(2)
2. โญ๏ธ์ด์ ๊ฐ(prev)๊ฐ์ ์ด์ฉํด์ ํ์ฌ ๊ฐ์ ๊ณ์ฐํ๋ค.
const [counter,setCounter]=useState(0);
setCounter(counter+1); //โ
setCounter((current)=> current+1); //๐
พ๏ธ
โ๏ธcounter์ ๊ฐ์ด ์ด๋์ ๋ฐ๊ผ์์ง ๋ชจ๋ฅธ๋ค!! (๋์ ๊ธฐ๋๊ฐ๊ณผ ๋ค๋ฅผ์์๋ค)
→ ํจ์๋ฅผ ๋ฃ์ด ์ฌ์ฉํ๋ค (ํจ์์ ๋งค๊ฐ๋ณ์๋ ํ์ฌ state๊ฐ์ด๋ค)
→ ๋ ์์ ํ๋ค. (๊ฒฐ๊ณผ๊ฐ์ ๋์ผํ ์ ์์ด๋)
๐ค <input>์ value๋ฅผ state๋ก ์ฐ๊ฒฐํ๋ ์ด์
→ ๋จ๋ฐฉํฅ ๋ฐ์ดํฐ ํ๋ฆ์ผ๋ก, state๋ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๊ณ , ๋ณ๊ฒฝ๋ ๋๋ง๋ค ๋ฆฌ๋ ๋๋ง์ ๋ฐ์์ํจ๋ค.
value์ state๋ฅผ ์ฐ๊ฒฐํ๋ค๋ฉด , <input>์ value ์์ฑ์ ์ํ๋ฅผ ๋ฐ์ธ๋ฉํ์ฌ <input> ์ value๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค onChange์ setState()์ ์ํด, state๋ณ๊ฒฝ๋๊ณ , ๋ณ๊ฒฝ๋ง๋ค ๋ฆฌ๋ ๋๋ง ๋ ๊ฒ์ด๋ค!