'vsCode' 태그의 글 목록

이 포스트는 VSCode에서 Node.js 설치 후 npm, tsc 등 명령을 실행했을 경우 "'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고..." 오류가 발생하는 현상에 대한 해결입니다.

아래 그림과 같이 기본적으로 Windows VSCode는 기본 터미널이 Windows powershell로 되어 있습니다.

옆에 [+] 버튼을 클릭해서 Command Prompt를 띄우셔서 작업하시면 됩니다.

VSCode의 기본 터미널의 종류를 변경하는 방법은 아래와 같습니다.

1. CTRL + SHIFT + P

위 단축키를 눌러 창을 띄운 다음 Terminal: 로 검색하여 "Terminal: Select Default Profile"을 선택합니다.

2. Command Prompt 선택

터미널 종류 중 Command Prompt를 선택합니다.

3. 새 터미널 실행

[터미널] > [새 터미널] 을 실행하면 Command Prompt 터미널이 실행됩니다.

'Trouble shooting' 카테고리의 다른 글

iOS 13 iPad의 User-agent 이슈 (0)	2022.06.30
세션 클러스터링 시 JEUS의 jSessionId (0)	2022.06.28
JEUS 7과 Spring 4.3.x. 버전 이슈 (0)	2022.06.28
트랜잭션 간 Deadlock (0)	2022.06.27
[webpack-cli] TypeError: cli.isMultipleCompiler is not a function 오류 (0)	2022.06.26

본 포스트는 협업을 위해 Github에 업로드 되어 있는 프로젝트를 비주얼 스튜디오 코드로 체크아웃 하는 방법을 설명합니다.

1. 체크아웃 대상 프로젝트

다른 포스트에서 진행했던 searchNaverApiTs 프로젝트를 체크아웃 해보겠습니다. Github 경로는 아래와 같습니다.

https://github.com/lgcjh0s/searchNaverApiTs

GitHub - lgcjh0s/searchNaverApiTs

Contribute to lgcjh0s/searchNaverApiTs development by creating an account on GitHub.

github.com

2. 프로젝트 폴더 생성

Workspace 폴더를 하나 생성합니다.

D:\> mkdir reactWorkspace

3. Repository 복제

VSCode에서 [리포지토리 복제] 버튼을 클릭한 후 위에 입력창이 생기면 복제할 Github Repository 경로를 입력하고 선택합니다.

4. 저장 경로 선택

아까 생성한 프로젝트 루트 경로를 선택하고, [리포지토리 위치 선택] 버튼을 클릭합니다.

5. 프로젝트 열기

복제된 리포지토리를 여시겠습니까? 라는 확인창이 표시되면 [열기] 버튼을 클릭하여 프로젝트를 엽니다.

프로젝트를 열면 아래와 같은 프로젝트 폴더 구조를 확인할 수 있습니다.

6. node_modules 설치

보통 협업을 위해 Github에 공유할 때는 용량 등의 문제로 node_modules는 제외하고 체크인합니다. 아래 명령어를 입력하여 package.json 기준으로 node_modules를 설치합니다.

D:\reactWorkspace\searchNaverApiTs> yarn install

7. 컴파일 및 번들링, 실행

컴파일 및 번들링을 진행하여 오류가 없는지 확인합니다.

D:\reactWorkspace\searchNaverApiTs> tsc
D:\reactWorkspace\searchNaverApiTs> npm run build

8. 실행

프로젝트를 구동하여 결과를 확인합니다.

D:\reactWorkspace\searchNaverApiTs> yarn start

'기타' 카테고리의 다른 글

[사이드 프로젝트] 로또 통계 분석 기반 자동번호 생성 앱 (0)	2022.11.08
조건문에서 Arrays.asList, contains 사용하기 (0)	2022.09.06
Lighthouse 성능 분석 및 WebP 이미지 사용해보기 (0)	2022.08.02
kakao AdFit 수익 분석 (1)	2022.07.18
VSCode 프로젝트 Github 업로드 하기 (0)	2022.07.12

본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다.

저번 시간에는 프로젝트 경로를 생성하고 개발에 필요한 모듈들을 설치해 보았습니다. 설치하는 과정에서 의존성에 대해서도 잠시 알아보았습니다. 이번에는 VSCode에 프로젝트를 반입해서 프로젝트 구조 및 보일러 플레이트 코드를 작성한 후 간단하게 "Hello World"를 출력해보겠습니다.

VSCode로 프로젝트 열기

먼저 빈 VSCode 창을 하나 열고 [폴더 열기] 버튼을 클릭합니다.

만들어 둔 searchNaverApi 폴더를 선택하여 엽니다.

해당 폴더를 선택하면 VSCode에 프로젝트가 아래와 같이 반입됩니다.

프로젝트 구조 생성

프로젝트 하위에 폴더를 두 개 만들어 보겠습니다.

[./public]

public 이라는 폴더에는 html, css, image 등 정적인 Resources를 관리합니다.

[./src]

src 라는 폴더에는 React 기반으로 개발하는 JavaScript 소스 코드를 관리합니다.

먼저 public 폴더를 생성하고 하위에 index.html 파일을 생성하고 아래와 같이 작성합니다. html 파일에는 별 내용은 없으며 React 모듈을 초기화 할 main.js 파일을 포함하는 부분과 React 애플리케이션을 Rendering 할 "app"라는 아이디를 가진 div를 하나 선언합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Search Naver API</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

그 다음에는 index.html 파일에 사용할 main.js 파일을 ./src 경로 하위에 생성하고 아래와 같이 작성합니다.

import ReactDOM from 'react-dom';

ReactDOM.render('Hello World', document.getElementById('app'));

현재까지 작성한 경로 및 파일들의 구조는 아래와 같습니다.

애플리케이션 실행

이제 이 상태에서 "Hello World"를 출력해보기 위해 터미널에서 프로젝트 루트 경로로 이동하여 아래 명령어를 입력합니다.

yarn start

package.json 파일에 설정한 start command를 읽어서 프로그램을 기동하는 명령어 입니다. 우리는 아직 package.json에 start command를 선언하지 않았으므로 터미널에 아래와 같은 오류가 발생합니다.

yarn run v1.22.17
error Command "start" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

package.json 파일에 start command를 설정해 보겠습니다. package.json 파일을 열어 가장 아래 부분에 start command를 아래와 같이 추가합니다.

"scripts": {
    "start": "NODE_ENV=development webpack-dev-server"
}

그리고 애플리케이션 실행을 위해서 webpack-dev-server를 사용해야 하므로 webpack 설정 파일을 프로젝트 root에 하나 생성합니다. 아래와 같은 내용으로 webpack.config.js 파일을 생성합니다.

'use strict'
const path = require('path');

module.exports = {
    entry: {
        main: ['./src/main.js']
    },
    devServer: {
        static: './public',
        host: 'localhost',
        port: 8080
    }
};

간단한 설정만 일단 추가합니다. entry point를 main.js로 설정하고 개발 서버 루트를 ./public 경로 하위로 설정합니다.

다시 애플리케이션을 실행해 보겠습니다. 다시 프로젝트 루트 경로에서 터미널로 아래 명령어를 입력합니다.

yarn start

webpack.config.js 파일에 devServer port를 8080으로 설정했으므로 개발 서버는 8080 포트로 기동됩니다. 브라우저에서는 아래 경로로 접근하면 됩니다.

http://localhost:8080

모든 작업이 정상적으로 이루어졌다면 화면에 아래와 같이 "Hello World"가 표시됩니다. index.html에 작성한 코드에서 <div id="app" /> 영역에 "Hello World"가 표시되었습니다.

다음 편에서는 목록을 표시하는 부분인 목록 Component를 만들어 보겠습니다.

'React > React 기초 (List)' 카테고리의 다른 글

React 기초 (목록 만들기) 06 - Tab 버튼 구현 (0)	2022.07.03
React 기초 (목록 만들기) 05 - ListView UI 구성 (0)	2022.07.01
React 기초 (목록 만들기) 04 - API 호출 (0)	2022.06.28
React 기초 (목록 만들기) 02 - 프로젝트 생성 (0)	2022.06.24
React 기초 (목록 만들기) 01 - Concept (0)	2022.06.23

즐거운인생

vsCode

VSCode 터미널에서 npm 실행 안됨