재밌는 Coding

1. 시험환경

    · 윈도우

    · node v20.15.0

    · npm 10.7.0

2. 목적

    · next.js 프로젝트를 신규 생성하는 방법을 알아보자.

3. 적용

    ① 프로젝트 폴더를 생성한다.

        - 예시) nextjs 폴더를 생성한다.

    ② nextjs 프로젝트를 생성한다.

        - npx  create-next-app@latest  ./nextjs

    ③ 설치한 의존성 라이브러리를 선택하면 설치가 진행된다.

    ④ 프로젝트를 실행한다.

        - npm  run  dev

4. 결과

1. 시험환경

    · React Native

    · expo cli

    · vsCode

    · Android Studio / AVD(Android Virtual Device)

2. 목적

    · expo cli를 이용하여 프로젝트를 생성하고 실행한다.

    · 핸드폰 단말기에 Expo Go 앱을 설치하여 배포 앱을 확인한다.

3. 적용

    ① [휴대폰] Android 및 iPhone 단말기에 "Expo Go" 앱을 설치한다.

        - 윈도우 개발환경에서는 iPhone 에뮬레티어를 실행할 수 없기 때문에 iPhone 단말기를 준비해야 한다.

    ② 안드로이드 에뮬레이터를 사용하기 위해 Android Studio 및 AVD를 설치한다.

        - 참고 : https://languagestory.tistory.com/174

        - 참고 : https://languagestory.tistory.com/175

    ③ node.js를 설치한다.

        - 참고 : https://languagestory.tistory.com/24

    ④ expo 최신 패키지를 설치한다.

        - npm install expo@latest

    ⑤ expo cli를 이용하여 프로젝트를 생성한다.

        - npx create-expo-app [프로젝트명]

    ⑥ 생성된 프로젝트 폴더로 이동하여 프로젝트를 실행한다.

        - cd [프로젝트명]

        - npx expo start

    ⑦ 안드로이드) AVD 실행 후 ⑥에서 실행한 콘솔은 유지하고 별도의 콘솔에서 아래 명령어를 실행한다.

        - npm run android

    ⑧ 아이폰) ⑥ 실행시 나타나는 QR 코드를 핸드폰 "Expo Go" 앱을 열어서 코드스캔한다.

        - QR 스캔 핸드폰은 개발 PC와 동일 네트워크에 있어야 함에 주의한다.

4. 결과

    · 핸드폰에서 실행된 앱을 확인한다.

1. 시험환경

    ˙ AWS EC2 Ubuntu v20.04

    ˙ Nginx   

    ˙ React

2. 목적

    ˙ Nginx 웹서버를 이용하여 React 빌드 파일을 배포하는 방법을 알아보자.

    ˙ Nginx 설정을 최소화하여 단일 App을 빠르게 배포하는 경우의 해결책을 제시한다.

3. 적용

    ① Nginx 설치를 설치한다.

        - 참고 : https://languagestory.tistory.com/189

    ② React 프로젝트를 빌드하면 "build" 폴더에 배포 패키지가 생성된다.

        - build 명령어 : $ npm run build

    ③ Nginx 기본경로에 있는 기본 파일(html)을 삭제 후 react 빌드 파일(build 하위 모든 파일)을 옮긴다.

        - Nginx 배포 기본 파일 삭제 : $sudo  rm  -rf  /var/www/html/

        - Nginx 배포 기본 경로 이동 : $sudo  cp  -R  [프로젝트]/build/*  /var/www/html/

    ④ Nginx를 재시작한다.

        - $sudo systemctl restart nginx

4. 결과

    ˙ 브라우저에 접속하여 Nginx를 이용하여 배포된 프로그램이 실행되는지 확인한다.

1. 시험환경

- Visual Studio Code

- node v14.17.0

- npm 6.14.13

2. 목적

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

- 컴포넌트 파일 단위로 분리하여 관리하는 방법을 학습한다.

3. 적용

① src/components 폴더를 생성하고 클래스 컴포넌트 단위별로 파일을 만든다.

    - import 컴포넌트이름(사용자 정의 태그) from '폴더/파일'; 형식으로 App.js 파일에 임포트한다.

② 컴포넌트 단위로 파일을 생성한다.

    - 클래스 컴포넌트는 Component를 상속하므로, {Component}를 임포팅해야 한다.

    - 작성한 컴포넌트를 외부 파일에서 사용하기 위해서 "export default 클래스명" 마지막 문구를 반드시 추가한다.

4. 결과

    - 실행 결과를 확인한다.

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

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. 시험환경

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

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

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