재밌는 Coding

1. 시험환경

    · PowerShell

    · vsCode

    · Cursor AI

2. 목적

    · vsCode 또는 Cursor AI의 Terminal에서 스크립트 명령어 실행 제한을 해제한다.

3. 적용

    ① vsCode 또는 cursor AI와 같은 IDE를 사용할 경우, npm 및 yarn 등 패키지 명령어 실행 시 아래와 같은 에러가 발생하는 경우 가 있다.

    ② Windows PowerShell을 Open한다.

    ③ 현재 Command Line 실행 정책을 아래와 같은 명령어로 확인한다.

        - > Get-ExecutionPolicy -List

    ④ 스크립트 실행 제한을 조정하기 위해 아래 명령어를 입력한다.

        - > Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

    ⑤ 스크립트 실행 경고나 확인 메시지 없이 실행할 수 있도록 정책을 조정한다.

        - > Set-ExecutionPolicy Bypass -Scope CurrentUser

    ⑥ 변경된 스크립트 실행 정책을 확인한다.

        - > Get-ExecutionPolicy -List

4. 결과

    · vsCode 또는 cursor 등 IDE의 Terminal에서 명령어 실행이 동작하는 것을 확인할 수 있다.

1. 시험환경

    · 윈도우

    · node v20.18.1

    · yarn v1.22.22

2. 목적

    · yarn 패키지 생성관리 툴을 이용하여 next.js 프로젝트를 생성하는 방법을 알아보자.

3. 적용

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

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

    ② 생성한 프로젝트 폴더 내에서 신규 프로젝트 생성 명령어를 입력한다.

        - yarn  create next-app  --typescript  .

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

    ④ next.js 프레임워크 기반으로 초기화된 프로젝트 구조가 생성된 것을 확인한다.

4. 결과

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

        - yarn  dev

    ② 프로덕션 환경에 배포하기 위해 빌드하면 빌드 결과는 .next 폴더에 저장된다.

        - yarn  dev

    ③ 빌드된 Next.js 애플리케이션을 프로덕션 모드로 실행한다.

        - 이 명령을 실행하기 전에 yarn build 명령어를 사용하여 애플리케이션을 빌드해야 한다.

        - yarn  start

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. 결과

    ˙ 초기화면 접속