재밌는 Coding

1. 시험환경

    · node.js v22, v20, v18

    · npm

    · create-react-app

    · 윈도우

2. 목적

    · 리액트 프로젝트 생성(npm create-react-app) 중 발생하는 에러를 해결한다.

    ·  react@19.0.0과 @testing-library/react@13.4.0 간 버전 충돌 회피 방법을 알아보자.

3. 적용

    ① npm 명령어를 이용하여 react 프로젝트 생성시 버전 충돌관련 에러가 발생한다.

        - 명령어 : npm  create-react-app  [my-app]   --template  typescript

    ② 에러의 원인은 create-react-app에서 react 버전이 v19로 설정되지만,  @testing-library는 v18를 요구한다.

        - node.js 버전과 상관없이 발생한다. (node v22, node v20, node v18)

    ③ 해결책) 패키지간 버전 관리가 불안정한 npm을 사용하는 대신 yarn을 이용하여 React 프로젝트를 생성하자.

        - 명령어 : yarn  create  react-app  [my-app]  --template  typescript

        - yarn으로 프로젝트 생성 시 패키지 간 버전 호환성에 맞게 설정되는 것을 확인할 수 있다.

4. 결과

    · 실행결과를 확인한다.

        - 명령어: yarn  start

1. 시험환경

    ˙ Node.js 20.11.1 LTS

    ˙ 윈도우

2. 목적

    ˙ node.js를 윈도우 환경에서 설치한다.

    ˙ node.js를 설치 시, 자동설치 되는 npm을 확인한다.

3. 적용

    ① node JS 공식 웹사이트에서 설치 파일을 다운 받는다.

        - URL : http://nodejs.org 

    ② 특별한 경우가 아니라면 LTS("안정화 버전")을 다운로드 받는다.

        - 2024년 3월 기준 안정화 버전은 20.11.1 LTS이다.

        - Release Schedule을 확인하여 지원종료가 되는 버전은 피하자.

    ③ 다운 받은 파일을 확인하고 실행한다.

    ④ Next 버튼을 클릭하며 설치 절차를 진행한다.

4. 결과

    ˙ npm -v 명령어를 실행하여 설치 버전을 확인한다.

    ˙ node -v 명령어를 실행하여 설치 버전을 확인한다.

1. 시험환경

    ˙ react.js

    ˙ npm

2. 목적

    ˙ 사용자가 http로 웹 서비스 요청시 https로 redirection 하여 서비스할 수 있도록 설정한다.

3. 적용

    ① react-https-redirect 패키지를 설치한다.

        - 명령어 : npm install --save react-https-redirect

    ② src/index.js에서 HttpRedirect 컴포넌트를 추가하고 <App/>을 감싸준다.

4. 결과

    ˙ 서비스 도메인으로 http 요청시 https로 전환(redirection)하여 서비스 하는 것을 확인한다.

    ① react.js 프로젝트 기동 시 콘솔로그<F12>에서 WebSocket Connection failed 메시지가 나타난다.

    ② 프로젝트 최상위 폴더의 .env 파일에서 WDS_SOCKET_PORT=0 설정

        - 원인 : cra에서 기본 포트를 3000포트로 설정해서 ws와 충돌 발생

1. 시험환경

    ˙ react.js

    ˙ npm

2. 목적

    ˙ npm 빌드 및 배포 후 웹에 접속하면, 서비스 화면 없이 "Invalid Host Header"가 발생하는 문제를 해결하자.

3. 적용

    ① disableFirewall 변수를 "기존 조건부"를 주석처리하고 "true"로 할당한다.

        - $ vi node_modules/react-scripts/config/webpackDevServer.config.js

1. 시험환경

    ˙ npm

    ˙ vue cli

2. 목적

    ˙ vue cli를 통해서 프로젝트 초기 설정하는 방법을 확인한다.

    ˙ 생성된 프로젝트를 실행하고 초기화면을 접속한다.

3. 적용

    ① vue cli 설치

        - 명령어 : npm install -g @vue/cli

    ② 프로젝트 생성하기 (프로젝트 폴더 생성한 곳에서 실행)

        - 명령어 : vue create .

    ③ 프로젝트를 실행한다.

        - 명령어 : npm run serve

    ④ 추가 플러그인 설치

        - npm install 명령어 : npm install vue-router --save

        - vue add 명령어 : vue add axios

4. 결과

    ˙ 초기화면 접속

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를 추가하면서 변경된 값이 출력되는지 확인한다.

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