브라켓 - Brackets
- 웹 개발 중 프로트엔드 개발을 하는데 사용되는 많은 에디터들이 있습니다.
- VSCode , Atom, SublimeText 등이 있습니다.
- 저는 예전부터 Brackets을 주로 사용해 왔습니다.
- 다들 많은 장점들을 가지고 있지만, 처음 부터 브라켓을 사용해 와서 인지 많이 익숙해져 있어서 Brackets을 주로 사용하는 것 같습니다.
- 그럼 브라켓 설치 방법과 기본적으로 사용하면 유용한 확장기능들을 설치해 보겠습니다.
브라켓 다운로드
- 아래의 링크로 이동해서 브라켓 설치 파일을 다운로드 합니다.
A modern, open source code editor that understands web design
Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long.
brackets.io
브라켓 설치
- 설치 파일을 실행시켜 줍니다.
- 설치 경로를 지정하고 , Next를 클릭 합니다.
- Install 을 클릭합니다.
- 설치가 진행됩니다.
- 설치가 완료되면 Finsh를 클릭해줍니다.
브라켓 실행
- 설치된 브라켓을 실행합니다.
- 처음 실행하게 되면 index.html이 나타납니다.
- 브라켓에 대한 설명과 사용방법등이 적혀있습니다.
- 이제 브라켓의 확장기능들을 설치해보겠습니다.
확장기능 설치
- 브라켓의 확장기능을 설치하는 방법과 필요하고, 유용한 확장기능들에 대해서 알아보겠습니다.
- 먼저 확장기능을 설치 하기 위해서 브라켓 화면 오른쪽에 보이는 블럭모양을 클릭합니다.
- 또는, 파일 -> 확장기능 관리자를 선택합니다.
- 확장기능 관리자를 선택 하면 확장기능들과 테마등을 관리하고, 설치할 수 있는 화면이 나타납니다.
- 로딩이 끝나면은 확장기능들을 살펴 볼 수 있습니다.
- 이제 확장기능들을 설치 해 보겠습니다.
확장기능 설치
Emmet
- Emmet은 자동완성기능을 가능하게 하는 확장기능입니다.
- 오른쪽 상단 검색 창에 Emmet을 검색한후 설치 버튼을 클릭합니다.
- 설치가 완료 되면 설치가 성공했습니다. 라는 문구가 나타납니다.
- 닫기를 클릭합니다.
Beautify
- Beautify는 단축키나 메뉴에서 선택하게 되면 자동정렬 시켜주는 기능을 가지고 있습니다.
- 편집 -> Beutify를 선택하거나
- 다축키 Ctrl + Alt + B 를 누르면 됩니다.
Color Highlighter
- Color Highlighter는 지정한 색상으로 텍스트 하이라이트가 바뀌게 됩니다.
- 예를 들어 css에서 폰트 색상을 white로 지정했을경우 white텍스트의 색상이 흰색으로 바뀌게 됩니다.
Jinja2 syntax highlighter
- jinja2 syntax highlighter는 jinja2 문법에 맞는 하이라이트를 제공합니다.
- 플라스크의 템플릿 등은 jinja2를 사용하기 때문에 이에 맞는 하이라이트를 제공받기 위해 설치하였습니다.
디렉토리 지정
- 이제 개발을 하기위한 기본 디렉토리를 지정하고, 열어 보겠습니다.
- 파이썬 플라스크 웹 프레임워크 프로젝트로 만들어 놓은 flask_server를 지정해보겠습니다.
- 플라스크 관련 포스팅은 아래의 링크로 이동하면 됩니다.
[python] 2. Flask(플라스크) - 렌더 템플릿 - index 페이지 생성
render_template - 플라스크 코드 내에서 hmtl 마크업 언어를 사용해서 웹사이트를 제작하여 나타낼 수 있습니다. - html 코드들을 플라스크내에 사용하는 것보다 .html 파일을 만들어서 라우팅하는 방�
hiio.tistory.com
- 우선 처음 열려있는 파일을 다 닫아 줍니다.
- 다음은 폴더 열기 또는 파일 -> 폴더 열기를 통해서 디렉토리를 지정해 줍니다.
- 디렉토리로는 flask_server를 지정해 줍니다.
- 폴더 선택을 클릭하면 flask_server 하위에 있는 디렉토리와 파일들이 오른쪽 네비게이션에 표시되게 됩니다.
마무리
- 프로트엔드 개발에 필요한 텍스트에디터 중 브라켓의 설치 방법과, 확장기능, 디렉토리 설정까지 알아 봤습니다.
- 브라켓은 adobe에 의해서 만들어진 오픈소스 에디터이기 떄문에 무료이고, 퀵 에디터하는 편리한 기능들을 제공하고 있습니다. 또한 확장기능 설치를 통해서 확장성 또한 높은 장점을 지니고 있습니다.
- 앞으로, 포트폴리오용 웹사이트 및 프로젝트 관련 웹사이트를 만들 계획입니다.
'개발환경 > IDE' 카테고리의 다른 글
| [IntelliJ] 익숙해지기 (0) | 2023.09.28 |
|---|---|
| [Eclipse] 이클립스 단축키 #1 - 주석 처리 (0) | 2021.03.10 |
| [Editor] VS 코드 - 확장 플러그인 (0) | 2020.11.11 |
| [IDE] 구름IDE - Goormide 온라인 통합 개발환경 알아보기 (0) | 2020.10.06 |