โจํ์ฅ์์ 1์ผ์ฐจ
๐๐ป Javascript
SEO
SEO๋ "Search Engine Optimization"์ ์ฝ์๋ก, ๊ฒ์ ์์ง ์ต์ ํ๋ฅผ ์๋ฏธํ๋ฉฐ, ์ด๋ ์น์ฌ์ดํธ๊ฐ ๊ฒ์ ์์ง์์ ๋์ ์์๋ฅผ ์ป์ ์ ์๋๋ก ์ต์ ํํ๋ ํ๋ก์ธ์ค๋ฅผ ๋งํฉ๋๋ค. ๊ฒ์ ์์ง์ ์ฌ์ฉ์๊ฐ ํน์ ํค์๋๋ก ๊ฒ์ํ ๋ ๊ฐ์ฅ ๊ด๋ จ์ฑ ๋์ ์นํ์ด์ง๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด ๋ค์ํ ๊ธฐ์ค์ ํ์ฉํฉ๋๋ค.
๐๐ป h1 ํ๊ทธ๋ ํ ํ์ด์ง๋น 1๊ฐ์ฉ ์ฌ์ฉํ๋ค.
๐๐ป imgํ๊ทธ์ alt๋ next.js์์ ์๋ฌ์ ์์ธ์ด ๋ ์ ์๊ณ , ์ ๊ทผ์ฑ SEO์ ์์์ ๋์ผ์ ์๋ค๊ณ ํ๋ค.
๐๐ป ์๋งจํฑ ํ๊ทธ ๋ํ SEO ์ต์ ํ ๋ฐฉ๋ฒ ์ค ํ๋์ด๋ค.
์ฒซ ํ์ฅ๊ฐ์ ์ค์ต์ด์๋ค!
์งง์ ์๊ฐ๋ด์ ๋์ผํ ํ์ด์ง๋ฅผ ๊ตฌํํ๋๋ผ ์ข ํ๋ค์์ง๋ง
๋คํํ ์ ์๊ฐ ๋ด์ ์์ฑํ ์ ์์๋ค.
์ฒซ ํ์์ดํ์ด๋ผ ๋๊ทผ๋๊ทผํ๋ค๊ณ ํ๋ค..
.main-reply button {
width: 80px;
margin-top: 16px;
align-self: flex-end;
/* margin-left: auto; */
}
๋๊ธ ๋จ๊ธฐ๊ธฐ ๋ฒํผ์ ์ค๋ฅธ์ชฝ๋ฐฐ์น ํด์ผํ์ง๋ง, ๋น์ฐํ align-item์ ์ฌ์ฉํ๋ฉด ๋๊ฒ ์ง? ํ๊ณ ์์๋๋ฐ ์๋ฌด๋ฐ ๋ณํ๊ฐ ์์ด ๊ต์ฅํ ๋นํฉํ๋ค.
๊ทธ๋ฌ๋ค๊ฐ align-self๋ฅผ ํด๋ณผ๊น..? ํ๋๋ ์ด์ ์์ผ ์ค๋ฅธ์ชฝ ๋ฐฐ์น๋ก ์ ์ฉ๋์๋ค..
align-item VS align-self
align-items:
- ์ ์ฉ ๋์: ๋ถ๋ชจ ์์์ ์ฌ์ฉ๋ฉ๋๋ค.
- ๋ชฉ์ : ๋ถ๋ชจ ์์ ๋ด์ ๋ชจ๋ ์์ ์์์ ๋ํด ์์ง(์ธ๋ก) ์ ๋ ฌ์ ์ง์ ํฉ๋๋ค.
align-self:
- ์ ์ฉ ๋์: ์์ ์์์ ๊ฐ๋ณ์ ์ผ๋ก ์ฌ์ฉ๋ฉ๋๋ค.
- ๋ชฉ์ : ํน์ ์์ ์์์ ๋ํด ๋ถ๋ชจ์ align-items ์์ฑ๊ณผ๋ ๋ค๋ฅธ ์์ง ์ ๋ ฌ์ ์ง์ ํฉ๋๋ค.
.main-reply button {
width: 80px;
margin-top: 16px;
margin-left: auto;
}
๐ก margin-left: auto;๋ฅผ ์ฌ์ฉํ๋๋ฒ์ด ์๋ค๊ณ ๊ฐ์ฌ๋๊ป์ ๋ง์ํด์ฃผ์ จ๋ค.
์ด๋ฐ ๋ฐฉ๋ฒ์ ์๊ฐํด๋ณธ์ ์ด ์์๋๋ฐ left๋ฅผ auto๋ก ์ง์ ํ๋ฉด, ๋ฒํผ์ ํฌ๊ธฐ๋ฅผ ์ ์ธํ ์ฌ๋ฐฑ์ด ์๋์ผ๋ก ์ํ๋๋น๋ฅผ ๊ฐ๋์ฑ์ฐ๋ฉด์, ์ญ ๋์ด์ ธ์ ๋งจ์ค๋ฅธ์ชฝ์ผ๋ก ๋ฐฐ์น๊ฐ ๋๋ค๊ณ ํ๋ค!
this -> ํธ์ถํ๋ ์์ ์ผ๋ก ๊ฒฐ์
์ฝ์๋ก๊ทธ์์ thiS๋ ์ ์ญwindpw, global
โจ ํ์ดํํจ์๋ this๊ฐ ๊ฐ์ฒด๋ก ๊ณ ์ ์ด๋๋ค????
JSON
JSON์ ์๋ฃํ์ ๋ฌด์์ผ๊น์? ๋ผ๊ณ ๊ฐ์ฌ๋์ด ์ง๋ฌธ์ ํ์ จ์๋
object๋ผ๋ ๋ค์์ ๋ต๋ณ์ด ๋์์ง๋ง json์ objectํํ๋ฅผ ๊ฐ์ง text์ด๋ค.
text๋ ๋๋ถ๋ถ์ ํ๋ก๊ทธ๋๋ฐ์ธ์ด์์ ๊ฐ๋ฅํ์ง๋ง, JS์ ํน์ํ object์ ๊ฒฝ์ฐ๋ผ๋ฉด, ์ ๋ฌ์ ์ด๋ ค์์ด ์์ ์ ์๊ธฐ ๋๋ฌธ์ด๋ผ๊ณ ํ์ จ๋ค.
Promise
์์ฒญํ ์์ ์ด ์ฑ๊ณต์ ์ผ๋ก ๋ฐ์ผ๋ฉด ์ฝ๋ฐฑํจ์ ์ด๋ ๊ฒ ํด์ค๊ฒ, ์คํจํ๋ฉด ์ด๋ ๊ฒ ํด์ค๊ฒ ๋ง๊ทธ๋๋ก ํ๋ก๋ฏธ์ค๋ ์ฝ์์ด๋ค
const a = (callback) => {
setTimeout(() => {
console.log(1);
callback();
}, 1000);
};
const b = () => console.log(2);
a(() => {
b();
});
์ด ์ฝ๋๋ฅผ Promise๊ฐ์ฒด๋ฅผ ํ์ฉํด๋ณด์.
const a = () => {
return new Promise((resolve) => {
setTimeout(() => {
console.log(1);
resolve();
}, 1000);
});
};
const b = () => console.log(2);
a().then(() => b());
// a(() => {
// b();
// });
a์ ํจ์๋ promise์ ๊ฐ์ฒด๋ฅผ returnํ๋ ํจ์๋ก ๋ณ๊ฒฝ๋์๊ณ ,
then์ ๋ฉ์๋๋ก ์ ๋ฌ๋๋ ํจ์(b)๋ resolve์ ๋งค๊ฐ๋ณ์์ ๋ค์ด๊ฐ ์ฌ์ฉ๋๋ฉฐ, then์ ์ฌ์ฉํ๋ฉด ํ๋ก๋ฏธ์ค ๊ฐ์ฒด๋ฅผ ๊บผ๋ผ ์ ์๋ค
โจresolve๋ ๊ธฐ์กด์ callback ์ฝ๋ ๋์ ๋ค์ ์คํํ ์ฝ๋ฐฑ์ฝ๋ฐฑํจ์์ ์์น๋ฅผ ๋ช ์ํด์ค๋ค.
์์ ์คํ๋ณด์ฅ ์ญํ !
resove์ reject
then์๋ resolveํจ์๋ฅผ ๋ฃ์ด์ฃผ๊ณ ,
catch์ error callback(reject)ํจ์๋ฅผ ๋ฃ์ด์ค๋ค.
resolve์ reject๋ ์์ถฉ๋๋ ๊ฐ๋ ์ผ๋ก ๋์ค์ ํ๋๋ง ์คํ๋ ๊ฒ์ด๋ค.
peding ๐๐ป resolve/reject ๐๐ป await
const a = () => {
return new Promise((resolve) => {
setTimeout(() => {
console.log(1);
resolve();
}, 1000);
});
};
const b = () => {
return new Promise((resolve) => {
setTimeout(() => {
console.log(2);
resolve();
}, 1000);
});
};
const c = () => {
return new Promise((resolve) => {
setTimeout(() => {
console.log(3);
resolve();
}, 1000);
});
};
const d = () => {
console.log(4);
};
1,2,3,4๊ฐ ์์๋๋ก ์คํ์ด ๋ณด์ฅ๋๊ณ ์ถ๋ค๊ณ ํ๋ค.
a().then(() => {
b().then(() => {
c().then(() => {
d();
});
});
});
์ด๋ ๊ฒ ์์ฑํ ์ ์์ง๋ง, ์ด๋ ๋ค๋ฉด ์ฝ๋ฐฑ์ง์ฅ๊ณผ ๋ค๋ฅผ๊ฒ ์๋ค..
โ๏ธthen์์ ์ ๊ณต๋๋ ์ฝ๋ฐฑ๋ถ๋ถ์์ promise ์ธ์คํด์ค๋ฅผ ๋ฐํํ๊ฒ๋๋ฉด, then๋ฉ์๋ ์ฒด์ด๋์ผ๋ก ์ด์ด์ then ๋ฉ์๋๋ฅผ ํ๋ฒ ๋ ์ธ์์๋ค.
a()
.then(() => {
return b();
})
.then(() => {
return c();
})
.then(() => {
d();
});
promise ์ธ์คํด์ค๊ฐ ๋ฐํ๋๋ then๋ค์ ๋ฉ์๋ ์ฒด์ด๋ ํํ๋ก ๋ถ์ฌ์ ์ธ ์์๋ค.
//then์์ ๋ฃ๋ ์ฝ๋ฐฑํจ์๊ฐ b()๊ฐ์ด ํ๋ก๋ฏธ์ค๋ฅผ returnํ๋ค๋ฉด, then ๋ฉ์๋ ์ฒด์ด๋์ ์ฌ์ฉํ ์ ์๋ค. ํ๋ก๋ฏธ์ค๋ฅผ ๋ฆฌํดํ๋ ํจ์๋ง return b() ์ด๋ฐ์์ผ๋ก ํ๊ธฐํ๋ค.
a()
.then(b)
.then(c)
.then(() => {
console.log('done')
});
์ค๊ดํธ์์ ๋ฐ๋ก return๋์ค๋ฉด ์๋ตํ ์ ์๊ธฐ ๋๋ฌธ์ ์ด์ ๊ฐ์ด ๋ณ๊ฒฝํ ์ ์๋ค.
d๋ ํ๋ก๋ฏธ์ค ๊ฐ์ฒด๋ฅผ ๋ฐํํ์ง ์๋ ์ผ๋ฐ ํจ์์ด๊ธฐ๋๋ฌธ์ return์ด ์๋๋ฏ๋ก, ์ค๊ดํธ๋ฅผ ์๋ตํ์ง ์๋๋ค.
before
const getMovies = (movieName, callback) => {
fetch(`url/${movieName}`)
.then((res) => res.json())
.then((res) => {
console.log(res);
callback();
});
};
getMovies("frozen", () => {
console.log("๊ฒจ์ธ์๊ตญ");
getMovies("avengers", () => {
console.log("์ด๋ฒค์ ธ์ค");
getMovies('avatar',()=>{
console.log("์๋ฐํ");
})
});
});
after
const getMovies = (movieName) => {
return new Promise((resolve) => {
fetch(`url/${movieName}`)
.then((res) => res.json())
.then((res) => {
console.log(res);
resolve();
});
});
};
getMovies("frozen")
.then(() => {
console.log("๊ฒจ์ธ์๊ตญ");
return getMovies("avengers");
})
.then(() => {
console.log("์ด๋ฒค์ ธ์ค");
return getMovies("avatar");
}).then(()=>{
console.log("์๋ฐํ");
})
await- async
async ํจ์
:async ํค์๋๋ ํจ์๋ฅผ ๋น๋๊ธฐ ํจ์๋ก ๋ง๋ญ๋๋ค. ์ฆ, ํจ์ ์์์ await๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ํฉ๋๋ค.
โ๏ธasync ํค์๋๋ฅผ ๋ถ์ฌ์ฃผ๋ฉด, ๋ด๋ถ์ ์กด์ฌํ๋ ํจํด์ ์ฌ์ฉํด ๋น๋๊ธฐ ์ฝ๋๋ฅผ ์ ์ดํ ์ ์๋ค. → then์ ์ฌ์ฉํ๋ ํจํด๋ณด๋ค ํจ์จ์ ์ด๋ค.
await ํํ์:
- await๋ async ํจ์ ๋ด์์๋ง ์ฌ์ฉ ๊ฐ๋ฅํฉ๋๋ค.
- await๋ ๋น๋๊ธฐ ์์ ์ด ์๋ฃ๋ ๋๊น์ง ํจ์์ ์คํ์ ์ผ์ ์ค์งํ๋ฉฐ, Promise๊ฐ fulfilled ์ํ๊ฐ ๋๋ฉด ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํฉ๋๋ค.
- await๋ ์ฃผ๋ก Promise๋ฅผ ๋ฐํํ๋ ํจ์๋ ๋น๋๊ธฐ ์์ ์ด ํฌํจ๋ ํจ์์์ ์ฌ์ฉ๋ฉ๋๋ค.
โ๏ธawaitํค์๋์ ๋น๋๊ธฐ ํจ์ ์คํ์ ๊ธฐ๋ค๋ฆฐ๋ค๋ ์๋ฏธ
aํจ์๊ฐ ํธ์ถ๋๋๊ฒ์ ๊ธฐ๋ค๋ ธ๋ค๊ฐ, ๋ค์์ผ๋ก ๋์ด๊ฐ bํจ์๋ฅผ ํธ์ถํ๋ค.
await์ ๊ฐ์ธ๊ธฐ ์ํด async wrapํจ์๋ฅผ ์ฌ์ฉํ๋ค.
ํจ์ฌ ๋ ์ง๊ด์ ์ผ๋ก ๋ณ๊ฒฝํ ์ ์๋ค!
โ๏ธconsole.log๊ฐ์ promise ์ธ์คํด์ค๋ฅผ ๋ฐํํ์ง ์๋ ๋ฉ์๋ ์์ await๋ฅผ ๋ถ์ด๋ฉด ์๋๋ค.
fetch
fetch ํจ์๋ Promis๊ฐ์ฒด๋ฅผ ๋ฐํํ๋๋ฐ, Prototype์ ํ์ธํด๋ณด๋ฉด,
then, catch, finally ๋ฉ์๋๋ฅผ ์ฌ์ฉํ ์ ์๋ค๋๊ฒ์ ๋ณผ ์ ์๋ค.
๐ง then๋ฉ์๋๋ก promise๊ฐ์ฒด๋ฅผ ๊บผ๋ด๊ณ , ๋งค๊ฐ๋ณ์์ธ res๋ ๋ฌด์์ด ๋ด๊ฒจ์์๊น?
response์ ์๋ต๊ฐ์ฒด๊ฐ ๋ด๊ฒจ์๋ค!
ํ์ง๋ง, ์๋ต์ฒ๋ฆฌ์ํ๋ฑ
์ฌ์ ํ ์ฐ๋ฆฌ๊ฐ ์์ฒญํ ๋ฐ์ดํฐ๋ ๋ณด์ด์ง ์๋๋ค
์๋ต๊ฐ์ฒด์ json์ ๋ฉ์๋๊ฐ ๋ด๊ฒจ์๋ค.
๐๐ป json์ ํธ์ถํด์ผ์ง๋ง fetch๋ก ๊ฐ์ ธ์จ ์๋ต์ ๊ฒฐ๊ณผ์์ ๋ฐ์ดํฐ๋ฅผ ๊บผ๋ผ์์๋ค!
json๋ฉ์๋๋ก ํธ์ถํ๋ฉด, Promise์ ์ธ์คํด์ค๊ฐ ๋ฐํ๋๊ณ , promis์ด๋ฏ๋ก then์ ์ฌ์ฉํด ํ๋ก๋ฏธ์ค๋ฅผ ์ต์ข ์ ์ผ๋ก ๊บผ๋ด ๋๋์ด data๋ฅผ ์ป๋๋ค!
async-awaitํจํด์ ์ฌ์ฉํ๋ค.
๋๋ฒ์งธ ์ค์ต : ๊ณ์ฐ๊ธฐ ๊ตฌํํ๊ธฐ