재밌는 Coding

1. 시험환경

    ˙ npm, yarn

    ˙ create-react-app

2. 목적

    ˙ yarn을 설치한다.

    ˙ yarn을 이용하여 프로젝트를 생성한다.

    ˙ 개발환경에서 프로젝트를 실행한다.

    ˙ 배포환경으로 프로젝트를 빌드하고 실행한다.

3. 적용

    ① npm을 이용하여 yarn을 설치한다.

        - 명령어 : npm install --global yarn

    ② yarn을 이용하여 현재 디렉토리(.)에 create-react-app을 생성한다.

        - 명령어 : yarn create react-app .

    ③ 프로젝트를 실행한다.

        - 명령어 : yarn start

    ④ 배포환경으로 프로젝트를 빌드한다.

        - 명령어 : yarn build

    ⑤ serve를 설치하고 빌드 디렉토리를 서비스한다.

        - 명령어 : yarn global add serve

        - 명령어 : npx serve [build 결과 디렉토리]

4. 결과

    ˙ 개발 소스와 빌드 패키지가 정상 동작되는 것을 확인한다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다 ※

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 단계별 학습을 통해서 ReactJS 사용법을 익힌다.

- state, props 기본 사용법을 학습한다.

3. 적용

① state 객체를 정의한다.

    - state 객체 안에 여러 값이 필요할 경우, {key:value} 형태의 json 양식으로 선언한다.

    - WorldList 컴포넌트를 호출하면서, "{this.state.이름}"으로 전달하였다.

    - 즉, 현재 컴포넌트의 state를 하위 컴포넌트의 props로 전달할 수 있다.

② WorldList 컴포넌트에서 props 값을 참조하여 데이터 처리한다.

    - App.js에서 {this.state.이름}으로 전달한 것을 "this.props.이름"으로 참조하였다.

4. 결과

    - this.state.items를 추가하면서 변경된 값이 출력되는지 확인한다.

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.