나의 개발 노트

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로 검색해서  설치하면 된다.

JPA는 ORM, 객체와 테이블을 매핑하는 프레임워크를 말한다.

객체와 테이블을 정확하게 매핑하기 위해 다음과 같은 어노테이션들을 사용한다.

• 객체와 테이블
  • @Entity - 테이블과 매핑할 클래스에 @Entity 어노테이션을 추가하는 것으로 해당 클래스가 데이터베이스와 매핑할 객체임을 알려줌.
    Entity의 중요한 3가지 원칙
    1. 기본 생성자를 꼭 가지고 있을 것
    2. final class, interface, enum, inner 클래스가 아닌 기본 클래스
    3. 저장할 필드에 final을 사용하지 말 
  • @Table - Entity와 매핑할 테이블의 이름으로 직접 지정
    @Table(schema = "Schema Name",  name="Table Name") 에서 처럼 schema 명칭과 table name으로 구성되어지며, schema 명은 생략가능하다.
    스키마 매핑과 테이블 매핑 외에 DDL 유니크 제약 조건 추가 및 Catalog 매핑을 추가할 수 있다.
• 프라이머리 키 매핑
  • @Id - 프라이머리 키는 기본 키라고도 하며, 관계형 데이터베이스에서 각 레코드의 식별자로 이용하기에 적합한 후보 키 가운데, 설계자가 일반적으로 이용되어야 한다고 정해 놓은 것을 말한다. JPA에서는 가능한 프라이머리(기본)키를 1개만 지정할 것을 권장한다. 이를테면 MariaDB의 AUTO_INCREMENT와 같이 자동 증가하게 할 수 있고, 아니면 직접 기본 키를 지정할 수도 있다.
• 필드와 컬럼 매핑
  • @GeneratedValue - 프라이머리(기본)키를 생성할 때 직접 할당과 자동 생성으로 나뉜다.
    @GeneratedValue(strategy = GenerationType.IDENTITY) 
    JPA에서 자동 생성에는 3가지 전략이 있다.
    1. IDENTITY : 프라이머리(기본)키 생성을 데이터베이스에 위임
    2. SEQUENCE : 데이터베이스 시퀀스를 이용해서 기본 키를 할당
    3. TABLE : 키 생성 테이블을 이
  • @Column - 필드 매핑. JPA에서 @Column을 명시하지 않으면 해당 필드의 이름으로 매핑한다.
    테이블의 컬럼명과 클래스의 필드명이 서로 다를 경우 @Column의 name속성을 이용해서 이러한 문제를 해결할 수 있으며, DDL 생성 기능으로 nullable은 null 제약 조건, length는 길이 제약 조건 등을 사용할 수 있다.
    @Column(name = "member_id", nullable = true, length = 20) 
  • @Enumerated - ENUM 타입 매핑
    @Enumerated 에는 2가지 타입이 있음.
    1. EnumType.ORDINAL
    2. EnumType.STRING
    ORDINAL은 Enum에 정의된 순서대로 JPA가 이용하며, 만약 순서가 변경된다면 가능한 STRING 타입을 이용하는 것이 좋다. STRING 타입은 데이터베이스에 문자로 저장된다.
• 연관관계
  • @OneToOne - 일대일 매핑
  • @OneToMany - 일대다 매핑
  • @ManyToOne - 다대일 매핑
  • @ManyToMany - 다대다 매핑
    
    

resources 폴더 아래의 application.properties 파일을 열어서 하기의 내용을 추가한다.

pring.datasource.driver-class-name=org.mariadb.jdbc.Driver
spring.datasource.url=jdbc:mariadb://localhost:3306/dbname #db connection url
spring.datasource.username=dbuser #username
spring.datasource.password=pswd #password

#Runtime 콘솔 화면에 SQL 쿼리문을 나타낸다.
spring.jpa.show-sql=true
# Runtime 콘솔 화면에 나타나는 SQL 쿼리문을 깔끔하게 정렬해서 나타낸다.
spring.jpa.properties.hibernate.format_sql=true
#show sql - jpa가 생성하는 쿼리를 콘솔로 출력
spring.jpa.properties.hibernate.show_sql=true
#use sql comment
spring.jpa.properties.hibernate.use_sql_comments=true
# JPA 사용 시 초기화 및 생성 전략 설정 (create, update, create-drop, validate)
# 보통 라이브 환경에서는 update, validate를 사용하고 개발시에는 create, create-drop을 사용합니다.
# create : 매번 테이블 생성을 새로 시도합니다.
# update : 변경이 필요한 경우는 alter 명령이 실행되고, 테이블이 없는 경우 create 명령이 실행됩니다.
# create-drop : create와 동일하며 SessionFactory가 내려가면 테이블을 drop 시킵니다.
# validate : update와 동일하게 Object를 검사하지만 스키마는 건드리지 않고 데이터만 변경합니다. 스키마 구조가 다르면 에러를 발생시킵니다.
# none 아무것도 안함.
# @Entity 컴포넌트를 스캔하여, 서버 실행 시 Table "자동 생성" 및 서버 종료 시 Table "자동 삭제"한다.
spring.jpa.hibernate.ddl-auto=update
spring.jpa.open-in-view=true

# spring.datasource.initialization-mode=always 바뀜
# 서버실행시 자동 실행 src/main/resources/data.sql
spring.sql.init.mode=always
spring.jpa.defer-datasource-initialization=true

• 셀 병합을 위해서 마우스를 이용해서 셀 선택 후 마우스 좌측 버튼을 누른 상태에서 드래그 했을때 선택 영역이 표시되지 않는 오류 조치
• Activity 선택 후 키보드의 방향 키로 Acivity 이동 시 메모와 연결된 선이 바로 Refresh 되지 않는 오류 조치

WANIPlanner Ver. 1.0.3.37 설치 프로그램

WANIPlanner 실행 후 열기 버튼을 이용해서 로드해서 참조할 수 있는 예제 파일

WANIPlanner 사용을 돕기 위한 각 기능별 간단한 사용자 매뉴얼

WANIPlanner Ver 1.0.3.35 

• 심볼 이동 시 메모와 연결된 선이 바뀌지 않는 오류 조치
• 부하 보기 기능 추가

WANIPlanner 내에 생성한 각 Activity들의 시작/종료일자 기간 동안에 겹치는 Activity들의 수를 일자별로 집계해서 보여주고 차트로 한 눈에 쉽게 식별할 수 있는 기능을 추가한 버전이다.

주요 항목별 세부 Activity들의 일정이 서로 겹치게 될 경우, 얼마나 많은 Activity들이 일자별로 몇 개나 겹치고 있는지를 쉽게 확인할 수 있도록 했다.

보기 탭을 선택하고 Ribbon 메뉴 중 보하 보기 체크 박스를 체크하면, 일자별로 겹치는 Activity들의 개수를 상단에 표기하고 하단에 라인 그래프로 현황을 쉽게 볼 수 있는 뷰가 나타난다.

홈 탭의 Net./Cal. 선택에 따라 Net.을 선택한 경우에는 휴일에 Activity 개수가 0으로 표기되고, Cal.을 선택했을 경우에는 휴일에도 일자가 겹치는 Activity의 개수를 표기해서 보여준다. 하단의 라인 그래프 또한 동일하게 표시된다.

WANIPlanner Ver. 1.0.3.34 설치 프로그램

WANIPlanner 실행 후 열기 버튼을 이용해서 로드해서 참조할 수 있는 예제 파일

WANIPlanner 사용을 돕기 위한 각 기능별 간단한 사용자 매뉴얼

메모 표시하기/숨기기 버튼을 이용해서 메모를 화면에 보이게 하던지 숨기게 할 수 있는 기능을 추가했다.

필요에 따라 메모 표시/숨기기를 할 수 있도록해서 편의성을 높였다.

WANIPlanner Ver. 1.0.1.22 설치 프로그램

WANIPlanner 실행 후 열기 버튼을 통해서 참고할 수 있는 예제 파일

WANIPlanner 각 기능별 간단한 사용자 매뉴얼

계획 문서 내의 Activity(심볼)에 연결된 메모를 추가/삭제 할 수 있는 기능을 추가했다.

메모에 대한 주요 기능은

• 메모 생성/삭제
• 메모를 원하는 위치로 이동(Move)
• 메모 내용 작성
• 메모 좌/우/하단에서 메모 사이즈 조절

WANIPlanner Ver. 1.0.1.21 설치 프로그램

WANIPlanner 실행 후 열기 버튼을 통해서 참고할 수 있는 예제 파일

WANIPlanner 각 기능별 간단한 사용자 매뉴얼

미처 챙기지 못했던 부분을 보완해서 올린다.
일정계획의 시작/종료일자 변경 시 Validation 체크 부분을 보완했다.
기존 버전에서 Activity(심볼)의 시작/종료 체크 없이 일정계획의 시작과 종료일자가 변경되었던 부분을 일자 변경 시 이미 생성된 Activity의 시작/종료 일자를 체크해서 변경되는 일자가 Activity(심볼)의 시작/종료 일자 범위를 벗어나는 경우 메시지로 이러한 사실을 알리고 변경이 되지 않도록 처리했다.
 

 
WANIPlanner Ver. 1.0.1.3 설치 프로그램

 
WANIPlanner 실행 후 열기 버튼을 통해서 참고할 수 있는 예제 파일

 
WANIPlanner 각 기능별 간단한 사용자 매뉴얼