6월24일 개발일지

학습한내용
1.리액트
프론트앤드 프레임 워크 중 하나
리엑트(react),앵귤러(angular), 뷰제이에서(vue.js)
개념
페이스북 개발에 사용한 기술
공개 소프트웨어
화면 출력에 특화된 프레임워크

장점
컴포넌트를 조립하여 화면 구성
게임 엔진 원리를 도입하여 화면 출력 속도가 빠르다.

리액트 개발 환경 설치
Node.js(필수) : 확장성 있는 네트 웤크 애플리케이션 개발에 사용되는 S/W 플랫폼. 작성 언어로 자바스크립트 활용
에디터 (VS Code)
웹 브라우저(Chrome,firefox,edge등)

Nodejs 설치하기
https://nodejs.org/en/
위 사이트에서 설치

https://github.com/coreybutler/nvm-windows/releases
최신버전 1.1.9 nvm-setup.zip압축 해제후 설치
1)명령 프롬프트 실행
2)nvm-v/ 버전 확인하기
3) nvm intall 16.15.1/nodejs설치
4)node-v/nodejs 설치 확인
5)npm-v/npm 확인
6)react 설치 한 경로로 이동

프로젝트 시작하기
1)프로젝트 설치하고 싶은 경로로 이동
2)프로젝트 설치
npx create-react-app 폴더명
학습 폴더명 :0624_proj1

Happy hacking 나오면 설치 완료

실습
app.js에서

function App(){
return (
<div> 
  <div>Hello world</div>
  </div>
  );
  

실습 2 component 만들기
src-component 폴더 만들기
component- TodaysPlan.jsx 파일 만들기
rcc+enter 하면 기본적인 틀이 나옴

Component } from 'react';

class TodaysPlan extends Component {
render(){
   return(
        <div className=:message-container">놀러가자!!!
       </div>
      );
     }
    }
```export default TodaysPlan;
저장 후 app.js로 이동
컴포넌트 불러오기
import TodaysPlan from './component/TodaysPlan';
function App(){
return
<div className="body">
 <TodaysPlan><TodaysPlan>
 </div>
  );
 }
 
 실습 box 만들기
 app.js
 function App() {
 return (
 <div>
  <div className="box">
   Box1
    <p>한국</p>
    </div>
    <div className="box">
    Box2
    <p>미국</p>
    </div>
    <div className="box">
    Box3
    <p>중국</p>
      </div>
     </div>
     );
    }
    app.css : 스타일 적용하기
    .box{
    width : 100px;
    height:100px;
    border:1px solid red;
    }
    실습3.box 만들기 -컴포넌트 활용
    
    BOX.jsx컴포넌트 만들기
    class Box1 extends Component {
    render(props) {
    return (
     <div className="box">
       Box1
       <p>{this.props.name}</p>
       </div>
       );
       }
       app.js 수정
       import Box from '.component/Box1'
       function App() {
       return 
       <div> 
         <Box1 name="한국"></Box1>
         <Box1 name="미국"></Box1>
         <Box1 name="중국"></Box1>
         </div>
         );
         }
        ```
        학습한 내용중 어려웠던 점
        react라는 새로운 것을 배우다 보니 헷갈리었다.
        해결방법 으로 많이 연습해야겠다
        
        학습소감
        
        react라는 새로운 라이브러리를 배웠다. 화면 출력에 특화된 프레임워크이고 강사님께 여쭤보았는데 기업에서 많이 사용된다고하니 복습해서 잘 활용할수 있도록 해야겠다.