재밌는 Coding

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

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

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

    - 실행 결과를 확인한다.

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