IntelliJ 익숙해지기

지금까지는 VSCODE 나 Eclipse를 사용해 오다 너무너무너무 Eclipse가 느려터져서 IntelliJ 로 갈아타볼까 생각중이다. 

연간 결제를 해볼까하는데, 이것저것 사용하다 구매를 하면어떨까 싶어 익숙해지는데에 먼저 중점을 두면 좋을듯 싶다.

단축키가 다르다. 

1. Remote 관리
   1. Git -> Manage Remotes

  Node.js  

JavaScript 런타임
"node.js"

개발환경 구성

nodejs 설치

설치 환경

os : window10 x64

nodejs version: v14.16

nodejs.org/en/

행 주석

ctrl + /

범위주석

ctrl + shift + /

주석 해제

ctrl + shift + \

  VS 코드 설치  

code.visualstudio.com/download

  확장 프로그램  

  1. Live Server - 라이브 서버  

  2. VS Code - Icons  

  3.Polacode  

  4.Beautify  

  5.Prettier  

  6. jQuary Code Snippet   

  7. Markdown All in One  

  브라켓 - Brackets  

- 웹 개발 중 프로트엔드 개발을 하는데 사용되는 많은 에디터들이 있습니다.

- VSCode , Atom, SublimeText 등이 있습니다. 

- 저는 예전부터 Brackets을 주로 사용해 왔습니다.

- 다들 많은 장점들을 가지고 있지만, 처음 부터 브라켓을 사용해 와서 인지 많이 익숙해져 있어서 Brackets을 주로 사용하는 것 같습니다.

- 그럼 브라켓 설치 방법과 기본적으로 사용하면 유용한 확장기능들을 설치해 보겠습니다.

  브라켓 다운로드  

- 아래의 링크로 이동해서 브라켓 설치 파일을 다운로드 합니다.

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를 지정해보겠습니다.

- 플라스크 관련 포스팅은 아래의 링크로 이동하면 됩니다.

hiio.tistory.com/entry/python-2-Flask%ED%94%8C%EB%9D%BC%EC%8A%A4%ED%81%AC-%EB%A0%8C%EB%8D%94-%ED%85%9C%ED%94%8C%EB%A6%BF-index-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%9D%EC%84%B1

- 우선 처음 열려있는 파일을 다 닫아 줍니다.

- 다음은 폴더 열기 또는 파일 -> 폴더 열기를 통해서 디렉토리를 지정해 줍니다.

- 디렉토리로는 flask_server를 지정해 줍니다.

- 폴더 선택을 클릭하면 flask_server 하위에 있는 디렉토리와 파일들이 오른쪽 네비게이션에 표시되게 됩니다.

  마무리  

- 프로트엔드 개발에 필요한 텍스트에디터 중 브라켓의 설치 방법과, 확장기능, 디렉토리 설정까지 알아 봤습니다.

- 브라켓은 adobe에 의해서 만들어진 오픈소스 에디터이기 떄문에 무료이고, 퀵 에디터하는 편리한 기능들을 제공하고 있습니다. 또한 확장기능 설치를 통해서 확장성 또한 높은 장점을 지니고 있습니다.

- 앞으로, 포트폴리오용 웹사이트 및 프로젝트 관련 웹사이트를 만들 계획입니다.