brunch

라이킷 6 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김문규 Mar 08. 2019

디자이너와 프론트엔드 개발 - 1

개발 환경 세팅하기

디자이너와 프론트엔드 개발 이야기는 프론트엔드 개발을 거의 모르시는 분들을 위한 글타래입니다. 혹시 제가 틀린 것이 있다면 메일(kimmungyu@gmail.com)이나 댓글로 연락 부탁드립니다.

개발하려고 마음을 먹었다면 바로 시작해보는 것이 좋겠습니다. 안타깝게도 제가 맥을 쓰기도 하고, 개발 환경 세팅이 맥(정확히 말하자면 MacOS입니다.)이 편하니, 맥에서 개발 환경 세팅하는 방법을 적어볼까 합니다.

맥 가상 서버 만들기

가상 서버 환경을 만들지 않아도 HTML이나 CSS를 다뤄보는 데는 문제가 없습니다.

하지만 간단하게나마 자신의 컴퓨터에 가상 서버 환경을 만들어두면 여러모로 다양한 시도를 해볼 수 있어, 가상 서버 환경을 만들어두시는 것을 추천드립니다.

맥에서 터미널을 실행(응용 프로그램 > 유틸리티 > 터미널)하시고 아래의 명령어를 복사 > 붙여넣기 하셔서 하나하나 실행해주세요.

1. Brew 설치

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Node.js 설치

brew install node

3. 간단하게 서버를 실행할 수 있는 http-server 설치

npm install http-server -g

* 중간에 Xcode를 깔아야한다는 내용이 나올 수 있는데, 그때 Xcode도 같이 설치해주세요.

중간에 에러없이 모든 과정이 완료 되었다면 축하드립니다! 그럼 나머지 툴도 계속 설치해볼게요.

아톰 설치하기

다음으로 텍스트 에디터를 설치해보겠습니다.

정말로 많은 텍스트 에디터가 있는데 몇가지를 꼽아보자면 (맥 기준으로) Atom(무료), Visual Studio Code(무료), Sublime Text(무료/유료)가 있습니다. 몇 년 전에는 Sublime Text가 유행했었고, 얼마전까진 Atom, 지금은 Visual Studio Code가 가장 인기있는 에디터인 것 같습니다.

아무거나 선택하셔도 상관없지만 Sublime Text는 최근에는 업데이트가 전혀 없는 상태이므로 Atom이나 Visual Studio Code를 설치하실 것을 추천드립니다. 기능들은 거의 대동소이하니 살펴보시고 맘에 드는 걸로 골라주세요. 저는 Atom으로 진행하려고 합니다. Atom을 설치하시려면 아래의 웹사이트를 방문하셔서 실행 파일을 다운로드하시면 됩니다.