재밌는 Coding

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

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

- 작성한 컴포넌트에 매개변수(props)를 전달하고 참조하는 방법을 학습한다.

3. 적용

① 컴포넌트 호출과 함께 매개변수를 전달한다.

    - HelloWorld 컴포넌트 호출과 동시에 "Hello World"라는 문자열을 갖는 title(props)을 전달한다.

    - Inform 컴포넌트 호출과 동시에 "Information about your selection..."이라는 문자열을 갖는 article(props)을 전달한다.

② 매개변수(props)를 전달 받은 컴포넌트는 "this.props.변수"의 형태로 전달 받은 값을 참조할 수 있다.

4. 결과

    - 컴포넌트 호출과 함께 매개변수(props)를 전달 하고 참조하는 법을 확인하였다.

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

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

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

- Class 기반으로 Component를 정의하고 사용하는 방법을 학습한다.

3. 적용

① App 클래스에서 HelloWorld, WorldList, Inform 클래스 (사용자 정의 태그)를 호출한다.

    - 컴포넌트를 마치 HTML 태그인 것처럼 호출할 수 있다.

② HelloWorld, WorldList, Inform 클래스를 각각 정의 한다.

4. 결과

    - 컴포넌트(사용자 정의 태그)를 정의하고 사용하는 법을 익히고 결과를 확인한다.

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

1. 시험환경

- 윈도우 10

- npm v6.14.13

2. 목적

- 무료 React.JS 템플릿을 다운받는다.

- 다운 받은 무료 React.JS 템플릿을 프로젝트에 적용한다.

3. 적용

① 신규 프로젝트를 생성한다. 여기선, "hello-template"이라는 프로젝트명을 사용하였다.

   - create-react-app [프로젝트명]

② 신규 프로젝트가 생성된 것을 확인할 수 있다.

③ 무료로 제공하는 디자인 템플릿을 찾아서 다운 받자.

    - 템플릿을 제공하는 수많은 사이트들이 있지만, 아래 사이트에서 로그인 후 다운 받았다.

    - https://www.wrappixel.com/

④ 프로젝트 폴더에 다운 받은 파일을 압축해제하고 템플릿 전체를 덮어쓰기 한다.

⑤ 프로젝트를 시작한다.

    - npm start

※ 에러 해결 1 : 'sass' 모듈 설치

   - 다운받아서 적용하고자 하는 템플릿 마다 오류 내용이 다를 수 있음

※ 에러 해결 2 : 템플릿 경로 설정

   - 다운받아서 적용하고자 하는 템플릿 마다 오류 내용이 다를 수 있음

4. 결과

- 다운 받은 템플릿이 localhost에서 동작하는 것을 확인할 수 있다.

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

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 명령어로 프로젝트를 실행하면, 메인 페이지가 수정된 것을 확인할 수 있다.

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

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

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

- create-react-app을 통해 설치한 신규 프로젝트의 메인 페이지를 확인한다.

3. 적용

① public/index.html

    - <div> 태그의 id는 "root"이다.

② src/index.js

    - 'root' ID를 갖는 Element 목적지에 <App/> 컴포넌트를 호출한다.

③ src/App.js

    - npm start 명령어를 실행하면 나타나는 초기 페이지이다.

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

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

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

- npm을 이용하여 create-react-app을 설치한다.

- create-react-app 명령어를 통해 신규 프로젝트를 생성한다.

3. 적용

① node.js가 설치되어 있는 상태에서 create-react-app을 설치한다.

    - 개발 환경을 제공하기 위한 통합 툴 체인이며 자세한 사항은 react 공식 사이트에서 확인할 수 있다.

    - npm install -g create-react-app (-g 옵션: 설치 pc에서 누구나 사용 가능)

② create-react-app 명령어를 이용하여 신규 프로젝트를 생성한다.

    - create-react-app [프로젝트 폴더]

    - 여기서는 blog라는 폴더 이름을 사용하였다.

③ [프로젝트 폴더]에서 설치한 프로젝트를 실행한다.

    - 여기서는 blog라는 폴더에서 아래 명령어를 실행해야 한다.

    - npm start

4. 결과

① 신규 프로젝트 생성 폴더

② 신규 프로젝트 실행

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

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

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

- class 컴포넌트의 내장 객체 state 사용법을 학습한다.

- click 이벤트 처리방법을 학습한다.

3. 적용

① state 객체를 정의한다.

② this.setState() 함수를 이용해서 state 객체의 참조값을 변경한다.

③ 버튼 클릭시 state 참조값이 교대로 변경되도록 function 컴포넌트를 호출한다.

4. 결과

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