6/24 개발일지

정명환·2022년 6월 24일

대구 ai 스쿨

목록 보기

43/79

1)학습한 내용

React

가장 많이 사용하는 프런트엔드 프레임워크 중 하나이다.
리액트(react), 앵귤러(angular), 뷰제이에스(vue.js)

리액트 장점
1.페이스북 개발에 사용한 기술
2.공개 소프트웨어
3.화면 출력에 특화된 프레임워크
4.컴포넌트를 조립하여 화면 구성
5.게임 엔진 원리를 도입하여 화면 출력 속도가 빠름(Virtual DOM)

노드 패키지 매니저(npm) : Node Package Manager의 약자이다. NodeJS로 개발된 모듈들을 설치하고 관리해주는 패키지 매니져이다. 우리가 HTML CSS 수업에서 부트스트랩이 필요하면 가져다 썼던 것 처럼 nodeJS로 만들어진 유용한 모듈들을 가져다 쓰고 관리할 수 있다.

웹팩(Web Pack) : 프로젝트에 사용된 파일을 분석하여 기존 웹 문서 파일로 변환하는 도구이며 간단한 노드 기반의 웹 서버 구동

개발 환경 설치
Node.js (필수)
에디터 (VS Code 등)
웹 브라우져 (파이어폭스 등)

SPA란?
Single Page Application의 준말 즉 페이지가 하나라는 뜻이다. 하나의 페이지 안에서 자바스크립트가 필요한 페이지나 정보만 동적으로 그려준다. 즉, 새 페이지로 넘어갈때마다 서버에서 HTML CSS JS 소스를 가져올 필요가 없어 새로고침이 필요없다. 따라서 사용자에게 물흐르듯 끊김없는 웹 앱 경험을 선사해줄 수 있다. 단점은 처음에 필요한 리소스를 다 가져와야 해서 초기 구동 속도가 느리다.

리액트 파일 구조
node_modules : 해당프로젝트에 대한 라이브러리가 저장된다.

public : 정적 파일을 넣는 디렉토리(html 파일, img등)Src폴더에 코드의 대부분이 들어 감 (index.js, 리액트 컴포턴트 같은 js파일, css파
일 등)

Components : pages에서 사용할 컴포넌트들이 들어가 있다.

pages : app.js 파일에서 react-router-dom을 사용해서 나눈 라우팅의 컴포넌트가 여기에 정리된다.

src/app.js 파일로 시작

컴포넌트
JSX = JavaScript + XML
하나의 파일에 자바스크립트와 HTML을 동시에 작성

컴포넌트 만들시 주의사항
컴포넌트 이름은 반드시 대문자로 시작

컴포넌트와 일반 HTML 태그를 구별하는 방법은 태그가 대문자로 시작하는지 여부

소문자로 시작하면 일반 HTML 태그로 분류

실습 : box 만들기

props : 함수의 매개변수와 같은 존재

import React, { Component } from 'react';

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

export default Box1;

import './App.css';
import Box1 from './component/Box1';
function App() {
  return (
    <div>
      <Box1 name="한국"/>
      <Box1 name="미국"/>
      <Box1 name="중국"/>
    </div>
  );
}

export default App;