재밌는 Coding

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 간단한 블로그를 단계별 제작하는 방법을 통해서 ReactJS 사용법을 익힌다.

- 신규 프로젝트에 하위 컴포넌트들을 추가해 나가면서 프로젝트를 완성하는 방법을 확인한다.

3. 적용

① src/App.js 파일에서 기존 main 페이지 내용을 주석처기하고 WorldList 컴포넌트를 추가한다.

② WorldList 컴포넌트의 내용을 작성한다.

    - WorldTitle 하위 컴포넌트를 포함하고 임포트한 것을 확인한다.

③ WorldTitle 컴포넌트의 내용을 작성한다.

    - WorldTitle 컴포넌트에서 css 속성을 적용하는 방법을 확인한다.

④ WorldTitle 컴포넌트에 적용한 css 속성을 확인한다.

4. 결과

① npm start 명령어로 프로젝트를 실행하면, 메인 페이지가 수정된 것을 확인할 수 있다.

    - 하위 컴포넌트들을 차례대로 추가해 나가면서 프로젝트를 완성한다.

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

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

- 간단한 블로그를 단계별 제작하는 방법을 통해서 ReactJS 사용법을 익힌다.

- 메인 페이지를 수정하여 HelloWorld 문자열을 출력한다.

3. 적용

① src/compts/HelloWorld.js 파일을 생성한다.

② App.js 파일을 코딩 시작점으로하여 메인 페이지를 수정한다.

    - App.js에서 HelloWorld.js 파일을 import 한다.

    - 기존 JSX 태그 대신 HelloWorld 컴포넌트를 호출한다.

4. 결과

① npm start 명령어로 프로젝트를 실행하면, 메인 페이지가 수정된 것을 확인할 수 있다.

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