전체 글

개발자 린다씨
👶 TypeScript

boolean

boolean 가장 기본적인 데이터 타입이며 true(참), false(거짓) 두 개의 값을 가집니다. 이 타입으론 비교 연산(==, ===, ||, &&,?)과 반전(!) 연산을 할 수 있을 뿐, 많은 연산을 지원하지 않습니다. boolean 타입은 아래처럼 사용할 수 있습니다. let a = true; // boolean var b = true; // boolean const c = true; // true let d: boolean = true; // boolean let e: true = true; // true let f: true = false; // error TS2322 위의 예제를 통해 어떤 값이 boolean인지 TypeScript에 알려줄 수 있는 여러 방법을 확인할 수 있습니다. a..

👶 TypeScript

Primitive Types

Primitive Types 오브젝트와 레퍼런스 형태가 아닌 실제 값을 저장하는 자료형입니다. Primitive 형의 내장 함수를 사용 가능한 것은 JavaScript 처리 방식 덕분입니다. ES2015 기준 6가지 boolean number string symbol(ES2015) null undefined let name = 'linda'; name.toString(); 서브 타입 or 래퍼 객체 literal 값으로 Primitive 타입의 서브 타입을 나타낼 수 있습니다. true; false; 'Hi'; 3.1415; null; undefined; 또는 Wrapper 객체로 만들 수 있습니다. new Boolean(false); // typeof new Boolean(false) : 'object..

👶 TypeScript

TypeScript Types vs JavaScript Types

Static Types(set during development) vs Dynamic Types(resolved at runtime) // JavaScript function add(n1, n2) { if (typeof n1 == 'number' || typeof n2 !== 'number'){ throw new Error('Incorrect input...'); } return n1 + n2; } const result1 = add(21, 25); // TypeScript function add(num1: number, num2: number){ return num1 + num2; } const result2 = add(31, 35); For programs to be useful, we need to..

👶 TypeScript

TypeScript 설치

JavaScript 실행 환경 설치 TypeScript를 사용하려면, JavaScript 실행 환경이 있어야 하며, node.js와 browser가 필요합니다. Node.js Node.js는 Chrome's V8JavaScript Engine을 사용하여, JavaScript를 해석하고, OS 레벨에서의 API를 제공하는 서버사이드 용 JavaScript 런타임 환경입니다. Browser Browser는 HTML을 동적으로 만들기 위해 Browser에서 JavaScript를 해석하고, DOM을 제어할 수 있도록 하는 JavaScript 런타임 환경입니다. Node.js 설치 저는 윈도 환경에서 실습을 진행했습니다. 정석대로라면 아래의 창에서 최신 버전을 설치하는 것이 맞지만, 편법을 사용하여 chocola..

👶 TypeScript

Hello TypeScript!

TypeScript 란 무엇인가? Typed JavaScript at any Scale - TypeScript extends JavaScript by adding types. - By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code. - Any browser, any OS, anywhere JavaScript runs. Entirely Open Source. TypeScript는 2012년에 발표된 오픈 소스 프로그래밍 언어로, 대규모 JavaScript 애플리케이션 개발을 목적으로 Microsoft에 의해 개발되었습니다. JavaScript를 사용하면서 겪는 ..

😎 STS3 Spring 쇼핑몰

STS3 쇼핑몰 프로젝트[27] 업로드 이미지 정보 등록 - 4(트랜잭션 적용)

트랜잭션(Transaction) 적용 Service 단계의 swanEnroll() 메서드는 내부적으로 각각 쿼리를 실행하는 Mapper 단계의 메서드를 2개 호출합니다. 그런데 앞서 작성된 코드에서 2개의 Mapper 메서드 중 하나의 메서드에서 에러가 발생한다면, 에러가 발생하지 않은 메서드의 쿼리문만 실행되고, 에러가 발생한 메서드의 쿼리문은 실행되지 않게 됩니다. 만약 해당 상황이 결제와 관련됐다고 가정한다면, 매우 심각한 문제가 될 것입니다. 이러한 문제가 발생할 수 있는 상황에서 사용할 수 있는 기능이 바로 스프링의 트랜잭션(Transaction) 기능입니다. 트랜잭션 기능을 사용하면, 내부적으로 2개 혹은 그 이상의 작업 단위로 묶인 메서드가 하나의 단위처럼 동작할 수 있게 되고, 그 결과를 ..

😎 STS3 Spring 쇼핑몰

STS3 쇼핑몰 프로젝트[27] 업로드 이미지 정보 등록 - 3

순서 1. AdminServiceImpl.java 2. 실행 테스트 1. AdminServiceImpl.java Mapper 단계에서 imageEnroll() 메서드는 하나의 이미지 관련 데이터(AttachImageVO)를 전달받아 처리하도록 작성했습니다. 문제는 SwanVO 클래스엔 여러 개 이미지 관련 데이터를 처리할 수 있도록 List 타입의 참조 변수, imageList가 선언되어 있다는 것입니다. 그렇기 때문에 imageEnroll() 메서드가 데이터를 처리할 수 있도록 imageList를 통째로 넘겨주면 안 되고, imageList의 각 요소들을 한 개씩 넘겨줘야 합니다. 따라서 imageList의 요소 크기만큼 반복하여 imageEnroll() 메서드를 호출할 수 있도록 for문을 사용했습니..

😎 STS3 Spring 쇼핑몰

STS3 쇼핑몰 프로젝트[27] 업로드 이미지 정보 등록 - 2

순서 1. 방향성 2. imageEnroll() Mapper 3. swanEnroll() 적용 [Mapper 단계] 1. 방향성 제일 먼저 이미지 정보 테이블에 삽입 쿼리를 실행하는 Mapper 메서드인 imageEnroll()를 작성했습니다. 보통의 경우 imageEnroll() 메서드를 호출하는 Service 단계의 메서드를 새로 작성했지만, 이번 경우엔 상품 정보 등록 Mapper 메서드를 호출하는 Service 단계의 swanEnroll() 메서드에서 imageEnroll() 메서드를 호출하도록 했습니다. Service 단계의 swanEnroll() 메서드는 뷰(VIEW)로부터 전달받은 데이터 SwanVO를 활용하여 상품 정보와 이미지 정보를 DB에 등록하는 작업을 하게 했습니다. 필요한 prod..

😎 STS3 Spring 쇼핑몰

STS3 쇼핑몰 프로젝트[27] 업로드 이미지 정보 등록 - 1

순서 1. IMAGE 테이블 생성 2. SwanVO.java 3. 태그 추가 1. IMAGE 테이블 생성 이미지 업로드로 생성된 이미지에 대한 정보를 DB에 등록할 수 있도록 테이블을 생성했습니다. 해당 테이블에 저장될 이미지 정보는 상품 정보에 대한 이미지 정보이기 때문에 product_id라는 칼럼을 추가하여 오직 상품 테이블의 상품 아이디가 존재하는 데이터만 등록할 수 있도록 외래 키를 통해 제약 사항을 추가했습니다. DB에 아래의 명령을 통해 상품 이미지 테이블(IMAGE)을 생성합니다. 기본 키는 UUID, PRODUCT_ID 칼럼은 PRODUCT테이블에 존재하는 PRODUCT_ID 값만 등록할 수 있도록 외래 키로 지정했습니다. ------------------------------------..

개발자 린다씨
Cozy_Linda