IntelliJ 익숙해지기

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

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

단축키가 다르다. 

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

행 주석

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

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

 웹,Python,JAVA 등 사용하기위한 개발환경을 로컬 환경에 구축해서 사용할때 보통 파이참. Eclipse, 등의 통합 개발환경을 사용하는 경우가 많습니다. VIM이나 Notepad++ 등을 사용하기는 하지만 학습을 하는 입장에서 학원이나 다른 공간의 로컬환경에 구성해놓은 개발환경을 노트북이나 집에 다시 똑같이 구성하는 것은 귀찮은 일이기도 합니다.

 제 나름의 방법으로는 구글 클라우드 플랫폼을 이용하거나 , Colab을 이용하는 방법을 사용하기는 합니다.

그래서 이번에 새롭게 알게된 온라인 통합 개발환경은 구름IDE를 알아보고자 합니다.

ide.goorm.io/

 온라인 환경에서 개발, 배포등을 할 수 있게 도와주는 구름 IDE는 다른 사용자들과의 공유를 통해 협업도 할 수 있고, Git을 사용한 버전관리 또한 손쉽게 할 수 있습니다.

 C++/C#/Python/Java등 기본적인 프로그래밍 언어들 뿐만 아니라 , 각 환경들이 가지고 있는 몇가지 패키지들을 컨테이너들을 통해서 손쉽게 사용할 수 있다는 장점이 있습니다.

 그럼 회원가입 부터 개발환경 접속 까지 간단하게 알아보도록 하겠습니다.

- 화면 상단의 회원가입 버튼을 클릭 하여 회원가입 후 로그인을 진행합니다.

- 회원 가입 후에 로그인을 하게 괴면 새 컨테이너 생성 화면이 보입니다. 클릭해 보도록 합니다.

  컨테이너 생성 화면 

- 컨테이너 생성화면이 나옵니다.

- 이름을 입력하고 컨테이너를 생성할 지역

- 공개 범위

- Free 계정이라 배포나 GPU는 사용신청을 해야하므로 넘어갑니다.

  소프트웨어 스택 

- 다양한 소프트 웨어 들이 있습니다.

C 부터 Python 뿐만아니라 GO/ Recat / Vue/ Hadoop도 있네요.

Python 기반 웹 서버 패키지로는 Django와 Flask등 있습니다.

우선은 Flask를 선택해 봤습니다.

  OS 운영체제 

- 운영체제를 선택 할 수 있습니다.

- Linux 운영체제인 Ubuntu가 기본적으로 선택되어 있습니다.

- 버전을 선택 할 수 있습니다.

- CentOS나 Window가 없는게 아쉽습니다.

- 다 선택 하면 화면 상단의 생성 버튼을 누릅니다.

- 컨테이너가 생성 되면서 스크립트들이 나타나고 설치가 되는 모습을 볼 수 있습니다.

- 성공적으로 설치가 완료 되면 컨테이너 실행/대시보드로 이동 둘 중에 선택할 수 있습니다. 

- 우선은 대시보드로 이동 해보도록 하겠습니다.

  대시보드 

- 대시보드로 이동하면 지금 사용하고있는 컨테이너가 보입니다.

- 생성된 컨테이너 갯수도 보여 집니다.

- 생성한 TestStudy 컨테이너를 보면 터미널 실행 / Run 항목이 보입니다.

  터미널실행 

- 터미널을 실행해보면 리눅스 환경의 터미널로 진입합니다.

- 리눅스 우분투 명령어를 사용하거나, Flask로 만들어진 서버를 구동시키는데 사용할 수 있습니다.

  컨테이너 실행 화면 

- Run 버튼을 클릭하면 컨테이너를 실행하여 통합개발환경으로 진입해 코드를 짤수 있습니다.

- 프로젝트 관리 화면과 코드 화명, 터미널 화면이 보입니다.

- 다음 시간에 코딩을 해보면서 좀더 알아 보도록 하겠습니다.

  마무리 

- 온라인을 통해 이용할 수 있는 통합개발환경을 제공하는 구름 IDE에 대해서 알아봤습니다.

- 온라인으로 이용한다는 점은 어디서나 개발을 할 수 있다는 아주 큰 장점이라고 느꼈습니다.

- 더 많은 OS를 제공하면 어떨까 하는 느낌도 받았습니다.

- 정확한 리소스 제공이나 속도/ 성능 테스트등을 해봐야 하겠지만, 간단한 테스트 환경을이나 웹개발등의 사이드 프로젝트를 진행 해 보면서 더 알바보겠습니다.