LIKELION๐Ÿฆ TIL(2022-06-28)

daryu519ยท2022๋…„ 6์›” 30์ผ
0

๋ฉ‹์Ÿ์ด ์‚ฌ์ž์ฒ˜๋Ÿผ

๋ชฉ๋ก ๋ณด๊ธฐ
10/12
post-thumbnail

Git, GitHub

  • git rm โ€”cached [ํŒŒ์ผ๋ช…] โ‡’ git add ์‚ญ์ œ (index์—์„œ ๊ทธ๋ƒฅ ์ง€์›Œ๋ฒ„๋ฆฌ๋Š” ๊ฒƒ)
    ํŠน์ • ํŒŒ์ผ์„ ์ œ์™ธํ•  ๋•Œ ์‚ฌ์šฉํ•˜์ž.

  • git resotre a โ‡’ ํŒŒ์ผ ์ˆ˜์ •๋˜์—ˆ์„ ๋•Œ, ๊ทธ ์ด์ „์œผ๋กœ ๋ฐ”๊พธ๋Š” ์ฝ”๋“œ

  • ์„œ๋ฒ„ ์‹œ์ž‘ํ•˜๊ธฐ npm run start

    • cat .gitignore 3๊ฐ€์ง€ ํŒŒ์ผ๋“ค์ด github์— ์˜ฌ๋ผ๊ฐ€์ง€ ์•Š์•˜๋‹ค. (git์ด ์ฒ ์ €ํ•˜๊ฒŒ ๋ฌด์‹œํ•œ๋‹ค.)
    • ์‹ค์ œ๋กœ, node_modules ํด๋”๋Š” github์— ์˜ฌ๋ผ๊ฐ€์ง€ ์•Š์•˜๋‹ค.
      โ†’ ๋”ฐ๋ผ์„œ, ์ƒˆ๋กœ์šด ํ™˜๊ฒฝ์—์„œ git clone ๋ฐ›์„ ๋•Œ๋Š” ์ € node_modules๋ฅผ ๋ฐ›์•„์•ผ ํ•œ๋‹ค.
    • ๊ทธ๋ ‡๋‹ค๋ฉด, node_modules(๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ) ๋ฅผ ์™œ ์ œ์™ธํ•œ ๊ฒƒ์ผ๊นŒ ?
      โ†’ package.json ํŒŒ์ผ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. (์ด๊ฒƒ๋งŒ ์žˆ์œผ๋ฉด, npm install๋กœ ๋‹ค์‹œ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Œ.)
      ๋งŒ์•ฝ, ์„ค์น˜๊ฐ€ ์ง„ํ–‰๋˜์ง€ ์•Š๋Š”๋‹ค๋ฉด, npm install -f
    • npm run start ๋ฅผ ํ•˜๋ฉด ์„œ๋ฒ„ ์‹œ์ž‘!
      โ†’ ์„œ๋ฒ„ ์ข…๋ฃŒ๋Š” ctrl + c
    • localhost:8000 ๋“ค์–ด๊ฐ€๋ฉด ํ™ˆํŽ˜์ด์ง€ ๋‚˜์™€์•ผ ํ•œ๋‹ค.
      localhost:8000/test , localhost:8000/test-space
  • react

    • ๋ฐ˜๋“œ์‹œ export default TestPage;
    • className=โ€ โ€œ ์œผ๋กœ class ํ‘œ์‹œ.
      style = { {color:โ€redโ€} } ์•ˆ์— ์žˆ๋Š” ๊ฒƒ์€ js ๊ฐ์ฒด.

      ๋ฌด์กฐ๊ฑด ์ด๋ ‡๊ฒŒ ์จ์•ผ ํ•จ.

GitHub ๋ธ”๋กœ๊ทธ

gnb(global navigation bar)

  • navigation menu. โ†’ ๋ชจ๋“  ์‚ฌ์ดํŠธ๋“ค๋งˆ๋‹ค ๋น„์Šทํ•œ ํ˜•ํƒœ์ด๋‹ค.
  • ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ๋ Œ๋”๋งํ•˜๋ฉด ๋œ๋‹ค.
  • ๋งŒ์•ฝ ์ž๋™ import (ctrl + space) ์ž‘๋™ ์•ˆํ•˜๋ฉด?
    • f1 โ†’ organize imports (imports ์žฌ๊ตฌ์„ฑ)
    • f1 โ†’ typescript restart server ํ•˜๋ฉด ํ•ด๊ฒฐ๋จ.
      (vscode๊ฐ€ ํ”„๋กœ์ ํŠธ๋ฅผ ๋‹ค์‹œ ์ฝ๋Š” ๋ฐฉ์‹)
  • ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, ํŽ˜์ด์ง€ ์ด๋™ ์—†์ด ์ˆœ์‹๊ฐ„์— ๋ฐ”๋€๋‹ค.. ํŽ˜์ด์ง€๊ฐ€ ์ด๋ฏธ ๋ฐ›์•„์ ธ ์žˆ๋Š” ์ƒํƒœ.
๐Ÿ’ก `Link ํƒœ๊ทธ`๋Š” `gatsby์—์„œ๋งŒ ์ œ๊ณต`ํ•˜๋Š” tag์ด๋‹ค. (react ์•„๋‹˜) โ†’ gatsby ๋Š” ์–ด์ฐจํ”ผ ๋ชจ๋“  ํŒŒ์ผ์„ ํ•œ ๋ฒˆ์— ๋‹ค ๋ฐ›๋Š”๋ฐ, ์—ฌ๊ธฐ์„œ link ๋ฅผ ์ด์šฉํ•ด์„œ ์ด๋™ํ•˜๋Š” ๊ฒƒ์ด ํšจ์œจ์ ์ธ ๊ฒƒ์ด๋‹ค. ์‹ค์ œ ์ฝ”๋“œ์—๋Š” aํƒœ๊ทธ๋กœ ํ‘œํ˜„๋œ๋‹ค.

ํŽ˜์ด์ง€ component ์ค‘๋ณต (๋งค๋ฒˆ ๋‚˜์˜ค๋Š” ํŒจํ„ด)

  • ๋งŒ์•ฝ ์‚ฝ์ž…ํ•ด์•ผ ํ•  gnb ๊ฐ€ ์ˆ˜์‹ญ๊ฐœ๋ผ๋ฉด? ์ผ์ผ์ด ํ•˜๋‚˜์”ฉ ์‚ฝ์ž…ํ•  ๊ฒƒ์ธ๊ฐ€?
  • ๋งŒ์•ฝ gnb๋ฅผ ์ˆ˜์ •ํ•ด์•ผ ํ•œ๋‹ค๋ฉด, ์‚ฝ์ž…๋œ ๋ชจ๋“  ํŽ˜์ด์ง€์— ๋ฐฉ๋ฌธํ•ด์„œ ์ˆ˜์ •ํ•  ๊ฒƒ์ธ๊ฐ€?

๐Ÿค ํ•ด๊ฒฐ : Head.js ๋ผ๋Š” component ๋งŒ๋“ค์–ด์„œ ์ค‘๋ณต ์ œ๊ฑฐํ•˜๊ธฐ

  • src/components/Head.js ๋งŒ๋“ค๊ธฐ.
    ์ฝ”๋“œ ์‚ฝ์ž…ํ•˜๊ณ , component ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์€ ํŽ˜์ด์ง€์— <Head /> ํ•˜๋ฉด ๋.
    react ๋Š” component๋ฅผ ๋ผ๋Š” ํƒœ๊ทธ๋กœ ์น˜ํ™˜ํ•˜๊ฒŒ๋” ๋งŒ๋“ค์–ด์ค€๋‹ค.

Layout ์ปดํฌ๋„ŒํŠธ ์ถ”๊ฐ€

  • ๊ธฐ์กด์— ์ค‘๋ณต๋œ ๋ถ€๋ถ„์— ๋Œ€ํ•ด component ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ์‹์€ 1์„ธ๋Œ€ ๋ฐฉ์‹.
  • ์ตœ๊ทผ ๋ฐฉ์‹์€, ์œ„, ์•„๋ž˜, ์™ผ์ชฝ ๋ ˆ์ด์•„์›ƒ์ด ๋‹ค ๋น„์Šทํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด ๋ ˆ์ด์•„์›ƒ ํ‹€ ์ž์ฒด๋ฅผ ์•„์˜ˆ ๋งŒ๋“ค์–ด๋ฒ„๋ฆฌ๋Š” ๋ฐฉ์‹.
    โ†’ ๋งŒ๋“ค์–ด์ง„ ํ‹€ ์œ„์—๋‹ค๊ฐ€ ๊ฐ ํŽ˜์ด์ง€ ๋ณ„๋กœ ์‚ฝ์ž…ํ•˜๋Š” ์‹์œผ๋กœ ์ž‘์—…ํ•œ๋‹ค.
const Layout = ({children}) => {
	return (
		<span style = {{color:"red"}}>{children}</span>
	);
}
function App() {
	return (
		<>
			<Layout>Hello World</Layout>
			<div>๋ณธ๋ฌธ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค.</div>
		</>
	);
}

โ†’ {children}์€ Layout ํƒœ๊ทธ ์•ˆ์˜ โ€˜Hello Worldโ€™ ๋ฅผ ๋งํ•œ๋‹ค.

๋ฐ˜์‘ํ˜• container , ๊ณ ์ •ํ˜• ๋ ˆ์ด์•„์›ƒ

/* ๋ฐ˜์‘ํ˜• */
.con {
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}
/* ๊ณ ์ •ํ˜• */
.con {
  width:1200px;  
  margin-left:auto;
  margin-right:auto;
}
  • Layout.module.css
    • react ์—์„œ๋งŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅ.
    • ์•ˆ์— ์žˆ๋Š” ๋‚ด์—ญ๋“ค์„ ๊ฐ์ฒด์ฒ˜๋Ÿผ ๋ถˆ๋Ÿฌ๋‹ค ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค.

static img

  • ์„ค์น˜ํ•  ๋•Œ๋Š” ๋ฐ˜๋“œ์‹œ ctrl + c โ†’ npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem ๋กœ ์„ค์น˜. โ†’ package.json ์— ๋””ํŽœ๋˜์‹œ ์ถ”๊ฐ€๋จ.
    ๋งŒ์•ฝ, ์•ˆ๋˜๋ฉด ๋’ค์— -f ๋ถ™์—ฌ์„œ ํ•˜๊ธฐ.
  • ํ”Œ๋Ÿฌ๊ทธ์ธ ๊นŒ์ง€ ๋„ฃ๊ธฐ.
  • ๋งŒ์•ฝ ๋‹ค์šด๋กœ๋“œ ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ๊ณ  ์‹ถ๋‹ค๋ฉด ?
    • src/images ์•ˆ์—๋‹ค๊ฐ€ ๋„ฃ๊ธฐ. src =โ€../images/clifford.jpgโ€ ์ด๋Ÿฐ ์‹์œผ๋กœ.

GraphQL

๐Ÿ’ก ์‹ค์ œ ํ”„๋กœ์ ํŠธ ํ•˜๋ฉด์„œ, ๊ฐ€์žฅ ๋งŽ์ด ๋งˆ์ฃผ์นœ ์—๋Ÿฌ. Layout ์ปดํฌ๋„ŒํŠธ๋ฅผ `Layout.js` ๋กœ ์ €์žฅํ–ˆ๋Š”๋ฐ, ์ฝ”๋“œ์— path๊ฐ€ `layout` ์œผ๋กœ ๋˜์–ด ์žˆ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•„ ๋Œ€์†Œ๋ฌธ์ž ์˜ค๋ฅ˜๋กœ ์ธํ•œ **๋Ÿฐํƒ€์ž„ ์—๋Ÿฌ**๊ฐ€ ๊ณ„์† ๋ฐœ์ƒํ–ˆ๋‹ค. ์‹ค์ œ๋กœ ์ˆ˜๊ฐ•์ƒ ๋‹ค์ˆ˜๊ฐ€ ์ด๋Ÿฌํ•œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹คโ€ฆ

  • GraphQL : ์ฟผ๋ฆฌ language. ์šฐ๋ฆฌ๊ฐ€ ๋ฌด์–ธ๊ฐ€ ์š”์ฒญํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๋ฒˆ ๊ฐ•์˜์—๋Š” Get ๋ฐฉ์‹๋งŒ ์‚ฌ์šฉํ•จ.
    • Layout component ์—์„œ ๋ฌด์–ธ๊ฐ€ ํ•„์š”ํ•˜๋‹ค๋ฉด, GraphQL ํ•œํ…Œ ๋ช…๋ นํ•˜๋ฉด ๋œ๋‹ค.
    • localhost:8000/___graphql
      • ํ•„์š”ํ•œ ์ฟผ๋ฆฌ ์ถ”๊ฐ€ํ•  ๋•Œ๋Š” ๊ทธ๋ƒฅ
        query MyQuery1 { // ์ด๋ ‡๊ฒŒ ์ถ”๊ฐ€. ์‚ฌ์šฉ๋ฒ•๋งŒ ์ตํžˆ์ž.
        }
      • ์™ผ์ชฝ ํŒŒ์ผ๋“ค์€ ์›์žฌ๋ฃŒ๋“ค.
        ํ•ด๋‹น ์žฌ๋ฃŒ ์ž…๋ ฅํ•˜๊ณ , ctrl + enter ๋กœ ํ™•์ธ ๊ฐ€๋Šฅ.
    • GraphQl ๋กœ ํ…Œ์ŠคํŠธ ํ•ด๋ณด๊ธฐ
      Ctrl + Space : ์ž๋™์™„์„ฑ
      Ctrl + Enter : ์‹คํ–‰
    • GraphQL ์—์„œ ์ฟผ๋ฆฌ๊ฐ€ ํ•˜๋‚˜ ์ผ ๋•Œ๋Š” Query ๋งŒ ์จ๋„ ๋˜์ง€๋งŒ, ์ฟผ๋ฆฌ๊ฐ€ 2๊ฐœ ์ด์ƒ์ผ ๋•Œ๋Š” Query query1 ์ด๋Ÿฐ ์‹์œผ๋กœ ์ด๋ฆ„ ์จ์•ผ ํ•จ.

mdx ํŒŒ์ผ๋…ธ๋“œ๋ฅผ ์ฝ๋Š” ์ฟผ๋ฆฌ

๐Ÿ’ก ์˜ค๋ฅ˜ ๋ฐœ์ƒ ์ด์œ  : ๋™์˜์ƒ์„ ๋ณด์ง€ ์•Š๊ณ , ๊ธ€๋กœ ๋˜์–ด ์žˆ๋Š” ์„ค๋ช…๊ณผ ์ฝ”๋“œ๋งŒ์œผ๋กœ ํ•˜๋ ค๋‹ค๋ณด๋‹ˆ blog ํด๋”๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ณผ์ •์„ ๋†“์ณค๋‹ค. src/blog ์•ˆ์— mdx ํŒŒ์ผ๋“ค์ด ์žˆ๊ณ , ๊ทธ๊ฒƒ๋“ค์„ ์ฝ์–ด์˜ค๋Š” ๊ณผ์ •.
  • mdx : markdown ์„ ํ™•์žฅํ•œ ๋ฌธ๋ฒ•.
  • ๋…ธ๋“œ๋ž€ ๋ฌด์—‡์ธ๊ฐ€ ?
    • Gatsby project ์—์„œ โ†’ file 3๊ฐœ๋ฅผ ์ฝ์–ด์˜ค๋ฉด โ†’ node 3๊ฐœ๋ฅผ ์ฝ์–ด์˜ค๋Š” ์‹์œผ๋กœ ๋ฐ”๋€œ.

๋ธ”๋กœ๊ทธ ํฌ์ŠคํŠธ๋ฆฌ์ŠคํŠธ

map

  • ๋ณ€ํ˜•๋œ ๋ฒ„์ „์˜ ๋ณต์‚ฌ๋ณธ์„ ๋งŒ๋“ค๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉ.
  • arr.map(ํ•จ์ˆ˜); โ‡’ ํ•จ์ˆ˜๋Š” ๊ฐ ์š”์†Œ๋ฅผ ๋ณ€ํ™”๋œ ์š”์†Œ๋กœ ๋งŒ๋“œ๋Š” ๋กœ์ง์„ ๋„ฃ์–ด์•ผ ํ•œ๋‹ค.
  • map ์€ ์ผ์ข…์˜ mapping ์˜ ์˜๋ฏธ.
function ํ•จ์ˆ˜(input) {
	return input * 2;
}
const arr = [1,2,3];
const newArr = arr.map(ํ•จ์ˆ˜); // [2,4,6];

//์ฐธ๊ณ 
const newArr = arr.map((v) => v * 2);  // ์ด๋Ÿฐ ์‹์œผ๋กœ, arrow function์œผ๋กœ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ๋ฆฌ์•กํŠธ์—์„œ ๋ฐ˜๋ณต๋ฌธ์€ ๋ฌด์กฐ๊ฑด map
  • map์„ ํ†ตํ•ด ๋งŒ๋“ค์–ด์ง€๋Š” ์ตœ์ƒ์œ„ ์—˜๋ฆฌ๋จผํŠธ์—๋Š” ๋ฐ˜๋“œ์‹œ key๋ฅผ ์จ์ค˜์•ผ ํ•จ. unique ํ•œ ๊ฐ’์„ ์จ์ค˜์•ผ ํ•œ๋‹ค.
  • ๋งŒ์•ฝ allFile.nodes ๊ฐ€ 10๊ฐœ ์žˆ๋‹ค? ๊ทธ๋Ÿฌ๋ฉด 10๋ฒˆ ๋ฐ˜๋ณต โ†’ 10๊ฐœ์˜ li๊ฐ€ ์ƒ๊ธด๋‹ค๊ณ  ์ดํ•ดํ•˜๋ฉด ๋จ.

MDX ํ”Œ๋Ÿฌ๊ทธ์ธ

  • mdx ์ฝ์œผ๋ ค๋ฉด, ํ”Œ๋Ÿฌ๊ทธ์ธ ์„ค์น˜ ํ•ด์•ผํ•œ๋‹ค.
  • ํŒŒ์ผ ๋…ธ๋“œ๋“ค โ†’ mdx ๋…ธ๋“œ๋“ค๋กœ ๋ฐ”๋€œ.

๋ธ”๋กœ๊ทธ ํฌ์ŠคํŠธํŽ˜์ด์ง€ ์ถ”๊ฐ€

  • slug
    • velog-์ฒซ-์‹œ์ž‘ โ‡’ ์ด์ฒ˜๋Ÿผ - ๋กœ ์ด์–ด์ง„ ๊ฒƒ์„ slug ๋ผ๊ณ  ํ•œ๋‹ค.
  • blog ํด๋” ๋งŒ๋“ค์–ด์„œ, blog.js ๋„ฃ๊ณ , index.js ๋กœ ๋ฐ”๊ฟ”๋„ ์ธ์‹ํ•œ๋‹ค.
    โ†’ blog ํด๋” ์•ˆ์— ์žˆ์œผ๋ฉด ์ธ์‹ํ•˜๊ธฐ ๋•Œ๋ฌธ. /blog
    http://localhost:8000/blog โ‡’ ์ ‘์†ํ•ด๋„ ํŽ˜์ด์ง€๊ฐ€ ๋‚˜์˜จ๋‹ค.

๋ธ”๋กœ๊ทธ ํฌ์ŠคํŠธํŽ˜์ด์ง€์—์„œ ์ž…๋ ฅ๋œ slug๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ์˜ฌ๋ฐ”๋ฅธ ํฌ์ŠคํŠธ๋ฐ์ดํ„ฐ ์ฝ๊ธฐ

  • localhost:8000/blog/yet-another-post
    โ†’ slug ์ธ์‹ โ†’ {mdx.slug}.js ์—์„œ ์ธ์‹
  • ์ด ๋ถ€๋ถ„ ์—ญ์‹œ, layoutโ†’ Layout ์œผ๋กœ ์ˆ˜์ •ํ•˜๋‹ˆ ์˜ค๋ฅ˜ ํ•ด๊ฒฐ.
profile
Strengthen the core.

0๊ฐœ์˜ ๋Œ“๊ธ€