나의 개발 노트

CMD 또는 Windows PowerShell 을 실행해서 아래와 같은 명령어로 Git 을 업데이트 한다.

git update-git-for-windows

다운로드를 완료하고 나면 window용 installer가 실행된다.

설치가 완료되고 나면, 아래의 명령어로 git의 버전을 확인한다.

git --version

클라우드 상에 나만의 웹 서버를 하나 구축해 보기로 하자.

아마존의 AWS EC2를 생성해서 웹 서버 환경을 하나 씩 구축해 나가는 과정을 소개하고자 한다.

먼저 AWS의 EC2 설정을 위한 방법을 차례로 소개하고자 한다.

https://aws.amazon.com 사이트에 접속해서 AWS 계정을 생성하기로 한다.

AWS 계정을 생성한 후에 AWS 로그인을 하면 아래와 같은 화면이 나타날 것이다.

우측 상단의 [콘솔에 로그인] 버튼을 선택해서 로그인 하도록 한다.

콘솔 로그인 후 콘솔 홈에서 EC2를 선택한다.

EC2를 선택하면 EC2 대시보드에서 [인스턴스 시작] 버튼을 클릭해서 EC2 설정 화면으로 이동한다.

인스턴스 생성을 위한 이름, OS, 아키텍처 등을 선택한다.

OS의 경우에는 본인이 익숙한 것을 선택하면 되고, 리눅스 사용 경험이 없다면 윈도우 또는 구글링을 통해서 쉽게 사용법 등을 찾을 수 있는 리눅스 배포판을 선택하면 된다.

나의 경우는 가장 대중적이며 Desktop 리눅스도 제공하는 Ubuntu 리눅스를 선택했다.

데스트탑 용 Ubuntu를 오래 전부터 사용해 왔기에 별 부담없이 Ubuntu 리눅스를 선택했다.

인스턴스 유형은 t2.micro를 선택해서 프리티어 사용 가능을 확인. 학습 및 개발을 위해서 가능한 무료로 사용할 수 있는 프리티어를 선택한다.

새 키페어 생성을 통해서 Key 파일을 만든다. 이 Key 파일은 향 후 EC2 서버와 Telnet/SFTP 접속 시 비번 없이 로그인을 할 수 있도록 도와주는 Key이니 잘 보관하도록 하자. Key 파일 생성 및 보관은 필수.

Key 생성 후 Key 페어 이름을 설정

Key 페어 생성 후 이름 설정 후 보안 그룹을 생성 하도록 한다.

기존 보안 그룹 선택 대신 보안 그룹 생성을 선택해서 SSH 트래픽 허용을 체크하고 위치 무관을 선택하도록 한다.

이 선택은 로컬 PC에서 Telnet으로 접속할 수 있도록 하기 위해서 이다.

아래로 스크롤해서 내려가서 스토리지 구성을 하도록 한다.

비용이나 성능으로 보더라도 gp3 나으므로 gp3을 선택하도록 한다. 스토리지 사이즈는 최대 30기가 이므로 30기가 모두를 설정하도록 한다. 

마지막으로 인스턴스 시작 버튼을 클릭해서 마무리 하도록 한다.

인스턴스 생성 후 결제 알림 설정을 통해서 프리티어 용량이 넘어설 경우 알림이 오도록 설정한다.

네트워크 및 보안의 보안 그룹을 선택해서 보안 그룹을 새로 생성하도록 한다.

보안 그룹 생성 시 SSH, HTTPS, MySQL/Aurora, HTTP, 사용자 지정 TCP를 추가하도록 한다.

보안 그룹 생성 결과를 확인한다.

기본 보안 그룹 설정을 제거하고 좀 전에 새로 생성한 보안 그룹으로 대체하도록 한다.

보안 그룹 변경 후 [연결] 버튼을 선택해서 EC2와 연결을 시도한다.

Telnet 콘솔 화면이 정상적으로 나타나면 EC2 서버 설정이 정상적으로 이루어진 것이다.

EC2의 OS를 Ubuntu로 선택했을 경우 로그인 계정은 ubuntu이며, 로컬에 보관된 Key 파일을 사용해서 비번 없이 바로 로그인이 가능하게 된다.

이 Key 파일은 로컬 PC에서 Putty, Filezila 등을 이용해서 EC2에 접속할 경우에도 사용하니 Key파일을 잘 보관하도록 한다. 

Web 개발 시 프론트엔드 개발을 위해 설치해야 프로그램과 Plug-in 들을 소개한다.

먼저 VS Code(Visual Studio Code)를 해야 한다.

VS Code 설치 URL

VS Code 설치 후 추가해야 할 Plug-in 들은 아래와 같다.

• Korean Language Pack for Visual Studio Code : VS Code 용 한국어 팩
• indent-rainbow : 들여쓰기를 더 읽기 쉽게 만드는 간단한 확장 Plug-in
• Auto Rename Tag : Visual Studio IDE와 마찬가지로 쌍을 이루는 HTML/XML 태그의 이름을 자동으로 바꿔주는 Plug-in
• CSS Peek : HTML 파일에서 해당 CSS에 대한 정의로 CSS ID 및 클래스 문자열을  볼 수 있도록 지원하는 Plug-in
• HTML to CSS autocompletion : HTML에서 선언된 CSS 명을 .css 파일에서 입력할 때 자동 완성 기능 제공 Plug-in
• HTML CSS Support : HTML용 Visual Studio Code CSS Intellisense Plug-in
• Live Server : 정적 및 동적 페이지에 대한 live reload 기능을 사용하여 개발 시 즉각 적용되도록 도와주는 Plug-in
• ESLint : 코드 검사기로 자바스크립트 문법에서 에러가 발생하면 표시해주는 Plug-in
• Vue - Official : Vue 지원을 위한 공식 확장 Plug-in
• Vue VSCode Snippets : 사용하고자 하는 코드를 빠르게 타이핑할 수 있도록 도와주는 Plug-in

Web 프론트엔드 개발 시 Vue 사용 시에는  크롬브라우저를 사용해서 화면을 확인하고, 크롬 웹스토어에서 Vue devtools로 검색해서  설치하면 된다.