개발 환경 구축하기 2

본 글은 1편에서 이어집니다.

2018/01/05 - [프로젝트/동아리 관리 시스템] - 개발 환경 구축하기 1

4. Brackets - 프론트 엔드 개발용 텍스트 에디터

Brackets는 웹 디자이너와 프론트 엔드 개발자를 타겟으로 만든 Adobe사의 텍스트 에디터입니다. 오픈소스로 제작되었고, MIT 라이선스를 가지고 있습니다.

 Brackets를 사용하는 가장 큰 이유는 실시간 미리보기(Live Preview) 기능 때문입니다. 우측 툴바 맨 위쪽에 있는 번개 모양의 버튼을 클릭하면 실시간 미리보기 기능이 활성화 되는데, 실행되면 작성 중이던 HTML 페이지가 Chrome 웹 브라우저로 실행됩니다.

보통 실시간 미리보기가 실행된 브라우저와 Brackets를 동시에 모니터에 띄워 놓은 상태에서 작업을 하게 되는데, 다음과 같이 작업이 가능합니다.

-코드를 클릭하면 (커서를 올리면) 클릭된 코드에 해당하는 부분이 웹 브라우저에 하이라이트 되는 기능이 있어 내가 작성하고 있는 코드가 웹 페이지의 어느 부분인지 즉각적으로 확인할 수 있습니다.

-코드를 수정하면 수정된 결과가 즉각적으로 웹 페이지에 반영되는 Quick Edit 기능을 제공합니다.

그 외에도 SASS와 LESS를 지원하고 Beautify(코드 정리), Emmet(HTML 자동완성 기능) 등 많은 Extension들이 존재하기 때문에 필요한 기능들을 다운받아 사용할 수 있습니다.

더 자세한 정보는 공식 홈페이지에서 확인하실 수 있는데 다운로드 링크와 자주 사용되는 Extension 목록, 그리고 업데이트된 사항 등을 확인할 수 있으니 한번씩 들어가 보시면 도움이 될 것입니다.

 

5. Git - 버전 관리 시스템

이번에 진행하는 프로젝트가 아무래도 규모도 크고 장기 프로젝트가 될 확률이 높기 때문에 직감적으로 버전관리를 해야겠다는 생각이 들었습니다.

Git은 현재 가장 대중적으로 활용되는 버전 관리 시스템(Version Control System)으로, 리눅스를 개발한 리누스 토발즈가 리눅스를 개발하면서 사용하기 위해 만들었다고 합니다.

버전 관리 시스템이란 말 그대로 파일의 버전을 관리해 주는 프로그램입니다.

예를 들면 보통 대학교 보고서를 작성할 때, 다 완성하면 ‘보고서 완성.hwp’라고 파일의 이름을 붙입니다. 그런데 갑자기 수정사항이 생기게 되면 ‘보고서 완성 최종.hwp’ 으로 보고서를 저장하게 되고 또 수정사항이 발생하게 되면 ‘보고서 완성 최종_final.hwp’와 같은 식으로 저장하게 될 것입니다.

(위의 예시는 이고잉님의 지옥에서 온 GIT 강의를 참고하였습니다. https://opentutorials.org/course/2708)

또한 최초로 작성했던 파일이 필요하다면, 우리는 ‘보고서 완성.hwp’ 파일을 가져올 것입니다.

하지만 git을 이용하면 파일의 상태가 변경됨을 자동으로 감지해서, 변경된 상태를 사용자가 간단한 메모와 함께 저장할 수 있도록 해줍니다.

즉 git은 파일의 이름을 바꾸지 않으면서 버전을 관리해 주는 프로그램이라고 할 수 있습니다.

이런 버전 관리 시스템을 사용하는 이유는 관리의 용이성 때문입니다.

소규모 프로그래밍에서는 작성하는 코드의 수도 많지 않고, 관리해야 할 파일의 수가 적기 때문에 버전을 관리함으로써 오히려 더 복잡해질 수도 있습니다.

하지만 규모가 커지고 관리해야 할 파일들이 많아지면 git과 같은 버전 관리 시스템을 이용하여 관리함으로써  다음과 같은 이점이 생깁니다.

-오류가 발생하면 수정한 파일들을 일일히 찾아서 되돌리는 것이 아니라 명령어 한 줄만 입력함으로써 쉽게 이전 버전으로 돌아갈 수도 있습니다.

-branch라는 기능을 이용하여 새로운 기능을 개발할 때 기존 소스코드에 영향이 미치지 않도록 개발할 수도 있습니다.

(아직 git은 제대로 활용해 본적이 없기 때문에 아는 내용을 중심으로 간략하게 작성했습니다. 혹시나 틀린 부분이 있다면 댓글로 남겨주시면 감사하겠습니다.)