2. 개발환경

2-1.개발 환경 구축

1. HTML/CSS/JavaScript: 프론트엔드 개발의 기본이 되는 언어들이다. HTML은 웹 페이지의 구조를 정의하며, CSS는 스타일과 레이아웃을 지정하고, JavaScript는 웹 페이지의 동적 기능을 구현한다.

2. 텍스트 에디터 또는 통합 개발 환경 (IDE): 프론트엔드 코드 작성에 사용할 텍스트 에디터나 IDE를 선택한다. Visual Studio Code, Sublime Text 등이 널리 사용되는 편집 도구 중 일부이다.

3. 패키지 매니저: 다양한 라이브러리와 프레임워크의 종속성을 관리하기 위해 패키지 매니저를 사용한다. npm(Node Package Manager)이 대표적이다.

4. 빌드 도구: 웹 페이지의 최적화와 번들링을 위한 도구이다. Webpack, Rollup, Parcel 등이 대표적인 예이다.

5. 디버깅 도구: 개발 과정에서 발생할 수 있는 오류를 찾고 수정하는 데 사용한다. 브라우저 내장 개발자 도구, Chrome DevTools, Firefox Developer Tools 등이 있다.

6. 테스팅 도구: 코드의 품질을 보장하기 위해 쓰인다. Jest, Mocha, Cypress 등이 있다.

7. 버전 관리 시스템: 코드의 변경 이력을 관리하고 협업을 용이하게 하기 위해 사용한다. 대표적으로 Git이 대표적이다.

2-1-1.개발 환경 세팅

2-1-1-1. Visual Studio Code 설치

1. Visual Studio Code 공식 웹사이트에서 설치 파일을 다운로드한다.
code.visualstudio.com
https://code.visualstudio.com/

2. 다운로드한 설치 파일을 실행하여 설치 과정을 완료한다.

💡

윈도우 환경에서 VSCode 설치 시 주의사항

Windows에서 VSCode를 설치할 때, 설치 과정 중에 Add to PATH옵션을 반드시 체크해야 한다. 이 옵션을 선택하면, 시스템의 환경 변수에 VSCode의 경로가 추가되어, 콘솔이나 명령 프롬프트에서 code 명령어를 사용할 수 있게 된다.

2-1-1-2. Node.js 및 npm 설치

1. Node.js 공식 웹사이트에서 LTS(Long Term Support) 버전을 다운로드한다.

2. 다운로드한 설치 파일을 실행하여 설치 과정을 완료한다.

3. 설치가 완료되면 터미널을 열고 다음 명령어를 입력하여 Node.js와 npm이 올바르게 설치되었는지 확인한다.

node -v
npm -v

// v18.17.1

2-1-1-3. VSCode에서 유용한 확장 기능 설치

• Prettier: 코드 포맷터로, 코드를 일관되고 깔끔하게 유지할 수 있도록 도와준다.

• ESLint: 린트(lint)는 소스 코드에서 문제가 될 만한 점을 찾는 작업이고, 린터(linter)는 이를 도와주는 소프트웨어이다. eslint는 javascript에서 대중적으로 사용되는 린터이다.

• Live Server: 로컬 개발 서버를 쉽게 구동할 수 있게 해주며, 실시간 코드 변경을 반영한다.

• indent rainbow: 코드의 들여쓰기를 다양한 색상으로 표시하여 가독성을 높이는 VSCode 확장 기능이다. 이 기능은 중첩된 코드 블록을 더 쉽게 식별할 수 있도록 도와준다.

• Korean Language Pack for Visual: 한국어 언어팩