React CRA

create react-app week-1

cd week-1 # week-1 폴더로 이동
yarn start # 프로젝트 시작

import logo from "./logo.svg";
import "./App.css";
// 안쪽으로 들여온다.

// im : 안쪽
// ex(out) " 바깥쪽"

// port(항구)

// 이 파일이 우리의 PG

// 컴포넌트의 이름은 대문자여야 한다.
// 폴더는 커멜 케이스로 만들어야 한다.
function App() {
  // 여기가 자바스크립트를 쓸 수 있는 영역
  function testFunc() {}

  return (
    // JSX 문법 (Javascript + XML - HTML) : 쟉스~
    <div className="App">
      {/* 여기가 우리의 playground */}
      {/* 이안에는 {}이안에는 js요소를 쓸 수 있다. */}
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
// 바깥쪽으로 내보낸다.

리액트에서 Add.js의 초기설정
ES7+ React/Redux/React-Native snipp 확장팩 다운 받고

rfce 입력시

import React from 'react'

function App() {
  return (
    <div>App</div>
  )
}

export default App

자동 완성
rfc 입력시

import React from 'react'

export default function App() {
  return (
    <div>App</div>
  )
}

export default App

값으로 자동 완성

폰트 컬러

폰트 컬러 변수로 선언

오늘은 리액트 입문과정의 시작으로 기본 사용 방법등 원리에 대해 공부했다.
위에는 메모처럼 남겼지만 앞으로는 정리해서 나만의 언어로 재해석할 생각이다.

리액트수업을 시작하는 소감은
생각보다 너무 재미있고 그전에 열심히 공부했던게 통한 것같다 무슨말인지 알아 듣고 있어서 설레기도 했다.
하다보니 자바스크립트에 대한 공부를 더 열심히 해야 겠다고 다짐을 하였고,
시간 분배나 컨디션 조절 계획도 더 잘 잡아야 겠다는 마음이 많이 든다.

아직 for문과 if문을 활용을 더많이 해볼 계획이다.
알고리즘 문제에 더 접근 하기위해 활용 해봐야겠다.