개발의 첫 걸음 , [FE]

박하늘·2025년 7월 2일

개발의 첫 걸음,

프론트엔드 개발을 시작하려면, 먼저 개발 도구부터 설치해야 합니다.
아무 도구 없이 개발을 시작할 순 없겠죠?

Mac을 기준으로, 아래 3가지는 거의 모든 개발자들이 가장 먼저 설치하는 필수 도구입니다 : )

1. VS Code 설치
2. Homebrew 설치 (맥 기준)
3. Node.js 설치 (Homebrew로 설치 가능)

이제 각 도구가 왜 필요한지, 어떻게 설치하는지 하나씩 알려드릴게요!




1️⃣ VS Code

▪️ 코드 편집기

  • 가볍고 빠르며 다양한 언어 지원
  • JavaScript, TypeScript, React, Vue 등 프론트엔드 친화적
  • 다양한 확장 프로그램(ESLint, Prettier, GitLens 등)을 통해 생산성 향상 가능

▪️ 설치 링크

https://code.visualstudio.com/

▪️ 설치 방법

1.	링크 접속
2.	메인 화면에서 Download for Mac 버튼 클릭
    (Intel 또는 Apple Silicon(M1/M2/M3)용 자동 감지됨)
3.	.zip 파일 다운로드 → 압축 해제 후 Visual Studio Code 앱을 Applications 폴더로 드래그
4.	실행하면 설치 완료

2️⃣ Homebrew

▪️ 패키지 관리자 (Mac의 apt 같은 느낌)

  • macOS에서 다양한 개발 도구(Node, Git, Python 등)를 쉽게 설치 및 관리
  • 터미널에서 간단하게 설치 (brew install node 같은 명령어 사용 가능)
  • macOS에서 개발 환경을 깔끔하고 효율적으로 관리하려면 거의 필수!
  • 수동 설치보다 훨씬 빠르고 간편하게, 터미널 한 줄로 설치 가능!

▪️ 설치 링크:

https://brew.sh

▪️ 설치 방법

1. 위 링크 접속
2. 메인 화면에 나오는 명령어 복사 ⤵️
   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
3. 터미널 열고 붙여넣기 → Enter
4. 설치가 끝나면 아래 명령어로 brew 명령이 제대로 동작하는지 확인
   brew --version

3️⃣ Node.js

▪️ JS 런타임 & 패키지 매니저 제공

  • React, Vue, Next.js 등 대부분의 프론트엔드 프레임워크는 Node.js 환경에서 실행
  • npm 또는 yarn으로 패키지 설치 (react, vite, eslint 등)

▪️ 설치 링크:

https://nodejs.org/ko/

▪️ 설치 방법

👉 macOS 사용자라면 Homebrew를 사용하는 방법을 추천합니다.
버전 관리가 쉬우며 다른 개발 도구 설치도 함께 관리할 수 있기 때문이에요.

1. Homebrew 를 이용한 설치

brew install node

2. 공식 사이트를 이용한 설치

 Node.js 공식 사이트 접속
	- “LTS 버전” 다운로드
	- .pkg 파일 실행해서 설치 (GUI 설치)
	- 설치 후 터미널에서 확인:
  • node -v [Node.js 버전 확인]
  • npm -v [npm 버전 확인]

이렇게 기본적인 세팅은 마무리 하겠습니다 !! 💟

0개의 댓글