1. Typescript? 

  • TypeScript는 MS에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어이다.
  • 자바 스크립트에 타입을 부여한 언어로 JS의 확장된 언어이다.

 

2. Typescript 왜 쓸까?

https://2020.stateofjs.com/en-US/technologies/javascript-flavors/

 

높은 수준의 코드 탐색과 디버깅

타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다. 또한 코드 자동완성이나 실행 전 피드백을 제공하여 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있다.

자바 스크립트 호환

백이던 프론트건 js를 사용할 수 있는 모든 곳에 호환이 가능하다. 

 

강력한 생태계

그리 오래되지 않았음에도 불구하고 강력한 생태계를 가지고 있다. 대부분의 라이브러리들이 타입스크립트를 지원하며 마이크로 소프트의 비주얼 스튜디오 코드를 비롯해 각종 에디터가 타입스크립트 관련 기능과 플러그인을 지원한다.

 

3. Type의 종류? 

  • Boolean 
let isDone: boolean = false;
  • Number / String
let decimal: number = 6;
let hex: number = 0xf00d;

let color: string = "blue";
color = 'red';
  • Array
let list: number[] = [1, 2, 3];
  • Enum
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
  • Any   (알지 못하는 type 표현해야 할 경우)
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 성공, 분명히 부울입니다.
  • Void (Any의 반대 타입과 같다)
function warnUser(): void {
    console.log("This is my warning message");
}
  • Never
function error(message: string): never {
    throw new Error(message);
}

 

 

ref: https://typescript-kr.github.io/pages/basic-types.html

1. IP

Internet Protocol 의 약자로 우리가 사용하고 있는 인터넷의 개인 주소라고 생각하면 된다.

IP에는 IPv4와 IPv6 두 가지 유형이 있는데, IPv4의 확장성과 용량면에서 한계를 해결하기 위해 IPv6가 등장하였다.

주소공간은 IPv4 - 32비트에서 IPv6 - 128 비트로 확장되었으며 인터넷 사용의 폭증을 수용하기 위해 IPv6로의 전환은 필수적이다.

 

my ip address 

온라인 검색 -> 통신사가 제공하고 있는 나의 ip주소 확인이 가능하다.

 

Terminal -> ipconfig

공유기에 의하여 할당받고 있는 ip주소. 통신사 -> 공유기에 의해서 여러 갈래로 그 주소가 분배되고 분배된 주소 중 내가 할당 받은 주소가 보여지는 IPv4주소이다. 

 

HTTP / HTTPS

둘다 프로토콜 (데이터 교환방식을 정의하는 체계) 을 의미하며 http와 같은 경우 인터넷 초기에 모든 웹사이트에서 기본적으로 사용되었던 프로토콜이다. 현재는 https가 권장되고, 또한 주로 사용되고 있는데 약자에서 알수 있듯이 (Hypertext Transfer Protocol Secure) https 프로토콜은 SSL을 사용함으로써 서버와 브라우저 사이에 암호화된 연결을 만들 수 있게 도와준다. 

 

SSL

SSL(Secure Sockets Layer)은 암호화 기반 인터넷 보안 프로토콜이다. 인터넷 통신의 개인정보 보호, 인증, 데이터 무결성을 보장하기 위해 Netscape가 1995년 처음으로 개발되었으며 TLS 암호화의 전신이라고 할 수 있다.

 

이미지 참고 https://www.cloudflare.com/ko-kr/learning/ssl/what-is-ssl/

DNS (Domain Name System)

Amazon Route 53과 같은 DNS 서비스는 전 세계에 배포된 서비스로서, www.example.com과 같이 사람이 읽을 수 있는 이름을 192.0.2.1과 같은 숫자 IP 주소로 변환하여 컴퓨터가 서로 통신할 수 있도록 한다. 인터넷의 DNS 시스템은 이름과 숫자 간의 매핑을 관리하여 마치 전화번호부와 같은 기능을 한다. 도메인은 서비스를 제공하는 CloudFlare나 cafe24 와 같은 기업에서 구매가 가능하다.

 

 

 

 

 


 

 

 

2. AWS EC2

 

Amazon Elastic Compute Cloud (Amazon EC2)는 500개가 넘는 인스턴스, 그리고 최신 프로세서, 스토리지, 네트워킹, 운영 체제 및 구매 모델의 옵션과 함께 워크로드의 요구 사항에 가장 잘 부합할 수 있도록 가장 포괄적이고 심층적인 컴퓨팅 플랫폼을 제공한다.

 

AWS EC2에서 인스턴스를 발급 받는 방법과 생성한 인스턴스에 tomcat을 설치하는 방법은 youtube나 google에 서칭해보면 매우 잘 나온다. 보면서 따라하기만 하면 된다. 인스턴스 생성과 tomcat을 설치한 이후,


(1) Tomcat Folder

인스턴스 내에 설치한 톰캣의 경로를 확인한다. 나의 경우 설치가 어디 되어있는지 opt와 var 폴더를 헤메다가 var>lib 폴더 내에 설치가 되어있는 것을 확인하였다. AWS terminal의 경우 해당 repo로 들어가기 위해서는 gitbash와 다르게 /(슬래시)를 명령어에 포함시켜주어야 한다. 윈도우가 아닌 리눅스 환경임을 기억하자.

 

cd /opt > ls

cd /var > ls

cd ./var /lib > ls > tomcat9 찾음

 

톰캣이 설치된 위치를 먼저 찾자


(2) Tomcat 설정 변경

var/lib/tomcat9/conf$ sudo nano tomcat-users.xml 

 

sudo nano tomcat-users.xml :

- sudo는 명령어를 실행할때 사용하는 리눅스 용어 

- nano는 linux 내의 에디터를 말한다. vim 에디터도 존재한다. 

- tomcat-users.xml은 말그대로 파일 이름.

 

tomcat9 폴더에서 cd conf 해주면 xml이 위치한 폴더로 들어갈 수 있다. 다음에 해당 sudo 명령어를 입력해서 xml을 열어주자. 나는 설정 몇 가지를 변경해주었다. 

 

tomcat 실행하는 김에 password와 username 변경해준다.

 

포트넘버도 8080에서 임의로 바꿔주었다.

 

나는 tomcat 설치하는 시점에 username과 password 설정을 건드리지 않았기 때문에 Id/Pwd 를 이때 변경해주었다. 

변경한 후에는 ctrl + o 눌러서 저장하는 것 잊지말자.


(3) Tomcat start

 

중요한 걸 빼먹을 뻔 했다.

톰캣 구동을 시켜줘야한다. ctrl + x 키로 저장한 xml을 닫아주고 ctrl + c 키로 명령어 창을 띄워준다. 

 

구동은 sudo systemctl start tomcat9 ( tomcat 버전 다르면 해당 버전으로...)

톰캣 끄는 명령어는 sudo systemctl stop tomcat9

 

중요한 것이 한 가지 더 있는데, tomcat9를 구동시키거나 꺼준 이후에는 sudo systemctl status tomcat9 로 구동 상태를 확인해주어야 한다.

 

왜냐하면

Linux는 ui가 매우 불친절하기 때문이다... 아니 ui가 없다...

 

 


(4) IP + Tomcat port #

 

 instance ip주소 + : instsance에서 tomcat 설정한 port 번호를 주소창에 입력하면 아래와 같이 tomcat이 성공적으로 구동되고 있음을 알려주는 화면이 나온다. (나의 경우 8080이 아닌 ex- 6452 port를 설정해주었기 때문에 151.621.6542 : 6452를 주소창에 입력해주었다.

 

발급받은 instance의 ip / + 하이픈 뒤에는 임의로 설정해준 port number


(5) war파일 배포.

 

it works 라는 문구를 확인하면 tomcat이 정상적으로 구동되고 있는 것이다. 해당 화면에서 manager webapp을 클릭하여 

하기 페이지로 넘어간다.

해당 이미지에서는 잘리긴 했는데, war File을 upload 할 수 있는 스페이스가 아래 더 있다.

 

STS 또는 Eclipse에서 파일을 export 해야한다. localhost:8080으로 프로젝트가 문제 없이 돌아가는 지 확인하고 나면

File -> export -> war 순서대로 프로젝트를 export 해주면 된다. 

 

이때 주의 할 점은, localhost에서 가장 처음으로 띄워졌던 화면의 주소가 localhost8080/Test01 라고 한다면 war file의 파일명도 Test01로 변경해주어야 한다는 점이다. 

 

이름 변경이 완료되었다면 file upload를 진행한 후 

 

 

 

 

 

 

 

 

 

 

++

 

 

다음에 알아볼 내용

what ci cd stands for?  

(1) ctrl + backtick = terminal. (activateed on workspace)

 

(2) 새로 create 된 app 서버 :

workspace 안에 folder를 옮길떄는 node_modules는 제외하고 복사한다. node 모듈 용량이 너무 크기 때문에 portable에 맞는 사이즈로 줄여주는 것이 좋다.

 

node_module 삭제중

> 파일을 옮긴 후에는 터미널을 통해 npm i 또는 yarn i를 통해 module을 다시 만들어주어야한다.

> yarn start 로 실행확인.

 

(3)

 

'Frontend > React' 카테고리의 다른 글

React 설치  (0) 2022.07.18

D: 설치예정.

D: > React > lib > workspace

 

1. 필요한 프로그램 다운로드

 

- Node.js (https://nodejs.org/ko/) / 설정 건드릴 것 없이 default로 설치.

- Yarn -> npm보다 처리속도 빠름 (https://classic.yarnpkg.com/en/docs/install#windows-stable

 

> Download Installer

- VS code (https://code.visualstudio.com/)

 

- 해외와 같은 경우, React보다는 Vue.js 를 선호한다. 둘다 js기반 라이브러리.


2. VS code 설정

 

(1) 확장 프로그램 

> 확장버튼 클릭 후

> LiverServer 설치.

> Korean Language Pack for VIsual Studio code 설치

> Auto Close Tag 설치 (사용 유무에 따라) Auto complete tag / Auto Import / Auto Rename Tag 모두 설치된다.

> Reactjs code snippets 설치 (코드 자동생성) 

 

(2) 파일 -> 기본설정 -> 확장 -> live Server Config -> browser chrome private

(3) 파일 -> 기본설정 -> 확장 -> live Server Config -> use Local Ip :>>> local IP로 preview 기능 사용 가능.

 

 

 

Terminal : npx create-react-app + 폴더명

Terminal : yarn start -> live view start.

 


 

3. 선행 되어야 할 공부

 

ES6 (ecmascript)

- var / const / let (최근 var는 거의 쓰이지 않으니 const / let 위주)

- template literal (BackTick `)

- 연산자 (삼항, &&, || 등)

- 화살표 함수.

- map / filter / find

- indexOf / 비구조할당 / 스프레드.

 

'Frontend > React' 카테고리의 다른 글

React - some shortcuts  (0) 2022.07.19

**MyBatis가 필요 없어진다.

 

> 4가지 필요한 dependency 체크해서 spring starter project 를 생성해준다. 

 

> pom.xml에 서버돌릴 tomcatJSTL이 추가로 필요하니 MVN 가서 긁어다 붙여주도록 한다.

 

> DB에 접근하기 위한 application 속성을 작성해준다. resources 패키지에 가면 나뭇잎 모양이 있는데,

이전에  db.properties에 작성하던 것을 옮겨 적어주면 된다. + suffix/prefix/JPA 정보도 입력해준다.

(server port | MySQL | JPA | DDL | api | Database name | Database address 대충 이 정도 들어간다.)

 

> application을 구동시킬 main 매서드가 있는, JpaApplication에 스캔이 필요한 각 객체의 어노테이션을 달아준다.

(Bean이나 main Controller를 먼저 작성하고 나중에 추가해주는 것이 좋겠다. 필요없는 스캔이 생길수도 있으니)

 

> Controller 및 bean, service file 등 application에 필요한 각 파일을 생성해준다. 

 

 

 

 

JPA 사용법

1. Controller 생성한 후 RestController 어노테이션 붙여줌

2. BoardService 인터페이스 생성, 구현 체인 BoardServiceImpl.java도 생성

3. JPA를 상속하는 BoardDAO를 생성해주고, repository 어노테이션을 붙여 준다.

'Backend > Spring' 카테고리의 다른 글

사진 업로드 (SpringProject)  (0) 2022.06.28
Spring MVC @annotation 관련 정리.  (0) 2022.06.23
STS Error - Tomcat / Oracle  (0) 2022.06.23
Spring + myBatis 환경 설정  (0) 2022.06.21
Spring Basic Bean  (0) 2022.06.18

spring boot + mySQL _ MyBatis

Chapter03_MySQL_yml

 

new starter project > 설정

pom.xml에 tomcat, jstl dependecy 추가

 

application.yml 생성후 application properties 안에 있는 내용을 작성해주면 된다.

 

STS 설정 DevTools 빠져서 들어가니까 따로 넣어줘야함 >

MySQL work bench >

 

'Database > Mongd' 카테고리의 다른 글

MySQL 설치  (0) 2022.07.11

검색창에 mySQL Download서치

mysql download

MySQL Community (GPL) Downloads

MySQL Installer for Windows

No thanks Default > next, yes! > Execute > next

product Configuration 건드릴거 없이 next > next > Use Legacy Authentication Method >

 

 

Port#

MySQL por t 3306

Oracle Port 1521

React 3000

Tomcat 8080

 

> Use Legacy Authentication Method (Retain MySQL 5.x Compatibility)

> Accounts and Roles

> 관리자 계정 root / 1234  & 사용자 계정은 사용 안함.

> Next > Next > Execute > FInish > next MqSQLRouter Config 로 돌아옴

> 다시 Finish > product config 에서  next >

다음

 

 

 

 

 

아까 지정했던 root 비밀번호 입력하고 서버 테스트 한다.

아래 화면 뜨면, 한번 더 Execute 하고 Finish

설치 끝난후 MySQL Workbench 구동된 화면 

<workbench>

1. DB 구동 연결 : connect to Database 

2. Database : oracle 에선s xe를 제공, mysql : mydb 생성 #CreateSCHEMA 'mydb' default char

 

 

 

store in vault

store in vault 클릭 후 비밀번호 입력 -> Ok 클릭

 

 

2. Database : oracle 에선s xe를 제공, mysql : mydb 생성 #CreateSCHEMA 'mydb' default char (좌측상단 원통형 클릭)

-> apply -> apply -> Finish

schema 설정 utf-8 / utf_bin

 

use mydb 명령어 cntl + enter 결과.

'Database > Mongd' 카테고리의 다른 글

MySQL Spring boot 연결하기  (0) 2022.07.12

새로 알게 된 annotation들이 많다. 

 

그 중, Spring MVC 모델을 만드는데 사용하였던 annotation을 정리.

 

Structure :

Spring MVC 모델에서 어노테이션은 주로 Controller에 잡히게 된다. 프로그램이 실행되면 xml과 dispatcher 그리고 handler mapping을 거쳐 controller로 가게되는데, 어떠한 service를 제공할 것인지 Client Request를 구분하고 이를 제공하기 위해 실제 Service 파일과 DAO등에 접근 실행을 하는 곳이 바로 '컨트롤러'이다.

 

(정의가 틀렸다면 수정하겠습니다)

 

때문에 annotation 태그들은 대부분 컨트롤러에 모여있으며, dispatcher는 폴더를 뒤져 이를 읽어낸다. 

실제로 dispatcher.xml 에 작성된  코드이다.  @component 태그를 모두 스캔하여 해당 매서드를 활성화 하는 것인데, scanning 할 위치는 base-package 이하로 한다.  

	<context:component-scan base-package="user.bean" />
	<context:component-scan base-package="user.dao" />
	<context:component-scan base-package="user.service" />
	<context:component-scan base-package="spring.conf" />

 

아래는 controller에 작성된 @annotation이 적용된 코드이다.

	@PostMapping(value="write")
	@ResponseBody
	public void write(@ModelAttribute UserDTO userDTO) {
		userService.write(userDTO);
	}
	
	@PostMapping(value="checkId")
	@ResponseBody
	public String checkId(@RequestParam String id) {
		return userService.checkId(id);
	}
	
	@GetMapping(value="list")
	public String list() {
		return "/user/list";
	}

 

여기서 헷갈 릴 수 있는 것은, 우리가 XML을 통해서 IoC Container를 생성하지만 파일 상에 확인할 수 없듯이, dispatcher와 핸들러 또한 마찬가지라는 것이다. dispatcher와 mapper는 우리 눈에 보이지 않지만 Spring 내부에서 돌고 있다.

아래 이미지가 설명에 가장 적당할 것같다.

 

이미지 출처. https://yoonbing9.tistory.com/80

 

 

정리해보면,

 

(1) 우리가 생성한 dispatcher는 http//:~ /user/form(jsp) 라는 사용자의 https 요청을 받고 user 앞의 /를 통해 요청받은 파일의 위치를 인식한다.

(2) 가상에 생성된 handler는 어떠한 Controller 객체가 요청받은 내용을 수행 할 지 user 이하의 '/' 를 통해 정보를 받아오며 (아래 캡쳐의 user/upload, Mapping 작업을 수행한다.

(3) Controller 이하 작업 시작.

 

(4) (5) (6)의 내용은 추후에 다시 정리하고, 일단 controller에 도달하기까지의 내용이다.

 

직접 선언하는게 아니라 spring 내부적으로작동한다

/user/upload중에 upload는 mapper가 찾는것이 아니라 dispatcher가 찾는거고 HandlerMapping은 @어노테이션을 이하 value 값으로 찾는다. 

 

@PostMapping(value="upload")
	@ResponseBody
	public void upload(@RequestParam MultipartFile img) {
		//가상폴더
		String filePath = "D:\\Spring\\workspace\\chapter06_SpringWebMaven\\WebContent\\storage";
		String fileName = img.getOriginalFilename();
		
		File file = new File(filePath, fileName); //파일 생성

 


 

 @annotation

 

  • @Configuration: 빈 설정을 담당할 클래스를 설정한다. 이 클래스 안에서 @Bean 어노테이션이 동봉된 메소드를 선언하면, 그 메소드를 통해 스프링 빈을 정의하고 생명주기를 설정하게 된다. 자바 기반의 config가 싫다면 XML 쓰면 된다.
  • @Component: 빈을 선언하는 클래스를 작성하기 위해 넣는 어노테이션이며 @ComponentScan 의 주요 스캔 대상이다.
  • @Service:  @Component 어노테이션의 차이점을 알려면 캡슐화 개념에 대한 이해가 필요하다. 이 말은 즉슨, 보통 이 어노테이션을 달은 클래스에는 '비즈니스 레이어' 로직에 맞게 짜기 때문에 보통 별도의 데이터를 가지고 있지 않을 것이다. 이건 아주 올바른 사용 케이스이다. 이 어노테이션을 단 클래스는. 그저 업무 메소드만 정의하면 된다. 다른 빈에서 가져와 처리를 하고 결과를 제공하는 그저 비즈니스 로직만 정의하면 된다. 
  • @Autowired: 이 어노테이션은 필드, 메소드, 생성자에다가 넣을 수 있다. 아는 그대로다. 스프링 빈을 가져오는 가장 기본적인 방법이다. 해당 클래스에 맞는 빈을 가져오는데, 만약 하나만 있으면 이름을 아무렇게나 해도 가져오고, 만약 2개 이상이면 시그니처 명칭에 맞는 빈을 가져온다. 오류가 있을 시 NoUniqueBeanDefinitionException 예외가 발생한다.
  • @Bean: @Configuration 선언한 빈 설정 클래스에 빈 선언을 담당하는 어노테이션으로, 메소드에만 넣을 수 있다. 보통은 메소드 이름이 곧 빈 이름으로 탄생한다.
  • @Primary: @Configuration 선언한 빈 설정 클래스에 빈 선언을 담당하면서, 기본 빈 요소를 정의할 때 사용한다. 만약 같은 클래스로 여러 개의 빈을 설정했을 때, 이 어노테이션을 추가로 달면, @Autowired 어노테이션을 통해 빈을 주입 시 이 어노테이션을 가진 빈을 우선적으로 가져온다고 보면 된다. 
  • @Value: 생성자, setter 따위의 메소드, 필드 등에다가 스프링에서 설정한 값을 주입할 수 있다.

 

MVC annotation

  • @ResponseBody: 컨트롤러 메소드 리턴값에 이 어노테이션을 선언함으로써 스프링은 해당 응답 객체를 클라이언트가 요구하는 요청 내용 유형(Content-Type)에 따라 응답하도록 도와주는 어노테이션이다. 보통은 Jackson 모듈에 의해 json 유형으로 응답하며, 클라이언트가 xml 응답을 요청하면 xml 응답을 해주기도 한다.
  • @RestController: 이 어노테이션을 달면, 모든 컨트롤러 메소드는 @ResponseBody 어노테이션이 달린 반환 값을 달고 다니게 된다. 주로 REST API 설계 시 필수 어노테이션이라 보면 된다. 물론 ModelAndView 처럼 특수한 유형은 스프링이 평소 그대로 처리하여 응답해준다.
  • @RequestMapping(method = RequestMethod.GET, value = "/path"): 메소드에 달면, 해당 메소드는 이 어노테이션이 설정한 경로를 호출했을 때 메소드가 설정한 응답값을 받게 되며, 컨트롤러 클래스에 달면, 클래스에 설정한 경로를 기준삼아 각 메소드는 클래스 경로의 하위 경로로 추가되어 경로가 잡히게 된다. 또한 method 설정으로 GET만 받거나, POST로 받는 등 특정 HTTP 메소드에만 응답 가능하도록 설정할 수 있으며, GET 의 경우 @GetMapping 같이 메소드 별칭 어노테이션이 있으니 이걸 활용해도 된다. 거기에다가 consumes 속성으로 요청 값에 대한 유형을 한정지을 수 있으며, produces 속성을 통해 응답 유형을 강제할 수 있다. 이들 둘이 설정 시 지정 타입 안맞으면 400 Bad Request 응답을 뱉도록 스프링에서 설정되어 있다.
  • @RequestParam(value="name", defaultValue="World"): 컨트롤러 메소드 인자에서 요청값을 받을 때, 요청 주소(URL)에 ? 뒤로 시작하는 질의 문자열, POST 전송 시 요청받을 키/값, 등을 받을 수 있으며, required 속성으로 필수 여부를 지정할 수 있고, defaultValue 속성을 통해 요청이 없을 경우 대체 기본값을 설정할 수 있다. 만약 required = true 일 경우 해당 파라미터 없이 호출하면 400 Bad Request 응답을 반환하도록 설정되어 있다.  

 

annotation 파트 참고

https://dev.to/composite/-40c0

'Backend > Spring' 카테고리의 다른 글

STS4 SPRING BOOT - JPA  (0) 2022.07.14
사진 업로드 (SpringProject)  (0) 2022.06.28
STS Error - Tomcat / Oracle  (0) 2022.06.23
Spring + myBatis 환경 설정  (0) 2022.06.21
Spring Basic Bean  (0) 2022.06.18

+ Recent posts