교육 68일차 강의

구성본·2022년 6월 24일

1. 학습한 내용

<리액트>

프론트엔드 프레임워크 중 하나
ex) 리액트, 앵귤러, 뷰제이에스(대세는 리액트)
페이스북 개발자들이 좀 더 웹페이지 반응이 빠르고 멋져지기를 원해서 개발한 프레임워크
오픈소스 코드
화면 출력에 특화된 프레임워크
컴포넌트를 조립하여 화면 구성
게임엔진 원리를 도입하여 화면 출력속도가 빠름(Virtual DOM)
실습을 위해 설치
-웹팩(web pack):프로젝트에 사용된 파일을 분석하여 기존 웹문서파일로 변환하는 도구
-Node.js: 확장성있는 네트워크 애플리케이션 개발에 사용, 자바스크립트를 언어로 활용
-npm(노드프로그램):Node Package Manager, 자바스크립트 라이브러리 관리 프로그램
-설치후 명령프롬프트 실행(관리자 권한으로)
-cd..(나가기)/cd 해당파일(들어가기)로 만들어서 지정한 파일로 이동
-C드라이브에 React을 만들어 놨으니 이동후 nvm -v, node -v로 각 버전 확인
-npx create-react-app proj1(파일명)으로 proj1생성
-code .으로 비주얼스튜디오코드 열기
-비주얼스튜디오 코드에서 proj1 src에서 코드들 확인
-proj1 파일에서 터미널 열고 npm start로 프로그램 실행
-비주얼스튜디오 코드에서 확장들어가서 reactjs code snippets 설치

SPA?
-Single Page Application의 준말 즉 페이지가 하나라는 뜻이다. 하나의 페이지 안에서 자바스크립트가 필요한 페이지나 정보만 동적으로 그려준다. 즉, 새 페이지로 넘어갈때마다 서버에서 HTML CSS JS 소스를 가져올 필요가 없어 새로고침이 필요없다. 따라서 사용자에게 물흐르듯 끊김없는 웹앱 경험을 선사해줄 수 있다.
-단점은 처음에 필요한 리소스를 다 가져와야 해서 초기 구동 속도가 느리다.
-리액트는 이런 SPA의 형식이다.
리액트 파일 구조
-node_modules : 해당프로젝트에 대한 라이브러리가 저장
-public : 정적 파일을 넣는 디렉토리(html 파일, img등)
-Src폴더에 코드의 대부분이 들어 감(index.js, 리액트 컴포턴트 같은 js파일, css파일 등)
-Components : pages에서 사용할 컴포넌트들이 들어가 있다.
-pages : app.js 파일에서 react-router-dom을 사용해서 나눈 라우팅의 컴포넌트가 여기에 정리
-src/app.js 파일로 시작
컴포넌트
-소프트웨어 개발을 마치 레고(Lego) 블록을 쌓듯이 쉽게 할 수 있도록 하는 기술을 말한다.즉, 기존의 코딩 방식에 의한 개발에서 벗어나 소프트웨어 구성단위(module)를 미리 만든 뒤 필요한 응용 기술을 개발할 때 이 모듈을 조립하는 기술을 말한다. 컴포넌트 기술을 활용하면 복잡한 정보 시스템을 신속하게 구축할 수 있으며, 유사한 정보 시스템을 구축할 때 재사용이 가능한 장점이 있다. 특히, 급속도로 변하는 인터넷 환경에서 표준화된 소프트웨어를 만드는 것이 필요하기 때문에 컴포넌트는 매우 중요하다.
-JSX = JavaScript + XML => 하나의 파일에 자바스크립트와 HTML을 동시에 작성
컴포넌트 만들시 주의사항
-컴포넌트 이름은 반드시 대문자로 시작
-컴포넌트와 일반 HTML 태그를 구별하는 방법은 태그가 대문자로 시작하는지 여부
-소문자로 시작하면 일반 HTML 태그로 분류

-js

import logo from './logo.svg';
import './App.css';
import TodaysPlan from './component/TodaysPlan';
import Box1 from './component/Box1';

function App() {
  return (
    <div>
      <Box1 name="한국"/>
      <Box1 name="미국"/>
      <Box1 name="일본"/>
    </div>
  );
}
export default App;

-css

.box{
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

-jsx

import React, { Component } from 'react';

class Box1 extends Component {
    render() {
        return (
            <div className='box'>
                Box1
                <p>{this.props.name}</p>
            </div>
    );
    }
}
export default Box1;