재밌는 Coding

1. 시험환경

    · 윈도우

    · Visual Studio Code

2. 목적

    · React와 SpringBoot를 이용한 개발을 위해 Visual Studio Code를 사용한다.

    · React와 SpringBoot 개발을 위해 Visual Studio Code에서 유용한 Plug-In을 설치한다.

3. 적용

    ① Visual Studio Code의 Extentions 탭에서 플러그인 설치를 진행한다.

    ② 개발 공통 필수 플러그인

    · Better Comments : 코드에 작성된 주석을 색상별로 구분해 가독성을 높임

    · Color Highlight : CSS나 코드 내 색상 코드(예: #FF5733, rgba(...))를 시각적으로 미리 보기 제공.

    · GitHub Theme : GitHub와 유사한 다크 및 라이트 테마를 제공하여 VS Code UI에 적용.

    · Material Icon Theme : 파일 확장자나 폴더 이름에 따라 머터리얼 스타일 아이콘을 적용하여 직관적인 표시.

    ③ Git 관련 플러그인

    · GitLens : Git 히스토리와 블레임(누가 언제 수정했는지)을 코드 상에서 상세히 보여줌.

    · GitHub Pull Requests : PR 생성, 리뷰, 코멘트 작성 등을 직접 편집기에서 수행하여 VS Code 내에서 GitHub Pull Request를 열람, 리뷰, 병합 가능.

    · GitHub Repositories : 로컬에 클론하지 않고 GitHub 저장소의 파일을 VS Code에서 직접 탐색/수정.

    · Markdown Preview Github Styling : .md 파일의 스타일을 GitHub에서 보는 것처럼 똑같이 렌더링.

    ④ SpringBoot 관련 플러그인

    · Gradle for JAVA : 빌드, 의존성 관리, 태스크 실행 등을 VS Code 내에서 수행 가능.

    · Spring Boot Extension Pack : Spring Boot 개발을 지원하는 확장팩 (다수의 확장 포함).

    · Spring Boot Snippets : @RestController, @Service 등 자주 쓰이는 코드 패턴을 빠르게 삽입 가능.

    ⑤ React 관련 플러그인

    · ES7+ React/Redux/React-Navite snippets : rfc, useEffect, useState 등 자주 쓰는 구문을 빠르게 타이핑 가능.

    · TypeScript Extension Pack : TypeScript 개발 환경 향상을 위한 확장팩.

1. 시험환경

    ˙ 윈도우

    ˙ Visual Studio Code

    ˙  Python

2. 목적

    ˙ Visual Studio Code 최신 버전을 다운 받아 설치한다.

    ˙ Visual Studio Code Extension(확장팩)을 설치한다.

    ˙ Visual Studio Code에서 Python Project를 생성한다.

3. 적용

    ① Visual Studio Code 공식 사이트에서 운영체제에 맞는 설치 파일을 다운 받는다.

        - https://code.visualstudio.com/download

    ② 다운로드가 되는 동안 인기있는 확장팩을 소개하고 있다.

        - 나는 Visual Studio Code를 주로 "파이썬 개발용 IDE"로 사용한다.

        - 파이썬은 공식 사이트에서 별도로 다운받아 설치하여야만 한다. (파이썬 컴파일러와 IDE는 구분되는 개념이다.)

    ③ 다운 받은 설치 파일을 샐행한다.

    ④ 설치 후 프로그램을 실행하면 왼쪽 아이콘 중 Extention을 클릭하여 필요한 확장팩을 추가로 설치한다.

    ⑤ <File> → <Open Folder...> 메뉴에서 폴더 단위로 저장된 Python 프로젝트를 Open 한다.

        - 별도의 "프로젝트 생성 절차" 없이 폴더 단위로 Save, Load를 통해 "파이썬 프로젝트"를 저장, 읽기할 수 있다.

    ⑥ 파이썬 코드를 작성하고 "<Ctrl> + <F5>" 단축키로 실행한다.

4. 결과

    ˙ Visual Studio Code를 통해 작성한 파이썬 코드가 실행되는 것을 확인한다.

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

1. 시험환경

- 윈도우 10

- VsCode(Visual Studio Code)

- Git

2. 목적

- 실제적인 프로젝트 진행 과정을 통해 git 사용법을 학습한다.

- 원격 저장소 (Remote Repository)에 프로젝트가 등록된 상태에서 시작한다.

- 원격 저장소를 로컬 저장소로 복제한다.

- Visual Studio Code를 이용하여 로컬 저장소와 프로젝트를 연동한다.

3. 적용

① git hub에 있는 연동 대상 프로젝트이다.

② Remote Repository(원격 저장소)를 Local Repository(로컬 저장소)로 복제한다.

    - 로컬 저장소 폴더에서 다음 명령어를 실행하여 원격 저장소를 복제한다.

       git clone [URI]  [대상폴더]

② 로컬 저장소와 연결된 원격 저장소를 확인할 수 있다.

    git remote -v

※ 참고: 로컬 저장소에 연결된 원격 저장소 삭제

    git remote remove [이름]   (여기선 origin에 해당)

③ 원격 저장소 복제 결과를 확인한다.

④ Visual Studio Code를 실행하고, 프로젝트 폴더를 Open 한다.

    - 스프링 프로젝트는 폴더 단위로 생성한다.

⑤ <F5> 단축키로 프로젝트를 실행한다.

4. 결과

- 톰캣 등 STS 설정 후 실행하여 정상동작을 확인한다.

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