디자이너와 프론트엔드 개발 - 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을 설치하시려면 아래의 웹사이트를 방문하셔서 실행 파일을 다운로드하시면 됩니다.
https://atom.io/
아톰 추가 패키지 설치하기
모던 텍스트 에디터에는 다양한 패키지를 설치할 수 있습니다. Atom 또한 많은 패키지를 지원하는데, Atom을 실행하신 후 커맨드 + , 를 누르셔서 Settings으로 가신 후 Packages를 보시면 패키지들을 설치, 관리할 수 있습니다.
제 개인적으로는
less-compile-on-save
minimap
minimap-highlight-selected
tag
라는 플러그인을 추천드립니다.
각각의 패키지들이 무슨 기능을 지원하는지는 차차 말씀드리기로 하고, 오늘은 여기까지 하겠습니다. 혹시 설치 중 문제가 있으시면 메일이나 댓글 남겨주세요!
질문이나 피드백은 댓글이나 kimmungyu@gmail.com 로 메일주세요 :)
