React - blog intro, 상단메뉴

코딩애플의 온라인 강의를 참고하여 작성한 글입니다

npm

Create React App이라는 라이브러리 도움을 받아 프로젝트 생성을 하는게 일반적인데

이 라이브러리를 쓰고싶으면

npm이 있어야 하는데 npm이란 라이브러리를 다 모아놓은 플랫폼이다

(node.js설치할때 딸려온다)

https://create-react-app.dev/

npx

powershell을 실행 한 뒤 프로젝트 생성해주는 명령어를 작성한다

npx create-react-app my-app

만든 프로젝트 파일 안의 어떠한 파일들이 있는지 살펴보자

• node_modules 폴더: 라이브러리 코드 보관함

• public 폴더 : static 파일 모아놓은 곳(html, img 파일 잠깐 보관시 이용하는 폴더)

• 🤩 src 폴더 : 소스 코드 보관함 (코드 짜는 곳)

  • 여기서 js 파일에 html 코드를 짜도 웹페이지에 구현이 잘 나오는 이유는 뭘까?

    메인 소스를 짜는 js 파일에서 (ex : app.js)

    app.js → index.html 로 구현될때 index.js가 index.html로 app.js를 집어넣는 역할을 함

• package.json : 프로젝트 정보(ex: 프로젝트 명, 버전 .. 등)

상단메뉴 만들기

해당 css 파일을 쓰려면 상단에 import 한다

import "./해당파일.css";

JSX

javascript안에서 html을 쉽게 쓸수있게 도와주는 javascript 언어이다
js 파일에 html 코드를 짜도 웹페이지에 구현이 잘 나오는 이유이다

html 이 아니라 JSX로 화면 구현이 가능한 것

JSX 문법 1.

class 넣을 땐 className 이라고 써야한다

function App() {
  return (
    <div className="App">
      <div className="black_nav">
        <h4>블로그</h4>
      </div>
    </div>
  );
}

이유는?
-> 'class'를 쓰면 class를 선언하는 문법이기 때문에
className으로 써야함

JSX 문법 2.
변수넣을 땐 {중괄호}

예를 들어 블로그 제목을 쓸때 하드 코딩으로 직접 html에 제목을 쓸수도 있지만
실제 서비스이면 서버에서 블로그 글을 가져와 보여주는 식으로 구동 된다

function App() {
  let post = "블로그 제목"; // 서버에서가져온 실제 데이터라고 생각하고 변수에 저장하였다
  return (
    <div className="App">
      <div className="black_nav">
        <h4>블로그</h4>
      </div>
      <h4>{post}</h4> <- 데이터 변수를 { } 안에 넣는다
    </div>
  )

서버에서 가져온 데이터를 태그안에 넣고 싶으면 { } 중괄호 안에 쓴다
-> 데이터 바인딩 : 변수를 html에 데이터를 넣는 것

JSX 문법 3.
style 넣을 땐 style= { {속성명: "속성값"} }

하지만 style = { color : red } 이런식으로 넣으면 에러가 뜨는데
그 이유는 {} 안에 object 형식으로 써야 한다
-> style={ { color : "red" }}

function App() {
  let post = "블로그 제목"; // 서버에서가져온 실제 데이터라고 생각하고 변수에 저장하였다
  return (
    <div className="App">
      <div className="black_nav">
        <h4 id={post} style={ { color : "red" }}>블로그</h4>
      </div>
      <h4>{post}</h4>{" "}
      {/* 서버에서 가져온 데이터를 태그안에 넣고 싶으면 ㅇ{ } 중괄호 안에 쓴다 */}
    </div>
  );
}

주의 key 값은 camelCase로 써야한다
ex) fontSize