생활코딩 React 2022 1,2강 정리


그 동안 개강을 하고, SQLD 자격증 시험 공부를 하고, 아르바이트 대타를 뛰고, 개발 동아리 아이디어 회의를 하느라 블로그 관리에 소홀했던 점. 반성한다. 변명이 길었다. 어쨌든, 이번 대외 동아리에서 웹 프론트를 담당하게 되었다. 이번에는 react를 이용해볼 생각이라 틈틈히 공부를 시작해야한다. 타이밍 좋게 생활코딩에서 새 개정판 강의를 만들어준 덕에 즐겁게 공부할 수 있을 것 같다. 아자아자!


리액트는?

복잡한 코드는 숨기고 내가 만든 태그를 사용한다. 사용자 정의 태그를 만든다.

리액트를 만드는 것?

  1. 클래스 문법 사용하기
  2. 함수 문법 사용하기 *최근에는 함수를 사용하는 경우가 많기에, 이 수업은 함수를 이용한다.

개발환경만들기

  1. 온라인 플레이그라운드 : 컴퓨터에 리액트 개발환경X 온라인 서비스O ex)Stackblitz
  2. 내 컴퓨터에 리액트 개발환경
    • 리액트 웹 사이트
    • 새로운 react 앱 만들기
    • Create React App 클릭 -> 깃허브 -> 홈페이지 https://create-react-app.dev/
    • npx create-react-app 디렉토리명을 입력하면 된다는 설명이 나와있다. *npx를 깔기 위해서는 node.js를 깔아야한다.
    • Visual Studio Code에 새로운 폴더 만들기. (React로 폴더 만드는 것은 피해주기)
    • [터미널] [새 터미널] npx create-react-app .(현재 디렉토리를 의미한다.)
    • npm start를 명령한다. (리액트 개발환경 실행, 코딩 환경 시작)

간단하게 개발환경을 구축했다. 생활코딩은 차근차근 알려줘서 나도 잘 안되는 일도 차분히 방법을 찾게된다. npx create-react-app . 명령이 잘 통하지 않아 당황했지만~ 차분히 만져보니 다행히 성공이다. 코로나19의.. 망나니 행세로 오늘도 알바 대타를 10시간 다녀왔고.. 그리하여 일단 오늘은 구축까지.! 내일 이어서 공부해보겠다!! 아자아자!!