개발자맛 치즈볼

[리팩터링 2판 스터디] 4장. 테스트 구축하기

CheeseB — Sat, 11 May 2024 15:00:00 GMT

자가 테스트 코드의 중요성

모든 테스트를 완전히 자동화하고 그 결과까지 스스로 검사하게 만들어야 한다.

테스트는 리팩터링에 반드시 필요한 토대일 뿐 아니라, 그 자체로도 프로그래밍에 중요한 역할을 한다.

테스트 스위트는 강력한 버그 검출 도구로, 버그를 찾는데 걸리는 시간을 대폭 줄여준다.
테스트 스위트부터 갖춘 뒤에 리팩터링을 하고, 리팩터링 하는 동안에도 필요하다면 계속해서 테스트를 추가하는 게 좋다.
또한, 테스트 코드를 구축하는 것으로 그치지 말고 테스트를 자주 수행하는 습관을 들여야 한다.

TDD (테스트 주도 개발)

프로그래밍을 시작하기 전이 테스트를 작성하기 가장 좋은 시점이다.

TDD: 다음 세가지 과정을 짧은 주기로 반복하는 것

처음엔 통과하지 못할 테스트를 작성함
이 테스트를 통과하게끔 코드를 작성함
결과 코드를 최대한 깔끔하게 리팩터링

테스트를 잘 하는 법

버그 리포트를 받으면 가장 먼저 그 버그를 드러내는 단위 테스트부터 작성하자.

1. 실패해야 할 상황에서는 반드시 실패하게 만들어라

테스트에 실패하도록 일시적으로 코드에 오류를 주입해서 테스트가 의도대로 잘 작성되었는지 한번씩 확인을 거쳐야 한다.

기댓값 넣기

처음부터 기댓값을 제대로 계산해서 넣을 필요는 없다.
먼저 임의의 값을 넣고 테스트를 수행한 다음, 프로그램이 내놓은 실제 값으로 대체하면 된다.

임시 값으로 테스트 기댓값 설정하기
실제 값으로 대체하기
코드에 임시로 오류 심기
실패를 확인하면 코드 되돌리기

2. 자주 테스트해라

완벽하게 만드느라 테스트를 수행하지 못하느니, 불완전한 테스트라도 작성해 실행하는 게 낫다.

작성중인 코드는 최소한 몇 분 간격으로 테스트하고, 적어도 하루에 한 번은 전체 테스트를 돌려 보아야 한다.

3. beforeEach 와 같은 표준 설정 루틴을 활용하라

여러 테스트에 중복되는 픽스처^*가 있다면 테스트 바깥 범위로 그냥 끌어내지 말고 beforeEach 구문을 활용해야 한다.

* 테스트 픽스처 (Test Fixture): 테스트를 수행하기 전에 필요한 상태나 환경을 설정하는 것

describe('province', function() {
  // const asia = new Province(sampleProvinceData()); <-- 잘못된 코드

  let asia;
  
  beforeEach(function() {
    asia = new Province(sampleProvinceData());
  });

  it('shortfall', function() {
    expect(asia.shortfall).equal(5);
  });

    it('profit', function() {
    expect(asia.profit).equal(230);
  });
});

(예시 코드는 Mocha 를 사용)

주석처럼 작성하면 테스트끼리 픽스처를 공유하게 된다. 한 테스트가 공유 객체의 값을 수정하면 이 픽스처를 사용하는 또다른 테스트가 실패할 수 있다. 즉 테스트를 실행하는 순서에 따라 결과가 달라질 수 있다는 것이다.

그러므로 beforeEach 구문으로 각각의 테스트 전에 초기화를 진행해서 모든 테스트를 독립적으로 구성해야 한다.

beforeEach를 사용하지 않고 각각의 it 블록에 픽스처를 똑같이 넣을수도 있지만,
beforeEach를 사용하면 describe 블록 안의 모든 테스트가 똑같은 기준 데이터로부터 시작한다는 사실을 쉽게 알 수 있다.

불변이 확실한 픽스처는 공유하기도 하지만, 가장 선호하는 방식은 매번 새로 만드는 것임
매번 픽스처를 생성한다 해서 눈에 띄게 느려지는 일은 거의 없음
- 정말 문제가 될 때 공유 픽스처를 사용하기도 하지만, 어떠한 테스트도 건드릴수 없게 함

4. it 구문 하나당 하나씩만 검증해라

여러 속성을 한 테스트에서 검증한다면 실패 원인을 파악하기 어려워진다.
한 테스트로 묶어도 문제되지 않을 정도로 여러 속성이 매우 밀접하게 연관되어 있을 때만 묶는다.

5. 경계 조건을 집중적으로 테스트해라

문제가 생길 가능성이 있는 경계 조건을 생각해보고 그 부분을 집중적으로 테스트하자.

인풋 값이 비어있을 때나 최대/최소 값을 넣었을 때, 혹은 타입을 다르게 넣었을 때 등등 경계를 확인하는 테스트를 작성하면 이러한 특이 상황을 어떻게 처리하는게 좋을지 생각해볼 수 있다. 그리고 코드를 작성한 후에는 의도한 대로 잘 처리하는지 확인할 수 있다.

어느 정도까지 테스트를 해야 하는가

어차피 모든 버그를 잡아낼 수는 없다고 생각하여 테스트를 작성하지 않는다면 대다수의 버그를 잡을 수 있는 기회를 날리는 셈이다.

이것저것 테스트를 너무 많이 작성해도 의욕이 떨어져 나중엔 테스트 코드를 작성하지 않게 될 수 있다.
그러므로 아래와 같은 위험한 부분에 집중하는 것이 좋다.

코드에서 처리 과정이 복잡한 부분
함수에서 오류가 생길만한 부분

또한 테스트 때문에 개발 속도가 느려지거나, 제품 코드보다 테스트 코드를 수정하는 데 시간이 더 걸린다면 테스트를 과하게 작성한건 아닌지 의심해 봐야 한다.

테스트 스위트가 충분한지 평가하는 기준

* 테스트 스위트(Test Suite): 테스트 케이스들을 하나로 묶은 것

테스트 커버리지를 테스트를 충분히 했다는 기준으로 삼을 수 있지만, 이는 코드에서 테스트하지 않은 영역을 찾는 데만 도움될 뿐 테스트 스위트의 품질과는 크게 상관이 없다.

테스트 스위트를 평가하는 기준은 주관적이며, 예시로 다음과 같은 것들을 기준으로 할 수 있다.

누군가 결함을 심으면 테스트가 발견할 수 있다는 믿음
리팩터링 후 테스트를 다 통과한 것만으로 리팩터링 과정에서 버그가 하나도 없다고 확신할 수 있는지

[리팩터링 2판 스터디] 3장. 코드에서 나는 악취

CheeseB — Tue, 07 May 2024 15:00:00 GMT

1. 기이한 이름

함수, 변수, 클래스, 모듈 등은 그 이름만 보고도 각각 무슨일을 하고 어떻게 사용해야 하는지 명확히 알 수 있어야 한다.

마땅한 이름이 떠오르지 않는다면 설계에 더 근본적인 문제가 있을 가능성이 높다.

리팩터링 기법

함수 선언 바꾸기
변수 이름 바꾸기
필드 이름 바꾸기

2. 중복 코드

똑같은 코드가 여러 곳에서 반복되면 하나로 통합한다.

리팩터링 기법

함수 추출하기
문장 슬라이드하기
메서드 올리기

중복된 코드를 하나의 함수로 추출하여, 그 함수를 호출하는 것으로 대신한다.
함수 추출 전, 관련된 코드를 한데 모아두면 함수 추출이 수월해진다.
같은 부모를 상속받은 클래스들에 코드가 중복되면, 부모 클래스로 코드를 옮긴다.

3. 긴 함수

함수 내부 코드는 짧아야 좋다.

리팩터링 기법

함수 추출하기
임시 변수를 질의 함수로 바꾸기
매개변수 객체 만들기
객체 통째로 넘기기
함수를 명령으로 바꾸기
조건문 분해하기
함수 추출하기
조건부 로직을 다형성으로 바꾸기
반복문 쪼개기

예전 언어는 서브루틴 호출 비용이 컸지만, 요즘은 함수 호출 비용이 거의 없어서 함수를 잘게 쪼개도 문제가 되지 않는다. 함수가 하는 일을 파악하기 위해 왔다갔다 해야하므로 부담이 될 수 있지만, 함수 이름을 잘 지어두면 함수 코드를 볼 필요가 없다. 그러므로 함수 이름에 코드의 목적이 잘 드러나야 한다.

주석을 달아야 할 만한 부분은 무조건 함수로 만든다.
함수로 만들 코드가 단 한줄이더라도, 설명할 필요가 있다면 함수로 추출하는게 좋다.
함수로 빼기 전 코드보다 길어지더라도 함수로 만드는 것이 낫다.

매개변수와 임시 변수 (함수 내부 지역변수) 를 많이 쓰면 함수 추출이 어렵고, 추출한 함수에도 매개변수가 많아져 리팩터링 전보다 난해해질 수 있다. 함수의 임시 변수를 함수로 바꾸고, 매개변수를 객체로 받아서 임시 변수와 매개변수의 수를 줄이는 것이 좋다. 그래도 여전히 임시 변수와 매개변수가 많으면, 함수를 명령으로 바꾸는것도 고려해볼 필요가 있다.

* 명령 객체 (명령): 함수를 그 함수만을 위한 객체 안으로 캡슐화한 것

예시 코드

임시변수를 함수로, 매개변수는 객체로

// 변경 전
function example(start, end) {
	const range = end - start;
	console.log(range);
}

// 변경 후 ///////////////////////////
function example(range) {
	console.log(getRange(range));
}

function getRange(range) {
	return range.end - range.start;
}

함수를 명령으로 바꾸기

// 변경 전
function score(candidate, medicalExam, scoringGuide) {
	let result = 0;
	let healthLevel = 0;
	...
}

// 변경후 ///////////////////////////
class Scorer {
	constructor(candidate, medicalExam, scoringGuide) {
		this._candidate = candidate;
		this._medicalExam = medicalExam;
		this._scoringGuide = scoringGuide;
	}

	execute() {
		this._result = 0;
		this._healthLevel = 0;
		...
	}
}

긴 조건문은 함수로 분리하고, switch문은 각 case의 본문을 함수 호출문 하나로 바꾼다.
같은 조건을 기준으로 나뉘는 switch문이 여러개라면 클래스와 다형성을 이용해 분리한다.
반복문 또한 그 안의 코드와 함께 독립된 함수로 만든다.
- 적합한 함수 이름이 떠오르지 않으면 서로다른 작업이 섞여있기 때문일 수 있으므로, 반복문을 쪼개어 작업을 분리해야함

조건문 분해

// 변경 전
if (!date.isBefore(plan.summerStart) && !date.isAfter(plan.summerEnd)) {
	charge = quantity * plan.summerRate;
} else {
	charge = quantity * plan.regularRate;
}

// 변경 후 ///////////////////////////
if (summer())
	charge = summerCharge();
else
	charge = regularCharge();

function summer() {
	return !date.isBefore(plan.summerStart) && !date.isAfter(plan.summerEnd);
}

function charge(key) {
	return quantity * plan[key]
}

function summerCharge() {
	return quantity * plan.summerRate;
}

function regularCharge() {
	return quantity * plan.regularRate;
}

조건부 로직을 다형성으로 바꾸기

// 변경 전
function plumage(bird) {
	switch (bird.type) {
		case 'EuropeanSwallow':
				return 'average';
		case 'AfricanSwallow':
				return (bird.numberOfCoconuts > 2) ? 'tired' : 'average';
		case 'NorwegianBlueParrot':
				return (bird.voltage > 100) ? 'scorched' : 'beautiful';
		default:
				return 'unknown';
	}
}

function airSpeedVelocity(bird) {
	switch (bird.type) {
		case 'EuropeanSwallow':
				return 35;
		case 'AfricanSwallow':
				return 40 - 2 * bird.numberOfCoconuts;
		case 'NorwegianBlueParrot':
				return (bird.isNailed) ? 0 : 10 + bird.voltage / 10;
		default:
				return null;
	}
}


// 변경 후 ///////////////////////////
class Bird {
	constructor(birdObject) {
		Object.assign(this, birdObject);
	}

	get plumage() {
		return 'unknown';
	}

	get airSpeedVelocity() {
		return null;
	}
}

class EuropeanSwallow extends Bird {
	get plumage() {
		return 'average';
	}

	get airSpeedVelocity() {
		return 35;
	}
}

class AfricanSwallow extends Bird {
	get plumage() {
		return (this.numberOfCoconuts > 2) ? 'tired' : 'average';
	}

	get airSpeedVelocity() {
		return 40 - 2 * this.numberOfCoconuts;
	}
}

class NorwegianBlueParrot extends Bird {
	get plumage() {
		return (this.voltage > 100) ? 'scorched' : 'beautiful';
	}

	get airSpeedVelocity() {
		return (this.isNailed) ? 0 : 10 + this.voltage / 10;
	}
}

function createBird(bird) {
	switch (bird.type) {
		case 'EuropeanSwallow':
			return new EuropeanSwallow(bird);
		case 'AfricanSwallow':
			return new AfricanSwallow(bird);
		case 'NorwegianBlueParrot':
			return new NorwegianBlueParrot(bird);
		default:
			return new Bird(bird);
	}
}

반복문 쪼개기

// 변경 전
let totalSalary = 0;
let averageAge = 0;
for (const p of people) {
	averageAge += p.age;
	totalSalary += p.salary;
}

averageAge = averageAge / people.length;

// 변경 후 ///////////////////////////
let totalSalary = 0;
for (const p of people) {
	totalSalary += p.salary;
}

let averageAge = 0;
for (const p of people) {
	averageAge += p.age;
}

averageAge = averageAge / people.length;

4. 긴 매개변수 목록

매개변수의 수는 적어야 좋다.

리팩터링 기법

매개변수를 질의 함수로 바꾸기
객체 통째로 넘기기
매개변수 객체 만들기
플래그 인수 제거하기
여러 함수를 클래스로 묶기

다른 매개변수에서 값을 얻어올 수 있는 매개변수는 생략한다.
객체에서 값을 뽑아 별개의 매개변수로 전달하는 코드라면 원본 객체를 그대로 전달하도록 바꾼다.
항상 함께 전달되는 매개변수라면 객체로 묶어서 전달한다.
함수의 동작 방식을 정하는 플래그 역할의 매개변수는 제거한다.
여러 함수가 특정 매개변수들을 공통으로 사용할땐, 함수들을 클래스로 묶어 공통 매개변수를 클래스의 필드로 정의한다.

예시 코드

매개변수 생략

// 변경 전
availableVacation(anEmployee, anEmployee.grade);
function availableVacation(anEmployee, grade) {...}

// 변경 후 ///////////////////////////
availableVacation(anEmployee);
function availableVacation(anEmployee) {
	const grade = anEmployee.grade;
	...
}

플래그 인수 제거

// 변경 전
function setDimension(name, value) {
	if (name === 'height') {
		this.height = value;
		return;
	}
	if (name === 'width') {
		this.width = value;
		return;
	}
}

// 변경 후 ///////////////////////////
function setHeight(value) { this.height = value; }
function setWidth(value) { this.width = value; }

여러 함수를 클래스로 묶기

// 변경 전
function base(aReading) {...}
function taxableCharge(aReading) {...}
function calculateBaseCharge(aReading) {...}

// 변경 후 ///////////////////////////
class Reading {
	base() {...}
	taxableCharge() {...}
	calculateBaseCharge() {...}
}

5. 전역 데이터

전역 데이터는 최대한 주의해서 사용해야 한다.

리팩터링 기법

변수 캡슐화하기

전역 데이터는 코드베이스 어디서든 건드릴 수 있고, 값을 누가 어떤 부분에서 바꿨는지 알기 힘들어 버그의 원인이 되는 코드를 찾아내기 어렵다.
대표적인 전역 데이터는 전역 변수지만, 클래스 변수와 싱글톤에서도 동일한 문제가 발생한다.

변수 캡슐화를 통해 전역 데이터를 함수로 감싸야 한다. 그렇게 하면 데이터를 수정하는 부분을 찾기 쉽고 접근을 통제할 수 있다. 접근자 함수들을 클래스나 모듈에 넣고, 그 안에서만 사용할 수 있도록 하는 것도 좋다.

예시 코드

// 변경 전
let defaultOwner = {firstName: 'Cheese', lastName: 'Ball'};
defaultOwner = {firstName: 'Mozza', lastName: 'Cheese'};
spaceShip.owner = defaultOwner;

// 변경 후 ///////////////////////////
let defaultOwnerData = {firstName: 'Cheese', lastName: 'Ball'};
export function getDefaultOwner() {
	return defaultOwnerData;
}

export function setDefaultOwner(arg) {
	defaultOwnerData = arg;
}

setDefaultOwner({firstName: 'Mozza', lastName: 'Cheese'});
spaceShip.owner = getDefaultOwner();

6. 가변 데이터

무분별한 데이터 수정에 따른 위험을 줄여야 한다.

리팩터링 기법

변수 캡슐화하기
변수 쪼개기
문장 슬라이드하기
함수 추출하기
질의 함수와 변경 함수 분리하기
세터 제거하기
파생 변수를 질의 함수로 바꾸기
여러 함수를 클래스로 묶기
여러 함수를 변환 함수로 묶기
참조를 값으로 바꾸기

한 쪽에서 데이터를 변경하면 다른 쪽에서 예상치 못한 결과나 버그로 이어지는 경우가 종종 있다.
변수의 유효범위가 몇줄 뿐이면 괜찮으나, 유효 범위가 넓어질수록 위험도 커진다.
가변 데이터를 완전히 배제하기란 현실적으로 거의 불가능하지만, 유효범위를 가능한 한 좁혀야 한다.

변수 캡슐화를 통해 정해진 함수를 거쳐야만 값을 수정할 수 있도록 한다. 그렇게 하면 어떻게 수정되는지 감시하거나 코드를 개선하기 쉽다.
하나의 변수에 다른 값들을 저장해서 갱신해야 한다면, 변수를 쪼개 용도별 독립 변수에 저장해서 값 갱신이 문제를 일으킬 여지를 없애야 한다. 값 갱신 로직은 다른 코드와 떨어뜨려 놓는 것이 좋다.

예시 코드

변수 쪼개기

// 변경 전
let temp = 2 * (width + height);
console.log(temp);
temp = width * height;
console.log(temp);

// 변경 후 ///////////////////////////
const perimeter = 2 * (width + height);
console.log(perimeter);
const area = height * width;
console.log(area);

API를 만들 때엔 읽기 함수와 변경 함수를 분리해서 꼭 필요할때가 아니면 부작용이 있는 코드를 호출하지 못하게 한다.

가변 데이터를 사용한 파생 변수를 읽기 함수로 바꾼다.
여러 함수를 클래스로 묶거나 변환 함수로 묶어, 변수를 갱신하는 코드들의 유효범위를 클래스나 변환으로 제한한다.

* 변환 함수:
원본 데이터를 입력받아 필요한 정보를 모두 도출하고, 각각을 출력 데이터의 필드에 넣어 반환하는 함수
- 검색과 갱신을 일관된 장소에서 처리할 수 있고, 로직 중복도 막을수 있음

예시 코드

읽기 함수와 변경 함수 분리

// 변경 전
function getTotalOunstandingAndSendBill() {
	const result = customer.invoices.reduce((total, each) => each.amount + total, 0);
	sendBill();
	return result;
}

// 변경 후 ///////////////////////////
function totalOutstanding() {
	return customer.invoices.reduce((total, each) => each.amount + total, 0);
}

function sendBill() {
	...
}

파생 변수를 읽기 함수로 변환

// 변경 전
get discountTotal() {
	return this._discountTotal;
}

set discount(aNumber) {
	const old = this._discount;
	this._discount = aNumber;
	this._discountedTotal += old - aNumber;
}

// 변경 후 ///////////////////////////
get discountTotal() {
	return this._baseTotal - this._discount;
}

set discount(aNumber) {
	this._discount = aNumber;
}

여러 함수를 변환 함수로 묶기

// 변경 전
funciton base(aReading) {...}

funciton taxableCharge(aReading) {...}

// 변경 후 ///////////////////////////
funciton enrichReading(argReading) {
	const aReading = _.cloneDeep(argReading);
	aReading.baseCharge = base(aReading);
	aReading.taxableCharge = taxableCharge(aReading);
	return aReading;
}

구조체처럼 내부 필드에 데이터를 담고있는 변수라면, 참조를 값으로 바꾸어 내부 필드를 직접 수정하지 않고 구조체를 통째로 교체하는 것이 낫다.
가능하다면 setter를 제거하는 것이 좋다.
객체의 필드는 생성자에서만 설정되고, 수정하지 못하게 만들기
혹은 setter를 호출하는 클라이언트를 찾는 것만으로도 변수 유효범위를 줄이는데 도움이 됨

예시 코드

참조를 값으로 바꾸기

// 변경 전
class Product {
	applyDiscount(arg) {
		this._price.amount -= arg;
	}
}

// 변경 후 ///////////////////////////
class Product {
	applyDiscount(arg) {
		this._price = new Money(this._price.amount - arg);
	}
}

7, 8. 뒤엉킨 변경과 산탄총 수술

하나의 모듈은 오직 하나의 동작만 책임진다.

리팩터링 기법

단계 쪼개기
함수 옮기기
함수 추출하기
클래스 추출하기
함수 옮기기
필드 옮기기
여러 함수를 클래스로 묶기
여러 함수를 변환 함수로 묶기
단계 쪼개기
함수 인라인하기
클래스 인라인하기

뒤엉킨 변경

특정 기능 수정을 위해 하나의 모듈 안에서 여러 방식으로 변경될 일이 많을 때 발생한다.

산탄총 수술

특정 기능 수정을 위해 하나의 모듈이 아닌 여러 모듈들을 수정해야 할 때 발생한다.

	원인	해법(원리)	발생 과정	해법(실제 행동)
뒤엉킨 변경	맥락을 잘 구분하지 못함	맥락을 명확히 구분	한 코드에 섞여 들어감	맥락별로 분리
산탄총 수술	맥락을 잘 구분하지 못함	맥락을 명확히 구분	여러 코드에 흩뿌려짐	맥락별로 모음

뒤엉킨 변경 해결법

서로 다른 두 대상을 한꺼번에 다루는 코드는 각각을 별개의 모듈로 나눈다.
두 로직이 순차적으로 실행되는 맥락이라면, 다음 맥락에 필요한 데이터를 특정 구조에 담아 전달한다.
곳곳에서 각기 다른 맥락의 함수를 호출하는 빈도가 높다면, 각 맥락에 해당하는 모듈을 만들어서 관련 함수들을 모아, 처리 과정을 맥락별로 구분한다.
여러 맥락에 중복으로 관여하는 함수가 있다면 해당 함수는 따로 추출한다. (클래스라면 클래스 추출)

예시 코드

단계 쪼개기

// 변경 전
const orderData = orderString.split(',');
const productPrice = priceList[orderData[0].split('-')[1]];
const orderPrice = parseInt(orderData[1]) * productPrice;

// 변경 후 ///////////////////////////
const orderRecord = parseOrder(order);
const orderPrice = price(orderRecord, priceList);
function parseOrder(aString) {
	const values = aString.split(',');
	return ({
		productID: values[0].split('-')[1],
		quantity: parseInt(values[1]),
	});
}

function price(order, priceList) {
	return order.quantity * priceList[order.productID];
}

클래스 추출하기

// 변경 전
class Person {
	get officeAreaCode() {return this._officeAreaCode;}
	get officeNumber() {return this._officeNumber;}
}

// 변경 후 ///////////////////////////
class Person {
	constructor() {
		this._telephoneNumber = new TelephoneNumber();
	}
	
	get officeAreaCode() {return this._telephoneNumber.areaCode;}
	get officeAreaCode() {return this._telephoneNumber.number;}
}
	
class TelephoneNumber {
	get areaCode() {return this._areaCode;}
	get number() {return this._number;}
}

산탄총 수술 해결법

함께 변경되는 대상들을 한 모듈로 묶어둔다
비슷한 데이터를 다루는 함수들을 클래스로 묶는다.
데이터 구조를 변환하거나 보강하는 함수들을 변환 함수로 묶는다.
어설프게 분리된 로직을 인라인 리팩터링(함수 인라인, 클래스 인라인하기) 으로 합친다.

예시 코드

함수 인라인

// 변경 전
function getRating(dirver) {
	return moreThanFiveLateDeliveries(driver) ? 2 : 1;
}

function moreThanFiveLateDeliveries(driver) {
	return driver.numberOfLateDeliveries > 5;
}

// 변경 후 ///////////////////////////
function getRating(driver) {
	return (driver.numberOfLateDeliveries > 5) ? 2 : 1;
}

클래스 인라인

// 변경 전
class Person {
	constructor() {
		this._telephoneNumber = new TelephoneNumber();
	}
	
	get officeAreaCode() {return this._telephoneNumber.areaCode;}
	get officeAreaCode() {return this._telephoneNumber.number;}
}

class TelephoneNumber {
	get areaCode() {return this._areaCode;}
	get number() {return this._number;}
}
	
// 변경 후 ///////////////////////////
class Person {
	get officeAreaCode() {return this._officeAreaCode;}
	get officeNumber() {return this._officeNumber;}
}

9. 기능 편애

모듈 내부에서의 상호작용은 최대로, 모듈 간의 상호작용은 최소로 해야 한다.

리팩터링 기법

함수 옮기기
함수 추출하기

자신이 속한 모듈의 함수나 데이터보다 다른 모듈의 함수나 데이터와 상호작용이 더 많으면 좋지 않다.
외부 객체의 getter 메서드를 여럿 호출하는 함수는 해당 객체로 옮겨주는 것이 좋다.
함수의 일부에서만 기능 편애가 일어난다면, 해당 부분만 독립 함수로 추출한 후, 원하는 모듈로 옮겨준다.
사용하는 외부 모듈이 다양하다면, 가장 많은 데이터를 포함한 모듈로 옮기거나 함수를 여러 조각으로 나누어 각각 적합한 모듈로 옮겨준다.

예시 코드

함수 옮기기

 // 변경 전
class Account {
	get overdraftCharge() {...}
	...
}

class AccountType {
	...
}

// 변경 후 ///////////////////////////
class Account {
	...
}

class AccountType {
	get overdraftCharge() {...}
	...
}

10. 데이터 뭉치

여러 데이터의 뭉치는 따로 보관하라.

리팩터링 기법

클래스 추출하기
매개변수 객체 만들기
객체 통째로 넘기기

데이터 여러개가 여러 항목에서 항상 뭉쳐다닌다면, 따로 보금자리를 마련해 줘야 한다.

데이터 뭉치인지 판별하는 방법: 값 하나를 삭제했을 때, 나머지 데이터만으론 의미가 없다면 데이터 뭉치이다.

객체 내부의 데이터 뭉치는 클래스 추출하기로 하나의 객체로 묶는다.
메서드 시그니처의 데이터 뭉치는 매개변수 줄이기(매개변수 객체 만들기, 객체 통째로 넘기기) 기법을 통해 호출 코드를 간결하게 만든다.

* 메서드 시그니처: 메서드 이름과 매개변수 리스트의 조합

11. 기본형 집착

프로그래밍 언어가 제공하는 기본형보단, 내게 주어진 문제에 맞는 기초 타입을 정의하라.

리팩터링 기법

기본형을 객체로 바꾸기
타입 코드를 서브클래스로 바꾸기
조건부 로직을 다형성으로 바꾸기
클래스 추출하기
매개변수 객체 만들기

화폐, 범위, 길이, 전화번호 등 문제 해결에 필요한 단위를 숫자형이나 문자열같은 기본 타입으로만 정의하는 것은 좋지 않다.
단순한 출력 이상의 기능이 필요해지는 순간, 그 데이터를 표현하는 전용 클래스를 정의하는 것이 좋다.
그렇게 하면 해당 데이터에 대한 메서드를 추가할 수 있으므로, 기능 캡슐화가 가능하다.
기본형으로 표현된 코드가 조건부 동작을 제어하는 타입 코드로 쓰였다면, 타입 코드를 서브클래스로 바꾸고 조건부 로직을 다형성으로 바꾼다.

예시 코드

기본형을 객체로 바꾸기

// 변경 전
const myCpus = ['Intel Core i7', 'Core i5', 'AMD RyZen 9'];
const myIntelCpus = myCpus.filter((cpu) => cpu.startsWith('Intel') || cpu.startsWith('Core'));

// 변경 후 (1) ///////////////////////////
const myCpus = [
	{name: 'Intel Core i7', brand: 'Intel'},
	{name: 'Core i5', brand: 'Intel'},
	{name: 'AMD RyZen 9', brand: 'AMD'},
];

const myIntelCpus = myCpus.filter((cpu) => cpu.brand == 'Intel');

// 변경 후 (2) ///////////////////////////
const IntelBrand = {
	name: "Intel",
	sloagun: "Leap Ahead",
	ceo: "Robert Holmes Swan",
	stock: 52.82
}

const AmdBrand = {
	name: "AMD",
	sloagun: "Fusion is Future",
	ceo: "Lisa Tzwu-Fang Su",
	stock: 83.1
}

const myCpus = [
	{ name: "Intel Core i7", brand: IntelBrand },
	{ name: "Intel Core i5", brand: IntelBrand },
	{ name: "AMD RyZen 9", brand: AmdBrand }
]

const myIntelCpus = myCpus.filter(cpu => cpu.brand.stock <= 50.0);

타입 코드를 서브클래스로 바꾸기

// 변경 전
function createEmployee(name, type) {
	return new Employee(name, type);
}

// 변경 후 ///////////////////////////
function createEmployee(name, type) {
	switch (type) {
		case 'engineer': return new Engineer(name);
		case 'salesPerson': return new SalesPerson(name);
		case 'manager': return new Manager(name);
	}
}

12. 반복되는 switch문

똑같은 조건부 로직이 여러 곳에서 반복되는 상황은 피해라.

리팩터링 기법

조건부 로직을 다형성으로 바꾸기

중복된 switch문은 조건절을 하나 추가할 때마다 다른 switch문도 모두 찾아서 함께 수정해야 한다.
switch문 뿐만 아니라 길게 나열된 if, else 문도 여러곳에 반복해 등장한다면 리팩토링의 대상이 된다. 이는 조건부 로직을 다형성으로 바꾸면 해결 가능하다.

13. 반복문

반복문은 더이상 시대에 걸맞지 않다.

리팩터링 기법

반복문을 파이프라인으로 바꾸기

반복문보다는 파이프라인을 사용하면 이해하기 훨씬 쉽다.
반복문의 처리 과정을 일련의 연산으로 표현이 가능하며, 객체가 파이프라인을 따라 흐르며 어떻게 처리되는지 읽을수 있다.
대표적인 파이프라인 연산으로 filter, map 이 있음

예시 코드

반복문을 파이프라인으로 바꾸기

// 변경 전
const names = [];
for (const i of input) {
	if (i.job === 'programmer') {
		names.push(i.name);
	}
}
	
// 변경 후 ///////////////////////////
const names = input
	.filter(i => i.job === 'programmer')
	.map(i => i.name);

14. 성의 없는 요소

더이상 필요없는 코드 구조는 버려라.

리팩터링 기법

함수 인라인하기
클래스 인라인하기
계층 합치기

코드의 구조를 잡을 때 함수(메서드), 클래스, 인터페이스 등을 쓰는 것이 좋지만, 그 구조가 필요 없을 때도 있다. 본문 코드 그대로 쓰는것보다 나은 것이 없을때, 실질적으로 메서드가 하나뿐인 클래스가 그러한 경우이다.
이는 보통 함수 인라인하기, 클래스 인라인하기로 처리한다.
상속을 사용했다면 계층 합치기를 적용한다.

예시 코드

계층 합치기

// 변경 전
class Employee {...}
class Salesperson extends Employee {...}

// 변경 후 ///////////////////////////
class Employee {...}

15. 추측성 일반화

당장 걸리적거리는 코드는 눈앞에서 치워버려라.

리팩터링 기법

계층 합치기
함수 인라인하기
클래스 인라인하기
함수 선언 바꾸기
죽은 코드 제거하기

나중에 필요할거란 생각으로 당장 필요없는 코드를 작성해두는 것은 좋지 않다.
특이 케이스 처리 로직, 모듈의 다른 버전을 대비한 매개변수 등이 이에 해당한다.
미래에 실제로 사용하게 된다면 다행이지만, 그렇지 않다면 낭비일 뿐이다.

하는 일이 거의 없는 추상 클래스는 계층 합치기로 제거한다.
쓸데없이 위임하는 코드는 함수 인라인, 클래스 인라인하기로 삭제한다.
본문에서 사용되지 않는 매개변수는 없앤다.
테스트 코드 말고는 사용하는 곳이 없는 함수나 클래스가 있다면, 테스트 코드부터 삭제한 뒤 제거한다.

16. 임시 필드

클래스의 필드는 항상 값이 설정되어야 한다.

리팩터링 기법

클래스 추출하기
함수 옮기기
특이 케이스 추가하기

간혹 특정 상황에서만 값이 설정되는 임시 필드를 가진 클래스도 있지만, 이는 코드를 이해하기 어렵게 한다.
객체를 가져올때 당연히 모든 필드가 채워져 있을거라 기대하는것이 보통이기 때문이다.

클래스 추출하기로 임시 필드를 옮긴 다음, 관련된 함수들을 모두 새 클래스에 넣는다.
임시 필드에 값이 있는지 확인 후 동작하는 조건절은 필드값이 없을 때를 위한 대안 클래스를 만들어서 제거한다.

17. 메세지 체인

리팩터링 기법

위임 숨기기
함수 추출하기
함수 옮기기

메세지 체인이란 다른 객체를 요청하는 작업이 연쇄적으로 이어진 코드를 말한다.

클라이언트가 한 객체를 통해 다른 객체를 얻고, 그렇게 얻은 객체에 또다른 객체를 요청하는 경우
getter가 연쇄적으로 이어지거나 임시 변수들이 줄줄이 나열되는 코드

이렇게 하면 클라이언트가 객체 내비게이션 구조에 종속되어, 내비게이션 중간단계를 수정하면 클라이언트 코드도 수정해야 한다.

이는 위임 숨기기 기법으로 해결 가능하며, 메세지 체인의 다양한 연결점에 위임 숨기기를 적용 가능하다.
객체의 필드가 가리키는 객체(위임 객체) 의 메서드를 호출하기 위해서 위임 객체의 존재를 알 필요 없이, 위임 메서드를 추가하여 위임 객체의 존재를 숨긴다.
체인을 구성하는 모든 객체에 적용 가능하지만, 중간 객체들이 모두 중개자가 되기 쉽다.
최종 결과 객체가 어떻게 쓰이는지부터 살펴보는 것이 좋다.

예시 코드

위임 숨기기

// 변경 전
manager = aPerson.department.manager;
class Person {
	constructor(aDepartment) {
		this._department = aDepartment
	}
	
	get department() {
		return this._department;
	}
}
	
class Department {
	constructor(aManager) {
		this._manager = aManager;
	}
	
	get manager() {
		return this._manager;
	}
}
	
// 변경 후 ///////////////////////////
manager = aPerson.manager;
class Person {
	constructor(aDepartment) {
		this._department = aDepartment
	}
	
	get manager() {
		return this._department.manager;
	}
}
	
class Department {
	constructor(aManager) {
		this._manager = aManager;
	}
	
	get manager() {
		return this._manager;
	}
}

managerName = aPerson.department.manager.name;
managerName = aPerson.department.managerName; // 관리자 객체의 존재를 숨김
managerName = aPerson.manager.name; // 부서 객체의 존재를 숨김
managerName = aPerson.managerName; // 부서 객체와 관리자 객체 모두의 존재를 숨김

18. 중개자

리팩터링 기법

중개자 제거하기
함수 인라인하기

객체를 캡슐화 하는 과정에서 위임이 자주 활용되지만, 이 역시도 지나치면 문제가 된다.
클래스의 메서드 중 절반이 다른 클래스에 구현을 위임하고 있다면?

위임 숨기기의 반대 기법인 중개자 제거하기를 활용하여, 해당 일을 하는 객체와 직접 소통하도록 한다.
위임 메서드를 제거한 후 남는 일이 거의 없다면, 호출하는 쪽으로 함수를 인라인한다.

19. 내부자 거래

모듈 간의 데이터 거래를 최소화하라.

리팩터링 기법

함수 옮기기
필드 옮기기
위임 숨기기
서브클래스를 위임으로 바꾸기
슈퍼클래스를 위임으로 바꾸기

모듈 간의 결합도를 최소화하고, 모든 데이터 거래는 투명하게 처리해야 한다.
은밀하게 데이터를 주고받는 모듈들이 있다면 따로 떼어놓아서 사적으로 처리하는 부분을 줄여야 한다.
여러 모듈이 같은 관심사를 공유한다면, 공통 부분을 정식으로 처리하는 제 3의 모듈을 새로 만들거나 위임 숨기기로 다른 모듈이 중간자 역할을 하도록 한다.

상속 구조에서는 부모 자식 간에 결탁이 생길 때가 있는데, 이는 서브클래스를 위임으로 바꾸거나 슈퍼클래스를 위임으로 바꿔서 해결할 수 있다.

예시 코드

서브 클래스를 위임으로 바꾸기

// 변경 전
class Order {
  get daysToShip() {
		return this._warehouse.daysToShip;
  }
}
	
class PriorityOrder extends Order {
  get daysToShip() {
		return this._priorityPlan.daysToShip;
  }
}
	
// 변경 후 ///////////////////////////
class Order {
	constructor() {
		this._priorityDelegate = new PriorityOrderDelegate();
	}
	
	get daysToShip() {
		return (this._priorityDelegate)
			? this._priorityDelegate.daysToShip
			: this._warehouse.daysToShip;
  }
}
	
class PriorityOrderDelegate {
  get daysToShip() {
		return this._priorityPlan.daysToShip
  }
}

슈퍼 클래스를 위임으로 바꾸기

// 변경 전
class List {...}
class Stack extends List {...}

// 변경 후 ///////////////////////////
class Stack {
  constructor() {
		this._storage = new List();
  }
}
class List {...}

20. 거대한 클래스

클래스 안의 필드 수가 너무 많아지는 것은 피해라.

리팩터링 기법

클래스 추출하기
슈퍼클래스 추출하기
타입 코드를 서브클래스로 바꾸기

한 클래스가 너무 많은 일을 하다보면 필드 수가 늘어나고, 필드가 너무 많으면 중복 코드가 생기기 쉽다.

같은 컴포넌트에 모아두는 것이 합당해 보이는 필드들을 클래스로 추출한다.
개별 클래스로 추출하기보단 원래 클래스와 상속 관계로 만드는 것이 더 좋다면, 슈퍼 클래스로 추출하거나 서브 클래스로 추출한다.

예시 코드

슈퍼 클래스 추출하기

// 변경 전
class Department {
  get totalAnnualCost() {...}
	get name() {...}
	get headCount() {...}
}
	
class Employee {
  get annualCost() {...}
	get name() {...}
	get id() {...}
}
	
// 변경 후 ///////////////////////////
class Party {
  get name() {...}
	get annualCost() {...}
}
	
class Department extends Party {
  get annualCost() {...}
	get headCount() {...}
}
	
class Employee extends Party {
  get annualCost() {...}
	get id() {...}
}

21. 서로 다른 인터페이스의 대안 클래스들

클래스 교체를 위해 같은 인터페이스를 쓰도록 만들어라.

리팩터링 기법

함수 선언 바꾸기
함수 옮기기
슈퍼클래스 추출하기

클래스를 사용할 때의 큰 장점은 필요에 따라 언제든 다른 클래스로 교체할 수 있다는 것이다.
단, 클래스를 교체하려면 인터페이스가 같아야 한다.

함수 선언을 바꿔 메서드 시그니처를 일치시킨다.
인터페이스가 같아질 때까지 함수를 옮겨서, 필요한 동작들을 클래스 안으로 밀어넣는다.
그러다 대안 클래스들 사이에 중복 코드가 생기면 슈퍼클래스로 추출하는 것도 고려해본다.

22. 데이터 클래스

리팩터링 기법

레코드 캡슐화하기
세터 제거하기
함수 옮기기
함수 추출하기
단계 쪼개기

* 데이터 클래스: 데이터 필드와 getter, setter 메서드로만 구성된 클래스

데이터 저장 용도로만 쓰이다보니 다른 클래스가 너무 깊이까지 함부로 다룰 때가 많다.

데이터 클래스에 public 필드가 있다면 레코드 캡슐화를 통해 숨겨야한다.
변경하면 안되는 필드는 setter 를 제거하여 접근을 원천 봉쇄한다.

필요한 동작이 엉뚱한 곳에 정의되어서 데이터 클래스가 되어버린 경우엔, 클라이언트 코드를 데이터 클래스로 옮겨놓는다.
예외적으로, 다른 함수를 호출해 얻은 결과로서의 데이터 객체는 동작 코드를 넣을 이유가 없다.
이런 데이터 구조는 불변하며, 불변 필드는 굳이 캡슐화할 필요 없이 getter를 통하지 않고 필드 자체를 공개해도 무관하다.

예시 코드

레코드 캡슐화하기

// 변경 전
organization = {name: "Acme Gooseberries", country: "GB"};

// 변경 후 ///////////////////////////
class Organization {
  constructor(data) {
		this._name = data.name;
		this._country = data.country;
  }
	
	get name(){return this._name;}
	set name(arg) {this._name = arg;}
	get country(){return this._country;}
	set country(arg) {this._country = arg;}
}

23. 상속 포기

리팩터링 기법

메서드 내리기
필드 내리기
서브클래스를 위임으로 바꾸기
슈퍼클래스를 위임으로 바꾸기

서브 클래스가 부모 클래스의 특정 부분을 상속받기 원치 않은 경우에 발생한다.
상속하지 않을 부모 코드를 따로 분리하여, 공통된 부분만 남도록 한다.
하지만 리팩토링이 꼭 필요한 경우는 아니므로 그다지 권하진 않는다.
부모의 인터페이스를 따르고 싶지 않을땐 아예 상속 메커니즘에서 벗어나도록, 위임 클래스를 만들고 이를 이용하도록 한다.

예시 코드

메서드 내리기, 필드 내리기

// 변경 전
class Employee {
	private String quota;
  get quota {...}
}
	
class Engineer extends Employee {...}
class Salesman extends Employee {...}
	
// 변경 후 ///////////////////////////
class Employee {...}
class Engineer extends Employee {...}
class Salesman extends Employee {
	protected String quota;
  get quota {...}  
}

24. 주석

주석을 남겨야겠다는 생각이 들면, 가장 먼저 주석이 필요없는 코드로 리팩토링 해본다.

리팩터링 기법

함수 추출하기
함수 선언 바꾸기
어서션 추가하기

주석은 악취가 아닌 향기를 입히지만, 주석을 탈취제처럼 사용하진 말자.

주석이 장황하게 달려 있다면 코드를 잘못 작성했기 때문인 경우가 많다.

특정 코드 블록이 하는 일에 주석을 남기고 싶다면, 해당 블록을 함수로 추출한다.
이미 추출된 함수에 설명이 필요하다면, 함수 이름을 바꿔본다.

시스템이 동작하기 위한 선행 조건을 명시하고 싶다면, assertion을 추가해본다.
특정 조건이 참일때만 제대로 동작하는 코드 영역이 있는 경우에 사용한다.
어서션은 항상 참이라고 가정하는 조건문으로, 이것이 실패했다는건 프로그램이 잘못되었다는 것이다.
어서션이 있고 없고가 프로그램 기능의 정상 동작에 아무런 영향을 주지 않도록 해야한다.
이는 다른 개발자와의 훌륭한 소통 도구가 되지만, 테스트코드가 있다면 디버깅 용도로서의 쓸모는 줄어든다.

예시 코드

어서션 추가

// javascript
console.assert(returnFalse()) // 콘솔에 assert 에러 표시 (참이면 아무 동작 안함)

// nodeJS
const assert = require('assert');
assert(returnFalse()); // throw AssertionError!
assert.ok(returnFalse()); // assert()와 동일
assert.ifError(returnFalse()) // Pass

// 변경 전
if (this.discountRate)
  base = base - (this.discountRate * base);

// 변경 후 ///////////////////////////
assert(this.discountRate >= 0);
if (this.discountRate)
  base = base - (this.discountRate * base);

유용한 Git Global 세팅 모음 (feat. 윈도우 쓰는 개발자)

CheeseB — Sat, 04 May 2024 15:00:00 GMT

폴더명, 파일명 대소문자 구분하기

깃은 기본적으로 폴더/파일명의 대소문자를 구분하지 않는다.
이로 인해 한번 저장소에 올렸던 폴더/파일명의 대소문자만 바꾸었을 때, 제대로 반영되지 않아 애를 먹은 적이 많을 것이다.
그러므로 처음부터 global config에 아래처럼 세팅을 해두자.

git config --global core.ignorecase false

말 그대로 대소문자를 무시하는 옵션을 끄는 것이다.

윈도우에서 CRLF를 LF로 변경하기

윈도우는 CRLF, 맥은 LF로 개행 방식에 차이가 있다. 이것 때문에 윈도우와 맥 유저가 서로 협업을 하게 된다면 상당히 불편한 상황이 많이 생긴다. 예를 들어 코드를 수정하지 않았는데 개행문자 때문에 깃에서 변경사항이 있다고 판단하기도 하고, 린트에서 LF를 강제한다면 모든 코드에 빨간줄이 뜨는 상황을 종종 볼수 있다. 이런 이유로 개행 방식을 통일~~하거나 맥북을 구입~~해야 하는데, 보통은 LF로 통일하는 편이므로 애초에 Git global로 설정해두면 이후에는 편하게 작업할 수 있다.

설정 방법

아래 두 명령어를 입력하면 된다.

git config --global core.eol lf
git config --global core.autocrlf input

core.eol

깃에서 줄바꿈을 처리하는 방식을 결정

native (default): 시스템 설정에 따름
crlf: CRLF를 개행문자로 사용
lf: LF를 개행문자로 사용

core.autocrlf

깃 이력 데이터를 관리하는 DB에서 줄바꿈을 어떻게 처리할지 결정

깃의 모든 이력 데이터는 .git 폴더에 있으며, 텍스트 파일을 이 이력 데이터 저장소에 주고받으면서 변경사항을 확인한다.

false (default): 파일에 CRLF를 사용했든 LF를 사용했든 파일을 건드리지 않고 그대로 저장소로 주고받음
- 개행 방식이 다르면 깃에서 파일이 변경되었다고 판단함
true: 깃 이력 저장소에서 파일을 가져올 때 LF를 CRLF로 변경하고, 저장소로 보낼 때 CRLF를 LF로 변경함
input: LF를 개행문자로 사용

인터넷을 찾아보면 윈도우는 기본적으로 CRLF를 사용하기 때문에 보통 autocrlf를 true로 설정하라고 하지만, 굳이 파일을 가져올 때 LF를 CRLF로 바꿀 필요가 없을것 같아서 나는 input으로 설정해 두었다.
input으로 설정해도 윈도우에서 작업하기 어려움이 있었다거나 협업 시 문제가 생기지는 않았다.

Git Alias 설정

커밋 단위를 작게 하는것이 좋다는 것은 개발자라면 익히 알고 있는 사실이다. 그렇기에 우리는 개발 도중 수많은 git add 와 git commit 을 하게 된다. 이렇게 자주 쓰는 명령어나 혹은 너무 길어서 입력하기 귀찮은 명령어들은 별칭을 설정해두면 좋다.

git config --global alias.c commit
git config --global alias.cm 'commit -m'

위와 같이 단 하나의 명령어라면 alias.[별칭] [원래 명령어] 와 같이 작성하고, 공백으로 이어져 있는 명령어라면 원래 명령어를 따옴표로 감싸야 한다.

또한, 이미 설정해둔 별칭을 해제하고 싶다면 아래와 같이 unset 옵션을 사용하면 된다.

git config --global --unset alias.cm

Git Bash Alias 설정

위에서 소개한 것은 git 명령어에만 국한된 별칭이지만, git 명령어 뿐 아니라 모든 명령어에 별칭을 사용하는 방법도 있다. 바로 Git Bash 세팅 파일에 alias를 추가하는 것이다.

나는 윈도우에서도 리눅스 명령어를 사용하기 위해 VScode의 기본 터미널을 Git Bash로 설정해놓고 사용중인데, 나처럼 Git Bash를 윈도우의 기본 터미널이나 파워쉘 대신 사용하는 분들이 많을 것 같아서, Git에 관련된 세팅은 아니지만 Git Bash로 단축 명령어 등록하는 법도 함께 소개하려 한다.

VScode 터미널에 Git Bash를 띄운 모습

설정 방법

C:\Program Files\Git\etc\profile.d\aliases.sh 파일을 찾아서 연다
다음과 같이 alias를 추가한다
C:\Program Files\Git\etc\bash.bashrc 파일을 찾아서 연다
맨 마지막 줄에 . /etc/profile.d/aliases.sh 이 한줄을 추가한다
터미널에서 /etc 로 이동한다
source bash.bashrc 명령어를 입력한다

나는 이렇게 세팅을 한 후 npm run dev 를 nrd 라고만 쓰는 등 명령어를 입력하는 시간이 눈에 띄게 줄어들어서 개인적으로 매우 추천하는 세팅이다. 다만 아직 Git 명령어가 손에 익을만큼 익숙해지지 않은 개발자라면, 먼저 명령어에 익숙해진 뒤 설정할 것을 추천한다.

참고 사이트

[리팩터링 2판 스터디] 2장. 리팩터링 원칙

CheeseB — Tue, 30 Apr 2024 15:00:00 GMT

리팩터링이란?

소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법

동작을 보존하는 작은 단계들을 거쳐 코드를 수정하고, 단계를 순차적으로 연결하여 큰 변화를 만들어내는 일

“누군가 ‘리팩터링하다가 코드가 깨져서 며칠이나 고생했다’ 라고 한다면, 십중팔구 리팩터링한 것이 아니다.”

기능 추가 VS 리팩터링

기능 추가를 할 때는 기존 코드를 절대 건드리지 않고 새 기능을 추가하기만 해야 함
리팩터링할 때는 기능 추가는 절대 하지 않기로 다짐한 뒤 오로지 코드 재구성에만 전념해야 함

리팩터링하는 이유

소프트웨어 설계가 좋아짐
소프트웨어를 이해하기 쉬워짐
버그를 쉽게 찾을 수 있음
프로그래밍 속도를 높일 수 있음

리팩터링을 해야할 때

3의 법칙

처음엔 그냥 함
비슷한 일을 두번째로 하게되면 일단 계속 진행
비슷한 일을 세번째로 하게되면 리팩터링함

수시로 리팩터링하고, 계획된 리팩터링은 최소화하기

준비를 위한 리팩터링: 기능을 쉽게 추가하게 만들기
이해를 위한 리팩터링: 코드를 이해하기 쉽게 만들기
쓰레기 줍기 리팩터링: 비효율적으로 처리하는 코드를 깔끔하게 만들기

위 3가지 리팩터링은 모두 기회가 될때 진행함 (리팩토링 일정을 따로 잡지 않음)

그동안 리팩터링에 소홀했을 때만 따로 시간을 내서 리팩터링하기

“보기 싫은 코드를 발견하면 리팩터링하자. 그런데 잘 작성된 코드 역시 수많은 리팩터링을 거쳐야 한다.”
“무언가 수정하려 할 때는 먼저 수정하기 쉽게 정돈하고, 그다음 쉽게 수정하자”

오래 걸리는 리팩터링

대규모 리팩터링에 팀 전체가 매달리지 말고, 주어진 문제를 몇주에 걸쳐 조금씩 해결하기

코드리뷰에 리팩터링 활용하기

코드 작성자와 나란히 앉아 코드를 훑으며 리팩터링하는 페어 프로그래밍 방식 추천

리팩터링하지 말아야 할 때

굳이 수정할 필요가 없을 때 (ex. 외부 API 다루듯 호출해서 쓰는 코드)
- 내부 동작을 이해해야 할 시점에 리팩터링해야 효과를 볼 수 있기 때문
처음부터 새로 작성하는게 쉬울 때

리팩터링 시 고려할 문제

* tip! 기술에 능통하지 않은 관리자에게는 리팩터링한다고 말하지 말것

새 기능 개발 속도 저하

상황에 맞게 잘 조율해야 함
리팩터링을 ‘클린코드’ 나 ‘바람직한 엔지니어링 습관’ 같은 도덕적 이유로 정당화하지 말것
리팩터링의 본질은 코드베이스를 예쁘게 꾸미는게 아닌 오로지 경제적인 이유로 하는것임
기능 추가 시간을 줄이고, 버그 수정 시간을 줄여줌으로써 개발 기간을 단축하고자 리팩터링을 하는 거란 것을 명심할 것

리팩터링의 궁극적인 목적은 개발 속도를 높여서, 더 적은 노력으로 더 많은 가치를 창출하는 것이다.

코드 소유권

코드 소유권이 나뉘어 있으면 리팩터링에 방해가 됨
팀원 누구나 코드를 수정할 수 있도록 코드 소유권을 팀에게 두는것을 추천함.

브랜치

기능 브랜치 방식의 단점: 브랜치에서 작업할 기간이 길수록 마스터로 통합하기 어려워짐
통합 주기를 최대한 짧게 잡을 것
CI (지속적 통합): 모든 팀원이 최소 하루 한번은 마스터와 통합해야 함
- 마스터를 건강하게 유지해야 함
- 거대한 기능을 잘게 쪼개야 함
- 각 기능을 끌수있는 기능 토글을 적용하여, 미완성된 기능이 시스템을 망치지 않도록 해야함
CI 와 리팩터링은 궁합이 좋음

테스팅

리팩터링의 첫번째 토대는 자가 테스트코드를 마련하는 것 (동작을 똑같이 유지해야 하므로)
테스트 주기가 짧다면 버그를 더 쉽게 찾을 수 있으며, 리팩터링 과정에서 버그가 생길 불안감을 해소함

레거시 코드

레거시 시스템을 파악할때 리팩터링이 매우 도움됨
그전에 테스트를 보강해야 함

데이터베이스

데이터 마이그레이션 스크립트로, 접근 코드와 DB스키마에 대한 구조적 변경을 처리함
다른 리팩터링과 마찬가지로 작고 독립된 단계로 쪼개서 할것
프로덕션 환경에 여러 단계로 나눠서 릴리즈하는 것이 좋음

리팩터링, 아키텍처, 애그니(YAGNI)

리팩터링이 아키텍처에 미친 영향은 요구사항 변화에 자연스럽게 대응하도록 한것
앞으로 필요할 유연성과 대응 방안을 추측하지 말고, 현재까지 파악한 요구사항만을 해결하는 소프트웨어를 구축하기
진행하면서 요구사항을 더 이해하게 되면 아키텍처도 그에 맞게 리팩터링해서 바꾸기

YAGNI 설계방식

You aren’t going to need it (너 그거 필요없을걸ㅋ)
당장 필요한 기능만으로 최대한 간결하게 만들라는 뜻
실제로 앞으로 필요할 것 같아서 미리 구현해둔 기능 상당수가 결국 전혀 쓰이지 않거나, 미래 요구사항을 제대로 반영하지 못해 요히려 수정하기 더 어려워지는 경우가 많음
자가 테스트 코드 + 리팩터링 + 지속적 통합

리팩터링 VS 성능

리팩터링하면 성능이 느려질 수도 있음
하지만 리팩터링을 한다면 이후에 성능을 튜닝하기 더 쉬워짐
- 기능추가가 빨리 끝나 성능에 집중할 시간을 벌수 있음
- 리팩터링이 잘 되어있다면 성능을 더 세밀하게 분석할 수 있음

성능 개선을 위한 방법

처음엔 성능 신경쓰지 않고 코드를 다루기 쉽게 작성하기
성능 최적화 단계가 오면 다음 단계를 따르기
1. 프로파일러로 성능에 큰 영향을 주는 지점을 알아내기
  (대부분 프로그램은 전체 코드중 극히 일부에서 대부분의 시간을 소비함)
2. 그 부분을 개선하되, 작은 단계로 나눠서 컴파일과 테스트를 거치고 프로파일러를 다시 실행하기
3. 개선되지 않았다면 수정 내용을 되돌리기

리팩터링 자동화

소스 코드의 텍스트를 직접 조작하지 말고 IDE에서 제공하는 기능들을 잘 활용할것

[리팩터링 2판 스터디] 1장. 리팩터링 첫 번째 예시

CheeseB — Tue, 23 Apr 2024 15:00:00 GMT

첫번째 장은 예시 코드를 리팩터링하는 과정을 보여주는 것이 주된 내용이기 때문에, 중간중간 나온 인상깊은 문구를 위주로 정리했다.

리팩터링 방법

리팩터링하기 전에 제대로 된 테스트부터 마련한다. 테스트는 반드시 자가진단하도록 만든다.
리팩터링은 프로그램 수정을 작은 단계로 나눠 진행한다. 그래서 중간에 실수하더라도 버그를 쉽게 찾을 수 있다.

리팩터링 책을 읽다보면 아닌게 아니라 정말 작은 단위로 리팩터링 과정을 나누고, 단계마다 항상 컴파일-테스트-커밋 하는 것을 확인할 수 있다. 변수 이름 하나 바꾸거나 코드 딱 한줄 옮긴 정도의 정말 사소한 수정까지도 항상 단계를 나누어 컴파일-테스트-커밋 했기 때문에, 처음에는 이렇게까지 할 필요가 있나 싶었다.

하지만 지금 생각해보면, 내가 지금까지 대규모 프로젝트에 투입된 적이 없었기 때문에 그런 생각이 든게 아닐까 싶다. 작은 프로젝트라면 그렇게까지 단계를 작게 나누지 않아도 충분히 실수를 바로잡을 수 있겠지만, 내가 수정할 코드가 대규모 시스템의 일부라면 코드 이름 하나 바꾸거나 라인 하나 옮기는것 만으로도 예상치 못한 오류를 발생할 수 있고 그걸 찾기도 어려울 지 모른다는 생각이 든다.
리팩터링 책의 첫 도입부에서도 ‘항시 책의 예시들이 대규모 시스템에서 발췌한 코드라고 상상하면서 따라오기 바란다.’ 라고 했기 때문에, 가끔 리팩터링 책에서 말하는 방식에 의문이 들 때에는 대규모 시스템을 가정하고 읽으면 좋을 것 같다.

수정을 위한 리팩터링

프로그램이 새로운 기능을 추가하기에 편한 구조가 아니라면, 먼저 기능을 추가하기 쉬운 형태로 리팩터링하고 나서 원하는 기능을 추가한다.
좋은 코드를 가늠하는 확실한 방법은 ‘얼마나 수정하기 쉬운가’ 다.

이 말은 정말 격하게 공감하고 있다. 동료 개발자의 부재로 그의 코드를 내가 대신 수정해야 할 상황이 됐을 때, 항상 그 코드에 대해 이해하느라 얼마나 많은 시간을 쏟았는지 생각해보면 리팩터링이 얼마나 중요한지 실감하게 된다. 물론 나 없을 때 나 대신 내 코드를 수정해주신 개발자 분들도 같은 마음이었을 것이다.🥲

깔끔한 코드

컴퓨터가 이해하는 코드는 바보도 작성할 수 있다. 사람이 이해하도록 작성하는 프로그래머가 진정한 실력자다.
캠핑자들에게는 ‘도착했을 때보다 깔끔하게 정돈하고 떠난다’ 는 규칙이 있다. 프로그래밍도 마찬가지다. 항시 코드베이스를 작업 시작 전보다 건강하게 만들어놓고 떠나야 한다.

솔직히 이 대목에서 많이 찔렸다. 나 또한 컴퓨터만 이해하는 코드를 짜는 바보였기 때문이다. 팀원들 뿐 아니라 나도 내 코드를 나중에 읽었을때 무슨 코드인지 못 알아볼 때가 종종 있었다. 이제는 나도 사람이 이해하는 코드를 작성하는 진정한 실력자가 되기 위해 리팩터링 책을 읽고 있다.

여담으로, 이번 챕터에서 위의 문구들을 보면서 문득 여기에 더 추가하고 싶은 한가지 문구가 떠올랐다.

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.
항상 내 코드를 유지보수할 사람이 내가 사는곳을 아는 폭력적인 사이코패스라고 가정하며 코딩해라.
- John F. Woods

어디선가 들었던 개발 명언인데, 나는 지금까지도 이것보다 임팩트있는 명언을 본 적이 없다.
개발 좌우명으로 이 말을 액자에 넣고 모니터 옆에 두면 정말 리팩터링하고 싶어질 것 같다.😂

[Next.js] 테이블에서 Hydration failed 에러 날 때 해결법

CheeseB — Sun, 28 Jan 2024 15:00:00 GMT

에러 상황

Next.js 프로젝트에서 테이블 컴포넌트를 만들던 중, 별 작업을 하지도 않았는데 아래와 같이 에러가 발생했다.

Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <tr> in <table>.

테이블 컴포넌트 코드는 다음과 같다.

<table className={styles.table}>
  <tr>
    <th>이름</th>
    <th>초대자</th>
    <th>수락 여부</th>
  </tr>
  {invitations.map(invitation => (
    <tr>
      <td>{invitation.dashboard}</td>
      <td>{invitation.inviter}</td>
      <td>{invitation.inviteAccepted ? "수락" : "거절"}</td>
    </tr>
  ))}
</table>

해결 방법

thead, tbody 를 추가해 주면 된다

<table className={styles.table}>
  <thead>
    <tr>
      <th>이름</th>
      <th>초대자</th>
      <th>수락 여부</th>
    </tr>
  </thead>
  <tbody>
    {invitations.map(invitation => (
      <tr>
        <td>{invitation.dashboard}</td>
        <td>{invitation.inviter}</td>
        <td>{invitation.inviteAccepted ? "수락" : "거절"}</td>
      </tr>
    ))}
  </tbody>
</table>

해결 과정과 에러 발생 이유

처음엔 에러 메세지를 대충 보고 table 태그를 잘못 썼나 했는데, 진짜로 잘못 썼었다. (테이블 헤더 태그가 tr + th 인지, th + td 인지 나만 항상 헷갈리는건가..?) 하지만 제대로 고쳤는데도 에러가 해결되지 않았다.
invitations 배열을 매핑하는 부분의 잘못인지, 아니면 테이블 자체의 문제인지 확인하기 위해 invitations 매핑하는 부분을 지우고 헤더 부분만 남겨놨는데도 똑같은 에러가 발생해서, 테이블 태그 자체의 문제임을 알아냈다.

그리고 나서 에러를 해결한 건 사실 우연이었다. 테이블 태그를 잘못 쓴게 아닐까 했을때, 무엇이 제대로된 코드인지 찾아보는 과정에서 thead와 tbody를 넣은 코드를 보았고, thead와 tbody태그를 사용하는게 의미론적으로도, 접근성 측면에서도 좋다는 것이 기억나서 코드에 추가했더니 갑자기 에러가 해결됐다.

그 후에 공식 문서를 통해 에러가 발생한 원인을 찾아보았는데, 서버에서 pre-render된 리액트 트리와 브라우저에서 처음 렌더링된 리액트 트리 간에 차이가 있어서 hydration에 실패한 것이었다.

hydration 이란?

서버에서 보내준 HTML 코드에 JS 코드가 매칭되는 과정

Next.js는 서버에서 pre-rendering 된 정적인 HTML 페이지를 클라이언트에 먼저 보내주고 나서, 번들링된 JS 코드(React 코드였던 것)를 전송한다.
여기서 JS 코드가 각각 알맞은 HTML 태그에 매칭되면서 비로소 상호작용이 가능한 웹페이지가 되는데, 이 과정이 마치 메마른 HTML 땅에 JS 물을 뿌려서 수분을 주는 듯 하여 Hydration 이라 부른다. 위에서 설명한 에러로 미루어 보았을 때, hydration은 프리렌더링된 HTML의 DOM 트리와 브라우저에서 JS로 처음 렌더링된 React 트리 간에 동기화가 이뤄지는 과정이라고도 할 수 있으며, 이것이 실패했을 때 hydration 에러가 발생한다고 볼 수 있다.

thead, tbody를 추가했을때 해결되는 이유

사실 브라우저는 코드에 작성하지 않았어도 thead, tbody를 자동으로 테이블에 추가해준다. 그렇기 때문에 브라우저의 첫 렌더링때는 thead, tbody가 존재하지만 기존에 받았던 HTML DOM에는 없어서 위와 같은 에러가 발생했던 것이다. 이는 Next.js 를 사용하지 않고 그냥 React로 테이블을 만들 때에도 문제가 된다. 리액트가 리렌더링을 진행할 때 브라우저가 자동으로 만든 태그와 리액트의 태그가 달라서 의도치 못한 동작을 할 수 있기 때문이다.

결론

table을 만들 땐 thead, tbody를 꼭 써주는 습관을 가지자!

앞서 말했듯, 실제 코드와 브라우저가 처리한 코드가 일관되지 않다는 문제가 있을 뿐 아니라, 다음과 같은 이유로도 웬만해선 써주는 것이 좋다.

개발자가 코드를 읽을때 명확히 구분됨 - 의미론적으로(semantic) 좋음
테이블의 각 구조에 다른 스타일을 적용하고자 할 때 개별 행, 열마다 속성을 부여하지 않아도 됨
접근성이 좋아짐 (시각장애인이 화면 낭독기로 표를 들을 때 쉽게 이해 가능)

아니 어차피 브라우저가 알아서 넣어주는데 그냥 HTML만 쓸때는 생략해도 되는거 아닌가?

아니다. 브라우저가 알아서 넣어주긴 하는데, 제대로 넣어주지는 않기 때문이다.

<!-- 실제 코드 -->
<table>
  <tr>
    <th>a</th>
    <th>b</th>
  </tr>
  <tr>
    <td>c</td>
    <td>d</td>
  </tr>
</table>

브라우저에 렌더링된 결과물

위 예시를 보면 th요소는 thead안에 들어있어야 하는게 맞지만, 실제 결과에선 전부 tbody안에 들어가있다. 이와 같이 브라우저가 제목과 데이터를 잘 구분하지 못하기 때문에 명확히 코드에 적어주는게 좋다.

<!-- 실제 코드 -->
 <table>
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>c</td>
      <td>d</td>
    </tr>
  </tbody>
</table>

편-안

giscus 라이브러리 Fetch Faild 이슈

CheeseB — Thu, 28 Dec 2023 15:00:00 GMT

무슨 이슈였나

게시글인 척 하는 에러메세지

이전 게시글 작성을 끝내고 나서 게시글을 확인하니, 난데없이 밑에 오류 발생:fetch failed 라는 문구가 생겼다. 마치 게시글의 일부인 것 마냥 자연스럽게 적혀있어서 ‘내가 저런걸 적었던가..?’ 하고 마크다운을 다시 확인했는데 당연히 저런게 있을리는 없었다.

뭔가 허전해서 잘 살펴보니 원래 저 자리에 있었던 댓글 라이브러리인 Giscus에서 오류가 발생한 것이었다.

원래는 이렇게 댓글창이 떠야 함 (출처: https://jojoldu.tistory.com/704)

처음엔 라이브러리가 업데이트 되었다거나 하는 이유로, 코드를 수정해서 다시 적용해야 하는건가 싶었지만 그런건 아니었다. 검색해봐도 딱히 나오는건 없어서 에러 메세지에 나온 대로 이슈 페이지에 들어가 보았더니 다행히도 Closed된 이슈 중에 동일한 문제에 대한 이슈가 있었다.

이슈에 올라온 개발자의 메세지는 다음과 같았다.

토큰을 캐시하는 데 사용하는 컴퓨팅 인스턴스가 어떤 이유로 오늘 아침 응답하지 않게 되었습니다. 새 서비스를 만들고 서비스 경로를 다시 지정했습니다. 이제 괜찮을 것입니다. 신고해 주셔서 감사합니다
- laymonage

그렇다.. 이건 나의 개발 실수도, 라이브러리 업데이트도 아닌 라이브러리 자체에 오류가 발생한 것이었다.
지금껏 개발을 하면서 이런 경우는 처음이었기에 라이브러리 자체에 문제가 있을 거라고는 생각도 못하고 있었다. 이 이슈를 보기 전까지는 말이다.

새로운 이슈를 올린 이유

Happened again..!

여기서 매우 반가웠던 점이, 내가 이 이슈를 읽기 8분 전에 동일한 이슈가 다시 발생했다고 댓글을 남긴 분이 있었다는 것이다.

캡처를 나중에 해서 2시간 전으로 나오지만, 이슈를 확인했을 당시엔 8분 전으로 떴었다

여기에 댓글이 달렸으니 개발자님이 고쳐주시겠지 하고 넘어가려 했으나, 문득 closed된 이슈에는 댓글을 달아도 메일이 오지 않았던 게 생각이 났다.
그래서 차라리 이 이슈를 멘션한 새로운 이슈를 남겨서 개발자 님에게 오류 발생 사실을 알려야겠다고 생각했다.

다행히 그냥 이전의 이슈를 멘션하고 ‘happened again’ 이라고만 해도 돼서 나의 보잘것 없는 영어실력이 발목을 잡는 일은 없었다.

그리고 이슈를 올린지 5분도 채 지나지 않아, 동일한 문제를 겪고 있는 분들이 댓글을 달아주었다.

이분들도 얼마나 답답했을까 ㅎㅎ..

개발자의 답변

얼마 지나지 않아, 개발자 님에게서 답변이 달렸다.
이렇게 답변이 빨리 달릴 거라곤 생각지 못했는데, 답변 내용은 더 생각지 못한 것이었다.

이 문제에 대해 인지하고 있지만, 지금 휴가 중이고 노트북이 없기 때문에 1월 2일까지는 문제를 해결하지 못할 것 같습니다.
- laymonage

어쩌다 giscus 개발자님의 휴가 소식을 알게 되었다.
역시 쉬는날 노트북 안가져가면 갑자기 장애 터지는건 전세계 개발자 공통인 것 같다.

출처: waterglasstoon - 데브 경수

아무튼 짧은 감사 인사를 남기고, 이후에 이어진 다른 개발자의 문의사항에 파파고의 힘을 빌려 답변을 남겨주고 마무리 했다.

참고로 저 분은 오늘 처음 라이브러리를 써봤는데 이 에러가 발생했다고 한다🥲

깨달은 점

1. 발생했던 이슈와 해결법은 잘 기록해놓자

만약 내가 오류 발견 후에 github issue 를 확인하지 않았더라면, 대체 무엇이 문제인가 하고 한참을 붙잡고 있었을 것이다. 누군가가 이전에 겪었던 이슈사항이 잘 기록되어 있었기에 동일한 이슈가 발생했을 때 빠르게 해결할 수 있었던 것이다.

꼭 깃허브 issue 를 활용하지 않더라도, 협업을 할 때든 혼자서 개발할 때든 이슈 기록은 잘 해두는게 좋다는 것을 깨달았다. 특히 협업을 할 땐 나의 기록으로 누군가의 삽질을 예방해줄 수 있다는 큰 효과가 있기에 더욱 기록을 잘 남겨둬야 한다. (그 누군가가 또다시 내가 될 확률도 매우 크다)

2. 에러를 띄울 땐 어느 정도의 성의는 보이자

솔직히 개발자님에게 좀 아쉬웠던게, 라이브러리 자체 에러가 발생했을 때 그걸 좀 더 명확하게 표시해 주셨으면 했던 점이다. 초반에 보여준 것처럼, 그저 ‘오류발생: fetch failed’ 라는 텍스트만 보이니까 블로그 개발자 입장에서도 이게 난데없이 어디서 나온 에러인지 한눈에 파악하기도 어렵고, 블로그를 읽는 사람들도 당황스러웠을 것이다.

라이브러리 오류의 또다른 피해자들..

향로님도 당하셨군요.. (출처: https://jojoldu.tistory.com/704)

giscus 공식 페이지도 똑같이 뜬다 (출처: https://giscus.app)

내가 만들어본 giscuss 에러창

아쉬운 마음에 피그마로 대강 giscuss 에러창을 만들어봤다.
내가 UI/UX에 대해 잘 알지는 못하지만, 적어도 에러 영역을 눈에 띄게 잡아주고 giscus 로고라도 띄워 주었으면 좀 낫지 않았을까 하는 개인적인 의견을 반영했다.

버전 1

뭔가 너무 404 에러페이지같아서 패스

버전 2

이것도 뭔가 이상한 것 같은데

그냥 개발이나 열심히 하자..

마치며

사실 개발자가 오픈소스에 issue를 남겼다는 게 이렇게 하나하나 적어둘 정도로 대단한 일도 아니고 어느정도 개발 좀 해본 사람이라면 매우 흔한 일이겠지만, 나에겐 이번이 처음이었고 생각보다 정말 신기하고 새로운 경험이어서 이렇게 블로그에 바로 글을 썼다.

비록 내가 영문으로 잘 정리된 이슈를 올린 것도 아니고, 딱히 그렇게 의미있는 대화를 나눈 것 같지도 않지만 이렇게 공개된 레포지토리에 이슈를 올리고 댓글로 전 세계의 개발자들과 소통을 해봤다는 것 자체로도 나에겐 너무 뜻깊은 경험이었다.

지금도 해당 이슈에는 새로운 댓글이 간혹 달리고 있다.
이들이 어떤 대화를 나누는지 한번씩 보는 것도 하나의 소소한 재미가 되었으며, 다시 한번 새삼스레 소통의 재미를 알게 되었다. (영어공부는 덤)

그럼 giscus 개발자님께서 무사히 휴가를 잘 보내고 오시길, 그리고 조속히 에러를 해결해 주시길 바라며 이만 마치도록 하겠다.

추가 글

2023.12.30

이 포스팅을 올리고, 자고 일어나니 댓글이 더 많이 쌓여있었다.
좋아요도 15개나 달려서 내 이슈로 누군가 도움을 받았다는 생각에 아침부터 매우 기분이 좋다.

그리고 새로 올라온 댓글 중 인상깊은 글 하나를 발견했다.

응답해주셔서 감사합니다. 서두르지 말고 즐거운 연휴 보내세요! 이 프로젝트는 내 사이트에 큰 도움이 되었기 때문에 스폰서 페이지에 작은 기부금을 넣었습니다. 이 글을 읽고 있는 누군가가 Giscus가 유용하다고 생각하고 약간의 잔돈이 있다면, 여러분도 그렇게 하시기를 바랍니다.
- yangdanny97

생각해보면, 모처럼 연말에 휴가를 갔는데 갑자기 장애 터졌다고 이슈 올라오면 얼마나 짜증나겠는가.. 나같으면 쉬고 있어도 마음 한구석이 불편했을 것이다. 개인 블로그에 댓글 안나오는게 뭐 급한일도 아닌데 얼른 휴가에서 돌아와서 고쳐주었으면 하는 생각만 가지고 있던 나 스스로 반성을 좀 하게 되었다.

사실 잘 사용하고 있던 서비스에 갑자기 장애가 터지면 많은 사람들도 나처럼 불만을 내뱉을 것이다. 그래도 저 댓글처럼 고생한 개발자에게 따뜻한 말 한마디와 지금까지 잘 사용해왔던 것에 대한 소소한 감사를 표한다면 더 좋은 개발 문화가 되지 않을까 하는 F적인 생각을 잠깐 하게 되었다.😅

2023.12.31

same here좀 그만올려..

요즘 밤만 되면 저 이슈에 달린 댓글 때문에 메일이 서너통씩 온다. 그런데 내용을 보면 다 ‘same here’ 라고만 적혀있다. 이미 위에서 개발자가 문제를 인지하고 있고 1월 2일 이후에 버그를 고치겠다고 말을 했는데도 말이다.

이것으로 깨달은게 하나 더 있다. 깃허브 이슈나 스택 오버플로우처럼 커뮤니티 형식으로 된 페이지에서 기술적인 해결방안을 찾을 땐, 중간에 이미 결론이 나와있지는 않은지 잘 찾아볼 것.😅

자바스크립트의 slice, splice와 substring

CheeseB — Sun, 05 Nov 2023 15:00:00 GMT

이번 글에서는 자바스크립트에서 배열의 일부를 추출 혹은 삭제하는 slice와 splice, 그리고 문자열의 부분 문자열을 추출하는 substring에 대해 헷갈리는 부분들 위주로만 간략하게 정리하려 한다.

배열 - slice / splice

slice

원본 배열은 보존하고, 추출한 요소를 새로운 배열에 반환함
*문자열에도 slice 메서드가 존재함 (배열의 slice와 동일하게 작동)

arr.slice(startIndex [, endIndex])

startIndex 부터 (endIndex - 1) 까지 추출

startIndex
- 음수 -> 배열 끝에서부터 셈 (배열 길이를 넘어가는 음수는 0으로 세팅됨)
- 배열 길이보다 큰 수 -> 빈 배열 반환
endIndex
- 생략 or 배열 길이보다 큰 수 -> 배열 끝까지 추출
- 음수 -> 배열 끝에서부터 셈
- startIndex보다 작거나 같은 수 -> 빈 배열 반환

splice

원본 배열 자체를 수정함. 반환값은 제거한 요소를 담은 배열 (없으면 빈 배열)

array.splice(startIndex [, deleteCount [, item1 [, item2 [, ...]]]])

startIndex 부터 deleteCount 개 만큼 삭제한 후, startIndex 에 item 들을 추가

startIndex
- 음수 -> 배열 끝에서부터 셈 (배열 길이를 넘어가는 음수는 0으로 세팅됨)
- 배열 길이보다 큰 수 -> 삭제는 하지 않음. 추가할 아이템은 배열 마지막에 추가함
deleteCount
- 생략 or (배열 길이 - startIndex) 보다 큰 수 -> start부터 끝까지 삭제
- 음수 or 0 -> 삭제하지 않음

문자열 - substring

문자열을 추출한 결과를 새로운 문자열로 반환

str.substring(startIndex [, endIndex])

startIndex 부터 (endIndex - 1) 까지 추출

startIndex
- 음수 -> 0으로 세팅
- 문자열 길이보다 큰 수 -> 빈 문자열 반환
endIndex
- 생략 or 문자열 길이보다 큰 수 -> 문자열 끝까지 추출
- startIndex보다 작은 수 -> endIndex부터 (startIndex - 1) 까지 추출
  - 여기서 endIndex가 음수라면 0으로 세팅
  - startIndex와 같다면 빈 문자열 반환

참고사항

slice/splice/substring 모두 파라미터 없이 사용한다면, 원본 배열이나 문자열을 그대로 유지한다. ~~(근데 그럴거면 뭐하러 씀)~~
문자열 추출 메서드 중, 마치 splice처럼 일정 길이만큼 자르는 substr도 있지만 현재는 deprecated 되어서 따로 정리하지 않았다.

참고 사이트

[소소한 개발팁] git add . VS git add *

CheeseB — Tue, 31 Oct 2023 15:00:00 GMT

git add . 과 git add * 명령어의 차이

두 명령어 모두 현재 디렉토리 안의 모든 파일을 add 시키지만,
.gitignore 를 반영하느냐 안하느냐의 차이가 있다.

git add * : gitignore에 명시된 파일까지 전부 add시킴
git add . : gitignore에 명시된 파일은 제외하고 add시킴

결론: git add . 을 쓰자

난 지금껏 github desktop을 주로 사용했고, 명령어를 쓰더라도 alias로만 계속 써왔어서 두개의 차이를 모르고있었다.. (이제보니 git add . 명령어를 alias로 등록해놨어서 지금까지 문제가 없었던 것 같다)
가끔 명령어를 입력할 땐 아무 생각없이 git add * 을 사용했었는데, 웬만해선 git add . 으로 사용하는 것이 좋을것 같다.

+ 추가

사실 git add * 을 쓴다고 해서 깃이 무지성으로 다 add시키지는 않고, 정말 ignore된 파일까지 다 넣을거면 -f 옵션을 사용하라고 안내해 준다.

어쩐지 이 글을 쓰면서도 ‘여태 git add * 을 써도 ignore된 파일이 올라간적은 없었는데..?’ 라는 생각이 들었는데, 똑똑한 깃이 지금껏 실수를 방지해주고 있었던 것이다. 매번 add 할때마다 노란색으로 뭐라고 하던걸 그냥 지나치지 말았어야했다..

[CSS] CSS의 Cascading 규칙

CheeseB — Sat, 21 Oct 2023 15:00:00 GMT

캐스케이딩 (Cascading) 이란?

하나의 요소에 여러 CSS선언이 영향을 줄 때, 충돌을 방지하기 위한 CSS 적용 우선순위

css를 작성할 수 있는 곳이 다양하고, 부모 태그로부터의 스타일 상속 등 여러가지 이유로 하나의 html 태그에 여러개의 css 요소가 영향을 주는 상황이 빈번하게 일어난다. 캐스케이딩이란 이런 상황에서 어떤 스타일을 적용받을 지에 대한 우선순위 규칙이다.

cascading 이란 단어 자체는 ‘위에서 아래로 떨어지는’ 이라는 뜻인데 CSS의 약자는 ‘Cascading Style Sheet’로, 위에서부터 아래로 적용되는 스타일시트란 의미이다. CSS라는 이름 자체가 Cascading으로 시작하는 만큼, CSS에서 cascading 규칙은 매우 중요하다 볼 수 있다.

캐스케이딩 규칙

캐스케이딩은 다음 세가지 요소로 우선순위를 결정한다.

중요도 : CSS가 어디에 선언 되었는지
명시도 : 대상을 명확하게 특정했는지
선언순서 : 나중에 선언된 스타일을 우선 적용

중요도

스타일이 선언된 위치에 따라 우선순위가 결정된다.

<head> 안의 style 요소
<head> 안의 style 요소 내의 @import 문
<link> 로 연결된 CSS 파일
<link> 로 연결된 CSS 파일 내의 @import 문
브라우저 디폴트 스타일시트

<head>
	<link rel="stylesheet" type="text/css" href="linked.css">
  <style>
		@import url('imported.css'); /* 2 */
    p {
      color: red; /* 1 */
    }
  </style>
</head>

/* linked.css */

@import url('imported.css'); /* 4 */
p {
  color: green; /* 3 */
}

명시도

대상을 명확하게 특정할수록 우선순위가 높아진다. 선택자의 의미가 정확해질수록, 즉 스타일이 적용되는 범위가 좁을수록 우선순위가 높다.

!important
인라인 스타일
id 선택자
class, 속성, 가상 선택자
태그 선택자
전체 선택자 (*)
상위 요소에 의해 상속된 속성

<head>
	<style>
		* {
			color: blue; /* 6 */
		}

		p {
			color: red; /* 5 */
		}

		.green {
			color: green; /* 4 */
			font-size: 16px !important; /* 1 */
		}

		#black {
			color: black; /* 3 */
		}
	</style>
</head>
<body>
	<p id="black" class="green" style="color: purple; font-size: 14px;">...</p> <!-- 2 -->
</body>

선언 순서

나중에 선언된 스타일 (더 밑에 작성된 스타일) 이 우선순위가 높다.

p {
	color: blue; /* 2 */
}

p {
	color: red; /* 1 */
}

참고 자료

[CSS] Position 속성의 종류 및 특징

CheeseB — Sat, 21 Oct 2023 15:00:00 GMT

CSS의 Position 종류

position 속성은 문서 상에 요소를 배치하는 방법을 지정하며, 종류는 아래와 같다.

static (default)
relative
absolute
fixed
sticky

static

배치 기준: 원래 있어야 할 위치
위치 조정 (top, right, bottom, left): 적용 불가

기본으로 설정되는 값이며, HTML에 작성된 순서 그대로 원래 있어야 하는 위치에 배치된다.
top, right, bottom, left 속성 뿐 아니라 z-index 속성도 아무 영향을 주지 못한다.

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  /* position: static; */
  top: 20px;
  left: 20px;
  background: blue;
}

출처: https://developer.mozilla.org/ko/docs/Web/CSS/position

relative

배치 기준: 원래 있어야 할 위치
위치 조정 (top, right, bottom, left): 적용 가능

static처럼 원래 있어야 할 위치를 기준으로 배치가 되지만, 그 상태에서 위치를 조정할 수 있다.
위치가 조정되어도 원래 있었던 곳의 공간은 그대로 차지한다.

#two {
  position: relative;
  top: 20p
  left: 20px;
  background: blue;
}

출처: https://developer.mozilla.org/ko/docs/Web/CSS/position

absolute

배치 기준: 상위 요소 중 static이 아닌 요소 or 최상위 요소
위치 조정 (top, right, bottom, left): 적용 가능

상위 요소들 중 static 속성이 아닌 가장 가까운 요소를 기준으로 배치된다. static 속성이 아닌 요소가 존재하지 않는다면 최상위 요소인 <body>를 기준으로 배치된다.

기존 배치에서 아예 빠져버리기 때문에 (기존 공간도 차지하지 않음), 너비를 따로 지정해두지 않으면 기본적으로 내부 콘텐츠만큼의 너비를 가진다. 그래서 내부 요소도 없고 너비 지정도 되어있지 않으면 화면에 보이지 않으므로 따로 너비 지정을 해주거나 left, right 속성을 둘다 지정해주면 그 사이 간격만큼 너비가 생긴다.

static이 아닌 상위 요소가 존재할 때

<div class="box" id="one">One</div>
<div class="container">
  <div class="box" id="two">Two</div>
  <div class="box" id="three">Three</div>
</div>
<div class="box" id="four">Four</div>

.container {
  display: inline-block;
  position: relative;
}

#two {
  position: absolute;
  top: 20px;
  left: 20px;
  background: blue;
}

출처: https://developer.mozilla.org/ko/docs/Web/CSS/position

static이 아닌 상위 요소가 존재하지 않을 때

<body>
	<div class="box" id="one">One</div>
	<div class="box" id="two">Two</div>
	<div class="box" id="three">Three</div>
	<div class="box" id="four">Four</div>
</body>

#two {
  position: absolute;
  top: 20px;
  left: 20px;
  background: blue;
}

출처: https://developer.mozilla.org/ko/docs/Web/CSS/position

fixed

배치 기준: 뷰포트 (브라우저 전체화면)
위치 조정 (top, right, bottom, left): 적용 가능

요소를 화면의 특정 부분에 고정시키고 싶을 때 사용한다. 사용자에게 보이는 화면을 기준으로 배치되기 때문에, 스크롤해도 밀려나지 않는다.

absolute와 동일하게 기존 배치에서 아예 빠져서(기존 공간도 차지 X) 내부 콘텐츠만큼의 너비만 가지므로, 따로 width를 지정하거나 left, right 속성을 둘다 지정해주어야 너비가 생긴다.

div {
	position: fixed;
	width: 100px;
	height: 30px;
	padding: 2px 6px;
	background-color: #ff8982;
	bottom: 20px;
	right: 20px;
	font-size: 12px
}

이 페이지의 오른쪽 하단에 계속 붙어있는 친구가 위 예시 코드의 결과입니다.

fixed 예시입니당

sticky

배치 기준: 원래 있어야 할 위치
위치 조정 (top, right, bottom, left): 필수 적용

부모 요소가 스크롤될 때, 자식 요소가 스크롤에 밀려나지 않도록 하기 위해 사용한다.
초기에는 static처럼 일반적인 문서 흐름대로 위치하고 공간도 그대로 차지하고 있다가, 스크롤이 지정된 위치(top, right, bottom, left로 지정해둔 위치)에 도달하면 그 자리에 fixed처럼 고정된다.
다만 브라우저를 기준으로 고정되는 fixed와 달리, sticky 요소는 부모 요소의 내부에서만 고정되므로, 부모 요소 자체가 스크롤에 밀려나면 그 안의 sticky 또한 밀려나게 된다.

sticky 요소에서의 top, right, bottom, left 속성은 처음부터 적용되는 것이 아닌, 스크롤 시 고정될 위치를 지정해준다. top과 bottom은 아래로 스크롤했을 때, right와 left는 좌우로 스크롤했을 때 동작한다.

<div class="wrapper">
	<div class="container">
		<div class="static"></div>   
		<div class="sticky">sticky</div>     
	</div>
</div>

.wrapper {
	width: 200px;
	height: 200px;
	border: 2px solid;
	overflow: auto;
}

.container {
	width: 400px;
	height: 400px;
}

.static {
	display: inline-block;
	width: 60px; height: 100px;
	background-color: skyblue
}

/* sticky 에 top 20, left 20 적용 */

.sticky {
	position: sticky;
	top: 20px;
	left: 20px;
	display: inline-block;
	padding: 6px;
	background: #ff8982;
}

sticky

sticky 속성은 페이지 최상단 헤더 부분에 사용하기 적합하다.
고정시킬수 있다는 점에서 fixed 속성을 사용해도 되지만, fixed는 공간을 벗어나기 때문에 따로 본문에 헤더 크기만큼 margin값을 주어야 하므로, 헤더 크기만큼 공간도 알아서 차지하는 sticky가 가장 좋다.

inset 속성

top, right, bottom, left 순서대로 위치를 지정하는 축약식 속성

inset은 top, right, bottom, left 속성을 한번에 지정할 수 있도록 하는 속성이다.
margin, padding과 마찬가지로 상우하좌, 상하/좌우, 상/좌우/하, 상/우/하/좌 네가지 방법으로 정의가 가능하다.

{
	position: absolute;

	inset: 10px; /* all edges */
	inset: 4px 8px; /* top,bottom left,right */
	inset: 5px 15px 10px; /* top left,right bottom */
	inset: 2.4em 3em 3em 3em; /* top right bottom left */
}

absolute 속성에서 left, right 속성을 둘 다 지정하면 그 사이 간격만큼 너비가 생기는데 (top, bottom 사이에도 동일하게 높이가 생김), 이걸 이용해서 자식 요소가 부모에 꽉 차게 덮어버리도록 하고 싶으면 top, right, bottom, left를 모두 0으로 주면 되며, 이것을 간단하게 inset: 0; 으로 해결 가능하다.

출처: https://developer.mozilla.org/ko/docs/Web/CSS/position

만약 꽉 차게 하는것이 아닌, 조금 여백을 두고 가운데에 위치하도록 하고 싶으면 inset: 10px처럼 간격을 주면 된다.

출처: https://developer.mozilla.org/ko/docs/Web/CSS/position

참고 자료

[Typescript] Record 타입 사용하기 (feat. Mapped Type)

CheeseB — Thu, 03 Aug 2023 15:00:00 GMT

타입스크립트의 Record 란?

Record<Key, Value>
키가 Key타입이고 값이 Value 타입인 객체 타입을 생성함

타입스크립트의 유틸리티 타입 중 하나로, 인덱스 시그니처와 유사한 기능을 한다.

type Score = {
	[name: string]: number;
}

// Score와 동일한 역할
type ScoreRecord = Record<string, number>;


let scores: ScoreRecord = {
  '치즈볼': 100,
	'초코볼': 200,
};

Record가 인덱스 시그니처와 다른 점은, Key로 문자열 리터럴을 사용할 수 있다는 것이다.

// 인덱스 시그니처는 key 타입으로 문자열 리터럴 사용 불가
type Score = {
	[name: '치즈볼' | '초코볼']: number;
}

이는 Record 타입을 사용하면 되지만, 맵드 타입을 사용해서도 해결 가능하다.

type Names = '치즈볼' | '초코볼'

// 맵드 타입
type Score = {
	[name in Names]: number;
}

// Record 사용
type ScoreRecord = Record<Names, number>;


let scores: ScoreRecord = {
  '치즈볼': 100,
	'초코볼': 200,
};

Record 타입 적용기

나는 타입스크립트로 프론트 개발을 하면서, 한 인터페이스의 키가 다른 타입에도 활용되는 경우가 매우 많았기 때문에 맵드 타입을 자주 썼다.

interface CountType {
	views: number;
	likes: number;
	shares: number;
	comments: number;
}

interface ChartType {
	axis: string;
	value: string;
	color: string;
}

const chartData: {
	[K in keyof CountType]: ChartType[]
} = {
  views: [...],
  likes: [...],
  shares: [...],
  comments: [...],
};

매번 위와 같이 사용하다가, chartData 에 해당하는 타입을 따로 정의하고 싶어서 맵드타입을 interface로 분리하려 했으나 맵드 타입을 사용해서만 인터페이스를 정의하는건 불가능했다.

interface ChartDataType {
	[K in keyof CountType]: ChartType[];
}

아래와 같이 인터페이스 안에 속성을 따로 지정해서 맵드 타입을 쓰는 것은 가능하다. 하지만 타입 적용 시 그 내부 속성으로 접근해야 한다는 단점이 있다.

interface ChartDataType {
	data: {
		[K in keyof CountType]: ChartType[];
	}
}

// 객체를 data속성으로 따로 감싸주거나
const chartData: ChartDataType = {
  data: {
		views: [],
		likes: [],
		shares: [],
		comments: []
	}
};

// 타입 적용 시 ['data']로 접근해야 함
const chartData2: ChartDataType['data'] = {
  views: [],
  likes: [],
  shares: [],
  comments: [],
};

아래와 같이 type 키워드로 정의해두면 간단히 해결되지만, 한 프로젝트 내에서는 type과 interface 중에 하나로 통일해서 사용하는것이 좋다고 했고 우리 팀은 이미 interface를 사용중이었기 때문에 type 키워드를 쓰고 싶지는 않았다.

type ChartDataType = {
	[K in keyof CountType]: ChartType[];
}

그렇게 해서 찾아낸 타입이 Record 타입이다.

// 이전 코드
const chartData: {
	[K in keyof CountType]: ChartType[]
} = {
  views: [...],
  likes: [...],
  shares: [...],
  comments: [...],
};

// Record 사용
const chartData: Record<keyof CountType, ChartType[]> = {
  views: [...],
  likes: [...],
  shares: [...],
  comments: [...],
};

타입 정보를 따로 정의한 것은 아니지만, 타입 분리를 하려 했던 취지가 코드를 더 깔끔하게 만들기 위함이었어서, Record 타입을 써서 이전보다 코드가 깔끔해 진 것에 만족하였다.

Record 타입도 type 키워드를 쓰면 따로 정의가 가능하다.

type ChartDataType = Record<keyof CountType, ChartType[]>;

const chartData: ChartDataType = {
  views: [],
  likes: [],
  shares: [],
  comments: [],
};

여기서 맵드 타입을 사용하는 것과 Record 타입을 사용하는 것에 한가지 차이점이 있다면, 맵드타입은 각 키가 선택적 속성인지 여부를 포함하는 반면, Record는 포함하지 않는다는 것이다.

interface CountType {
	views?: number;
	likes?: number;
	shares?: number;
	comments?: number;
}

const chartDataMapped: {
	[K in keyof CountType]: ChartType[]
} = {
  views: [],
  likes: [],
  shares: [],
  comments: [],
};

const chartDataRecord: Record<keyof CountType, ChartType[]> = {
  views: [],
  likes: [],
  shares: [],
  comments: [],
};

const target1 = chartDataMapped.views.find((chartData) => (...)); // error - 'chartDataByType.views' is possibly 'undefined'
const target2 = chartDataRecord.views.find((chartData) => (...)); // ok

위 예시에서, chartDataMapped는 맵드 타입을 적용해서 CountType의 각 키의 옵셔널 ? 정보가 포함되어, 접근시 possibly 'undefined' 에러가 뜨지만 chartDataRecord는 Record 타입을 적용해서 옵셔널 정보가 포함되지 않고 다 존재하는 키로 간주되어 에러를 표시하지 않는다.

마치며

이번 시간에는 유틸리티 타입 중 하나인 Record 타입에 대해서 다뤄 보았는데, 이전에 한 번 다룬적 있는 Omit 타입을 비롯한 타입스크립트의 유틸리티 타입들은 알아두면 매우 유용하게 쓸 수 있을 것 같다.

타입스크립트 공식 문서 - 유틸리티 타입들

그리고 이번 포스팅에서 이야기한 것 처럼, 프로젝트 시작 전 팀원들과 상의한 끝에 타입 정의를 interface로 통일하기로 했지만 개발을 진행할수록 아직까지는 개인적으로 type이 더 쓰기 좋은 것 같다고 느꼈다. interface는 객체 타입을 선언할 때만 사용 가능하지만, 객체 타입 뿐 아니라 리터럴 타입과 유니온 타입 등 여러 타입을 정의해야 할 필요도 많았기 때문이다. 또한 type 키워드로 유틸리티 타입과 맵드 타입을 따로 정의하는 것도 가능하다. 물론 다른 포스팅을 찾아보았을 때, 대부분 interface를 쓰는 것이 더 좋다는 의견이었다. interface는 선언 병합(동일한 이름으로 여러번 선언하면 합쳐지는 것)이 가능하기 때문에 확장성을 고려해서 interface를 쓴다는 분이 많았지만, 아직까지 나의 경우에는 선언 병합을 사용할 일이 없었기 때문에 필요성이 와닿지는 않았다.

아마 type을 쓰느냐 interface를 쓰느냐는 앞으로도 더 찾아보고 고민해봐야 할 문제인 것 같다. 지금까지는 클래스를 쓸 일이 없었지만, 클래스를 사용하게 된다면 interface가 더 유용하기 쓰이지 않을까 싶다.

참고 링크

DevStory - [TypeScript]Record Type 사용 방법

[BOJ] 9465. 스티커 - 자바스크립트

CheeseB — Wed, 02 Aug 2023 15:00:00 GMT

문제

https://www.acmicpc.net/problem/9465

접근 방법

하나의 스티커를 선택했을 때, 그 다음 스티커를 고를 수 있는 방법은 두 가지로 정해진다.

대각선으로 한칸 옆
대각선으로 두칸 옆

세칸, 네칸 이상으로 더 옆의 스티커를 선택할 수도 있으나, 그러한 경우는 그 사이에 있는 스티커를 더 선택할 수 있으므로 고려하지 않는다.

나도 여기까지는 생각은 했으나.. 스티커를 선택할 수 있는 경우의 수를 DFS로 모두 돌면서 최대 점수를 계산했기 때문에 시간 초과가 날 수 밖에 없었다.

DFS (시간초과)

let result = '';

while (testCases) {
  let answer = 0;

  const dfs = (rowIdx, depth, score) => {
    if (depth >= length) {
      answer = Math.max(answer, score);
      return;
    }

    if (rowIdx === 0) {
      dfs(1, depth + 1, score + stickers[rowIdx][depth]);
      dfs(1, depth + 2, score + stickers[rowIdx][depth]);
    } else {
      dfs(0, depth + 1, score + stickers[rowIdx][depth]);
      dfs(0, depth + 2, score + stickers[rowIdx][depth]);
    }
  };

  for (let i = 0; i <= 1; i++) {
    dfs(i, 0, 0);
  }

  result += `${answer}\n`;
}

console.log(result);

DP

이 문제는 DP를 활용해서 풀어야 하는 문제였으며, 아주 간단하게 풀 수 있었다.

이전 DFS 풀이에서는 현재 선택한 스티커를 기준으로 다음에 선택할수 있는 스티커의 경우를 계속해서 탐색하여 최대 점수를 계산하는 방식이었지만,
DP를 활용한 풀이는 현재 스티커를 기준으로 이전에 선택 가능했던 스티커들의 최대 점수를 계산하는 방식이다.

여기서 DP[i][j]은 세로 i, 가로 (j + 1) 번째 스티커를 선택했을 때 까지의 점수의 최대값을 나타낸다.
먼저 DP[i][0] 은 모두 0으로 채우고, DP[i][1] 은 첫번째 스티커만 고려하면 되므로 sticker[i][0] 값을 채워준다.

그 다음 DP[i][2] 부터는, 대각선으로 두 칸 전의 dp값과 한 칸 전의 dp 값 중 더 큰 것에 현재 sticker 를 더한 값을 넣는다.

이런 식으로 DP 배열의 끝까지 채우고 나서, DP 배열의 마지막 줄의 위 아래 값중 더 큰 값을 리턴하면 그것이 전체 스티커에서 최대로 얻을수 있는 점수가 된다.

javascript 코드로 풀면 다음과 같다.

let result = '';

while (testCases) {
  const dp = [
    [0, stickers[0][0]],
    [0, stickers[1][0]],
  ];
  for (let i = 2; i <= length; i++) {
    dp[0][i] = Math.max(dp[1][i - 1], dp[1][i - 2]) + stickers[0][i - 1];
    dp[1][i] = Math.max(dp[0][i - 1], dp[0][i - 2]) + stickers[1][i - 1];
  }

  result += `${Math.max(dp[0][length], dp[1][length])}\n`;
}

console.log(result);

DP 문제는 항상 풀 때마다 해답을 생각하는건 어려운데 막상 코드는 너무 간단해서 좀 허무한 느낌이 든다..

코딩테스트 문제풀기 팁

CheeseB — Tue, 01 Aug 2023 15:00:00 GMT

문제 유형별 풀이방식

주어진 입력이 정렬된 배열 또는 리스트인 경우

‘N’개의 요소들 중에서 상위/최대/최소 ‘K’ 번째 요소를 찾을 때

Heap

배열에 관련된 문제일 경우

시간 복잡도 O(n), 공간 복잡도 O(n)
- HashMap
- Set
시간 복잡도 O(nlogn), 공간 복잡도 O(1)
- 정렬

모든 조합(또는 순열)을 시도해야 할 경우

Backtracking
BFS

문제가 최적화(최대화 또는 최소화)를 요구하는 경우

문제가 리스트와 관련 있고, 추가적인 공간을 사용할 수 없는 경우

Fast & Slow Pointer 접근 방식

트리 또는 그래프 문제

문자열 집합에서 공통부분 문자열을 찾아야 하는 경우

HashMap
Trie

문자열의 검색/조작

Trie

기타

모든 재귀 해결법은 Stack을 이용한 방법으로 전환할 수 있음

Javascript - 논리 연산자와 nullish 병합 연산자 "??"

CheeseB — Mon, 24 Jul 2023 15:00:00 GMT

자바스크립트의 AND, OR 연산

자바스크립트의 AND(&&), OR(||) 연산은 피연산자의 값을 그대로 출력하며, 왼쪽 피연산자만으로 연산 결과를 반환할 수 있다면 오른쪽 피연산자는 실행하지 않는다.

A && B: A가 거짓이라면 B는 실행하지 않고 바로 A를 반환한다.
A || B: A가 참이라면 B는 실행하지 않고 바로 A를 반환한다.

위의 특성을 활용해서, 자바스크립트 개발 시 쉽게 조건부 처리가 가능하다.

예를 들어, && 연산자는 리액트에서 컴포넌트를 선택적으로 렌더링 할 때 많이 쓰인다.

{isVisible && (
	<div> Visible component! </div>
)}

그리고 || 연산자는 값이 존재하지 않을 때 대체 값을 넣어주는 용도로 많이 쓴다.

function print(word) {
	const msg = word || 'Hi';
	console.log(msg);
}

나도 지금까지 타입스크립트를 사용하면서, undefined일 수 있는 값에 || 연산자를 사용해서 빈값 처리를 했다.

<Column>
	<HeaderCell>header</HeaderCell>
	<Cell>{rowData[key] || '-'}</Cell>
</Column>

하지만 이런 식으로 값을 대체할 때 생기는 문제점이 있다.
바로, 변수값이 0이거나 빈 문자열일 때 등등 논리적으로 false로 취급되는 값들도 대체된다는 것이다.

나의 경우에는 위의 예시처럼 테이블에 넣을 값이 존재하지 않을때만 - 기호를 출력하려 했으나,
값이 0일 때는 0을 출력해야 하는데 이것마저 - 기호로 대체되는 문제를 겪었다.

이를 방지하기 위해서, 값의 존재 유무만 따질 때는 ?? 연산자를 사용하는 것이 좋다.

nullish 병합 연산자 (??)

x = a ?? b 와 같이 사용하며, 이는 다음과 동일한 동작을 한다.

x = (a !== null && a !== undefined) ? a : b;

이전에 설명했던 테이블 예시는 아래와 같이 고칠수 있다.

<Column>
	<HeaderCell>header</HeaderCell>
	<Cell>{rowData[key] ?? '-'}</Cell>
</Column>

이 연산자는 AND, OR 연산자와 마찬가지로 함수에도 사용 가능하며, 연속으로도 사용 가능하다.

const count = getCount();

printCount(count ?? '-');

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛

주의할 점은, ?? 연산자는 && 나 || 연산자와 함께 사용할 수 없다는 것이다.
함께 사용하고자 한다면 반드시 괄호() 로 구분해 주어야 한다.

참고 자료

모던 JavaScript 튜토리얼 - nullish 병합 연산자 ’??’

[타입스크립트] 인터페이스 속성 재정의하기 - Omit

CheeseB — Sun, 23 Jul 2023 15:00:00 GMT

인터페이스 속성 재정의

타입스크립트 개발 도중, 이미 존재하는 인터페이스를 상속받고 몇몇 속성의 타입만 재정의(override) 하고싶은 상황이 생겼다.

interface DataList {
	phase: number;
	name: string;
	follower: number;
	url: string;
	view: number;
	like: number;
	comments: number;
	share: number;
}

interface ParsedDataList {
	phase: string;
	name: string;
	follower: string;
	url: string;
	view: number;
	like: number;
	comments: number;
	share: number;
}

여기서 ParsedDataList 는 DataList 와 다음 두가지 속성의 타입을 제외하고는 모두 동일하다.

phase: number -> string
follower: number -> string

ParsedDataList 인터페이스가 DataList 를 상속받게 한 다음, phase와 follower 속성만 따로 재정의하려고 했으나, 타입 에러가 발생했다.

interface ParsedDataList extends DataList {
	phase: string;
	follower: string;
}

위와 같은 방식으로 속성을 재정의 하려면, 아예 다른 타입으로 매핑할 수는 없고 더 구체적인 하위 집합으로 좁히는 것만 가능하다.

interface NullableExample {
  name: string | null;
}

interface NonNullableExample extends NullableExample {
  name: string;
}

아예 다른 타입으로 변경하려면 다음과 같이 유틸리티 타입중 하나인 Omit 을 사용해서, 변경할 속성만 제거한 인터페이스를 상속받고 재정의 해야한다.

interface ParsedDataList extends Omit<DataList, 'phase' | 'follower'> {
	phase: string;
	follower: number;
}

Omit

기존 타입에서 특정 속성만 제거한 타입을 정의한다. (Pick의 반대)

interface Product {
  id: number;
  name: string;
  price: number;
  brand: string;
  stock: number;
}

type shoppingItem = Omit<Product, "stock">;

const apple: Omit<Product, "stock"> = {
  id: 1,
  name: "red apple",
  price: 1000,
  brand: "del"
};

여러 타입을 제거하고 싶을 땐 유니온 타입 | 을 사용한다.

const apple: Omit<Product, "stock" | "brand"> = {
  id: 1,
  name: "red apple",
  price: 1000,
};

참고 사이트

[소소한 개발팁] Typescript의 is 키워드

CheeseB — Thu, 20 Jul 2023 15:00:00 GMT

문제 상황

number | string 타입의 값을 가지는 countObject 객체의 값들 중에서, number 타입인 값들만 더하는 코드를 작성하던 중 다음과 같은 타입 오류가 발생했다.

const sum = Object.values(countObject)
	.filter((value) => typeof value === 'number')
  .reduce((acc, cur) => acc + cur, 0);
									//	  ~~~~~~~~~ Operator '+' cannot be applied to types
									//   'string | number' and 'number'

reduce 메서드를 사용하기 전에 이미 filter 메서드로 number 타입의 값들만 걸러냈기 때문에 reduce의 acc과 cur변수에는 무조건 number 타입의 값만 존재할텐데, 여전히 타입스크립트가 두 변수를 string일 수도 있다고 판단하는 것이 이해가 되지 않았다.

이러한 현상이 발생한 이유는 filter가 런타임에만 실행되는 메서드이기 때문에, 컴파일 타임에는 이 메서드가 숫자만 반환한다는 것을 알 수 없기 때문이다. 그러므로 filter를 거친 이후에도 filter를 거치기 전의 모든 타입을 유지하는 것이다.

이를 해결하기 위해 타입스크립트의 타입 가드 문법인 ‘is’ 키워드를 사용할 수 있다.

해결 방법

sumOfCountsByPlatform[countByPlatform.platform] = Object.values(countByPlatform)
	.filter((value): value is number => typeof value === 'number')
	.reduce((acc, cur) => acc + cur, 0);

여기서 (value): value is number 부분이 바로 is 키워드를 사용한 부분이며,
filter의 콜백함수가 반환하는 값(value) 이 number 라고 명시해 줌으로써 reduce에 들어가는 값이 오직 number 타입이란 것을 타입스크립트가 알게 했다.

is 키워드

특정 함수의 리턴 타입에 is 키워드를 사용하면, 해당 함수를 거쳐서 나온 return 값이 true 일 때 변수의 타입을 좁힐수 있다.

function isString(test: any): test is string{
    return typeof test === "string";
}

function example(foo: any){
    if(isString(foo)){
        console.log(foo.length); // string
    }
}

example("hello world");

위 예시를 살펴봤을 때, isString 의 리턴 타입에 test is string 이라고 명시해 두었기 때문에 isString 함수를 호출한 범위 내에서 test 타입을 string으로 좁힐수 있는 것이다.

is 연산자 생략

is 연산자 사용

as 키워드와 다른 점

타입을 좁혀준다는 점에서 as 키워드와 is 키워드는 비슷해 보이지만
as 키워드는 ‘이 변수는 이런 타입이야!’ 라고 하나의 변수에 대해 타입을 단언하는 것이라면,
is 키워드는 ‘이 함수의 매개변수에 대해 필터링을 거쳤으니 이 타입밖에 나올수 없어!’ 라고 알려주는 느낌이다.

참고 사이트

KwakKwakKwak.log - [타입스크립트] ‘is’, ‘as’ 문법 정리

Javascript - 함수의 This와 bind/call/apply

CheeseB — Mon, 10 Jul 2023 15:00:00 GMT

함수의 This

자바스크립트에서 함수 내부의 this 값은 함수를 호출한 방법에 의해 좌우된다.

객체 내부, 메서드 호출, 생성자 new 호출, 명시적 bind 등등 여러 상황이 있지만
이런 상황이 아닐 때 기본적으로 this 는 브라우저에선 window 객체를, 노드에서는 빈 객체를 가리킨다.

function showThis() {
	console.log(this);
}

여기서 함수가 window 가 아닌 다른 객체를 this로 참조하도록 하고 싶을 때, bind/call/apply 함수를 사용할 수 있다.

call / apply

함수의 this를 대체해서 호출하는 메서드

call과 apply 는 둘 다 함수를 호출하는 메서드이며, 첫번째 인자에 this로 세팅할 객체를 넘겨준다.

두 함수의 유일한 차이점은 함수의 매개변수를 전달하는 방식이다.

call: 매개변수를 단일 인자로 넘겨줌
apply: 매개변수 개수에 상관 없이 모두 배열에 넣어줘야 함

function say(country) {
  console.log(this);
  console.log(`Hi! my name is ${this?.name}!`);
  console.log(`I live in ${country}.`);
}

const obj = { name: 'cheeseb' };

say('korea');
say.call(obj, 'korea');
say.apply(obj, ['korea']);

bind

함수의 this를 대체한 복제 함수를 리턴하는 메서드

bind 는 함수를 실행하는 메서드가 아닌, 원본 함수의 this만 대체한 복사본을 새로 리턴하는 메서드이다.

function say(country) {
  console.log(this);
  console.log(`Hi! my name is ${this?.name}!`);
  console.log(`I live in ${country}.`);
}

const obj = { name: 'cheeseb' };

const boundSay = say.bind(obj);
boundSay('korea');

화살표 함수의 this

함수 호출 시 this에 바인딩 될 객체가 동적으로 결정되는 일반 함수와 다르게,
화살표 함수는 this에 바인딩될 객체가 정적으로 결정된다.

화살표 함수의 this는 항상 상위 스코프의 this를 가리킨다.

const temp = { 
    age: 10, 
    tempFunc() { 
    	console.log(this.age); // 10
    } 
} 

const temp1 = { 
    age: 10, 
    tempFunc: () => { 
    	console.log(this.age); // undefined 
    } 
} 

temp.tempFunc();
temp1.tempFunc();

또한, 화살표 함수는 call/apply/bind 메서드로 this를 변경하는 것도 불가능하다.

window.x = 1;
const normal = function () { return this.x; };
const arrow = () => this.x;

console.log(normal.call({ x: 10 })); // 10
console.log(arrow.call({ x: 10 }));  // 1

이러한 이유 때문에 다음과 같은 경우에는 화살표 함수를 사용해선 안된다.

화살표 함수를 사용하면 안되는 경우

메소드 정의

this가 메소드를 호출한 객체를 가리키지 않고, 상위 컨텍스트인 전역 객체를 가리키게 된다.

addEventListener의 콜백 함수

메소드 정의와 같은 이유로, 콜백 함수 내에서 this를 사용하는 경우 이벤트리스너에 바인딩된 요소를 가리키는 것이 아닌, 전역 객체(window) 를 가리키게 된다.

this를 사용하지 않고 e.target 을 사용한다면 상관 없을 듯 하다.

생성자 함수

생성자 함수는 prototype 프로퍼티를 가지며, 프로토타입 객체의 constructor를 사용하지만 화살표 함수는 prototype 프로퍼티를 갖고있지 않으므로 생성자 함수로 사용할 수 없다.

참고 사이트

[소소한 개발팁] Javascript - 리스트에서 특정 요소들만 맨 앞/뒤로 세우기

CheeseB — Sun, 09 Jul 2023 15:00:00 GMT

프론트 개발 하다보면 리스트에서 특정 요소들만 앞에 세우거나 뒤에 세워야 하는 경우들이 꽤 있을 것이다.
(ex. 투두리스트에서 중요 표시한 항목들을 맨 위로 올리기)

그럴 때 javascript에서 filter 메서드와 spread 연산자를 활용하면 쉽게 해결할 수 있다.

const tasksInOrder = [
	...tasks.filter((t) => t.state === 'TASK_PINNED'),
	...tasks.filter((t) => t.state !== 'TASK_PINNED'),
];

위 예시는 Storybook 공식 사이트의 튜토리얼에 나와있다.

[리트코드] 42. Trapping Rain Water - 타입스크립트

CheeseB — Wed, 05 Jul 2023 15:00:00 GMT

문제

Given n non-negative integers representing an elevation map where the width of each bar is 1, compute how much water it can trap after raining.
너비가 1인 막대 n개의 높이를 표시한 지도가 주어졌을 때, 비가 내린 후 얼마나 많은 물을 가둘 수 있는지 계산할 것!

예시 1

Input: height = [0,1,0,2,1,0,1,3,2,1,2,1]

Output: 6

Explanation: The above elevation map (black section) is represented by array [0,1,0,2,1,0,1,3,2,1,2,1]. In this case, 6 units of rain water (blue section) are being trapped.

예시 2

Input: height = [4,2,0,3,2,5]

Output: 9

제약조건
- n == height.length
- 1 <= n <= 2 * 104
- 0 <= height[i] <= 105

나의 풀이

> Runtime 212ms (beats 21.26%)
> Memory 45.5MB (beats 63.22%)

물을 가둘 수 있으려면 높은 봉우리가 양쪽에 있어야 하며,
내 코드에선 그중 왼쪽 봉우리를 peak, 오른쪽 봉우리를 nextPeak 라고 지칭했다.

탐색 순서는 왼쪽에서 오른쪽
먼저 peak를 정한 다음, peak보다 높이가 크거나 같은 가장 가까운 봉우리를 nextPeak로 지정
- peak 보다 크거나 같은 nextPeak 가 존재할때:
  peak부터 nextPeak 사이의 모든 i에 대해 height[peak] - height[i] 값을 정답에 더함
  (왼쪽 봉우리가 오른쪽 봉우리보다 작으니까 왼쪽을 기준으로 물 높이를 계산한 것)
- peak 보다 크거나 같은것이 존재하지 않을때:
  이후에 있는 봉우리들 중 그나마 가장 큰 것(maybePeak)을 nextPeak으로 지정함. 그리고 peak부터 nextPeak 사이의 모든 i에 대해 height[nextPeak] - height[i] 값을 정답에 더함
  (오른쪽 봉우리가 왼쪽 봉우리보다 작으므로 오른쪽을 기준으로 물 높이를 계산한 것)
nextPeak에 도달하면 peak를 nextPeak로 갱신하고, 다시 nextPeak를 찾음
끝에 도달할 때까지 반복

function trap(height: number[]): number {
  let answer = 0;
  let peak = 0;
  let nextPeak = 0;
  let isReverse = false;

  for (let i = 0; i < height.length; i++) {
    if (i >= nextPeak) {
      peak = nextPeak;
      let max = 0;
      let maybePeak = 0;
      for (let j = i + 1; j < height.length; j++) {
        if (height[j] >= height[peak]) {
          nextPeak = j;
          isReverse = false;
          break;
        }
        if (height[j] > max) {
          maybePeak = j;
          max = height[j];
        }
      }
      if (peak === nextPeak) {
        nextPeak = maybePeak;
        isReverse = true;
      }
    } else {
      if (isReverse) answer += height[nextPeak] - height[i];
      else answer += height[peak] - height[i];
    }
  }

  return answer;
}

더 좋은 풀이법 (투포인터)

> Runtime 75ms (beats 61.61%)
> Memory 45.5MB (beats 70.38%)

리스트의 맨 처음과 맨 끝을 가리키는 두개의 포인터를 활용하는 방법이다.

왼쪽 포인터: 0, 오른쪽 포인터: length - 1 로 초기화
양쪽 포인터가 각각 maxHeight 변수를 가짐
두개의 포인터를 비교해서, height가 더 작은 쪽이 점점 가운데로 가까워지며 빗물을 더하는 방식
maxHeight를 현재 height와 비교하여 갱신하고, (maxHeight - height) 값을 정답에 더함
양쪽 포인터가 만날 때까지 반복

이 방식으로 하면 O(n) 으로 해결할 수 있다.

function trap(height: number[]): number {
  let answer = 0;
  let left = 0;
  let right = height.length - 1;
  let leftMax = 0,
    rightMax = 0;

  while (left < right) {
    if (height[left] <= height[right]) {
      leftMax = Math.max(leftMax, height[left]);
      answer += leftMax - height[left];
      left++;
    } else {
      rightMax = Math.max(rightMax, height[right]);
      answer += rightMax - height[right];
      right--;
    }
  }

  return answer;
}

[리트코드] 1. Two Sum (두 수의 합) - 타입스크립트

CheeseB — Mon, 03 Jul 2023 15:00:00 GMT

문제

Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.
You may assume that each input would have exactly one solution, and you may not use the same element twice.
You can return the answer in any order.

예시 1

Input: nums = [2,7,11,15], target = 9

Output: [0,1]

Explanation: Because nums[0] + nums[1] == 9, we return [0, 1].

예시 2

Input: nums = [3,2,4], target = 6

Output: [1,2]

예시 3

Input: nums = [3,3], target = 6

Output: [0,1]

제약조건
- 2 <= nums.length <= 104
- 109 <= nums[i] <= 109
- 109 <= target <= 109
- Only one valid answer exists.

풀이 1 - 브루트포스: O(n^2)

가장 쉬운 방법으로, 이중 for문 돌면서 합이 동일한 것을 찾는다.
시간제한이 있는 문제였다면 당연히 통과하지 못했을 방법이다.

// Beats: Runtime 38.22%, Memory 77.63%

function twoSum(nums: number[], target: number): number[] {
    for (let i = 0; i < nums.length - 1; i++) {
        for (let j = i + 1; j < nums.length; j++) {
            if (nums[i] + nums[j] === target) return [i, j];
        }
    }
};

풀이 2 - lastIndexOf 활용: O(n^2)

for문을 하나로 줄이고, 각 숫자를 target에서 뺀 값이 존재하는지를 배열 뒤부터 검사했다.
for문이 하나여서 얼핏 보면 시간 복잡도를 줄인것 같지만, lastIndexOf 도 결국엔 값을 찾을 때 까지 배열을 쭉 탐색하는거라 이중 for문과 별반 다를 것은 없는 것 같다.

// Beats: Runtime 6.2%, Memory 93.80%

function twoSum(nums: number[], target: number): number[] {
    for (let i = 0; i < nums.length; i++) {
        const j = nums.lastIndexOf(target - nums[i]);
        if (j !== -1 && i !== j) return [i, j];
    }
};

풀이 3 - 객체 키 탐색: O(n)

‘파이썬 알고리즘 인터뷰’ 책에 기술되어 있는 풀이법으로, 타입스크립트로 풀 수 있는 방법 중 가장 좋은 방법인 것 같다.

nums 배열을 돌면서 값을 키로, 인덱스를 값으로 객체에 저장한다.
반복문을 도는 동안 target에서 각 숫자를 뺀 값이 객체의 키로 이미 존재한다면, 바로 해당 인덱스를 리턴시키도록 했다.

// Beats: Runtime 51.99%, Memory 48.87%

function twoSum(nums: number[], target: number): number[] {
    let res = [];
    const obj = {};

    nums.forEach((num, i) => {
        if (obj[target - num] !== undefined) {
            res = [i, obj[target - num]];
            return;
        }
        obj[num] = i;
    });

    return res;
};

[리트코드] 5. Longest Palindromic Substring - 타입스크립트

CheeseB — Sun, 02 Jul 2023 15:00:00 GMT

문제

Given a string s, return the longest palindromic substring in s.
s 라는 문자열이 주어졌을 때, 가장 긴 palindrome을 리턴할 것!
( palindrome: 앞에서부터 읽으나 뒤에서부터 읽으나 똑같은 문자열 )

예시 1

Input: s = "babad"

Output: "bab"

Explanation: "aba" is also a valid answer.

예시 2

Input: s = "cbbd"

Output: "bb"

제약조건
- 1 <= s.length <= 1000
- s 는 영문과 숫자로만 이루어짐

풀이 1 (오답)

처음에 내가 시도했던 방법으로, palindrome은 반드시 첫 글자와 마지막 글자가 동일하다는 것을 활용했다.

동일한 문자가 두번 이상 나타나는 경우가 있는지 찾음 (없으면 그냥 첫번째 문자를 리턴)
1번에 해당하는 문자들 중 첫 인덱스를 startIdx 로 지정
startIdx 위치의 문자와 동일한 문자를 맨 끝에서부터 찾아서 endIdx로 지정
양 끝 (startIdx ~ endIdx) 에서부터 안쪽으로 비교해가며 글자 쌍이 동일한지 확인
모두 동일하면 substring을 리턴
동일하지 않으면 양 끝 지점(startIdx, endIdx)을 안쪽으로 하나씩 좁혀가며 다시 비교를 반복

function longestPalindrome(s: string): string {
    let startIdx = s.search(/(.).*\1/g);
    if (startIdx === -1) return s[0];

    let endIdx = s.lastIndexOf(s[startIdx]);
    while (startIdx <= endIdx) {
        let isPalindromic = true;
        for (let i = startIdx, j = endIdx; i <= j; i++, j--) {
            if (s[i] !== s[j]) {
                isPalindromic = false;
                break;
            }
        }
        if (isPalindromic) return s.substring(startIdx, endIdx + 1);

        endIdx = s.lastIndexOf(s[startIdx], endIdx - 1);
        while (endIdx === -1 && startIdx < endIdx) {
            startIdx++;
            endIdx = s.lastIndexOf(s[startIdx], endIdx - 1);
        }
    }
};

여기서 틀린 이유로 생각되는 부분은,
6번 과정에서 양 끝점을 좁혀갈 때 시작 인덱스만을 기준으로 해서 범위를 좁혀갔기 때문이다.
위와 같이 풀면 aacabdkacaa 에서 aca 가 아닌 aa 를 반환하게 된다.

그런데 그 문제를 해결하기 위해 양 끝점을 모두 고려해서 범위를 좁히려면 시간 복잡도가 O(n^2) 을 넘어갈 것 같아서 다른 풀이법을 찾아야만 했다.

풀이 2 (정답)

‘파이썬 알고리즘 인터뷰’ 책에 기술되어 있는 풀이법으로, 시간 복잡도는 O(n^2) 이다.

짝수 개수인 palindrome과 홀수 개수인 palindrome을 각각 판별하며, 가장 긴 부분 문자열을 찾기 위해 양 끝 점을 동일하게 확장시키는 방식이다.

S 문자열의 0번째 인덱스부터 length - 1 인덱스까지 기준점(i)을 옮겨가며 반복
각 반복문에서, 처음엔 짝수 포인터는 [i, i+1], 홀수 포인터는 [i, i+2]로 시작점과 끝점을 지정함
시작점과 끝점의 문자가 동일하면, 양 끝점을 동시에 1씩 확장시킴
양 끝점이 동일하면 계속해서 확장시킴 (문자열을 벗어나지 않는 범위에서)
확장이 끝나면 양 끝점 간의 substring 과 이전까지의 최대 palindrome 을 비교해서, 더 긴 값을 정답으로 교체

// Beats: Runtime 71.32%, Memory 77.92%

function longestPalindrome(s: string): string {
    if (s.length === 1) return s;
    let res = s[0];
    
    for (let i = 0; i < s.length - 1; i++) {
        let evenLeft = i, evenRight = i + 1;
        let oddLeft = i, oddRight = i + 2;
        
        while (s[evenLeft] === s[evenRight]) {
            evenLeft--;
            evenRight++;
            if (evenLeft < 0 || evenRight >= s.length) break;
        }

        while (s[oddLeft] === s[oddRight]) {
            oddLeft--;
            oddRight++;
            if (oddLeft < 0 || oddRight >= s.length) break;
        }

        evenLeft++;
        evenRight--;
        oddLeft++;
        oddRight--;

        if (evenRight - evenLeft + 1 > res.length) res = s.slice(evenLeft, evenRight + 1);
        if (oddRight - oddLeft + 1 > res.length) res = s.slice(oddLeft, oddRight + 1);
    }
    return res;

풀이 3 (정답 + 리팩터링)

위의 코드를 리팩터링한 것으로, 중복되는 로직을 함수로 빼내고 while문 내부의 조건절을 while문 자체의 반복 조건으로 바꾸어서 코드의 길이를 줄였다.

리트코드에 TypeScript Solution 으로 올라온 것 중 가장 인기 있는 해답을 참고했다.

// Beats: Runtime 68.36%, Memory 66.35%

function longestPalindrome(s: string): string {
    if (s.length === 1) return s;
    let res = s[0];
    
    for (let i = 0; i < s.length - 1; i++) {
        const even = getPalindrome(i, i + 1, s);
        const odd = getPalindrome(i, i + 2, s);

        if (even.length > res.length) res = even;
        if (odd.length > res.length) res = odd;
    }

    return res;
}

function getPalindrome(left: number, right:number, s: string): string {
    while (left >= 0 && right <= s.length && s[left] === s[right]) {
        left--;
        right++;
    }
    return s.substring(left + 1, right);
}

[이펙티브 타입스크립트] 1장. 타입스크립트 알아보기

CheeseB — Wed, 14 Jun 2023 15:00:00 GMT

아이템 1. 타입스크립트와 자바스크립트의 관계 이해하기

타입스크립트는 자바스크립트의 상위 집합이다.

모든 자바스크립트 프로그램은 타입스크립트이기 때문에, .js를 .ts 로 바꿔도 달라지는 것은 없다. (타입 체크에 걸리는 것과는 무관) 이는 자바스크립트를 타입스크립트로 migration 하는 데에 큰 이점이 된다.

반면에, 모든 타입스크립트가 자바스크립트인 것은 아니다. 이것은 타입을 명시하는 추가적인 문법이 있기 때문이다.

타입스크립트는 런타임에 오류가 날 코드를 미리 찾아낸다.

타입 체커가 모든 오류를 찾아내지는 못하지만, 상당히 많은 오류를 미연에 방지할 수 있다. 또한 오류가 발생하지 않더라도 의도와 다르게 동작하는 코드를 찾아내는 경우도 있다.

const states = [
  {name: 'Alabama', capital: 'Montgomery'},
  {name: 'Alaska',  capital: 'Juneau'},
  {name: 'Arizona', capital: 'Phoenix'},
];

for (const state of states) {
  console.log(state.capitol);
                 // ~~~~~~~ Property 'capitol' does not exist on type
                 //         '{ name: string; capital: string; }'.
                 //         Did you mean 'capital'?
}

타입스크립트는 타입 구문 없이도 오류를 잡을 수 있지만, 타입 구문을 추가한다면 더 많은 오류를 찾아낼 수 있으며 코드의 의도를 더 잘 파악할 수 있다.

// Before
const states = [
  {name: 'Alabama', capitol: 'Montgomery'},
  {name: 'Alaska',  capitol: 'Juneau'},
  {name: 'Arizona', capitol: 'Phoenix'},
];
for (const state of states) {
  console.log(state.capital);
                 // ~~~~~~~ Property 'capital' does not exist on type
                 //         '{ name: string; capitol: string; }'.
                 //         Did you mean 'capitol'?
}

// After
interface State {
  name: string;
  capital: string;
}

const states: State[] = [
  {name: 'Alabama', capitol: 'Montgomery'},
                 // ~~~~~~~~~~~~~~~~~~~~~
  {name: 'Alaska',  capitol: 'Juneau'},
                 // ~~~~~~~~~~~~~~~~~
  {name: 'Arizona', capitol: 'Phoenix'},
                 // ~~~~~~~~~~~~~~~~~~ Object literal may only specify known
                 //         properties, but 'capitol' does not exist in type
                 //         'State'.  Did you mean to write 'capital'?
];
for (const state of states) {
  console.log(state.capital);
}

타입스크립트는 기본적으로는 자바스크립트의 런타임 동작을 모델링한다.

자바스크립트 런타임에 에러가 나지 않는 코드는 타입스크립트에서도 정상으로 인식한다.

const x = 2 + '3';  // OK, type is string
const y = '2' + 3;  // OK, type is string

하지만 반대로, 정상 동작하는 코드에 오류를 표시하기도 한다. 이는 단순히 런타임 동작을 모델링하는 것 뿐 아니라 의도치 않은 이상한 코드가 오류로 이어질 수 있다는 것까지 고려한 경우이다.

const a = null + 7;  // Evaluates to 7 in JS
       // ~~~~ Operator '+' cannot be applied to types ...
const b = [] + 12;  // Evaluates to '12' in JS
       // ~~~~~~~ Operator '+' cannot be applied to types ...
alert('Hello', 'TypeScript');  // alerts "Hello"
            // ~~~~~~~~~~~~ Expected 0-1 arguments, but got 2

작성된 프로그램이 타입 체크를 통과하더라도 런타임에 오류가 발생할 수 있다. 이는 타입스크립트가 이해하는 값의 타입과 실제 값에 차이가 있을 수 있기 때문이다.

아이템 2. 타입스크립트 설정 이해하기

타입스크립트 설정은 가급적 tsconfig.json 을 통해서 설정하는 것이 좋으며, 언어에 영향을 미치는 설정 중 noImplicitAny 와 strictNullCheck 가 가장 중요하다. 만약 strict 설정을 true 로 한다면 이 두가지를 포함한 여러 엄격한 검사를 수행하여 대부분의 오류를 잡아낼 수 있다.

noImplicitAny

변수들이 미리 정의된 타입을 가져야 하는지 여부를 제어한다.

noImplicitAny를 true로 설정한다면 말 그대로 변수가 암시적으로 any 값을 가지지 못하게 한다. (명시적으로 any를 설정한다면 통과하겠지만 그렇게 쓰지 않는것을 권장한다.)

// tsConfig: {"noImplicitAny":true}

function add(a, b) {
          // ~    Parameter 'a' implicitly has an 'any' type
          //    ~ Parameter 'b' implicitly has an 'any' type
  return a + b;
}

function subtract(a:number, b:number) {
  return a - b;
}

타입스크립트는 타입 정보를 가질 때 가장 효과적이므로 되도록 noImplicitAny를 설정해야 하며,
자바스크립트를 타입스크립트로 전환하는 과정에서만 noImplicitAny를 잠깐 해제해 두는 것이 좋다.

strictNullChecks

null과 undefined가 모든 타입에서 허용되도록 할지 여부를 제어한다.

// tsConfig: {"noImplicitAny":true,"strictNullChecks":true}

const x: number = null;
//    ~ Type 'null' is not assignable to type 'number'

이는 명시적으로 null 을 허용하도록 하거나, null을 허용하지 않으려면 null을 체크하는 코드를 추가해야 한다.

	const x: number | null = null;

  const el = document.getElementById('status');
  el.textContent = 'Ready';
//~~ Object is possibly 'null'

  if (el) {
    el.textContent = 'Ready';  // OK, null has been excluded
  }
  el!.textContent = 'Ready';  // OK, we've asserted that el is non-null

이 설정은 ‘undefined는 객체가 아닙니다’ 와 같은 런타임 오류를 방지해주기 때문에 true 로 하는 것이 좋다. 이 설정도 noImplicitAny 와 마찬가지로 자바스크립트를 마이그레이션 하는 중에만 해제하는 것을 권장한다.

tsconfig 의 다른 옵션들은 Typescript Guidebook 에서 확인할 수 있다.

아이템 3. 코드 생성과 타입이 관계없음을 이해하기

타입스크립트 컴파일러는 두가지 역할을 수행한다.

코드의 타입 오류를 체크
최신 타입스크립트/자바스크립트 를 구버전의 자바스크립트로 변환

이 두가지는 서로 완벽히 독립적이며, 자바스크립트로 컴파일되는 과정에서 타입 관련된 코드(인터페이스, 타입, 타입 구문)는 모두 제거된다. 그러므로 타입 오류를 체크하는 것이 자바스크립트의 컴파일이나 실행에 영향을 주지 못한다. 이로 인해 타입스크립트는 다음과 같은 특징을 갖는다.

1. 타입 오류가 있는 코드도 컴파일이 가능하다.

하지만 tsconfig에 noEmitOnError 를 설정하면 오류가 있을때 컴파일하지 않는다.

2 .런타임에는 타입 체크가 불가능하다.

위에서 설명하듯이, 타입 체크는 런타임에 아무 영향을 주지 못한다.

interface Square {
  width: number;
}

interface Rectangle extends Square {
  height: number;
}

type Shape = Square | Rectangle;

function calculateArea(shape: Shape) {
  if (shape instanceof Rectangle) {
                  // ~~~~~~~~~ 'Rectangle' only refers to a type, but is being used as a value here
    return shape.width * shape.height;
                    		//        ~~~~~~ Property 'height' does not exist on type 'Shape'
  } else {
    return shape.width * shape.width;
  }
}

위 예시에서 instanceof 는 런타임 연산이지만 Rectangle은 타입이므로 에러가 발생하며, if문이 제 역할을 하지 못한다.

이럴 때 런타임에 타입 정보를 유지할 수 있는 방법이 있다.

속성의 존재 여부 체크

function calculateArea(shape: Shape) {
  if ('height' in shape) {
    return shape.width * shape.height;
  } else {
    return shape.width * shape.width;
  }
}

속성 체크는 런타임 값에 관련되지만 타입 체커 또한 shape의 타입을 Rectangle로 보정해 준다.

태그된 유니온 사용

interface Square {
  kind: 'square';
  width: number;
}

interface Rectangle {
  kind: 'rectangle';
  height: number;
  width: number;
}

type Shape = Square | Rectangle;

function calculateArea(shape: Shape) {
  if (shape.kind === 'rectangle') {
    return shape.width * shape.height;
  } else {
    return shape.width * shape.width;
  }
}

여기서 kind 속성이 태그가 되며, 태그를 이용하여 분기 처리를 한다.

타입을 클래스로 만들기

class Square {
  constructor(public width: number) {}
}

class Rectangle extends Square {
  constructor(public override width: number, public height: number) {
    super(width);
  }
}

type Shape = Square | Rectangle; // 타입으로 사용

function calculateArea(shape: Shape) {
  if (shape instanceof Rectangle) { // 값으로 사용
    return shape.width * shape.height;
  } else {
    return shape.width * shape.width;
  }
}

클래스는 타입으로도, 값으로도 사용 가능하므로 타입 오류도 해결되고 instanceof 연산도 제 역할을 한다.

3. 타입 연산은 런타임에 영향을 주지 않는다.

// ts
function asNumber(val: number | string): number {
  return val as number;
}

// 컴파일 후의 js
function asNumber(val) {
  return val;
}

위 타입스크립트 코드는 number 혹은 string 타입의 매개변수를 number 형식으로 정제해서 리턴하려는 의도를 가지고 있지만, as Number는 타입 체커를 통과하기 위한 타입 연산일 뿐 런타임에서 값에 적용하지 못한다.

위 코드는 아래와 같이 수정해야 제대로 동작한다.

function asNumber(val: number | string): number {
  return typeof(val) === 'string' ? Number(val) : val;
}

4. 런타임 타입은 선언된 타입과 다를 수 있다.

타입스크립트의 선언된 타입과 실제 런타임에서의 타입이 맞지 않을 수 있다는 것을 항상 염두에 두어야 한다.

function turnLightOn() {}
function turnLightOff() {}

function setLightSwitch(value: boolean) {
  switch (value) {
    case true:
      turnLightOn();
      break;
    case false:
      turnLightOff();
      break;
    default:
      console.log('이 부분이 실행될 수 있을까?');
  }
}

위 코드를 예시로 든다면, 만약 개발 도중 setLightSwitch 함수에 boolean 외의 다른 값을 넣어 호출하려 한다면 에러를 표시할 것이다. 하지만 런타임에 그 외의 값이 들어오지 않을 거라는 보장을 하진 못한다. 아래의 예시처럼 네트워크 호출로 받아온 값을 사용할 때가 그런 경우이다.

interface LightApiResponse {
  lightSwitchValue: boolean;
}

async function setLight() {
  const response = await fetch('/light');
  const result: LightApiResponse = await response.json();
  setLightSwitch(result.lightSwitchValue);
}

이러한 경우에는 타입 선언을 했더라도 실제로 런타임에 네트워크에서는 다른 타입의 값을 넘겨줄 수 있으며, 타입스크립트가 이를 미리 알 수는 없다.

이렇게 타입 선언을 제대로 했더라도 런타임 시 예외 상황이 발생할 수 있으므로 타입스크립트에만 너무 의지하지 않고 항상 별도의 예외 처리를 해 주는 것이 좋을 것 같다.

5. 타입스크립트 타입으로는 함수를 오버로드 할 수 없다.

오버로딩:
한 모듈 안에 동일한 이름의 함수가 있더라도 매개변수의 개수나 타입이 다르면 사용이 가능한 것
(오버라이딩: 부모 클래스에서 상속받은 메서드를 자식 클래스에서 재정의하는 것)

자바나 C++ 같은 언어는 함수 오버로딩이 가능하지만, 타입스크립트는 타입과 런타임이 무관하기 때문에 오버로딩이 불가능하다.

function add(a: number, b: number) { return a + b; }
      // ~~~ Duplicate function implementation
function add(a: string, b: string) { return a + b; }
      // ~~~ Duplicate function implementation

하나의 함수에 여러 선언문을 작성하여 여러 타입 정보를 제공하는 것은 가능하지만(타입 수준의 오버로딩), 실제 구현체는 오직 하나만 존재한다.

function add(a: number, b: number): number;
function add(a: string, b: string): string;

function add(a, b) {
  return a + b;
}

const three = add(1, 2);
const twelve = add('1', '2');

이러한 스타일의 오버로딩 사용 시, 위와 같이 타입 에러가 발생하므로 tsconfig에서 noImplicitAny를 false로 지정해 주어야 한다.

6. 타입스크립트 타입은 런타임 성능에 영향을 주지 않는다.

타입스크립트 컴파일러가 빌드타임 오버헤드가 있을 뿐, 타입스크립트의 타입은 런타임에 비용이 전혀 들지 않는다.

아이템 4. 구조적 타이핑에 익숙해지기

만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다. - 덕 테스트

자바스크립트는 덕 타이핑 기반이다. 여기서 덕 타이핑이란 어떤 함수에서 필요한 매개변수 값만 모두 제대로 주어진다면, 다른 것은 신경쓰지 않고 사용하는 것이다. 타입스크립트 또한 이것을 적용하기 위해 구조적 타이핑을 사용한다.

함수의 매개변수

interface Vector2D {
  x: number;
  y: number;
}

interface NamedVector {
	x: number;
  y: number;
  name: string;
}

function calculateLength(v: Vector2D) {
  return Math.sqrt(v.x * v.x + v.y * v.y);
}

const v: NamedVector = { x: 3, y: 4, name: 'Zee' };
calculateLength(v);  // OK, result is 5

위의 예시에서 NamedVector의 구조가 Vecter2D와 호환되기 때문에, 매개변수 타입을 Vecter2D로 명시했어도 NamedVector 를 사용해서 호출이 가능하다.

이러한 특성 때문에 예상치 못한 결과가 발생할 수 있다.

interface Vector3D {
  x: number;
  y: number;
  z: number;
}

function calculateLengthL1(v: Vector3D) {
  let length = 0;
  for (const axis of Object.keys(v)) {
    const coord = v[axis];
               // ~~~~~~~ Element implicitly has an 'any' type because ...
               //         'string' can't be used to index type 'Vector3D'
    length += Math.abs(coord);
  }
  return length;
}

이 예시에서, Object.keys 로 v의 키를 그대로 가져와서 접근하는 것임에도 에러가 뜨는 이유는,
Vector3D에 명시한 것 외에도 v에는 어떤 속성이든 있을 수 있기 때문이다.
그러므로 타입스크립트는 v[axis] 가 어떤 속성이 될지 알 수 없어서 number 타입이라고 확정할 수 없는 것이다.

const vec3D = {x: 3, y: 4, z: 1, address: '123 Broadway'};
calculateLengthL1(vec3D);  // OK, returns NaN

이런 경우에는 루프보단 모든 속성을 각각 더하는 것이 더 낫다.

function calculateLengthL1(v: Vector3D) {
  return Math.abs(v.x) + Math.abs(v.y) + Math.abs(v.z);
}

클래스 할당문

클래스도 마찬가지로 구조적 타이핑이 적용된다.

class C {
  foo: string;
  constructor(foo: string) {
    this.foo = foo;
  }
}

const c = new C('instance of C');
const d: C = { foo: 'object literal' };  // OK!

여기서 d가 C타입에 할당되는 이유는, d 또한 string 타입의 foo 속성을 가질 뿐 아니라 자바스크립트의 객체 특성 상 Object.prototype 으로부터 비롯된 생성자를 가지기 때문이다. 그러므로 필요한 속성과 생성자가 어쨌든 존재하기 때문에 할당이 가능한 것이다.

만약 C에 단순히 할당만 하는 것이 아닌 다른 로직이 존재한다면 오류가 발생할 것이다.

여기까지만 살펴보면 구조적 타이핑이 그저 골칫덩이로 보이지만, 유닛 테스트를 작성할 때 구조적 타이핑을 활용하면 더 쉽게 작성할 수 있고 라이브러리 간의 의존성을 완벽히 분리할 수 있다는 장점이 있다.

아이템 5. any 타입 지양하기

타입스크립트에서 any 타입을 쓰면 안되는 이유는 많다.

타입 안정성이 없고, 타입시스템의 신뢰도를 떨어뜨림
함수 시그니처를 무시함
타입 설계를 감춰버리고, 버그도 감춤
코드 편집기의 언어 서비스가 적용되지 않음
- 자동완성, F2로 이름 일괄 변경 등

그러므로 일부 특별한 경우(마이그레이션 과정 등)를 제외하고는 any 사용은 최대한 피해야 한다.

typescript-eslint 를 사용하면, no-explicit-any에 의해서 명시적인 any 타입 사용 시 경고를 표시할 수 있다.

React 테스트 코드에서 MSW로 백엔드 API 요청 모킹하기

CheeseB — Wed, 31 May 2023 15:00:00 GMT

모킹(Mocking) 이란?

단위 테스트를 작성할 때, 해당 코드가 의존하는 부분을 가짜(mock)로 대체하는 기법

특정 컴포넌트를 테스트할 때, 테스팅 범위가 아니지만 의존성이 있는 다른 모듈이 있을 수 있다.
이를 실제 모듈로 불러와서 테스트 한다면 다음과 같은 문제가 생길 수 있다.

아직 개발되지 않은 모듈에 의존한다면 테스팅/개발이 어려움
다른 모듈에 의해 테스트 결과가 바뀔 수 있어, 해당 컴포넌트에 대해서만 독립적인 테스트를 할 수 없음
- 특정 기능만 분리해서 테스트한다는 ‘단위’ 테스트의 의미에 적합하지 않음
테스트 실행 속도가 떨어지고, 이는 프로젝트 규모가 커져서 한번에 실행할 테스트 케이스가 많아지면 더 큰 이슈가 될 수 있음
- CI/CD 파이프라인의 일부로 테스트가 자동화되어 자주 실행되어야 한다면 더 큰 문제가 됨

이런 상황에서 실제 모듈을 모방한 가짜 모듈을 생성하는것이 mocking 이다.

프론트엔드에서 백엔드 모킹이 필요한 경우

API가 아직 구현이 되어있지 않을 때
원하는 형태의 데이터로 테스트하고 싶을 때
ex) 상품명이 10자 이상일 때, 판매 중단된 상품 목록만 보고싶을 때
서버 에러가 난 상황을 테스트하고 싶을 때
ex) 500에러가 났을 때의 화면을 보고싶을때

임의로 객체를 만들어서 테스트하기

jest.spyOn(window, "fetch").mockImplementation(() => {
	return Promise.resolve({
			json: () => Promise.resolve([
					{ id: 1, title: "Blog 1", author: "Author 1" },
					{ id: 2, title: "Blog 2", author: "Author 2" },
					{ id: 3, title: "Blog 3", author: "Author 3" },
			])
	})
});

이는 fetch 를 모킹한 예제로, fetch를 호출하고 json 메서드를 호출하면 실제 서버가 아닌 위에 명시한 객체 리스트를 응답하도록 변경한 것이다.

이렇게 직접 데이터를 만들어서 넣는 것도 mocking의 방법이지만, 이렇게 하면 나중에 호출 방식이 바뀌었을 때 테스트 또한 하나하나 바꿔줘야 한다는 큰 문제가 생긴다. 그러므로 MSW와 같은 mock 서버를 이용해 테스트를 하는 것이 좋다.

MSW(Mock Service Worker) 란?

네트워크 레벨에서 요청을 가로채서 모의 응답을 보내주는 API 모킹 라이브러리

공식 사이트

이 라이브러리의 장점은 모든 종류의 네트워크 라이브러리(ex. axios, react-query 등) 와, fetch 메스드에서 함께 사용 가능하다는 것인데, 이는 어플리케이션 레벨이 아닌 네트워크 레벨에서 요청을 가로채 응답을 보내기 때문이다.

MSW에 대한 더 자세한 설명은 이 블로그에 잘 정리되어 있으므로 궁금하신 분들은 방문해 보셔도 좋을 것 같다.

MSW 로 Rest API Mock 만들기

설치하고 세팅하기

여기선 Rest API를 모킹하는 방법만 다룰 것이므로, GraphQL API를 모킹하는 방법은 공식 문서 를 확인하면 좋을 것 같다.

아래 명령어를 사용해서 MSW를 프로젝트에 설치한다.

# npm
npm install msw --save-dev

# yarn
yarn add msw --dev

src 안에 mocks 폴더를 만들고, 그 안에 server.js 파일과 handlers.js 파일을 만든다.

CRA 환경에서 MSW 사용하기

CRA 로 프로젝트를 만들면 src 내에 setupTest.js 파일이 있을 것이다. 이는 테스트 환경을 세팅하기 위한 파일로, 초기에는 jset-dom 라이브러리를 임포트하는 구문 밖에 없다.
CRA 환경에서 MSW를 사용하기 위해선 이 파일 안에 다음과 같이 작성해야 한다.

import '@testing-library/jest-dom';
import { server } from './mocks/server.js'; // (1)

beforeAll(() => server.listen()); // (2)
afterEach(() => server.resetHandlers()); // (3)
afterAll(() => server.close()); // (4)

미리 server.js에 설정해둔 모킹 서버를 불러옴
테스트를 시작하기 전에 모킹 서버를 연결함
각 테스트가 끝나면 핸들러를 초기화해서, 다른 테스트에 영향을 주지 않도록 함
모든 테스트가 끝난 후, 모킹 서버를 닫아줌

여기서 beforeAll, afterEach, afterAll 은 Jest에서 제공하는 테스트 전후처리 함수이다.

beforeEach / afterEach: 각각의 테스트 함수가 실행되기 전 / 실행된 후에 매번 실행할 코드
beforeAll / afterAll: 테스트를 시작하기 전 / 다 끝난 후에 딱 한번만 실행할 코드

더 자세한 내용은 공식문서 를 참고하면 좋을 것 같다.

모킹 서버 설정, 핸들러 작성법

servers.js 는 모킹 서버를 설정하는 역할을 한다.

// src/mocks/server.js
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

// 불러온 handler들을 통해 모킹 서버를 설정
export const server = setupServer(...handlers);

필요한 REST API 요청들은 handlers.js 안에 명시해 두면 된다.

// src/mocks/handlers.js
import { rest } from 'msw';

export const handlers = [];

여기서 handlers 배열 안에 원하는 요청 경로와 메서드, 응답값을 다 작성할 수 있다.

import { rest } from 'msw';

export const handlers = [
	rest.get('실제 API 요청 주소', (req, res, ctx) => { // 요청 경로, 메서드
		return res(); // 응답값
	})
]

먼저, 모킹 서버가 가로챌 실제 요청 API를 알려준다.
rest.get / rest.post 등 요청을 보낼 HTTP 메서드를 명시하고 첫번째 인자로는 실제 API 주소를, 두번째 인자로는 mock 데이터를 리턴할 콜백함수를 정의한다.

여기서 함수는 다음 세가지 인자를 받는다.

req (request): 매칭되는 요청에 대한 정보
res (response): 모의 응답을 만들 수 있는 유틸리티
ctx (context): 모의 응답의 HTTP 상태 코드, 헤더, 바디 등을 만들 수 있는 함수들

import { rest } from 'msw';

export const handlers = [
	  rest.get('실제 API 요청 주소', (req, res, ctx) => {

    return res(
      ctx.status(200), // 상태 코드
      ctx.json(...), // 응답 데이터
    );
  }),
];

콜백 함수의 리턴값인 res 에다 응답받고자 하는 값 (mock데이터)을 정의할 수 있다.
첫번째 인자에는 HTTP 상태 코드를, 두번째 인자에는 결과값으로 받을 JSON 데이터를 정의한다.

이렇게 하면 특정 API에 요청을 보내는 코드를 테스트할 때, MSW가 요청을 가로채서 미리 정의된 상태 코드와 데이터로 응답을 받을 수 있다.

import { rest } from 'msw';

export const handlers = [
	rest.get('/board', (req, res, ctx) => {
    return res(
			// 상태 코드를 명시하지 않으면, 200으로 들어옴
      ctx.json([{
				id: 1,
				title: 'test board'
			},{
				id: 2,
				title: 'test board2'
			}]),
    );
  }),

	rest.post('/board', (req, res, ctx) => {
    return res(
      ctx.status(500),
			ctx.json({
				errorMessage: 'Invalid Input',
			}),
    );
  }),

	rest.post('/comment', (req, res, ctx) => {
    return res(
      ctx.status(201), // 데이터 없이 상태값만 받는것도 가능
    );
  }),
];

위와 같이 handlers 안에 모킹할 API 요청들을 여러개 정의해 놓을 수 있다.

모킹을 작성할 때 주의할 점은, 반드시 로직을 통한 응답이 아닌 정해진 데이터로 응답해야 한다는 것이다.
로직을 사용한다면 Mock의 응답을 장담을 수 없고, 테스트가 실패할 경우 Mock의 문제인지 컴포넌트의 문제인 지 알 수가 없기 때문이다.

MSW를 사용한 모킹 예시

테스트할 컴포넌트는 아래와 같다.

import React, { useEffect, useState } from 'react';

export default function TodoList() {
  const [todoList, setTodoList] = useState([]);
  const [errorMsg, setErrorMsg] = useState('');

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then((res) => res.json())
      .then((json) => setTodoList(json))
      .catch(() => setErrorMsg('에러 발생'));
  }, []);

  return (
    <>
      <h1>Todo</h1>
      {errorMsg ? (
        <p>{errorMsg}</p>
      ) : (
        <ul>
          {todoList.map((todo) => (
            <li
              key={todo.id}
              style={{ textDecoration: todo.completed ? 'line-through' : undefined }}
            >
              {todo.title}
            </li>
          ))}
        </ul>
      )}
    </>
  );
}

fetch할 url은 무료로 todoList 객체를 제공해주는 API 이다. 이를 통해 객체 리스트를 받아오면 map을 돌면서 리스트 형태로 렌더링하고, 에러 발생 시 에러메세지만 띄워주는 코드이다.

여기서 fetch 안의 url이 실제로 데이터를 받아올 API라 가정하고, 해당 API를 모킹하는 코드를 handlers.js 안에 작성할 것이다.

import { rest } from 'msw';

export const handlers = [
  rest.get('https://jsonplaceholder.typicode.com/todos', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json([
        {
          id: 1,
          title: '청소',
          completed: true,
        },
        {
          id: 2,
          title: '설거지',
          completed: false,
        },
        {
          id: 3,
          title: '숙제',
          completed: true,
        },
      ]),
    );
  }),
];

그리고 테스트 코드를 다음과 같이 작성하면, mock 데이터를 응답받아 테스트에 통과하는 것을 확인할 수 있다.

describe('Todo list', () => {
  it('리스트가 잘 나온다. (3개)', async () => {
    render(<TodoList />);
    const list = await screen.findAllByRole('listitem');
    expect(list).toHaveLength(3);
  });
});

에러를 발생시켜 보고 싶으면, 다음과 같이 테스트 케이스를 추가하면 된다.

describe('Todo list', () => {
  test('리스트가 잘 나온다. (3개)', async () => {
    render(<TodoList />);
    const list = await screen.findAllByRole('listitem');
    expect(list).toHaveLength(3);
  });

  test('에러 발생 시 에러 메세지를 보여준다.', async () => {
    server.use(
      rest.get('https://jsonplaceholder.typicode.com/todos', (req, res, ctx) => {
        return res(ctx.status(200));
      }),
    );
    render(<TodoList />);
    const error = await screen.findByText('에러 발생');
    expect(error).toBeInTheDocument();
  });
});

위와 같이 테스트케이스 내부에 server.use 를 통해서 mock api를 수정하면 해당 테스트에만 핸들러가 적용되고, 다른 테스트에는 영향을 주지 않는다. 이는 setupTest.js 에서 afterEach(() => server.resetHandlers()) 로 각 테스트를 실행하고 난 뒤에 매번 핸들러를 리셋해주기 때문이다.

그러므로, 다음과 같이 에러 발생 테스트를 먼저 수행해도 다음 테스트에서 모킹 api가 에러를 반환하지 않는다.

describe('Todo list', () => {
  test('에러 발생 시 에러 메세지를 보여준다.', async () => {
    server.use(
      rest.get('https://jsonplaceholder.typicode.com/todos', (req, res, ctx) => {
        return res(ctx.status(200));
      }),
    );
    render(<TodoList />);
    const error = await screen.findByText('에러 발생');
    expect(error).toBeInTheDocument();
  });

	test('리스트가 잘 나온다. (3개)', async () => {
    render(<TodoList />);
    const list = await screen.findAllByRole('listitem');
    expect(list).toHaveLength(3);
  });
});

MSW의 다양한 사용법

fetch 에서는 보안상의 이유로 쿠키 세팅을 할 수 없으나, MSW는 클라이언트 측에서 실행되므로 보안 위반 없이 응답으로 mock 쿠키를 수신할 있다.

import { rest } from 'msw';

export const handlers = [
  rest.post('/login', (req, res, ctx) => {
    return res(
      ctx.cookie('auth-token', 'abc-123'),
    )
  }),
];

위와 같이 ctx.cookie('key', 'value'); 를 호출하면, document.cookie 에 직접 쿠키를 설정할 수 있다.

Query parameters

요청 파라미터에 따라서 다른 응답을 줘야하는 경우에는, 핸들러에서 req 객체를 통해 파라미터에 접근할 수 있다.

예를 들어서, fetch('/products?id=123') 와 같이, 파라미터로 보내는 id에 따라서 응답값이 달라져야 하는 경우에는 다음과 같이 핸들러를 작성할 수 있다.

import { rest } from 'msw';

export const handlers = [
  rest.get('/products', (req, res, ctx) => {
    const productId = req.url.searchParams.get('id')
    return res(
      ctx.json({
        productId,
      }),
    )
  }),
];

이렇게 작성했을 시, fetch('/products?id=123') 이렇게 요청을 보냈을 때 상태 코드로 200 OK 응답을 받을 수 있고,

{
  "productId": "123"
}

위와 같은 json 데이터를 받을 수 있다.

Response patching

모킹 서버의 응답 데이터를 실제 서버의 응답 기반으로 구성할 수 있다.

이 기법은 핸들러에서 실제 서버에 요청을 보낸 후, 받은 데이터에 필요한 정보를 임의로 덧붙이는 방식으로 작동한다.

import { rest } from 'msw';

export const handlers = [
  rest.get('https://api.github.com/users/:username', async (req, res, ctx) => {
    const originalResponse = await ctx.fetch(req)
    const originalResponseData = await originalResponse.json()

    return res(
      ctx.json({
        location: originalResponseData.location,
        firstName: 'Not the real first name',
      }),
    )
  }),
];

위와 같이 작성하면, 다음과 같은 응답 데이터를 받을 수 있다.

{
  "location": "San Francisco",
  "firstName": "Not the real first name"
}

참고 자료

React 테스트 코드에서 유저 이벤트 발생시키기

CheeseB — Tue, 30 May 2023 15:00:00 GMT

fireEvent VS userEvent

리액트 컴포넌트를 테스트할 때 마우스 클릭, 키 입력 등 여러 유저 이벤트를 발생시킬 수 있다.
이를 위해서는 Testing Library에 내장되어 있는 fireEvent를 사용하거나, fireEvent로 만든 또다른 라이브러리인 userEvent를 사용해야 한다.

많은 개발자 분들이 fireEvent 보다 userEvent 를 사용하는 것을 권장하는데, 그 이유는 다음과 같다.

fireEvent 를 더 직관적이고 범용적으로 사용할 수 있도록 만든 것이 userEvent
userEvent는 마치 사람이 직접 브라우저 상에서 행동하는 것처럼, 연관된 유저 이벤트를 한번에 발생시킴
- 예를 들어, 엘리먼트에 데이터를 입력할 땐 change 이벤트 뿐 아니라 focus, keydown, keyup 등 다양한 이벤트가 동반되어야 하지만, fireEvent 는 이를 한번에 발생시키지 못함
사용이 더 간편하고, 사람의 행동에 가까운 좀 더 추상화된 함수명을 제공함

// fireEvent 로 인풋 요소에 값 입력하기
fireEvent.change(email, { target: { value: "user@test.com" } });
fireEvent.change(password, { target: { value: "Test1234" } });

// userEvent 로 인풋 요소에 값 입력하기
userEvent.type(email, "user@test.com");
userEvent.type(password, "Test1234");

그러므로 userEvent 로 이벤트를 발생시키는 방법에 대해 알아보려 한다.

userEvent 라이브러리

import userEvent from '@testing-library/user-event';
위와 같이 임포트해서 사용할 수 있다.

지원하는 이벤트는 다음과 같다.

사용 예시

테스트할 버튼 컴포넌트는 처음엔 ‘Login’ 이라는 텍스트가 적혀있고, 클릭 시 ‘Logout’ 과 ‘Login’ 텍스트가 번갈아가며 나타나도록 구현했다고 가정한다.

Click 이벤트

userEvent.click(element) 로 특정 엘리먼트를 클릭할 수 있다.

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Login from './Login';

describe('Login test', () => {
  it('처음엔 Login 버튼이 있다.', () => {
    render(<Login />);
    const btn = screen.getByRole('button');
    expect(btn).toHaveTextContent('Login');
  });

  it('한번 클릭하면 Logout 버튼이 된다.', () => {
    render(<Login />);
    const btn = screen.getByRole('button');

    userEvent.click(btn); // 클릭 이벤트 발생
    expect(btn).toHaveTextContent('Logout');
  });
});

두번 클릭 시 텍스트가 다시 바뀌므로 테스트에 실패한다.

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Login from './Login';

describe('Login test', () => {
  it('처음엔 Login 버튼이 있다.', () => {
    render(<Login />);
    const btn = screen.getByRole('button');
    expect(btn).toHaveTextContent('Login');
  });

  it('한번 클릭하면 Logout 버튼이 된다.', () => {
    render(<Login />);
    const btn = screen.getByRole('button');

    userEvent.click(btn);
    userEvent.click(btn);
    expect(btn).toHaveTextContent('Logout');
  });
});

Keyboard 이벤트

userEvent.tab() 으로 키보드에서 tab을 누르거나, userEvent.keyboard(‘key’) 로 파라미터에 해당하는 키를 누를 수 있다.

describe('Login test', () => {
  it('tab, space, enter 동작', () => {
    render(<Login />);
    const btn = screen.getByRole('button');

    userEvent.tab(); // tab으로 버튼에 focus 되도록 함
    userEvent.keyboard(' '); // space 키를 눌러서 버튼 클릭
    userEvent.keyboard('{Enter}'); // enter 키를 눌러서 버튼 클릭
    expect(btn).toHaveTextContent('Logout');
  });
});

Type 이벤트

userEvent.type() 으로 input 요소에 값을 입력할 수 있다.

테스트할 Form 컴포넌트는 이메일 입력란과 비밀번호 입력란, 로그인 버튼으로 구성되어 있으며, 로그인 버튼은 이메일과 비밀번호가 입력되었을 때만 활성화가 된다고 가정한다.

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import LoginForm from './LoginForm';

test('enables button when both email and password are entered', () => {
  render(<LoginForm />);

  const email = screen.getByLabelText('이메일');
  const password = screen.getByLabelText('비밀번호');
  const button = screen.getByRole('button');

  expect(button).toBeDisabled(); // 버튼이 비활성화 상태인지 검증

	// 각 input 요소에 값 타이핑
  userEvent.type(email, 'user@test.com');
  userEvent.type(password, 'Test1234');

  expect(button).toBeEnabled(); // 버튼이 활성화 상태인지 검증
});

참고 자료

Jest의 Describe, Test, It 키워드

CheeseB — Mon, 29 May 2023 15:00:00 GMT

test / it

테스트 케이스를 정의하는 함수

각 테스트 코드를 안에 작성하고, 테스트를 할 수 있도록 하는 함수이다. 두 키워드는 완전히 동일한 역할을 하므로 (it키워드가 test키워드의 별칭), 취향에 따라 선택하면 된다.

test('did not rain', () => {
  expect(inchesOfRain()).toBe(0);
});

it('did not rain', () => {
  expect(inchesOfRain()).toBe(0);
});

만약 테스트에서 promise 를 리턴하도록 한다면, Jest는 promise가 resolve되기 전까진 테스트를 완료시키지 않는다.

it('has lemon in it', () => {
  return fetchBeverageList().then(list => {
    expect(list).toContain('lemon');
  });
});

describe

작은 단위의 여러 테스트 케이스(test, it)를 그룹화함

특정 컴포넌트에 속하는 테스트 코드가 여러개일 때, describe를 사용해서 그룹화할 수 있다.
describe를 사용하는 것이 필수는 아니지만, 테스트를 작성할 때와 테스트 결과를 확인할 때 가독성이 더 좋으지므로 사용을 권장한다.

const myBeverage = {
  delicious: true,
  sour: false,
};

describe('my beverage', () => {
  it('is delicious', () => {
    expect(myBeverage.delicious).toBeTruthy();
  });

  it('is not sour', () => {
    expect(myBeverage.sour).toBeFalsy();
  });
});

describe 사용 전

describe 사용 후

참고 자료

Jest 공식 API 문서

Jest와 Jest-DOM 의 Matcher 함수 모음

CheeseB — Wed, 17 May 2023 15:00:00 GMT

Jest 의 기본 Matcher

toBe()

단순 값 비교

expect(1 + 4).toBe(5);

toMatch()

toBe 함수의 정규식 버전

test("string", () => {
  expect(getUser(2).email).toMatch(/.*test.com$/);
});

toEqual()

객체가 일치하는지 검증

expect(getUser(1)).toEqual({
    id: 1,
    email: `user1@test.com`,
  });

toBeDefined()

변수가 정의되어 있는지 여부를 테스트

toBeTruthy() / toBeFalsy()

검증 대상이 true로 간주되는지, false로 간주되는지 테스트

test("number 0 is falsy but string 0 is truthy", () => {
  expect(0).toBeFalsy(); // 숫자 0은 false를 의미하기도 하므로 통과
  expect("0").toBeTruthy(); // 문자열은 true를 의미하기도 하므로 통과
});

toBeCalled() / toHaveBeenCalled()

함수가 호출되었는지 여부를 테스트

두 함수는 같은 역할을 한다.

function drinkAll(callback, flavour) {
  if (flavour !== 'octopus') {
    callback(flavour);
  }
}

describe('drinkAll', () => {
	test('drinks something lemon-flavoured', () => {
    const drink = jest.fn();
    drinkAll(drink, 'lemon');
    
    expect(drink).toHaveBeenCalled(); // 함수 호출 O
  });

  test('does not drink something octopus-flavoured', () => {
    const drink = jest.fn();
    drinkAll(drink, 'octopus');
    
    expect(drink).not.toHaveBeenCalled(); // 함수 호출 X
  });
});

toHaveLength()

배열의 길이를 체크하는 함수

test("array", () => {
  const colors = ["Red", "Yellow", "Blue"];
  
  expect(colors).toHaveLength(3); // 배열길이 3
});

toContain()

특정 원소가 배열에 들어있는지 테스트

test("array", () => {
  const colors = ["Red", "Yellow", "Blue"];
  
  expect(colors).toContain("Yellow"); // Yellow 문자열 원소를 가지고 있는지
  expect(colors).not.toContain("Green"); // Green 문자열 원소를 안 가지고 있는지
});

toThrow()

예외 발생 여부를 테스트

인자 없이 사용: 예외 발생 여부를 체크
인자로 문자열을 넘겼을 때: 예외 메세지를 비교
인자로 정규식을 넘겼을 때: 예외 메세지를 정규식으로 체크

test("throw when id is non negative", () => {
  expect(() => getUser(-1)).toThrow(); // 예외가 발생했는지 체크
  expect(() => getUser(-1)).toThrow("Invalid ID"); // 에러 메세지가 "Invalid ID" 인지 체크
});

여기서 주의할 점이, expect 함수에 넘기는 검증 대상을 반드시 함수로 한번 감싸줘야 한다는 것이다.
그렇지 않으면 예외 발생 여부를 체크하는것이 아닌, 테스트 실행도중 예외를 발생시켜 버리기 때문에 테스트는 항상 실패하게 된다.

toHaveProperty()

객체에 해당 key: value 값이 있는지 검사

test("find user property", async () => {
   const user = {
      id : 1,
      name : "Leanne Graham"
   }
   
   expect(user).toHaveProperty("id", 1);
   expect(user).toHaveProperty("name", "Leanne Graham");
 });

toBeCalledTimes()

함수가 몇번 호출되었는지 검증

drink("aa");
drink("aa");

expect(drink).toHaveBeenCalledTimes(2); // drink함수가 2번 호출되었는지 검증

toBeCalledWith()

함수가 설정한 인자로 호출 되었는지 검증

drink("aa");

expect(drink).toHaveBeenCalledWith("aa"); // drink함수가 "aa" 인자로 호출되었는지 검증

toReturn() / toHaveReturned()

함수가 오류 없이 반환되었는지 테스트

toReturnTimes() / toHaveReturnedTimes()

함수가 지정한 횟수만큼 오류없이 반환되는지 테스트

단지 호출을 몇번 했는지는 검증하지 않는다.

test('drink returns twice', () => {
  const drink = jest.fn(() => true);

  drink();
  drink();

  expect(drink).toHaveReturnedTimes(2); // 오류없이 리턴을 무사히 마친 횟수가 2번인지 검증
});

toReturnWith() / toHaveReturnedWith(value)

함수가 지정한 값을 반환하는지 테스트

test('drink returns coke', () => {
  const beverage = {name: 'coke'};
  const drink = jest.fn(beverage => beverage.name);

  drink(beverage);

  expect(drink).toHaveReturnedWith('coke'); // drink(beverage) 함수 결과가 'coke' 문자열을 반환하는지 검증
});

Jest-DOM 의 Matcher

toBeInTheDocument()

DOM에 요소가 존재하는지 검사

expect(element).toBeInTheDocument();

toBeVisible()

요소가 화면에 보이는지 검사

expect(element).toBeVisible();

toBeDisabled() / toBeEnabled()

요소가 비활성화되어 있는지 혹은 활성화되어 있는지 검사

expect(element).toBeDisabled();
expect(element).toBeEnabled();

toHaveTextContent(text)

요소가 주어진 텍스트를 가지고 있는지 검사

expect(element).toHaveTextContent('Hello World');

toHaveAttribute(attribute)

요소가 주어진 속성을 가지고 있는지 검사

인자를 2개 넘기면 속성의 값도 검사할 수 있다.

expect(element).toHaveAttribute('disabled');
expect(element).toHaveAttribute('type', 'button');

toHaveClass(class)

요소가 주어진 클래스를 가지고 있는지 검사

expect(element).toHaveClass('btn-primary');

toHaveValue(value)

input 이나 textarea 같은 요소가 주어진 값을 가지고 있는지 검사

expect(element).toHaveValue('Hello World');

참고 자료

React Testing Library 쿼리 함수 모음

CheeseB — Wed, 17 May 2023 15:00:00 GMT

React Testing Library의 DOM 요소 조회 함수

getByRole

역할(role)에 따라 요소를 찾는다.

role 속성을 직접 지정할 수도 있지만, 기본적으로 role을 가지고 있는 요소들이 있으므로
되도록 기본 role을 갖고있는 요소들은 불필요하게 role을 지정하지 않는 것이 좋다.

<button>버튼</button>
<h1>타이틀</h1>
<div role="test"></div>

const button = screen.getByRole('button');
const heading = screen.getByRole('heading');
const div = screen.getByRole('test');

이는 접근성을 중심으로 요소를 찾는 가장 권장되는 방법이다.

getByLabelText

label 의 텍스트 값으로 label과 연결된 input 태그를 찾는다.

input과 연결되지 않은 label의 텍스트를 사용하면 요소를 찾을 수 없다.

<lable for="id">getByLabelText</label>
<input id="id" />

const input = screen.getByLabelText('getByLabelText');

getByPlaceholderText

placeholder 값으로 input 또는 textarea 를 찾는다.

<input placeholder="input password">

const input = screen.getByPlaceholderText('input password');

getByText

요소가 가진 text 값으로 요소를 찾는다.

<div>getByText</div>

const div = screen.getByText('getByText');

getByDisplayValue

input, textarea, select의 현재 값을 기준으로 요소를 찾는다.

<input value="default-value">

const input = screen.getByDisplayValue('default-value');

getByAltText

이미지의 alt 속성의 값으로 이미지 요소를 찾는다.

<img src="image.png" alt="이미지">

const image = screen.getByAltText('이미지');

getByTitle

title 속성의 값으로 요소를 찾는다.

title 속성은 툴팁으로 표시되며, 해당 요소에 대한 정보를 나타낼 수 있다.

<div title="tooltip">툴팁</div>

const div = screen.getByTitle('tooltip');

getByTestId

요소에 testid 속성값을 부여하여 요소를 찾는다.

이 방법은 위에 기술한 모든 쿼리를 사용해서 요소를 찾기 힘든 경우에 최후의 수단으로 사용하는 방법이다.

<div data-testid="testid">Element</div>

const div = screen.getByTestId('testid');

이와 같은 쿼리 함수들은 테스트 시나리오에 따라 적절하게 사용되어야 하며,
항상 접근성을 중심으로 선택하는 것이 가장 좋다.

쿼리함수 더 잘 사용하는 법

정규식, exact 옵션 사용

문자열을 사용할 땐 기본적으로 완전히 일치하는 요소만 찾을수 있다.
하지만 정규식이나 { exact: false } 옵션을 사용하면 더 다양한 조건으로 요소를 찾을 수 있다.

<div>Hello World!</div>

screen.getByText('Hello World!'); // 정상
screen.getByText('hello wrold'); // Throw Error

screen.getByText(/hello/i); // 정상
screen getByText('hello', { exact: false }); // 정상

{ exact: false } 옵션 사용 시 해당 문자열과 일부만 일치하는 경우에도 요소를 찾을 수 있으며, 대소문자도 구분하지 않는다.

콜백함수 사용

좀더 커스텀하게 요소를 찾고싶은 경우에 사용하며, 찾는요소와 일치하면 true, 그렇지 않으면 false를 반환해주도록 하면 된다.

<div>16</div>
<div>안녕하세요</div>

const div = getByText((content, element) => {
	return content && content % 4 === 0;
});

여기서 content는 사용하는 쿼리에 따른 content이다.
즉 getByText 이면 요소의 text값, getByTitle 이면 요소의 title 속성값이 될 수 있다.

Normalizer

기본적으로 요소를 찾을 땐 값에 trim 을 적용하며, 문자열 사이에 공백이 있을 경우 하나만 적용한다.

<div>    Hello        World       </div>

const div = screen.getByText('Hello World'); // 정상

만약 이를 적용하고 싶지 않은 경우, option중 normalizer 값을 사용하면 된다.

const div = screen.getByText('    Hello        World       ', {
	normalizer: getDefaultNormalizer({
		trim: false,
		collapseWhitespace: false
	})
}); // 정상

참고 자료

suld2495.log - React Testing Library을 사용하여 테스트2 - Queries

Jest 와 React Testing Library로 리액트 테스트 코드 작성하기

CheeseB — Tue, 16 May 2023 15:00:00 GMT

이전 포스팅에서 프론트엔드 개발자에게 필요한 테스트의 종류와 개념에 대해 이론적인 측면에서 다뤄 보았다. 이번 시간에는 실제로 리액트에서 Jest 와 React Testing Library 를 활용해서 테스트 코드를 작성하는 방법을 알아보려 한다.

테스팅 라이브러리 설치 및 세팅

Jest

CRA 환경에선 Jest는 기본적으로 포함되어 있기 때문에 별도로 설치 및 세팅을 할 필요 없다.

CRA를 사용하지 않는 환경에서는 아래 명령어로 Jest를 설치한 후, Babel 설정을 해주어야 한다.

# npm
npm install --save-dev jest

# yarn
yarn add --dev jest

Jest 는 JavaScript 코드를 실행하지만, 기본적으로 최신 JavaScript 문법이나 JSX 를 이해하지 못한다.
따라서 Babel을 사용해서 Jest가 이해할 수 있는 문법으로 변환해 주어야 한다.

먼저 Babel과 필요한 플러그인을 설치한다.

# npm
npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-react

# yarn
yarn add --dev babel-jest @babel/core @babel/preset-env @babel/preset-react

그 다음, 프로젝트 루트에 ‘.babelrc’ 파일을 생성하고 아래와 같이 작성한다.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

이렇게 하면 Jest는 Babel을 사용하여, 테스트 코드를 실행하기 전에 코드를 변환한다.

React Testing Library

리액트 테스팅 라이브러리는 CRA 환경에 포함되지 않기 때문에, 별도로 설치를 해야한다.

# npm
npm install --save-dev @testing-library/react @testing-library/jest-dom

# yarn
yarn add --dev @testing-library/react @testing-library/jest-dom

기본적인 테스트 코드 작성법

테스트파일 생성

Jest는 기본적으로 .test.js 또는 .spec.js 확장자를 가진 파일, 또는 _tests_ 디렉토리 내의 모든 JavaScript 파일을 테스트 파일로 인식한다. 따라서 컴포넌트와 동일한 경로에 컴포넌트명.test.js 파일을 만들고 테스트 코드를 작성하면 된다.

test('Render add button', () => {
  // blabla..
});

test('Given score is 0, When click +, Then score is 5', () => {
	// blabla..
});

test('취소 버튼이 클릭되면 onCancel 함수가 호출되야 한다.', () => {
	// blabla..
});

위와 같이 test() 함수 내부에 각 테스트를 작성하면 된다.
여기서 첫번째 인자로 들어가는 문자열은 각 테스트의 이름이 되며, 테스트 실행 시 아래와 같이 테스트 이름과 성공 여부가 나타난다.

PASS  ./MyButton.test.js
  ✓ Render add button (5ms)
  ✓ Given score is 0, When click +, Then score is 5 (1ms)
  ✓ 취소 버튼이 클릭되면 onCancel 함수가 호출되야 한다. (1ms)

컴포넌트 렌더링 (Given)

React Testing Library의 render 함수를 사용하면 테스트 환경에서 컴포넌트를 렌더링할 수 있다. render 함수는 렌더링된 결과를 반환하며, 이 결과를 통해 DOM 요소를 조회하거나 사용자 이벤트를 시뮬레이션할 수 있다.

import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders MyComponent', () => {
  render(<MyComponent />);
});

DOM 요소 조회 (When)

React Testing Library는 DOM 요소를 조회할 수 있는 여러 가지 쿼리 함수를 제공하며, 크게 다음과 같이 세가지 형태로 제공된다.

getBy	queryBy	findBy
해당 요소가 화면에 존재해야 할 때 사용하며, 그렇지 않을 경우 테스트는 실패함	요소가 화면에 존재하지 않아야 할 때 사용하며, 요소가 존재하면 테스트는 실패함	비동기적으로 로딩되는 요소를 찾을 때 사용
요소를 찾을 수 없으면 오류를 던짐	요소를 찾을 수 없으면 null을 반환	요소를 찾을 수 없으면 Promise를 반환하며, 이 Promise는 reject 됨

각 형태는 getByText, getByRole 등 여러 종류의 쿼리로 사용될 수 있다.

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders hello message', () => {
  render(<MyComponent />);

  const helloElement = screen.getByText('Hello');
});

렌더링 결과 검증 (Then)

Jest 에서 제공하는 expect 함수와, 다양한 매쳐(matcher) 함수로 테스트 결과를 검증할 수 있다.

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders hello message', () => {
  render(<MyComponent />);

  const helloElement = screen.getByText('Hello');

  expect(helloElement).toBeInTheDocument();
});

expect

테스트의 기대값을 지정하는데 사용된다.

Jest에서 제공하는 함수로,
테스트하려는 값을 인자로 제공하고 이 값에 대해 특정 조건을 검사할 수 있도록 다양한 매쳐 함수를 연결할 수 있게 한다.

expect(sum(1, 2)).toBe(3);

여기서 .toBe() 는 jest 에서 제공하는 매쳐 함수로, expect 함수에 제공된 값이 toBe 함수에 제공된 값과 정확히 같은지 검사한다.

Matcher 함수

기대한 값이 실제 반환된 값과 일치하는 지 확인하는 함수이다.

Jest 에서 제공하는 기본 매쳐 함수 뿐 아니라, React Testing Library 의 Jest-dom 에서 DOM 에 특화된 추가적인 매쳐를 제공한다.

매쳐 함수 모음집

테스트 실행

다음 명령어를 입력해서 테스트를 실행할 수 있다.

// npm
npm test

// yarn
yarn test

이 명령어는 package.json 파일에 정의된 test 스크립트를 실행하며, 일반적으로 CRA 환경에서는 Jest가 테스트 실행기로 설정되어 있다.

테스트를 실행하면 각 테스트가 통과했는지 실패했는지에 따라 표시되는 메세지가 다르다.

테스트가 성공했을 때

PASS  src/App.test.js
✓ renders learn react link (31ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.357s

테스트가 실패했을 때

FAIL  src/App.test.js
✕ renders learn react link (36ms)

● renders learn react link

  expect(received).toBeInTheDocument()

  received value must be an HTMLElement or an SVGElement.
  Received has value: null

    4 | test('renders learn react link', () => {
    5 |   render(<App />);
  > 6 |   const linkElement = screen.getByText(/non-existent element/i);
      |                               ^
    7 |   expect(linkElement).toBeInTheDocument();
    8 | });

  at Object.<anonymous> (src/App.test.js:6:31)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.602s

참고 자료

프론트엔드 개발자를 위한 테스트

CheeseB — Wed, 03 May 2023 15:00:00 GMT

테스트에 대해 알아본 이유

매번 테스트코드니 TDD 니 이런 개념을 공부할 때마다 프론트는 해당이 되지 않는 것 같다는 생각이 들었고, 무엇을 어떻게 테스트해야 하는 건지도 몰랐다. 그래서 프론트엔드 개발자는 어쩔수 없이 브라우저에서 하나하나 직접 살펴보고 클릭하고 입력해 가면서 테스트를 해야 하는 줄로만 알았다. 실제로도 계속 그런 식으로 업무를 하고 있었고..🥲
그러다보니 개발하는 시간보다 테스트하는 시간이 더 오래 걸릴 정도로 테스트에 너무 많은 시간을 소비하곤 했고, 업무 시간을 비효율적으로 쓰게 되었다.
그러다 프론트엔드에서도 테스트 코드를 작성한다는 것을 알게 되었고, 리액트에서 테스트 코드를 작성하는 법을 알아보다가 테스트의 개념을 먼저 정리할 필요가 있어보여서 게시글을 쓰게 되었다.

이번 포스팅에선 프론트엔드에서 쓰이는 테스팅 기법에 대해 설명하고, 테스트 코드 작성 예시는 이후에 개별 포스팅으로 자세히 다룰 예정이다.

프론트엔드 테스트의 필요성

리팩토링이 용이함

위에서 말한 것처럼 기능 추가, 변경 등을 할 때마다 개발자가 직접 일일이 테스트하는 것은 매우 비효율적이고 안전하지도 못하다. 코드에서 중요한 부분은 테스트 코드를 실행시킴으로써 효율적이고 안전하게 테스트를 할 수 있다.

코드 품질과 개발 생산성이 향상됨

테스트를 통해 코드의 견고함을 확인하고, 버그를 사전에 찾아낼 수 있다.
또한 테스트 코드를 작성하면서 코드를 이해하는데 도움이 되고, 다른 개발자들과의 협업을 원활하게 할 수 있다.

테스트의 종류

정적 테스트(Static Test)

코드를 실행시키지 않고 테스트를 하는 것

Type 에러나 Reference 에러와 같이 개발자의 실수로 인해 발생하는 에러를 방지할 수 있으며,
더 좋은 코드를 작성하는 습관을 기르는데 도움을 준다.

ESLint 와 Typescript 가 이에 해당한다.

단위테스트(Unit Test)

개별적인 기능, 함수, 컴포넌트 등 작은 단위를 독립적으로 테스트하는 것

프론트엔드에서는 단일 컴포넌트나 단일 서비스가 단위가 될 수 있으며,
특정 컴포넌트를 렌더링해서 깨지지 않는지 확인하는 것을 예로 들 수 있다.

또한 별도의 통합이 필요 없기 때문에 백엔드 API가 구현이 되어있지 않아도 작성할 수 있다.

출처: https://martinfowler.com/bliki/UnitTest.html

Sociable 테스트: 의존성이 있는 코드와 함께 테스트 (자식 컴포넌트를 포함해서 렌더링)
Solitary 테스트: 의존성이 있는 코드를 모조품으로 대체하여 테스트 (자식 컴포넌트를 *모킹해서 렌더링)

* 모킹(Mocking): 모조품을 만들어서 일단 코드가 돌아가게 하는 것

소프트웨어의 구조가 명확하지 않고, 단일 유닛의 기능이 자주 변경되는 환경에서는 테스트가 자주 변경되어야 하며 이는 테스트 작성의 효율을 떨어뜨리기 때문에 이런 환경에서는 유닛 테스트를 추천하지 않는다.

통합테스트(Integration Test)

두개 이상의 모듈이 실제로 연결된 상태에서 올바르게 작동하는지 확인하는 테스트

유닛들 간의 데이터를 주고받는 환경을 테스트한다.
프론트엔드 통합 테스트에선 UI와 API 간의 상호작용이 올바르게 일어나는지, state에 따른 UI의 변경이 올바르게 동작하는지 등을 확인할 수 있다.
전략에 따라서 프론트엔드 전체 유닛들만 통합하여 테스트하거나, 백엔드와 DB 전체를 통합해서 테스트하는 경우도 있다.

출처: https://martinfowler.com/bliki/IntegrationTest.html

broad 테스트: 의존성이 있는 모든 모듈이 연결된 상태로 테스트
narrow 테스트: 연결된 모듈을 모킹하여 테스트

UI와 API 간의 연결 테스트를 예로 들었을 때 broad test는 실제 API를 호출하여 테스트 하는것, narrow test는 API 클라이언트를 모킹하거나 가상 API 서버를 이용하여 테스트하는 것이라고 볼 수 있다.

E2E 테스트(End-to-End Test)

실제 사용자의 입장에서 애플리케이션의 모든 부분이 잘 작동하는지 확인하는 테스트

End to End 라는 말 그대로, 소프트웨어의 가장 끝단과 끝단인 사용자로부터 백엔드 인프라까지 테스트하는 것을 의미하며, 프론트엔드에서는 실제 브라우저를 실행해서 테스트하는 것을 말한다.
사용자 관점에서 전체 시나리오를 테스트하기 때문에, 코드의 변경에도 테스트를 변경할 필요가 없으며 소프트웨어의 무결성을 보장하기 가장 좋다.
하지만 매우 많은 테스트가 필요하고, 시간이 오래 걸려서 자주 테스트하기는 어렵다. 또한 프론트엔드만 따로 테스트하는 것이 불가능하고 백엔드와의 통합이 필요하며, 네트워크 에러 등 실행 환경의 문제로 테스트가 실패할 수도 있다는 단점이 있다.

각각의 테스트는 따로 사용하기도, 같이 사용하기도 한다.
특히 유닛 테스트와 통합 테스트는 React-Testing-Library와 같이 동시에 지원하는 툴이 많기 때문에 전략에 따라 섞어서 사용하기도 한다.

테스트 도구

단위 테스트

	장점	단점
Jest	- 설정이 쉬움, 병렬 테스트 실행을 지원함 - 모의(Mock) 기능이 강력함	- 큰 프로젝트에서 실행 속도가 느릴 수 있음
Mocha	- 유연한 설정, 각종 플러그인 지원	- 모의(Mock) 기능이 부족함 - 설정이 복잡할 수 있음
Jasmine	- BDD 스타일 테스트 작성 - 기본적인 모의(Mock) 기능 제공	- 실행 속도가 상대적으로 느림 - 병렬 테스트 미지원

공식 사이트
- Jest
- Mocha
- Jasmine

통합 테스트

	장점	단점
Jest	- 단위테스트와 같은 설정을 사용하여 일관성 유지	- 리액트 외의 프로젝트에서 통합 테스트 설정이 복잡할 수 있음
Cypress	- 시각적인 테스트 실행 환경 제공 - 설정이 간단함	- E2E 테스트에 주로 사용되어 통합 테스트를 위한 기능이 부족할 수 있음

E2E 테스트

	장점	단점
Cypress	- 사용하기 쉬운 API - 빠른 테스트 실행 속도, 실시간 디버깅 지원	- 크로스 브라우저 테스트 지원이 미흡함
Selenium	- 다양한 프로그래밍 언어 지원 - 크로스 브라우저 테스트 지원	- 테스트 작성과 유지보수가 어려움 - 실행 속도가 느림
Puppeteer	- 크롬 브라우저에서 빠른 테스트 실행 - Headless 브라우저 지원	- 크로스 브라우저 테스트 미지원 - API가 복잡할 수 있음

공식 사이트

위에서 서술하진 않았지만 가장 많이 쓰이는 테스팅 툴은 React Testing Library이며, 그 다음으로 Jest가 많이 사용된다. React Testing Library는 다른 테스트 프레임워크와 동시 사용이 가능하며, 그 중 Jest와 함께 사용하는 것이 권장되는 조합이다. 이는 Jest가 React 와 밀접하게 통합되어 있고, Facebook 에서 동시에 관리하고 있기 때문이다.

2020 테스트도구의 만족도 기준 순위 (출처: https://2020.stateofjs.com/ko-KR/technologies/testing/)

Jest 란?

페이스북에서 개발한 자바스크립트 테스트 프레임워크 (리액트 프로젝트에서 주로 사용)

제공 기능

테스트 실행기
단언(assertion) 라이브러리
mock 함수, 코드 커버리지 도구 등

특징 및 장점

다양한 환경에서 테스트 가능: 프론트엔드 뿐 아니라 Node.js 환경에 구축된 백엔드 애플리케이션도 테스트 가능
간편한 설정: 설정이 쉽고 기본값이 잘 구성되어 있어, 프로젝트에 빠르게 도입할 수 있다.
빠른 테스트 실행: 병렬 테스트 실행이 가능하며, 변경된 파일에 대해서만 테스트를 실행할 수 있어 빠른 테스트를 지원한다.
모의(Mock) 기능: 함수, 모듈, API 등을 손쉽게 모킹할 수 있어 단위 테스트 작성을 편리하게 한다.

사용 예시

사칙연산 함수들을 테스트하는 간단한 예시이다.

// 구현 코드 (calculator.js)
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

function multiply(a, b) {
  return a * b;
}

function divide(a, b) {
  if (b === 0) {
    throw new Error("Cannot divide by zero");
  }
  return a / b;
}

module.exports = { add, subtract, multiply, divide };

// 테스트 코드 (calculator.test.js)
const { add, subtract, multiply, divide } = require('./calculator');

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

test('subtracts 5 - 2 to equal 3', () => {
  expect(subtract(5, 2)).toBe(3);
});

test('multiplies 2 * 3 to equal 6', () => {
  expect(multiply(2, 3)).toBe(6);
});

test('divides 6 / 2 to equal 3', () => {
  expect(divide(6, 2)).toBe(3);
});

test('throws an error when dividing by zero', () => {
  expect(() => divide(6, 0)).toThrowError('Cannot divide by zero');
});

test 함수를 사용하여 테스트 케이스를 정의하고, expect 와 toBe / toThrowError 를 사용하여 결과를 검증한다.

이후, 터미널에서 ‘jest’ 명령어를 실행하여 테스트를 실행할 수 있다.

$ jest

테스트가 성공적으로 통과되면, 터미널에 아래와 같은 결과가 출력된다.

PASS  ./calculator.test.js
  ✓ adds 1 + 2 to equal 3 (5ms)
  ✓ subtracts 5 - 2 to equal 3 (1ms)
  ✓ multiplies 2 * 3 to equal 6 (1ms)
  ✓ divides 6 / 2 to equal 3 (1ms)
  ✓ throws an error when dividing by zero (2ms)

Test Suites: 1 passed, 1 total
Tests:       5 passed, 5 total
Snapshots:   0 total
Time:        1.357s

React Testing Library 란?

리액트 컴포넌트 테스트를 위한 라이브러리

2018년에 처음 등장해서 지금까지 개발되고 있는 테스팅 도구들의 집합체이며, *사용자 관점에서 UI를 테스트 할 수 있게 도와준다.
테스트 실행기나 단언 라이브러리를 포함하고 있지는 않아서, Jest와 같은 테스트 프레임워크와 함께 사용해야 한다.

* 기존 프론트엔드 테스트는 기능 그 자체보다는 컴포넌트 내부 상태 변경과 같은 상세한 구현을 테스트하여, 개발 속도를 저하시키고 생산성을 떨어뜨리는 문제가 있었다. 이러한 문제를 개선하기 위해 등장한 것이 테스팅 라이브러리이다.

사용자는 컴포넌트 내부의 상태가 어떻게 바뀌고, 내부 메서드가 어떻게 호출되는지 등에 대해 전혀 관심이 없기 때문에 테스트 코드를 작성할 때도 이에 대해선 테스트하지 말자는 입장으로 테스팅 라이브러리가 개발되었다.

이러한 접근 방식은 내부 구현을 수정할 때 테스트가 깨지지 않게 함으로써 리팩토링을 더욱 수월하게 해준다.

제공 기능

리액트 컴포넌트를 가상으로 렌더링하여 동작을 확인하고 렌더링 결과를 확인 가능
DOM 요소를 선택하고, 이벤트를 발생시키는 데 필요한 유틸리티 함수를 제공

특징 및 장점

사용자 중심의 테스트: 사용자가 직접 경험하는 것과 유사한 방식으로 테스트를 작성할 수 있다.
컴포넌트에 직접 접근하지 않음: 컴포넌트의 내부 구현을 알 필요 없이 테스트를 작성할 수 있어 견고한 테스트를 작성할 수 있다.

사용 예시

버튼 클릭 시 텍스트가 변경되는 컴포넌트를 테스트하는 예시이다.

// 컴포넌트 (ButtonWithText.js)
import React, { useState } from 'react';

function ButtonWithText() {
  const [text, setText] = useState('Hello, world!');

  const handleClick = () => {
    setText('You clicked the button!');
  };

  return (
    <div>
      <p data-testid="text">{text}</p>
      <button data-testid="button" onClick={handleClick}>
        Click me!
      </button>
    </div>
  );
}

export default ButtonWithText;

// 테스트 코드 (ButtonWithText.test.js)
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import ButtonWithText from './ButtonWithText';

test('renders initial text and changes it when button is clicked', () => {
  const { getByTestId } = render(<ButtonWithText />);
  const textElement = getByTestId('text');
  const buttonElement = getByTestId('button');

  expect(textElement.textContent).toBe('Hello, world!');

  fireEvent.click(buttonElement);

  expect(textElement.textContent).toBe('You clicked the button!');
});

위의 코드에서는 render 함수로 컴포넌트를 렌더링하고, fireEvent 함수를 사용하여 버튼 클릭 이벤트를 시뮬레이션한다. 그리고 expect를 사용하여 텍스트의 내용이 변경되는지 검증한다.

여기서도 마찬가지로 ‘jest’ 명령어로 테스트를 실행 가능하다.
테스트가 성공적으로 통과되면 터미널에 아래와 같은 결과가 출력된다.

PASS  ./ButtonWithText.test.js
  ✓ renders initial text and changes it when button is clicked (32ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.964s

공식 사이트

Testing Library

기본적인 테스팅 전략: Given When Then 패턴

테스트 시나리오를 작성할 때 주로 사용되는 패턴으로,

Given: 주어진 조건에 대한 코드를 작성 (테스트할 데이터나 컴포넌트를 초기화하는 로직 등)
When: 테스트할 행동에 대한 코드 작성
Then: 테스트 검증 로직에 대한 코드 작성

데이터가 주어지고 어떤 동작을 했을때 어떤 결과가 나오는지에 대해 기술해야 한다.

// given
const a = 1;
const b = 2;

// when
const result = plus(a,b);

// then
assert result === 3;

여기서, then 부분에는 반드시 어떤 로직을 담아서는 안되고 상수 값으로 기술해야 한다.

// 안좋은 테스트 예시
assert result === a + b;

“1+2 는 무엇인가” 라는 문제를 풀다가 답안지를 봤는데, “정답은 1+2 이다.” 라고 나와있으면 얼마나 어이없을지를 생각해보면 될 것 같다..

아래는 Given When Then 전략을 React Testing Library 에 적용한 예시이다.

import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import '@testing-library/jest-dom'
import Fetch from './fetch'

test('loads and displays greeting', async () => {
  // Given 
  // 컴포넌트를 랜더링
  render(<Fetch url="/greeting" />)

  // When
  // Load Greeting 글씨를 찾아서 클릭
  await userEvent.click(screen.getByText('Load Greeting'))

  // Then
  // heading에 hello there이 있는지 검증
  expect(screen.getByRole('heading')).toHaveTextContent('hello there')
})

이후 포스팅에서는 Jest와 React Testing Library를 사용해서 리액트 테스트 코드를 작성하는 기본적인 예시를 다룰 예정이다.

참고 링크

블로그 리뉴얼 후기 및 참고 사이트 정리

CheeseB — Sun, 16 Apr 2023 15:00:00 GMT

블로그 개발 후기

하.. 드디어 끝났다..

강의 보면서 블로그 기본 기능 개발하는데 2-3주,
피그마로 블로그 디자인 하는데 1주,
디자인 적용하고 추가 기능들 구현하는 데 2-3주.. 약 한달 반을 블로그 제작하는 데에 쏟아부었다.

가벼운 마음으로 블로그 만들기를 시작했는데, 만들다 보니깐 점점 욕심이 생겨 이것저것 추가하다 보니 예상보다 제작 기간이 길어졌다. 확실히 내가 디자인부터 개발, 배포까지 전부 다 한 나만의 블로그라 개발하는 동안에도 정말 재미있었고 결과물도 너무 만족스럽다.
그리고 내가 만든 캐릭터를 테마로 만든 블로그라 더욱 애착이 가는 것 같다.
~~내가 봐도 내 블로그 너무 잘 만든듯 ㅎ~~

개츠비는 물론, 리액트와 타입스크립트도 블로그를 만들면서 처음 써본 거라 개발 공부에도 정말 많은 도움이 되었다. 그동안 바닐라 JS로만 웹개발을 하다가 리액트를 써보니까 이 좋은걸 왜 이제야 썼지 하는 생각이..

여담으로, 블로그 리뉴얼 이전에 올렸던 글들을 다시 보니 아주 가관이더라.
물론 그 당시에는 나 혼자서만 보는 블로그라 생각하고 대충 공부했던 내용들을 정리해놨던 것이긴 하지만,
블로그에 애착이 생긴 지금 다시 보니 어쩜 이렇게 대충 써놨지 싶다.
이제부터라도 좀 기술블로그 답게 제대로 포스팅을 작성하려고 한다.

사용 기술

참고 사이트

블로그 제작 강의 (인프런)

React 기반 Gatsby로 기술 블로그 개발하기 - 주현도

개츠비로 블로그를 개발하는 방법과 Github Pages로 배포하는법, 구글과 네이버 검색 엔진에 등록하는 법까지 친절히 알려주심. 심지어 무료..👍

디자인 색상 추천

ColorSpace

메인 색상을 입력하면 그 색에 어울리는 색들을 알려주는 사이트

벤치마킹한 블로그

https://inpa.tistory.com/
https://guiyomi.tistory.com/
https://mnxmnz.github.io/
https://soopdop.github.io/2020/12/03/add-table-of-content-gatsby/

다들 너무 예쁘게 블로그를 꾸며놓으셔서, 내 블로그를 디자인하고 개발하는 데에 많은 도움이 되었다.

Special Thanks To

초코볼❤️
피그마 사용법과 UI 디자인 꿀팁을 전수해주신 울 회사 디자이너 시래미🫶
하나뿐인 사수 Chat GPT🦾

마크다운 문법 모음집

CheeseB — Mon, 27 Mar 2023 15:00:00 GMT

개인적으로 마크다운 문법 정리 및 블로그 디자인을 하기 위해 올린 게시글입니다.

This is a H1

게시글 제목이 h1이니까 내용 안에서 소제목 작성할땐 h2부터 사용할 것

This is a H2

This is a H3

This is a H4

첫번째
두번째
1. 두번째 안의 첫번째
2. 두번째 안의 두번째
  1. 두번째 안의 두번째 안의 첫번째
세번째
네번째

빨강
분홍
보라
- 녹색
  - 파랑
검정

1단계
- 2단계
  - 3단계
    - 4단계

This is a first blockquote.

This is a second blockquote.

This is a third blockquote.

이것은 인용구입니다

첫번째 각주¹ 두번째 각주²

각주는 어디에 작성하든 페이지 맨 밑에 표시됨, 가로선도 알아서 들어감

ul 안에 ol 쓰려면 들여쓰기 두번씩 해야됨
순서있는 항목
- 그 안에 순서 없는 항목1
  - 그 안에 또 순서 없는 항목
- 순서 없는 항목2
순서 있는 항목2
1. 그 안에 순서 있는 항목1
  1. 그 안에 또 순서 있는 항목
2. 그 안에 순서 있는 항목2

ol 안에 ul 쓸때는 그냥 써도 됨
순서 없는 항목
1. 그 안에 순서 있는 항목
2. 순서 있는 항목 2

한줄 this is code 코드

this is code block

this is code block too

기울임꼴 기울임꼴 강조하기 강조하기 ~~취소선~~ 기울이면서 강조하기 기울이면서 강조하기 형광펜 배경

_아래첨자텍스트 ^위첨자텍스트

테이블1	테이블2	테이블3
내용1	내용2	내용3
내용1	내용2	내용3
내용1	내용2	내용3

이건 줄바꿈 안한 문장

줄 바꿈을 하기 위해서는 앞줄 마지막에서 2칸이상을 띄어쓰기해야 한다.
이렇게

리스트에서 줄바꿈 하려면 앞줄 마지막을 2칸 이상 띄우고,
다음 줄도 2칸 이상 들여쓰기 해야함
이렇게!

이미지랑 이미지 캡션넣기

토글 항목 열고닫기

토글 내부 텍스트

토글 내부 리스트
토글 내부 리스트
토글 내부 리스트

링크 걸기
- 마크다운 문법 참고 사이트1
- 마크다운 문법 참고 사이트2

첫번째 각주↩
두번째 각주 - 각주를 여러줄로 넣고 싶으면,
앞줄 끝에는 2칸, 뒷줄 앞에는 4칸의
공백을 넣을것!↩

Typescript 로 Queue 구현하기

CheeseB — Mon, 20 Mar 2023 15:00:00 GMT

타입스크립트로 직접 만들어본 큐, 원형 큐

타입스크립트로 BFS 알고리즘 문제를 푸는데 계속 시간초과가 떠서
뭐가 문제인가 했더니 자바스크립트의 shift() 메서드가 매우 느려서 그런거였다..
BFS를 구현하기 위해선 큐가 필요하지만 자바스크립트엔 큐가 없으니 그냥 배열에서 push()와 shift()로 큐처럼 썼지만,
아무래도 shift() 가 배열의 맨 앞 요소를 꺼내고 뒤 요소들을 전부 앞으로 미는 것이다 보니 느릴 수 밖에 없었다.
결국 큐 자료구조를 직접 구현해야만 했고, 어차피 앞으로 BFS 문제들을 더 풀게 될 테니 아예 그냥 클래스로 만들어버려야겠다는 생각을 했다.

구현 코드

선형 큐

interface IQueue<T> {
  queue: T[];
  head: number;
  tail: number;

  enqueue(element: T): void;
  dequeue(): T;
  isEmpty(): boolean;
}

class Queue<T> implements IQueue<T> {
  queue: T[];
  head: number;
  tail: number;

  constructor() {
    this.queue = [];
    this.head = 0;
    this.tail = 0;
  }

  enqueue(element: T) {
    this.queue[this.tail] = element;
    this.tail += 1;
  }

  dequeue(): T {
    if (this.isEmpty()) throw new Error('queue is empty!');
    this.head += 1;
    return this.queue[this.head - 1]!;
  }

  isEmpty(): boolean {
    return this.head === this.tail;
  }
}

원형 큐

interface IQueue<T> {
  queue: (T | undefined)[];
  length: number;
  head: number;
  tail: number;

  enqueue(element: T): void;
  dequeue(): T;
  isFull(): boolean;
  isEmpty(): boolean;
}

class Queue<T> implements IQueue<T> {
  queue: (T | undefined)[];
  length: number;
  head: number;
  tail: number;

  constructor(length: number) {
    this.queue = new Array(length).fill(undefined);
    this.length = length;
    this.head = 0;
    this.tail = 0;
  }

  enqueue(element: T) {
    if (this.isFull()) throw new Error('queue is full!');
    this.queue[this.tail] = element;
    this.tail = (this.tail + 1) % this.length;
  }

  dequeue(): T {
    if (this.isEmpty()) throw new Error('queue is empty!');
    const value: T = this.queue[this.head]!;
    this.queue[this.head] = undefined;
    this.head = (this.head + 1) % this.length;
    return value;
  }

  isFull(): boolean {
    return this.head === this.tail && this.queue[this.tail] !== undefined;
  }

  isEmpty(): boolean {
    return this.queue[this.head] === undefined;
  }
}

+
알고보니 shift() 메서드 때문이 아니라 다른 이유에서 시간 초과가 난 거였다..ㅎ
물론 shift() 메서드가 느린 건 맞지만 이것 때문에 시간초과가 날 정도는 아니었던 것 같다.
큐를 구현할 필요까진 없었지만 그래도 이럴 때 아니면 언제 타입스크립트로 큐를 만들어보겠나.. 😂

기술 블로그 리뉴얼

CheeseB — Mon, 13 Mar 2023 15:00:00 GMT

jekyll에서 Gatsby로

아주 오래전에 개인 기술블로그를 만들어놓고 지금껏 방치해두다가 다시 필요성을 느껴서 리뉴얼을 하게 되었다.
사실 리뉴얼까지 안하더라도 이미 github.io로 배포까지 완료된 블로그라 게시글만 올려도 되지만, 기존 페이지 디자인이 마음에 들지 않았다.
그당시 jekyll로 다른 사람이 만들어놓은 테마를 갖다 쓰기만 했어서 커스터마이징이 어려웠고, 현재 리액트 공부중인데 마침 리액트 기반의 개츠비로 블로그를 만드는 강의가 있길래 이참에 내가 직접 처음부터 다시 만들어야겠다고 결심했다.

이 게시글을 올린 시점엔 아래의 참고 강의를 완강하여 간단한 SPA 블로그 개발, 배포 및 웹 마스터 도구 등록까지 마친 상태이다.
강의를 통해 기본적인 리액트 Hooks 사용 방법과 개츠비를 통한 정적 사이트 개발 방법 뿐 아니라,
리액트에 TypeScript 를 적용하는 방법, Styled Component 사용법, GraphQL 쿼리, SEO 적용 등등 많은 것들을 배울 수 있었다.
강의 마지막쯤 검색 엔진 최적화를 위해 Meta Tag를 추가하고 웹 마스터 도구에 블로그를 등록할 때, 강의에서는 react-helmet 을 사용했지만 해당 플러그인은 구글 서치 콘솔에 등록이 되지 않아서, react-helmet-async를 사용했더니 문제없이 등록이 되었다.
또한 강의에서는 사이트맵 생성을 위해 sitemap 플러그인을 사용했지만, 구글 사이트맵 등록에 실패해서 advanced-sitemap 플러그인으로 바꿔서 등록했더니 성공했다.
이렇게 직접 블로그 만드는 법을 친절하게 정리해주신, 심지어 무료로 강의를 배포해주신 강사님께 감사드리며 이제 블로그 디자인을 시작해야겠다..!
피그마 배운걸 여기서 써먹을줄이야😆

참고 강의

(인프런) React 기반 Gatsby로 기술 블로그 개발하기
https://www.inflearn.com/course/gatsby-%EA%B8%B0%EC%88%A0%EB%B8%94%EB%A1%9C%EA%B7%B8/dashboard

[타입스크립트 핸드북] JS에 TS 적용하기, typeof & keyof 연산자

CheeseB — Fri, 11 Nov 2022 15:00:00 GMT

노션으로 작성한 글을 옮긴 게시글입니다.

JS에 TS 적용하기

주의할 점

기능적인 변경은 절대 하지 않을 것
테스트 커버리지가 낮을 땐 함부로 타입스크립트를 적용하지 않을 것
처음부터 타입을 엄격하게 적용하지 않을 것 (점진적으로 strict 레벨을 증가)

적용 절차

타입스크립트 환경 설정 및 ts 파일로 변환
any 타입 선언
any 타입을 더 적절한 타입으로 변경

1. 타입스크립트 프로젝트 환경 구성

프로젝트 생성 후 npm 초기화 명령어로 package.json 파일 생성
프로젝트 폴더에서 npm i typescript -D 로 타입스크립트 라이브러리 설치
타입스크립트 설정 파일 tsconfig.json 생성 후 기본 값 추가

{
  "compilerOptions": {
    "allowJs": true,
    "target": "ES5",
    "outDir": "./dist",
    "moduleResolution": "Node",
    "lib": ["ES2015", "DOM", "DOM.Iterable"]
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules", "dist"]
}

서비스 코드가 포함된 자바스크립트 파일을 타입스크립트로 변환
컴파일 명령어 tsc로 타입스크립트 파일을 자바스크립트 파일로 변환

2. 엄격하지 않은 타입 환경에서 프로젝트 돌려보기

프로젝트에 테스트 코드가 있다면 테스트 코드가 통과하는지 먼저 확인
프로젝트의 js 파일을 모두 ts 파일로 변경
타입스크립트 컴파일 에러가 나는 것 위주로만먼저 에러가 나지 않게 수정
- 여기서, 기능을 사소하게라도 변경하지 않도록 주의
테스트 코드가 성공하는지 확인

3. 명시적인 any 선언

프로젝트 테스트 코드가 통과하는지 확인
타입스크립트 설정 파일에 noImplicitAny: true 추가
가능한 타입을 적용할 수 있는 모든 곳에 타입을 적용
- 라이브러리를 쓰는 경우 @types 관련 라이브러리를 찾아 설치
- 타입을 정하기 어려운 곳이 있으면 명시적으로라도 any를 선언
테스트 코드가 통과하는지 확인

4. strict 모드 설정

타입스크립트 설정 파일에 아래 설정 추가

{
  "strict": true,
  "strictNullChecks": true,
  "strictFunctionTypes": true,
  "strictBindCallApply": true,
  "strictPropertyInitialization": true,
  "noImplicitThis": true,
  "alwaysStrict": true,
}

any 로 되어있는 타입들을 최대한 더 적절한 타입으로 변환
as 와 같은 키워드를 최대한 사용하지 않도록 변경

typeof, keyof

typeof 연산자

변수, 함수 등의 타입을 반환
해당 값의 타입과 동일한 타입을 쓰고자 할 때 사용
기본 타입에는 별 쓸모가 없지만, 다른 타입 연산자(keyof 등)와 함께 쓰일 때 유용함

let str = "hello"
let str2: typeof str = "hi" 
// === let str2: string ="hi"

let s = "hello";
let n: typeof s; // let n : string
const add1 = (x:number)=>x+1
type MyAdd1Type = typeof add1 // (x:number)=>number

// 오류 발생
function f() {
  return { x: 10, y: 3 };
}
type P = ReturnType<f>;
// 'f' refers to a value, but is being used as a type here. Did you mean 'typeof f'?
// <>안에는 타입이 들어가야 하기 때문

// 아래 문법은 정상동작함
function f() {
  return { x: 10, y: 3 };
}
type P = ReturnType<typeof f>;

type P = {
	x: number;
	y: number;
}

keyof 연산자

오브젝트 타입의 모든 key를 union 형태로 반환
이미 존재하는 오브젝트를 사용한 타입 지정이 가능

// no index signature
type Point = { x: number; y: number };
type P = keyof Point; // type P = 'x' | 'y'

// with index signature
type Arrayish = { [n: number]: unknown };
type A = keyof Arrayish; // type A = number

// 자바스크립트 오브젝트 키는 스트링 타입으로 반드시 강제변환되기 때문에 숫자도 허용함
type Mapish = { [k: string]: boolean };
type M = keyof Mapish; // type M = string | number

인터페이스도 적용 가능

interface Todo {
	id: number
	text: string
}

type Keys = keyof Todo
// type Keys = 'id' | 'text'

let a: Keys = 'id'
a = 'text'
a = 'ids' // 🚨ERROR!

keyof typeof

keyof 의 대상이 자바스크립트 값일 때
자바스크립트 값은 타입으로 쓸 수 없기 때문에 typeof 를 먼저 붙여야 함

const obj = { a: "123", b: "hello", c: "world" };
type Key = keyof typeof obj; // "a" | "b" | "c"

// typeof obj == { a: string, b: string, c:string }

참고 자료

타입스크립트 핸드북

[타입스크립트 핸드북] tsconfig, types 라이브러리

CheeseB — Wed, 09 Nov 2022 15:00:00 GMT

노션으로 작성한 글을 옮긴 게시글입니다.

tsconfig

타입스크립트 설정 파일 (tsconfig.json)

타입스크립트를 자바스크립트로 변환할 때의 설정을 정의해 놓는 파일
프로젝트에서 tsc 명령어를 치면 ts 설정 파일에 정의된 내용을 기준으로 컴파일을 진행함

tsc

타입스크립트를 자바스크립트로 변환할 때 사용하는 명령어

tsc app.ts
# app.ts -> app.js

타입스크립트 설정 파일 인식 기준

대상 파일을 지정하지 않고 tsc 명령어 실행 시, 현재 폴더에 있는 ts 설정 파일을 기준으로 컴파일을 수행함
- 현재 폴더에 ts 설정 파일이 없으면 프로젝트 폴더 내에서 상위 폴더의 경로를 검색해 나감
tsconfig.json 파일의 경로를 명시적으로 지정하려면 명령어를 사용해야 함

# 형식 예시
tsc --project 상대 경로

# 실제 명령어 예시
tsc --project ./src
tsc -p ./src

타입스크립트 설정 파일 속성

files
- 타입스크립트 변환 명령어를 입력할 때마다 대상 파일의 경로를 지정하지 않고
설정 파일에 미리 정의해둘 수 있음

{
	"files": ["app.ts", "./utils/math.ts"]
}

include
- files와 같이 파일을 개별로 지정하지 않고, 변환할 폴더를 지정할 수 있음
- 와일드카드 패턴
  - * : 해당 디렉토리의 모든 파일 검색
  - ? : 해당 디렉토리 안 파일 이름 중 한 글자라도 맞으면 해당
  - **: 하위 디렉토리를 계속해서 접근

{
	"include": ["src/**/*"]
}

exclude
- include 와 반대되는 속성으로, 변환하지 않을 폴더 경로를 지정함
- 설정하지 않으면 기본적으로 node_modules, bower_components 같은 폴더를 제외시킴
- 컴파일 대상 경로 정의 속성들의 우선순위: files > include = exclude

{
	"exclude": ["node_modules"]
}

typeRoots
- node_modules는 기본적으로 컴파일에서 제외되지만, 서드 파티 라이브러리의 타입을 정의해 놓는 @types 폴더는 컴파일에 포함됨

└─ node_modules
		├─ @types => 컴파일에 포함
		├─ lodash => 컴파일에서 제외

이 때 @types의 기본 경로를 변경하고자 할 때 이 속성을 지정함

{
	"compilerOptions": {
		"typeRoots" : ["./my-types"]
	}
}

extends
- 특정 타입스크립트 설정 파일에서 다른 타입스크립트 설정의 내용을 가져와 추가 가능
- 가져온 파일의 내용을 덮어쓰거나 새로 정의할 수도 있음

// config/base.json
{
	"compilerOptions": {
		"noImplicitAny": true
	}
}

// tsconfig.json
{
	"extends": "./config/base"
}

target
- 컴파일 했을 때 빌드 디렉토리에 생성되는 자바스크립트의 버전을 의미
- es3, es5, es6 외에도 가장 최신 버전인 esnext 까지 존재

{
	"target": "esnext"
}

lib
- 컴파일 시 포함될 라이브러리의 목록

{
	"lib": ["es2015", "dom", "dom.iterable"]
}
// es2015는 async 코드 컴파일 시 프로미스 객체가 필요하므로 추가
// dom은 DOM API를 사용하는 경우 필요

allowJs
- 컴파일 시 자바스크립트 파일도 포함될 수 있는지 여부를 설정 (true, false)
- 기존에 존재하는 자바스크립트 프로젝트에 점진적으로 타입스크립트를 적용할 때 사용

types 라이브러리

@types

자바스크립트로 만들어진 서드 파티 라이브러리를 타입스크립트에서 사용하려면 각 기능에 대한 타입이 정의되어 있어야 함
jQuery, lodash, chart 등

import $ from 'jquery';

$(document).ready();

// 제이쿼리 라이브러리 내부 코드에 대한 타입 정의가 되어있지 않아
// 타입스크립트에서 제대로 동작하지 않음

이 경우 @types 라이브러리를 설치해야 함

npm i -D @types/jquery

대중적으로 흔히 쓰이는 자바스크립트 라이브러리는 대부분 @types 라는 별칭으로 타입스크립트용 보조 라이브러리를 제공함
이게 없는 경우에는 스스로 선언해야 함

@types 라이브러리 내부 구조

일반적으로 index.d.ts 파일과 package.json 파일로 구성됨
- package.json 안에는 types 속성이 정의됨

└─ @types/jquery
   ├─ index.d.ts
   ├─ package.json

@types 라이브러리가 없는 경우

[Typescript] @type이 없는 외부 라이브러리 사용 방법

참고 자료

타입스크립트 핸드북

[타입스크립트 핸드북] 유틸리티 타입, 맵드 타입

CheeseB — Fri, 04 Nov 2022 15:00:00 GMT

노션으로 작성한 글을 옮긴 게시글입니다.

유틸리티 타입

유틸리티 타입이란?

이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법
기존의 인터페이스, 제네릭 등의 기본 문법으로도 충분히 타입을 변환할 수 있지만

유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있음

자주 사용되는 유틸리티 타입

Partial
- T 타입의 부분집합을 만족하는 타입을 정의

interface Address {
	email: string;
	address: string;
}

type MayHaveEmail = Partial<Address>;
const me: MayHaveEmail = {}; // 가능
const you: MayHaveEmail = { email: 'test@abc.com' }; // 가능
const all: MayHaveEmail = { email: 'capt@hero.com', address: 'Pangyo' }; // 가능

Pick<T, K>
- T 타입에서 K 속성을 선택하여 정의

interface Hero {
	name: string;
	skill: string;
}

const human: Pick<Hero, 'name'> = {
	name: '스킬이 없는 사람',
};

interface Todo {
		title: string;
		description: string;
		completed: boolean;
}

type TodoPreview = Pick<Todo, 'title' | 'completed'>; // OK
type TodoPreview2 = Pick<Todo, 'date'>;
// error: '"date"' 형식이 'keyof Todo' 제약 조건을 만족하지 않습니다.

const todo: TodoPreview = {
		title: 'Clean room',
		completed: false,
};

const todo2: TodoPreview = {
		title: 'Clean room',
};
// error: 'completed' 속성이 '{ title: string; }' 형식에 없지만
// 'TodoPreview' 형식에서 필수입니다

Omit <T, K>
- T 타입에서 K 속성을 제거한 타입을 정의

interface AddressBook {
	name: string;
	phone: number;
	address: string;
	company: string;
}

const phoneBook: Omit<AddressBook, 'address'> = {
	name: '재택근무',
	phone: 12342223333,
	company: '내 방'
}

const chingtao: Omit<AddressBook, 'address'|'company'> = {
	name: '중국집',
	phone: 44455557777
}

여러가지 유틸리티 타입

TypeScript 한글 문서

맵드 타입

맵드 타입(Mapped Type) 이란?

기존에 정의되어 있는 타입을 새로운 타입으로 변환해주는 문법
자바스크립트 map() 함수를 타입에 적용한 것과 같은 효과

맵드 타입의 기본 문법

{ [ P in K ] : T }
{ [ P in K ] ? : T }
{ readonly [ P in K ] : T }
{ readonly [ P in K ] ? : T }

기본 예제

Heroes 타입의 세 이름에 각각 나이까지 붙인 객체를 만들고 싶을 때

type Heroes = 'Hulk' | 'Thor' | 'Capt';

type HeroProfiles = { [K in Heroes]: number };

const heroInfo: HeroProfiles = {
  Hulk: 54,
  Thor: 1000,
  Capt: 33,
}

[K in Heroes] 부분은 자바스크립트의 for in 문법과 유사하게 동작함
앞서 정의된 세개의 문자열을 각각 순회하여 number 타입을 값으로 가지는 객체의 키로 정의함

{ Hulk: number } // 첫번째 순회
{ Thor: number } // 두번째 순회
{ Capt: number } // 세번째 순회

위의 원리가 적용된 HeroProfiles 의 타입은 아래와 같이 정의됨

type HeroProfiles = {
  Hulk: number;
  Thor: number;
  Capt: number;
}

실용 예제 (1)

객체를 정의하는 타입을 받아, 그 객체의 부분집합을 만족하는 타입으로 변환하기

type Subset<T> = {
  [K in keyof T]?: T[K];
}

interface Person {
  age: number;
  name: string;
}

const ageOnly: Subset<Person> = { age: 23 };
const nameOnly: Subset<Person> = { name: 'Tony' };
const ironman: Subset<Person> = { age: 23, name: 'Tony' };
const empty: Subset<Person> = {};

/*
Subset<Person> 타입은 아래와 동일함
{
  age?: number | undefined;
  name?: string | undefined;
}
*/

실용 예제(2)

사용자 프로필을 조회하는 API 함수

interface UserProfile {
  username: string;
  email: string;
  profilePhotoUrl: string;
}

function fetchUserProfile(): UserProfile {
  // ...
}

이 프로필의 정보를 수정하는 API

interface UserProfileUpdate {
  username?: string;
  email?: string;
  profilePhotoUrl?: string;
}

function updateUserProfile(params: UserProfileUpdate) {
  // ...
}

이 두 타입은 동일한 것이나 마찬가지이므로 반복해서 선언하는 것을 피해야 함

interface UserProfile {
  username: string;
  email: string;
  profilePhotoUrl: string;
}

interface UserProfileUpdate {
  username?: string;
  email?: string;
  profilePhotoUrl?: string;
}

반복되는 구조를 아래와 같이 재활용 가능

type UserProfileUpdate = {
  username?: UserProfile['username'];
  email?: UserProfile['email'];
  profilePhotoUrl?: UserProfile['profilePhotoUrl'];
}

이를 맵드 타입을 활용하여 코드를 줄일 수 있음

type UserProfileUpdate = {
  [p in 'username' | 'email' | 'profilePhotoUrl']?: UserProfile[p]
}

마지막으로, keyof 를 적용하면 완성

type UserProfileUpdate = {
  [p in keyof UserProfile]?: UserProfile[p]
}

참고 자료

타입스크립트 핸드북

[타입스크립트 핸드북] 모듈, d.ts 파일, 인덱싱

CheeseB — Thu, 27 Oct 2022 15:00:00 GMT

노션으로 작성한 글을 옮긴 게시글입니다.

모듈

타입스크립트의 모듈

ES6+의 Modules 개념과 유사
전역변수와 구분되는 자체 유효 범위를 가지며,

export, import 와 같은 키워드를 사용해야만 다른 파일에서 접근할 수 있음

// math.ts
export interface Triangle {
  width: number;
  height: number;
}

// index.ts
import { Triangle } from './math.ts';

class SomeTriangle implements Triangle {
  // ...
}

모듈 코드 변환 방법

tsconfig.json 파일에 설정한 컴파일러 모드에 따라 모듈 코드가 각기 다르게 변환됨

// SimpleModule.ts
import m = require("mod");
export let t = m.something + 1

// AMD / RequireJS SimpleModule.js 
define(["require", "exports", "./mod"], function (require, exports, mod_1) {
  exports.t = mod_1.something + 1;
});

// CommonJS / Node SimpleModule.js
var mod_1 = require("./mod");
exports.t = mod_1.something + 1;

// UMD SimpleModule.js
(function (factory) {
  if (typeof module === "object" && typeof module.exports === "object") {
    var v = factory(require, exports); if (v !== undefined) module.exports = v;
  }
  else if (typeof define === "function" && define.amd) {
    define(["require", "exports", "./mod"], factory);
  }
})(function (require, exports) {
  var mod_1 = require("./mod");
  exports.t = mod_1.something + 1;
});

// System SimpleModule.js
System.register(["./mod"], function(exports_1) {
  var mod_1;
  var t;
  return {
    setters:[
      function (mod_1_1) {
        mod_1 = mod_1_1;
      }],
    execute: function() {
      exports_1("t", t = mod_1.something + 1);
    }
  }
});

타입스크립트 컴파일 명령어를 통해 컴파일러 모드를 부여할 수 있음

# commonjs 모드인 경우
tsc --module commonjs Test.ts

# amd 모드인 경우
tsc --module amd Test.ts

d.ts 파일

타입스크립트 선언 파일 (d.ts)

오직 타입을 선언하기 위해 존재하는 파일
기존 자바스크립트로 만들어진 외부 라이브러리 모듈들을

타입스크립트 환경에서도 쓸 수 있게 따로 타입만 정리해서 넣어둔 파일

node_modules의 @types 폴더 안 모듈들에서 확인 가능

타입스크립트 선언 파일 만들기

tsconfig 파일에 옵션을 주면 TS파일을 JS로 컴파일하는 과정에서

JS파일과 함께 d.ts 파일이 생성됨

"compilerOptions": {
	"allowJs": true, // js 파일 사용 허용여부
	"declaration": true // .d.ts 파일 생성여부
},

커스텀 타입을 사용하고 싶거나 타입스크립트를 지원하지 않는 라이브러리를 사용할 땐

직접 프로젝트 내에 .d.ts 파일 생성 가능 - tsconfig의 compilerOptions에 typeRoots 속성 추가 (선언 파일이 들어갈 Root 설정) - typeRoots로 지정된 곳에 index.d.ts 파일 생성 가능 - 필요에 따라 typeRoots 폴더 안에 모듈명 폴더를 추가로 만들어 그 안에 index.d.ts 파일을 생성해도 됨

인덱싱

배열과 인덱싱

인터페이스를 사용하여 배열 인덱싱 타입을 정의할 수 있음

interface StringArray {
  [index: number]: string;
}
// 인덱스의 타입은 number, 이 인덱스로 요소 접근 시 해당 요소의 타입은 string

const arr: StringArray = ['Thor', 'Hulk'];
arr[0]; // 'Thor'

타입으로 배열 변경 제한하기

배열에 타입을 적용함과 동시에 배열 요소를 변경하지 못하게 하기

interface ReadonlyStringArray {
  readonly [index: number]: string;
}

const arr: ReadonlyStringArray = ['Thor', 'Hulk'];
arr[2] = 'Capt'; // Error!

참고 자료

타입스크립트 핸드북

[타입스크립트 핸드북] 타입 추론, 타입 호환, 타입 별칭

CheeseB — Wed, 26 Oct 2022 15:00:00 GMT

노션으로 작성한 글을 옮긴 게시글입니다.

타입 추론

타입 추론이란?

명시적인 타입 표기가 없을 때 타입스크립트에서 타입 정보를 추론하는 것
변수와 멤버를 초기화할 때, 매개변수 기본값을 설정할 때, 함수 반환 값을 설정할 때 발생

let x = 3; // let x: number

추론 방법 1. 최적 공통 타입 (Best Common Type)

여러 표현식을 바탕으로 타입을 추론할 때, 표현식의 타입들 중 가장 공통된 타입을 계산함
최적 공통 타입이 발견되지 않으면, 추론 결과는 유니온 배열 타입이 됨

let arr = [0, 1, null]; // let x: (number | null)[]

// arr의 타입을 추론하기 위해 각 배열 요소의 타입들을 고려함
// 각 후보 타입을 고려해서(여기서는 number, null) 다른 모든 후보와 호환되는 타입을 결정

모든 후보를 포함할 수 있는 상위 타입이 존재한다 해도,

해당 상위 타입이 후보 중에 없다면 선택될 수 없음

한 타입이 다른 모든 후보의 상위 타입이 아니라면, 유형을 명시적으로 제공할 것

// Rhino, Elephant, Snake 는 모두 Animal 을 상속받음

let zoo = [new Rhino(), new Elephant(), new Snake()];
// let zoo: (Rhino | Elephant | Snake)[]

let zoo = [new Animal(), new Rhino(), new Elephant(), new Snake()];
// let zoo: Animal[]

let zoo: Animal[] = [new Rhino(), new Elephant(), new Snake()];
// let zoo: Animal[]

추론 방법 2. 문맥상 타이핑 (Contextual Typing)

최적 공통 타입은 할당문 왼쪽 표현식의 타입이 오른쪽 표현식 타입에 의해 추론되었다면,

문맥상 타이핑은 반대로 오른쪽 표현식의 타입이 왼쪽 표현식 타입에 의해 추론됨

타입이 코드의 위치에 의해 문맥상으로 암시될 때 발생

window.onmousedown = function(mouseEvent) {
  console.log(mouseEvent.button);   //<- OK
  console.log(mouseEvent.kangaroo); //<- Error!
};

// Window.onmousedown 함수의 타입을 사용하여 오른쪽에 할당된 함수 표현식의 타입을 추론함
// 매개변수의 타입을 MouseEvent 로 추론하여, button 속성은 있지만 kangaroo 속성은 없다고 판단

window.onscroll = function(uiEvent) {
  console.log(uiEvent.button); //<- Error!
}

// uiEvent 의 타입이 MouseEvent가 아닌 UIEvent로 간주되어,
// button 은 없다고 판단하여 에러 발생

const handler = function(uiEvent) {
  console.log(uiEvent.button); //<- OK
}

// 여기선 문맥 판단이 어렵기 때문에 에러가 발생하지 않음
// 함수가 컨텍스트 타입 위치에 있지 않을 땐 인자가 암시적으로 any 타입을 가짐
// --noImplicitAny 옵션이 있다면 에러 발생

타입 호환

타입 호환이란?

타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미
구조적 타이핑 (aka.덕타이핑)

interface Ironman {
  name: string;
}

class Avengers {
  name: string;
}

let i: Ironman;
i = new Avengers(); // OK, because of structural typing

구조적 타이핑 예시

interface Avengers {
  name: string;
}

let hero: Avengers;
let capt = { name: "Captain", location: "Pangyo" };
hero = capt;

function assemble(a: Avengers) {
  console.log("Avengers assemble!!!", a.name);
}

assemble(capt);

Enum 타입 호환

이넘 타입은 number 타입과 호환되지만 이넘 타입끼리는 호환되지 않음

enum Status { Ready, Waiting };
enum Color { Red, Blue, Green };

let status = Status.Ready;
status = Color.Red;  // Error

Class 타입 호환

클래스 타입의 두 객체를 비교할 때, 오직 인스턴스의 멤버만 비교됨
스태틱 멤버와 생성자는 호환성에 영향을 주지 않음

class Animal {
  feet: number;
  constructor(feet: number) {
    this.feet = feet;
  }
  static pringFeet(): void {
    console.log('my feet!!');
  }
}

class Size {
  feet: number;
  static numFeet: number = 1;
  constructor(feet: number, noUseParam: number) {
    this.feet = feet;
  }
}

let a: Animal = new Animal(1);
let s: Size = new Size(1, 2);

a = s; // ok
s = a; // ok

Generic 타입 호환

제네릭은 타입 인자 가 속성에 할당 되었는지를 기준으로 타입 호환 여부를 판단
타입 인자로 동일 타입을 넣거나 타입이 속성에 할당되지 않았다면 호환됨
타입 인자로 서로 다른 타입을 넣었다면 호환되지 않음

interface Empty<T> {}
let x: Empty<number> = {};
let y: Empty<string> = {};

x = y;  // OK

interface NotEmpty<T> {
  data: T;
}
let x: NotEmpty<number> = { data: 1 };
let y: NotEmpty<number> = { data: 2 };

x = y;  // OK

interface NotEmpty<T> {
  data: T;
}
let x: NotEmpty<number> = { data: 1 };
let y: NotEmpty<string> = { data: '2' };

x = y;  // Error

타입 별칭

타입 별칭 (Type Aliases)

type 키워드를 사용, 특정 타입에 별칭을 부여할 수 있음
똑같은 타입을 한 번 이상 재사용하거나, 다른 이름으로 사용하고 싶을 때 쓰임

// 유니온 타입을 사용할 때
const name: string | number = 'capt';

// 타입 별칭을 사용할 때
type MyName = string | number;
const name: MyName = 'capt';

객체 타입, 제네릭과 같은 복잡한 타입에도 별칭 사용 가능

type Developer = {
  name: string;
  skill: string;
}

type User<T> = {
  name: T
}

타입 별칭의 특징

새로운 타입 값을 생성하는 것이 아닌, 정의한 타입에 대해 단지 별칭을 부여한 것 뿐
동일 타입에 대한 여러 버전을 만드는 것이 아님

type UserInputSanitizedString = string;
 
function sanitizeInput(str: string): UserInputSanitizedString {
  return sanitize(str);
}
 
// 보안 처리를 마친 입력을 생성
let userInput = sanitizeInput(getInput());
 
// 물론 새로운 문자열을 다시 대입할 수도 있음
userInput = "new input";

VSCode 상의 프리뷰가 다르게 표시됨

type VS interface

인터페이스가 가진 대부분의 기능을 타입 별칭에서도 동일하게 사용 가능
인터페이스는 오직 객체의 모양을 선언하는 데만 사용됨
- 기존 원시 타입에 별칭을 부여하는 데에는 사용 불가
핵심적인 차이는 프로퍼티 추가 가능, 불가능 여부
- 인터페이스는 항상 확장 가능하지만, 타입 별칭은 프로퍼티를 추가할 수 없음
- 그러므로, 되도록 인터페이스로 선언하는 것이 좋음

// 인터페이스 확장
interface Animal {
  name: string
}

interface Bear extends Animal {
  honey: boolean
}

const bear = getBear()
bear.name
bear.honey

// 교집합을 통한 타입 확장
type Animal = {
  name: string
}

type Bear = Animal & {
  honey: Boolean
}

const bear = getBear();
bear.name;
bear.honey;

// 기존 인터페이스에 새 필드 추가
interface Window {
  title: string
}

interface Window {
  ts: TypeScriptAPI
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});

// 타입은 생성된 뒤 변경 불가함
type Window = {
  title: string
}

type Window = { // Error: Duplicate identifier 'Window'
  ts: TypeScriptAPI
}

참고 자료

타입스크립트 핸드북

[타입스크립트 핸드북] 클래스, 제네릭

CheeseB — Tue, 25 Oct 2022 15:00:00 GMT

노션으로 작성한 글을 옮긴 게시글입니다.

클래스

readonly

클래스의 속성에 readonly 키워드 사용 시 오직 접근만 가능함
생성자를 통한 초기값 설정만 가능, 그 이후엔 변경 불가

class Developer {
    readonly name: string;
    constructor(theName: string) {
        this.name = theName;
    }
}
let john = new Developer("John");
john.name = "John"; // error! name is readonly.

생성자의 인자에 readonly를 추가하여 코드를 줄일 수 있음

class Developer {
  readonly name: string;
  constructor(readonly name: string) {}
}

접근 제어자

접근 가능 범위

	public	protected	private
클래스 내부	O	O	O
서브 클래스	O	O	X
외부	O	X	X

Getter, Setter

타입스크립트는 클래스로 생성한 객체 속성의 접근과 할당을 제어할 수 있음
get 만 선언하고 set 을 선언하지 않으면 해당 속성은 자동으로 readonly 로 인식됨

// public 속성
class Developer {
  name: string;
}
const josh = new Developer();
josh.name = 'Josh Bolton';

// private 속성은 getter와 setter를 통해서만 접근, 할당 가능
class Developer {
  private name: string;
  
  get name(): string {
    return this.name;
  }

  set name(newValue: string) {
    if (newValue && newValue.length > 5) {
      throw new Error('이름이 너무 깁니다');
    }
    this.name = newValue;
  }
}

const josh = new Developer();

// setter 사용
josh.name = 'Josh Bolton'; // Error
josh.name = 'Josh';

// getter 사용
const name = josh.name; // 'Josh'
console.log(josh.name); // 'Josh'

추상 클래스 (Abstract Class)

특정 클래스의 상속 대상이 되는 클래스
추상 클래스의 추상 메서드는 정의만 있을 뿐 몸체는 구현되어 있지 않으며,

상속받는 클래스에서 무조건 구현해야 함

추상 메서드 뿐 아니라 실사용이 가능한 메서드도 정의 가능함.

이는 상속받은 클래스에서 사용 가능

추상 클래스 자체로는 인스턴스 생성 불가

abstract class Developer {
  abstract coding(): void; // 추상 메서드는 상속 받은 클래스에서 무조건 구현해야 함
  drink(): void {
    console.log('drink coffee');
  }
}

class FrontEndDeveloper extends Developer {
  coding(): void {
    console.log('develop web');
  }
  design(): void {
    console.log('design web');
  }
}

const dev = new Developer(); // error: cannot create an instance of an abstract class

const josh = new FrontEndDeveloper();
josh.coding(); // develop web
josh.drink(); // drink coffee
josh.design(); // design web

추상 클래스에서 상속받은 메서드 또한 서브클래스에서 오버라이딩 가능

abstract class Developer {
  drink(): void {
    console.log('drink coffee');
  }
}

class FrontEndDeveloper extends Developer {
  drink(): void {
    console.log('drink ice coffee');
  }
}

const josh = new FrontEndDeveloper();
josh.drink(); // drink ice coffee

정적 속성/메서드 (Static)

클래스를 통해 인스턴스를 생성할 필요 없이 클래스 자체의 공통된 속성 또는 메서드 사용 가능
클래스명으로 접근 가능, 인스턴스로 접근 시 에러

class Mathmatics {
  // 스태틱 속성
  static PI:number = Math.PI;

  // 스태틱 메서드
  static calcCircumference(radius:number) :number {
    return this.PI * radius * 2;
  }
  static calcCircleWidth(radius:number): number {
    return this.PI * Math.pow(radius, 2);
  }
}

let radius = 4;

console.log(Mathmatics.PI);
console.log(Mathmatics.calcCircleWidth(radius));
console.log(Mathmatics.calcCircumference(radius));

제네릭

제네릭(Generics) 이란?

클래스나 함수에서 사용할 타입을 해당 클래스/함수를 사용할때 결정하는 기법
타입을 마치 함수의 파라미터처럼 사용

function getText<T>(text: T): T {
  return text;
}

getText<string>('hi'); // 'hi'
getText<number>(10); // 10
getText<boolean>(true); // true

제네릭을 사용하는 이유

function logText(text: string): string {
  return text;
}

// 위 함수에서 여러 타입을 허용하고 싶을 때
function logText(text: any): any {
  return text;
}

// 위 함수는 잘 동작하지만
// 함수의 인자로 어떤 타입이 들어가고 어떤 값이 반환되는 지 알 수 없음
// 이러한 문제점을 해결할 수 있는 것이 제너릭
function logText<T>(text: T): T {
  return text;
}
// 함수의 입력값에 대한 타입과 출력값에 대한 타입이 동일한지 검증 가능

제너릭으로 선언한 함수는 두가지 방법으로 호출 가능

// #1
const text = logText<string>("Hello Generic");
// #2
const text = logText("Hello Generic");

// 두번째 방법이 더 짧고 가독성이 좋아 흔하게 사용됨
// 만약 복잡한 코드에서 두번째 방법으로 타입 추정이 어렵다면 첫번째 방법을 사용할 것

타입이 부여된 제네릭

function logText<T>(text: T): T {
  console.log(text.length); // Error: T doesn't have .length
  return text;
}
// text 에 문자열이나 배열이 들어온다 해도, number가 들어올 가능성이 있으므로
// .length 코드는 유효하지 않음

function logText<T>(text: T[]): T[] {
  console.log(text.length); // ok
  return text;
}
// 위와 같이 제네릭에 타입을 부여할 수 있음
// 제네릭 타입이 배열이므로 .length 가 허용됨

function logText<T>(text: Array<T>): Array<T> {
  console.log(text.length);
  return text;
}
// 위처럼 더 명시적으로 선언할 수도 있음

제네릭 타입 (제네릭 인터페이스)

function logText<T>(text: T): T {
  return text;
}

// 아래의 두 코드는 같은 의미
let str: <T>(text: T) => T = logText;
let str: {<T>(text: T): T} = logText;

// 위 코드의 제네릭 타입 부분을 인터페이스로 작성

interface GenericLogTextFn {
  <T>(text: T): T;
}

function logText<T>(text: T): T {
  return text;
}

let myString: GenericLogTextFn = logText; // Okay

// 인터페이스에 인자 타입을 강조하고 싶을 땐 아래와 같이 변경 가능
interface GenericLogTextFn<T> {
  (text: T): T;
}

function logText<T>(text: T): T {
  return text;
}

let myString: GenericLogTextFn<string> = logText;

제네릭 클래스

class GenericMath<T> {
  pi: T;
  sum: (x: T, y: T) => T;
}

let math = new GenericMath<number>();

제네릭 클래스는 인스턴스 측면에서만 제네릭이므로,

static 멤버는 T 매개변수를 사용할 수 없음

제네릭 제약 조건

앞서 살펴본 배열형 제네릭 외에도, 제네릭 함수에 어느정도 타입 힌트를 줄 수 있음

interface LengthWise {
  length: number;
}

function logText<T extends LengthWise>(text: T): T {
  console.log(text.length);
  return text;
}
// 타입에 대한 강제는 아니지만, length에 대해 동작하는 인자만 넘겨받을 수 있음

logText(10); // Error, 숫자 타입에는 `length`가 존재하지 않으므로 오류 발생
logText({ length: 0, value: 'hi' });
// `text.length` 코드는 객체의 속성 접근과 같이 동작하므로 오류 없음

제너릭을 통한 객체 속성 제약

function getProperty<T, O extends keyof T>(obj: T, key: O) {
  return obj[key];  
}
let obj = { a: 1, b: 2, c: 3 };

getProperty(obj, "a"); // okay
getProperty(obj, "z"); // error: "z"는 "a", "b", "c" 속성에 해당하지 않습니다.

참고 자료

타입스크립트 핸드북

[타입스크립트 핸드북] 이넘, 연산자를 이용한 타입 정의

CheeseB — Sun, 23 Oct 2022 15:00:00 GMT

노션으로 작성한 글을 옮긴 게시글입니다.

이넘

Enum (열거형)

특정 값들의 집합을 의미하는 자료형
기억하기 어려운 숫자 대신 친숙한 이름으로 접근/사용하기 위해 활용

enum Avengers { Capt, IronMan, Thor }

숫자형 이넘

초기값을 주면 초기값부터 차례로 1씩 증가

enum Direction {
  Up = 1,
  Down, // 2
  Left, // 3
  Right // 4
}

초기값 없으면 0부터 차례로 증가

enum Direction {
  Up, // 0
  Down, // 1
  Left, // 2
  Right // 3
}

숫자 값을 통해 멤버 이름 도출 가능

enum Team {
  Manager   = 101,
  Planner   = 208,
  Developer = 302,
  Designer, // 302 + 1
}

let yamoo9:number = Team.Manager; // (enum member) Team.Manager = 101
let sarha:number = Team.Designer; // (enum member) Team.Designer = 303

let role:string = Team[302]; // 'Developer'

문자형 이넘

멤버 전부 특정 문자 또는 다른 이넘 값으로 초기화해야 함
숫자형 이넘과 달리 auto incrementing 적용 안됨

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

복합 이넘

문자와 숫자를 혼합하여 생성 가능
권고하지 않음. 같은 타입으로 이뤄진 이넘을 사용할 것

enum BooleanLikeHeterogeneousEnum {
    No = 0,
    Yes = "YES",
}

런타임 시점, 컴파일 시점의 이넘 특징

런타임 시점의 이넘은 실제 객체 형태로 존재함
keyof 를 사용해야 하는 상황에선 keyof typeof 를 사용

enum LogLevel {
  ERROR, WARN, INFO, DEBUG
}

// 'ERROR' | 'WARN' | 'INFO' | 'DEBUG';
type LogLevelStrings = keyof typeof LogLevel;

function printImportant(key: LogLevelStrings, message: string) {
    const num = LogLevel[key];
    if (num <= LogLevel.WARN) {
       console.log('Log level key is: ', key);
       console.log('Log level value is: ', num);
       console.log('Log level message is: ', message);
    }
}
printImportant('ERROR', 'This is a message');

리버스 매핑 (Reverse Mapping)

이넘의 키로 값을 얻을수 있고, 반대로 값으로 키를 얻을수도 있음
숫자형 이넘에만 존재하는 특징

enum Enum {
  A
}
let a = Enum.A; // 키로 값을 획득 하기
let keyName = Enum[a]; // 값으로 키를 획득 하기

연산자를 이용한 타입 정의

유니온 타입 (Union): |

OR 연산자처럼 A이거나 B이다 라는 의미
타입 여러개를 연결함

// 문자열 타입, 숫자 타입 둘다 가능
function logText(text: string | number) { ... }

유니온 타입의 장점

// any를 사용하는 경우
function getAge(age: any) {
  age.toFixed();
// 에러 발생, age의 타입이 any로 추론되기 때문에
// 숫자 관련된 API를 작성할 때 코드가 자동 완성되지 않음
  return age;
}

// 유니온 타입을 사용하는 경우
function getAge(age: number | string) {
  if (typeof age === 'number') {
    age.toFixed();
// 정상 동작, age의 타입이 `number`로 추론되기 때문에
// 숫자 관련된 API를 쉽게 자동완성 할 수 있음
    return age;
  }
  if (typeof age === 'string') {
    return age;
  }
  return new TypeError('age must be number or string');
}

Union 사용 시 주의할 점

타입스크립트 관점에선 함수 호출 시, 정의된 유니온 타입 중에 무엇이 올 지 모름
함수 안에서 별도로 타입별 동작을 설정하지 않는 이상, 기본적으로는 유니온 타입에

공통적으로 들어있는 속성만 접근 가능

interface Person {
  name: string;
  age: number;
}

interface Developer {
  name: string;
  skill: string;
}

// ver1.
function introduce(someone: Person | Developer) {
  someone.name; // O 정상 동작
  someone.age; // X 타입 오류
  someone.skill; // X 타입 오류
}

// ver2.
function introduce(someone: Person | Developer) {
  console.log(someone.name); // O 정상 동작
}

// ver3.
function introduce(someone: Person | Developer) {
  if (typeof someone === 'Person') {
    console.log(someone.age); // O 정상 동작
  }
  if (typeof someone === 'Developer') {
		console.log(someone.skill); // O 정상 동작
  }
}

인터섹션 타입 (Intersection): &

여러 타입을 모두 만족하는 하나의 타입을 의미
여러 타입 정의를 하나로 합침

interface Person {
  name: string;
  age: number;
}

interface Developer {
  name: string;
  skill: number;
}

type Capt = Person & Developer;

type Capt = {
  name: string;
  age: number;
  skill: number;
}

서로 이름만 같고 타입이 다른 속성은 합쳐질 때 두 타입의 공통된 부분만을 타입으로 갖게 됨

interface Person {
  name: string;
	age: string | number;
}

interface Developer {
  name: number;
	age: number;
}

type Capt = Person & Developer;

type Capt = {
  name: never;
	age: number;
}

참고 자료

타입스크립트 핸드북

[타입스크립트 핸드북] 함수, 인터페이스

CheeseB — Sun, 16 Oct 2022 15:00:00 GMT

노션으로 작성한 글을 옮긴 게시글입니다.

함수

함수의 기본적인 타입 선언

// js
function sum(a, b) {
  return a + b;
}

// ts
function sum(a: number, b: number): number {
  return a + b;
}

// ts (void function)
function sum(a: number, b: number): void {
  console.log(a+b);
}

함수의 인자

함수의 인자를 모두 필수 값으로 간주
정의된 매개변수 외에 추가로 인자를 받거나, 그보다 더 적게 받을 수 없음

function sum(a: number, b: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // error, too few parameters

인자 안받아도 작동하게끔 하고싶으면 해당 인자에 물음표 기호 사용

function sum(a: number, b?: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // 타입 에러 없음

매개변수 초기화는 ES6 문법과 동일

function sum(a: number, b = '100'): number {
  return a + b;
}
sum(10, undefined); // 110
sum(10, 20, 30); // error, too many parameters
sum(10); // 110

Rest 문법이 적용된 매개변수

function sum(a: number, ...nums: number[]): number {
  const totalOfNums = 0;
  for (let key in nums) {
    totalOfNums += nums[key];
  }
  return a + totalOfNums;
}

함수의 this

타입스크립트에선 this 가 가리키는 것을 명시할 수 있음
- this가 잘못 사용되는 것을 방지

function 함수명(this: 타입) {
  // ...
}

interface Vue {
  el: string;
  count: number;
  init(this: Vue): () => {};
}

let vm: Vue = {
  el: '#app',
  count: 10,
  init: function(this: Vue) {
    return () => {
      return this.count;
    }
  }
}

let getCount = vm.init();
let count = getCount();
console.log(count); // 10

콜백에서의 This

interface UIElement {
  // 'this: void' 코드는 함수에 this 타입을 선언할 필요가 없다는 의미
  addClickListener(onclick: (this: void, e: Event) => void): void;
}

class Handler {
    info: string;
    onClick(this: Handler, e: Event) {
        // 인터페이스의 스펙에선 this가 필요없다고 했지만 사용했기 때문에 에러발생
        this.info = e.message;
    }
}

let handler = new Handler();
uiElement.addClickListener(handler.onClick); // error!

// 변경 후
class Handler {
    info: string;
    onClick(this: void, e: Event) {
        console.log('clicked!');
    }
}
let handler = new Handler();
uiElement.addClickListener(handler.onClick);

인터페이스

인터페이스란

상호 간에 정의한 약속 혹은 규칙을 의미

타입스크립트의 인터페이스

일반적으로 타입 체크에 사용됨 - 여러 타입을 갖는 요소들로 이뤄진 새로운 타입
변수, 함수, 클래스에 사용 가능

변수와 인터페이스

인터페이스는 변수의 타입으로 사용할 수 있음 (새로운 타입 정의)
인터페이스를 타입으로 선언한 변수는 해당 인터페이스를 준수해야 함

// 인터페이스의 정의
interface Todo {
  id: number;
  content: string;
  completed: boolean;
}

// 변수 todo의 타입으로 Todo 인터페이스를 선언
let todo: Todo;

// 변수 todo는 Todo 인터페이스를 준수해야 함
todo = { id: 1, content: 'typescript', completed: false };

인터페이스로 함수 파라미터의 타입 선언도 가능
해당 함수에는 지정한 인터페이스를 준수하는 타입의 인자를 전달해야 함

// 인터페이스의 정의
interface Todo {
  id: number;
  content: string;
  completed: boolean;
}

let todos: Todo[] = [];

// 파라미터 todo의 타입으로 Todo 인터페이스를 선언
function addTodo(todo: Todo) {
  todos = [...todos, todo];
}

// 파라미터 todo는 Todo 인터페이스를 준수해야 함
const newTodo: Todo = { id: 1, content: 'typescript', completed: false };
addTodo(newTodo);
console.log(todos)
// [ { id: 1, content: 'typescript', completed: false } ]

함수와 인터페이스

인터페이스는 함수의 타입으로 사용 가능
타입이 선언된 파라미터 리스트와 리턴 타입을 정의함

// 함수 인터페이스의 정의
interface SquareFunc {
  (num: number): number;
}

// 함수 인테페이스를 구현하는 함수는 인터페이스를 준수해야 함
const squareFunc: SquareFunc = function (num: number) {
  return num * num;
}

console.log(squareFunc(10)); // 100

클래스와 인터페이스

클래스 선언문의 implements 뒤에 인터페이스를 선언하면 해당 클래스는

지정된 인터페이스를 준수해야 함

클래스의 일관성을 유지할 수 있음
인터페이스는 프로퍼티, 메서드를 가질 수 있다는 점에서 클래스와 유사하지만,

직접 인스턴스를 생성할 수는 없음

// 인터페이스의 정의
interface ITodo {
  id: number;
  content: string;
  completed: boolean;
}

// Todo 클래스는 ITodo 인터페이스를 구현해야 함
class Todo implements ITodo {
  constructor (
    public id: number,
    public content: string,
    public completed: boolean
  ) { }
}

const todo = new Todo(1, 'Typescript', false);

console.log(todo);

인터페이스는 메서드도 포함할 수 있지만, 모든 메서드는 추상 메서드임

// 인터페이스의 정의
interface IPerson {
  name: string;
  sayHello(): void;
}

/*
인터페이스를 구현하는 클래스는
인터페이스에서 정의한 프로퍼티와 추상 메소드를 반드시 구현해야 함
*/
class Person implements IPerson {
  // 인터페이스에서 정의한 프로퍼티의 구현
  constructor(public name: string) {}

  // 인터페이스에서 정의한 추상 메소드의 구현
  sayHello() {
    console.log(`Hello ${this.name}`);
  }
}

function greeter(person: IPerson): void {
  person.sayHello();
}

const me = new Person('Lee');
greeter(me); // Hello Lee

덕 타이핑 (구조적 타이핑)

해당 인터페이스에서 정의한 프로퍼티나 메소드를 가지고 있다면

그 인터페이스를 구현한 것으로 인정함

interface IDuck { // 1
  quack(): void;
}

class MallardDuck implements IDuck { // 3
  quack() {
    console.log('Quack!');
  }
}

class RedheadDuck { // 4
  quack() {
    console.log('q~uack!');
  }
}

function makeNoise(duck: IDuck): void { // 2
  duck.quack();
}

makeNoise(new MallardDuck()); // Quack!
makeNoise(new RedheadDuck()); // q~uack! // 5

interface IPerson {
  name: string;
}

function sayHello(person: IPerson): void {
  console.log(`Hello ${person.name}`);
}

const me = { name: 'Lee', age: 18 };
sayHello(me); // Hello Lee

선택적 프로퍼티

선택적으로 필요한 프로퍼티명 뒤에 ? 를 붙이면 생략해도 에러가 발생하지 않음

interface UserInfo {
  username: string;
  password: string;
  age?    : number;
  address?: string;
}

const userInfo: UserInfo = {
  username: 'ungmo2@gmail.com',
  password: '123456'
}

인터페이스 상속

인터페이스도 extends 키워드로 인터페이스나 클래스를 상속받을 수 있음

interface Person {
  name: string;
  age?: number;
}

interface Student extends Person {
  grade: number;
}

const student: Student =  {
  name: 'Lee',
  age: 20,
  grade: 3
}

복수의 인터페이스를 상속받는 것도 가능

interface Person {
  name: string;
  age?: number;
}

interface Developer {
  skills: string[];
}

interface WebDeveloper extends Person, Developer {}

const webDeveloper: WebDeveloper =  {
  name: 'Lee',
  age: 20,
  skills: ['HTML', 'CSS', 'JavaScript']
}

인터페이스는 클래스를 상속받을 땐 모든 멤버(public, protected, private)가 상속되지만

구현까지 상속하진 않음

class Person {
  constructor(public name: string, public age: number) {}
}

interface Developer extends Person {
  skills: string[];
}

const developer: Developer =  {
  name: 'Lee',
  age: 20,
  skills: ['HTML', 'CSS', 'JavaScript']
}

읽기 전용 속성 (readonly)

인터페이스로 객체를 처음 생성할 때만 값을 할당하고 그 이후에는 변경할 수 없는 속성

interface CraftBeer {
  readonly brand: string;
}

let myBeer: CraftBeer = {
  brand: 'Belgian Monk'
};
myBeer.brand = 'Korean Carpenter'; // error!

참고 자료

타입스크립트 핸드북

[타입스크립트 핸드북] 기본 타입

CheeseB — Fri, 14 Oct 2022 15:00:00 GMT

노션으로 작성한 글을 옮긴 게시글입니다.

타입스크립트의 기본 타입 12가지

Boolean , Number , String
Object , Array , Tuple , Enum
Any , Void , Null , Undefined , Never

let str: string = 'hi';
let num: number = 10;
let isLoggedIn: boolean = false;

배열은 제네릭을 사용해서도 선언 가능

let arr: number[] = [1,2,3];
let arr: Array<number> = [1,2,3];

ReadonlyArray 를 사용하면 읽기 전용 배열 생성 가능

let arr: ReadonlyArray<number> = [1,2,3];
arr.splice(0,1); // error
arr.push(4); // error
arr[0] = 100; // error

Tuple

배열의 길이가 고정되고, 각 요소의 타입이 지정되어 있음

정의하지 않은 타입, 인덱스로 접근할 경우 오류 발생

let arr: [string, number] = ['hi', 10];

arr[1].concat('!'); // Error, 'number' does not have 'concat'
arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.

Enum

특정 값(상수) 들의 집합을 의미

인덱스 번호로도 접근 가능
인덱스를 임의로 변경하여 사용하는 것도 가능

enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;

// 인덱스 번호로 접근
let hero: Avengers = Avengers[0];

// 인덱스 임의 변경
enum Avengers { Capt = 2, IronMan, Thor }
let hero: Avengers = Avengers[2]; // Capt
let hero: Avengers = Avengers[4]; // Thor

Any

모든 타입을 허용

기존 자바스크립트에 타입스크립트를 점진적으로 적용할 때 활용하면 좋음
그 외에는 사용을 지양

let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

Void

변수는 undefined, null 만 허용 / 함수는 결과값을 반환하지 않음

let unuseful: void = undefined;
function notuse(): void {
  console.log('sth');
}

Never

항상 오류를 출력하거나 리턴값을 절대로 내보내지 않는 함수

일반적으로 함수의 리턴 타입으로 사용됨
무한 루프에 빠지는 것과 같이, 절대 정상적으로 끝까지 실행되지 않는 함수
변수 타입으로 지정하면 해당 변수는 never 타입 외에 어떤것도 할당 불가
변수 타입으로 지정하면 해당 변수는 never 타입 외에 어떤것도 할당 불가

// 항상 오류 발생
function invalid(message:string): never {
  throw new Error(message);
}

// never
function neverEnd(): never {
  while (true) {}
}

let never_type:never;

// 오류 발생: 숫자 값을 never 타입 변수에 할당할 수 없습니다.
never_type = 99;

// 함수의 반환 값이 never 타입 이기 때문에 오류가 발생하지 않습니다.
never_type = (function():never { throw new Error('ERROR') })();

never 타입의 쓰임새

타입스크립트의 Never 타입 완벽 가이드

참고 자료

타입스크립트 핸드북

[자바스크립트] 자바스크립트 코드 해석 순서, 호이스팅

CheeseB — Mon, 16 Aug 2021 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

자바스크립트 코드 해석 순서

예시

debugger;
var title = "js";
function getTitle() {
  return title;
}
var readTitle = function () {};
getTitle();

기본 순서는 위에서 아래로!

함수 선언문 해석 (getTitle)
변수 undefined로 초기화 (title, readTitle)
코드 실행 (debugger - title 할당 - readTitle 할당 - getTitle 실행)

1번 과정을 다 거친 후 다시 코드 맨 처음으로 돌아와서 2번, 그다음 다시 코드 처음부터 3번 과정을 거침.
이로 인해 변수와 함수의 호이스팅이 가능한 것.

주의할 점: 초기화 단계(2단계)에서 이미 값이 있는 변수는 초기화하지 않음
이미 함수 선언문으로 작성한 함수와 같은 이름의 함수를 함수 표현식으로(readTitle처럼) 작성한 경우
2단계에서 undefined로 초기화하지 않고 기존의 값을 유지함.
그 후 3단계에서 비로소 재정의 됨.

호이스팅 예시

console.log(getBook()); // 2

function getBook() {
  return "1";
}

console.log(getBook()); // 2

function getBook() {
  return "2";
}

console.log(getBook()); // 2

console.log(getBook()); // 1

function getBook() {
  return "1";
}

console.log(getBook()); // 1

var getBook = function () {
  return "2";
};

console.log(getBook()); // 2

console.log(getBook()); // 2

var getBook = function () {
  return "1";
};

console.log(getBook()); // 1

function getBook() {
  return "2";
}

console.log(getBook()); // 1

console.log(getBook); // undefined

var getBook = function () {
  return "1";
};

console.log(getBook()); // 1

var getBook = function () {
  return "2";
};

console.log(getBook()); // 2

[VScode] VScode에 eslint, prettier 적용하기

CheeseB — Sat, 17 Jul 2021 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

그냥 자바스크립트

https://sunmon.github.io/vscode-eslint-prettier-setting/

리액트

https://velog.io/@velopert/eslint-and-prettier-in-react

[SQL] Day10 - 기타 스키마 객체

CheeseB — Sun, 17 Jan 2021 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

뷰(VIEW)

개요

뷰(VIEW): 테이블이나 다른 뷰를 기초롤 하는 논리적 테이블
- 그 자체로 소유하는 데이터는 없음
- 창문처럼 어떤 데이터를 보거나 변경 가능
- 뷰에서 참조하는 테이블을 기본 테이블(Base Table)이라 함
뷰 사용 목적 및 특징
- DB에서 선택적으로 데이터를 보여줌으로써 DB접근 제한 가능
- 복잡한 질의로부터 결과를 검색하기 위한 단순한 질의를 만들수 있음
- 조인을 한것처럼 여러 테이블에 대한 테이터를 뷰를 통해 볼 수 있음
뷰 종류
- 단순 뷰: 1개의 테이블로 구성
- 복합 뷰: 여러개의 테이블로 구성

뷰 작성

CREATE VIEW 권한을 가져야 뷰 생성 가능
서브쿼리에 복잡한 SELECT문을 정의 가능하며, ORDER BY를 사용하려면 검색 시 뷰에 기술함

-- sys --
GRANT CREATE VIEW TO scott;

-- scott --
CREATE VIEW emp_view
AS
SELECT empno, ename, sal, hiredate
FROM emp
WHERE empno = 10;

작성한 뷰 확인

SELECT view_name
FROM user_views;

뷰를 수정하려면 CREATE OR REPLACE 사용

CREATE OR REPLACE VIEW emp_view
AS
SELECT e.empno, e.ename, d.dname, d.deptno
FROM emp e JOIN dept d
ON e.deptno = e.deptno
WHERE e.deptno = 20;

뷰에서 함수 사용 시 반드시 결과값에 별칭을 부여해야 함

CREATE VIEW emp_view4
AS
SELECT deptno, SUM(sal) 총합
FROM emp
GROUP BY deptno;

뷰에서 DML을 사용하면 원본 테이블에도 적용됨

DELETE FROM emp_view5
WHERE deptno = 20;

WITH CHECK OPTION 사용 시 WHERE 조건에 해당하는 데이터만 INSERT, UPDATE를 수행할 수 있음

CREATE OR REPLACE VIEW emp_view6
AS
SELECT empno, ename, sal, deptno
FROM emp
WHERE deptno = 30
WITH CHECK OPTION;

UPDATE emp_view6
SET deptno = 40
WHERE empno = 7521; -- error!

WITH READ ONLY 옵션이 붙은 뷰는 DML작업이 불가함

CREATE OR REPLACE VIEW dpet_view
AS
SELECT * FROM dept
WHERE deptno = 10
WITH READ ONLY;

UPDATE emp_view
SET deptno = 20
WHERE ename = 'KING';

뷰 제거
- 기본 테이블에는 영향을 미치지 않음

DROP VIEW dept_view;

인라인 뷰도 뷰의 일종
- SQL문이 실행되는 동안만 임시적으로 사용

SELECT e.deptno, total_sum, total_avg, cnt
FROM (SELECT deptno, SUM(sal) total_sum, AVG(sal) total_avg, COUNT(*) cnt
      FROM emp
      GROUP BY deptno) e, dept d
WHERE e.deptno = d.deptno;

시퀀스(SEQUENCE)

개요

시퀀스(SEQUENCE): 여러 사용자들이 공유하는 DB객체로서, 호출될 때마다 중복되지 않은 고유한 숫자를 리턴함
- 기본키 컬럼에 사용할 값을 발생시키는 데 주로 사용함

CREATE SEQUENCE 시퀀스명
INCREMENT BY n -- 얼마씩 증가할지
START WITH n -- 시작할 값
MAXVALUE n / NOMAXVALUE -- 시퀀스 최대값
MINVALUE n / NOMINVALUE -- 사이클일 경우 다음 사이클부터 시작할 값
CYCLE / NOCYCLE -- 반복할지 안할지
CACHE n / NOCACHE -- 미리 값 지정
-- CACHE는 오라클 강제종료 시 이상한 값이 될수 있으므로
-- 가급적 노캐시로 하는것 추천

시퀀스 작성

CREATE SEQUENCE emp_seq
INCREMENT BY 1
START WITH 100
MAXVALUE 9999
NOCACHE
NOCYCLE;

SELECT sequence_name
FROM user_sequences; -- 만든 시퀀스 확인

NEXTVAL: 지정된 시퀀스에서 순차적인 시퀀스 번호 추출
- 시퀀스명.NEXTVAL
CURRVAL: 방금 추출한 시퀀스 번호 참조
- 시퀀스명.CURRVAL
- 반드시 NEXTVAL로 번호를 추출한 후에 사용해야 함

SELECT emp_seq.NEXTVAL, emp_seq.CURRVAL
FROM dual;

INCREMENT BY를 음수로 하고 사이클 돌리면 값이 점점 감소하며, MINVALUE 도달 시 MAXVALUE로 다음 사이클 넘어감

CREATE SEQUENCE emp_seq2
START WITH 100
INCREMENT BY -10
MINVALUE 10
MAXVALUE 150
NOCACHE
CYCLE;

ALTER SEQUENCE로 시퀀스 수정 가능
- START WITH 부분은 수정이 안되므로 DROP 후에 다시 생성해야함

ALTER SEQUENCE emp_seq2
INCREMENT BY -20
NOCYCLE
NOCACHE;

테이블에 시퀀스 사용

CREATE TABLE dept06
(deptno NUMBER(4) PRIMARY KEY,
 dname  VARCHAR2(15),
 loc VARCHAR2(15));

CREATE SEQUENCE dept_deptno_seq4
START WITH 10
INCREMENT BY 10
NOCACHE;

INSERT INTO dept06
VALUES (dept_deptno_seq4.NEXTVAL, '개발', '서울');
INSERT INTO dept06
VALUES (dept_deptno_seq4.NEXTVAL, '인사', '경기');

SELECT * FROM dept06;
-- 10	개발	서울
-- 20	인사	경기

시퀀스 삭제

DROP SEQUENCE dept_deptno_seq4;

동의어(SYNONYM)

정의

시노님(SYNONYM: 동의어): 객체에 대한 별칭
- 객체에 대한 접근방법을 단순화 할 수 있음(보안문제 해결)
- 객체이름 길이 단축 가능

CREATE SYNONYM 동의어 이름
FOR 테이블명;

동의어 작성

-- sys --
GRANT CREATE SYNONYM TO scott;

-- scott --
CREATE SYNONYM d_syn
FOR dept;

SELECT * FROM d_syn;
INSERT INTO d_syn VALUES (80, 'AA', 'AA');

다른 계정에서 동의어를 생성하면 스키마.테이블명 이렇게 쓸 필요 없이 동의어 사용 가능

-- sys --
SELECT * FROM scott.dept;
CREATE SYNONYM dept_s FOR scott.dept;
SELECT * FROM dept_s;

인덱스(INDEX)

개요

인덱스(INDEX): 테이블에서 행을 검색할 때 검색속도를 높이기 위해 오라클 서버에서 사용하는 스키마 객체 (데이터의 실제 저장위치인 ROWID를 저장, 관리함)
- 인덱스 없이 데이터를 검색하면 테이블의 모든 데이터를 읽고 선별함(Full Scan)
- 인덱스를 사용하면 디스크 I/O 를 감소시킬 수 있음
- 해당 테이블과 논리적으로 독립적임
- 오라클 서버에 의해 자동으로 사용 및 관리됨
- 테이블을 삭제하면 관련 인덱스는 자동 삭제됨
인덱스 생성
- 자동 생성
  - PRIMARY KEY, UNIQUE 제약조건 지정 시 UNIQUE INDEX가 자동 생성됨
- 수동 생성: non-unique 인덱스/ unique 인덱스
  - 한 개의 컬럼이나 여러 컬럼(복합 인덱스)을 이용해 인덱스 생성 가능
인덱스를 사용할 컬럼 선정
- 값의 범위가 넓은 컬럼 (값이 다양할수록 좋음)
- NULL값이 많은 컬럼 (NULL은 인덱스에 포함 안되므로 인덱스 크기가 감소)
- WHERE절이나 JOIN조건에 사용되는 컬럼
인덱스가 반드시 성능을 향상시키는 것은 아님.
테이블에 DML작업을 수행하면 관련 인덱스도 변경되어야 하므로 오히려 속도가 저하됨
인덱스를 작성할 필요가 없는경우
- 테이블이 작을때
- 쿼리문의 조건에 자주 사용되지 않는 컬럼
- 테이블이 자주 변경될때
- 대부분의 쿼리문이 전체 데이터의 2~4% 이상을 검색하는 경우
- 인덱스가 작성된 컬럼이 조건의 표현식(함수, not 등)에 포함된 경우

인덱스 작성

SELECT * FROM emp WHERE ename = 'SMITH'; -- 0.055초

CREATE INDEX emp_ename_idx ON emp(ename);

SELECT * FROM emp WHERE ename = 'SMITH'; -- 0.025초

[SQL] Day10 - 사용자 관리

CheeseB — Sun, 17 Jan 2021 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

사용자 관리

DB 보안 종류

시스템 보안: 인증 관련
- 사용자 계정 생성, 암호변경, 디스크 공간할당 등 시스템 수준에서의 DB접근 및 사용 관리
데이터 보안: 권한 관련
- DB객체에 대한 사용자들의 접근 및 사용 관리

사용자 생성 및 비밀번호 변경

DB관리자가 사용자를 생성하고 비밀번호를 변경함
생성된 사용자는 아무 권한도 부여받지 않아 어떠한 작업도 불가함

-- 유저 생성
CREATE USER 유저명 IDENTIFIED BY 비밀번호;

-- 유저 비밀번호 변경
ALTER USER 유저명 IDENTIFIED BY 비밀번호;

CREATE USER user01 IDENTIFIED BY oracle;

ALTER USER user01 IDENTIFIED BY user01;

권한 (Privilege)

DBA가 일반 사용자에게 DB나 DB 객체에 접근할 권한을 부여할 수 있음
일반 사용자도 다른 사용자 또는 롤(Role) 에게 권한을 부여할수 있는 권한을 부여받을 수 있음
- WITH GRANT OPTION
권한 종류
- 시스템 권한: 사용자의 DB 접근권한(DBA가 부여함)
  - 사용자가 DB에 특별한 작업을 수행할수 있도록 해줌
- 객체 권한: DB내의 객체의 내용을 조작하기 위한 권한
  - 사용자가 특정 객체에 접근하고 조작하는것을 가능하게 해줌
  - 사용자는 자신의 스키마에 저장된 모든 객체에 대해 권한을 가짐
시스템 권한
객체 권한

권한 부여 및 회수

시스템 권한

-- 권한 부여
GRANT 권한 TO 유저;

-- 권한 회수
REVOKE 권한 FROM 유저;

GRANT CREATE SESSION, CREATE TABLE TO user01;
REVOKE CREATE SESSION, CREATE TABLE FROM user01;

객체 권한

-- 권한 부여
GRANT 권한 ON 객체 TO 유저;

-- scott --
GRANT UPDATE(loc) ON dept TO user01;

-- user01 --
UPDATE scott.dept
SET dname = '인사'; -- error!

UPDATE scott.dept
SET loc = 'AAA';

WITH GRANT OPTION 사용하면 부여받은 권한을 다른 사용자에게 부여할 수 있음
- REVOKE로 권한 회수 시 WITH GRANT OPTION에 의해 다른 사람에게 부여된 권한도 연쇄적으로 회수됨

-- scott --
GRANT SELECT, INSERT
ON dept
TO user01
WITH GRANT OPTION;

-- user01 --
GRANT SELECT
ON scott.dept
TO public;

롤(Role)

롤(Role): 권한들의 묶음
- 일반 사용자에게 권한을 부여 및 회수하듯이 롤에게 권한 부여 및 회수가 가능함
- 롤은 시스템 권한과 객체 권한으로 구성됨
- 각 사용자에게 부여된 롤은 활성화/비활성화가 가능함
- 특정 사용자가 소유하는 것이 아니므로 어떤 스키마에도 저장되지 않음
롤 장점
- 편리한 권한 관리
- 동적 권한 관리
  - 롤과 관련된 권한이 변경화면 롤 부여받은 모든 사용자들의 권한이 자동으로 변경됨
- 권한의 선택적 가용성 (활성화/비활성화 가능)

GRANT CONNECT, RESOURCE TO tester01;

기존에 있는 롤 말고도 직접 롤을 만들수 있음

-- 3가지 권한 가진 롤 생성
CREATE ROLE clerk;

GRANT create session, create table
TO clerk;

GRANT select
ON scott.dept
TO clerk;

-- user03에게 롤 부여
GRANT clerk TO user03;

부여된 권한 확인

-- 시스템 권한 확인
SELECT grantee, privilege FROM dba_sys_privs
WHERE grantee = 'CLERK';

-- 객체 권한 확인
SELECT grantee, privilege FROM dba_tab_privs
WHERE grantee = 'CLERK';

계정 잠금

기존 계정의 잠금/잠금 해제

ALTER USER scott ACCOUNT LOCK;
ALTER USER 사용자명 ACCOUNT UNLOCK;

중요내용 정리

아래 세가지 명령어만 잘 알아둬도 유저 생성 및 권한부여는 됨

CREATE USER tester01 IDENTIFIED BY test;
ALTER USER tester01 IDENTIFIED BY tester01;
GRANT CONNECT, RESOURCE TO tester01;

[SQL] Day9 - DDL(2)

CheeseB — Thu, 14 Jan 2021 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

테이블 삭제 (DROP, TRUNCATE)

DROP: 테이블 삭제
- 테이블에 저장된 모든 데이터, 인덱스 및 제약조건이 전부 삭제됨 (FK 제외)
- FK까지 삭제하려면 CASCADE CONSTRAINTS 옵션 사용
FLASHBACK: 삭제된 테이블 복구

DROP TABLE 테이블명;

DROP TABLE dept_new CASCADE CONSTRAINTS;

SHOW RECYCLEBIN; -- DB휴지통 보기
FLASHBACK TABLE dept_new TO BEFORE DROP;

TRUNCATE: 테이블 잘라내기
- 테이블의 모든 행들을 삭제함
- 테이블이 사용하던 저장공간을 해제 (DELETE는 저장공간을 해제하진 않음)
- ROLLBACK 정보를 발생시키지 않아 DELETE보다 수행속도가 빠르지만 ROLLBACK이 불가함

TRUNCATE TABLE 테이블명;

테이블 변경 (ALTER)

RENAME: 테이블 이름 변경

RENAME 테이블명 TO 새 테이블명;

ALTER: 테이블 변경
- 컬럼: 새 컬럼 추가, 기존 컬럼 수정/삭제/이름변경
- 제약조건: 추가/삭제, 활성화/비활성화
- 테이블 읽기모드(READ ONLY)
컬럼 추가

ALTER TABLE 테이블명
ADD (컬럼명 데이터타입,
	 컬럼명 데이터타입,
	 ...);

ALTER TABLE emp04
ADD (email		VARCHAR2(10),
	 address	VARCHAR2(20));

컬럼 변경
- 숫자, 문자 컬럼의 전체 길이 증가/축소
  - 축소는 모든 행의 컬럼값이 NULL이거나 행이 없는경우 가능
- 데이터 타입 변경
  - 모든 행의 컬럼값이 NULL일 때만 가능
- 디폴트 값을 변경하면 변경 이후에 입력된 행에만 적용됨

ALTER TABLE 테이블명
MODIFY (컬럼명 데이터타입,
		컬럼명 데이터타입,
		...);

ALTER TABLE scott_t
MODIFY (num		NUMBER(6),
        name	VARCHAR2(20));

컬렴 이름 변경

ALTER TABLE 테이블명
RENAME COLUMN 컬럼명 TO 새 컬럼명;

ALTER TABLE scott_t
RENAME COLUMN address TO addr;

컬렴 삭제
- CASCADE CONSTRAINTS 옵션 사용하면 해당 컬럼 참조하는 모든 제약조건 삭제됨
- 삭제된 컬럼이 포함된 모든 제약조건도 삭제

ALTER TABLE 테이블명
DROP (컬럼명);

ALTER TABLE emp04
DROP (email);

CREATE TABLE scott_cas
(pk NUMBER PRIMARY KEY,
 fk NUMBER,
 c1 NUMBER,
 c2 NUMBER,
 CONSTRAINT scott_cas_fk FOREIGN KEY(fk) REFERENCES scott_cas(pk),
 CONSTRAINT scott_cas_ck1 CHECK(pk>10 AND c1>10),
 CONSTRAINT scott_cas_ck2 CHECK(c2 > 10));

INSERT INTO scott_cas VALUES(11, 11, 21, 22);
INSERT INTO scott_cas VALUES(12, 11, 31, 32);

SELECT constraint_name, column_name
FROM user_cons_columns
WHERE table_name = 'SCOTT_CAS';
-- SCOTT_CAS_CK1	PK
-- SCOTT_CAS_CK1	C1
-- SCOTT_CAS_CK2	C2
-- SYS_C007157		PK
-- SCOTT_CAS_FK		FK

ALTER TABLE scott_cas
DROP(pk); -- error! (cannot drop parent key column)

ALTER TABLE scott_cas
DROP(c1); -- error! (column is referenced in a multi-column constraint)

ALTER TABLE scott_cas
DROP(pk) CASCADE CONSTRAINTS;

SELECT constraint_name, column_name
FROM user_cons_columns
WHERE table_name = 'SCOTT_CAS';
-- SCOTT_CAS_CK2	C2

제약조건 추가

ALTER TABLE 테이블명
ADD CONSTRAINT 제약조건명 제약종류(컬럼)

CREATE TABLE scott_t3
(num    NUMBER(4),
 name   VARCHAR2(10));

-- PK 추가 --
ALTER TABLE scott_t3
ADD CONSTRAINT scott_t3_num_pk PRIMARY KEY(num);

-- NN 추가 --
ALTER TABLE scott_t3
MODIFY (name VARCHAR2(10) NOT NULL);

제약조건 삭제
- CASCADE 옵션은 모든 종속적인 제약조건을 같이 삭제함
- PK, UK는 그냥 써도 되고 나머진 제약조건명을 명시해야 함

ALTER TABLE 테이블명
DROP PRIMARY KEY/ UNIQUE(컬럼)/
	 CONSTRAINT 제약조건명;

SELECT constraint_name, table_name, column_name
FROM user_cons_columns
WHERE table_name = 'SCOTT_T3';
--SCOTT_T3_NUM_PK	SCOTT_T3	NUM
--SYS_C007152		SCOTT_T3	NAME

ALTER TABLE scott_t3
DROP CONSTRAINT sys_c007148;

SELECT constraint_name, table_name, column_name
FROM user_cons_columns
WHERE table_name = 'SCOTT_T3';
--SCOTT_T3_NUM_PK	SCOTT_T3	NUM

ALTER TABLE scott_t3
DROP PRIMARY KEY CASCADE;

SELECT constraint_name, table_name, column_name
FROM user_cons_columns
WHERE table_name = 'SCOTT_T3';
-- (비어있음)

제약조건 활성화/비활성화
- CASCADE 옵션 추가 시 해당 제약조건과 관련된 제약조건 모두를 비활성화함

ALTER TABLE 테이블명
DISABLE/ENABLE CONSTRAINT 제약조건명;

CREATE TABLE scott_t4
(num    NUMBER(4) CONSTRAINT scott_t4_num_pk PRIMARY KEY,
 name   VARCHAR(10));

SELECT STATUS
FROM user_constraints
WHERE table_name = 'SCOTT_T4';  -- ENABLED

ALTER TABLE scott_t4
DISABLE CONSTRAINT scott_t4_num_pk;

SELECT STATUS
FROM user_constraints
WHERE table_name = 'SCOTT_T4'; -- DISABLED

ALTER TABLE scott_t4
ENABLE CONSTRAINT scott_t4_num_pk;

SELECT STATUS
FROM user_constraints
WHERE table_name = 'SCOTT_T4'; -- ENABLED

[SQL] Day8 - DDL(1)

CheeseB — Wed, 13 Jan 2021 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

DDL (Data Definition Language: 데이터 정의어)

DDL

데이터베이스 구조(객체)를 생성, 수정, 삭제하는 데 사용
실제 DB에 즉각 반영되며, DB사전에 정보를 기록함
DDL 종류
- CREATE
- ALTER
- DROP
- RENAME
- TRUNCATE
오라클에서 사용하는 객체
- 테이블(Table)
- 뷰(View)
- 시퀀스(Sequence)
- 인덱스(Index)
- 동의어(Synonym)
스키마(schema): 특정 사용자가 DB에 접근해 생성한 객체들의 대표이름
- 일반적으로 사용자의 계정명과 동일
- 생성한 객체들은 생성한 계정이 소유하며, 다른 스키마는 기본적으로 접근이 불가함 (권한 할당 필요)
- 권한을 가진 사용자가 다른 스키마에 접근하기 위해선 ‘스키마.객체명’ 형식으로 접근해야 함

SELECT * FROM scott.dept; -- 스키마.객체명

CREATE: 테이블 생성

DB객체 이름 지정방법
- 테이블, 컬럼명은 문자로 시작하며 1 ~ 30자 이내로 작성(30byte)
- 테이블, 컬럼명은 영어 대소문자, 숫자, 특수문자(_,$,#) 로만 작성
  - 한글 작성도 가능하지만 권장하지 않음
- 동일한 사용자의 다른 객체와 이름이 중복되면 안됨
- 예약어 사용 불가
- 대소문자 구분 안함

CREATE TABLE 테이블명
(컬럼명	데이터타입,
 컬럼명	데이터타입,
 ...);

CREATE TABLE employee
(empno      NUMBER(4),
 ename      VARCHAR2(20),
 hiredate   DATE,
 sal        NUMBER(7,2));

데이터 타입 종류
- VARCHAR는 CHAR와 달리 쓴 글자 길이에 따라 차지하는 공간이 맞춰짐. 괄호안의 숫자는 최대길이

-- ROWID를 이용한 행 검색
SELECT ROWID, deptno
FROM dept;

SELECT *
FROM dept
WHERE ROWID = 'AAAE5cAAEAAAAFMAAA';

DEFAULT: 해당 컬럼에 값을 지정하지 않으면 자동으로 디폴트값이 입력됨
- NULL값이 저장되는 것을 방지

-- 일반 컬럼 --
CREATE TABLE def_table1
(num        NUMBER(2),
 writeday   DATE);

INSERT INTO def_table1(num)
VALUES(20); -- 20, (null)

INSERT INTO def_table1(num, writeday)
VALUES(2, DEFAULT); -- 2, (null)

-- DEFAULT 적용 컬럼 --
CREATE TABLE def_table2
(num        NUMBER(2),
 writeday   DATE DEFAULT SYSDATE);

INSERT INTO def_table2(num)
VALUES(20); -- 20, 21/01/14

INSERT INTO def_table2(num, writeday)
VALUES(2, DEFAULT); -- 2, 21/01/14

서브쿼리를 이용한 테이블 생성
- CTAS라고 함
- 지정된 컬럼의 개수와 서브쿼리에서 리턴된 컬럼 개수가 일치해야 함
- 새로 생성된 테이블에 컬럼, 컬럼의 데이터 타입, 데이터들이 복사되지만 not null을 제외한 제약 조건은 복사되지 않음 (Primary Key 등)

-- 그대로 복사 --
CREATE TABLE deptA
AS
SELECT *
FROM dept;

-- 컬럼명 바꾸기 --
CREATE TABLE deptB(no, name)
AS
SELECT deptno, dname
FROM dept;

-- 데이터 복사 안함 --
CREATE TABLE deptC
AS
SELECT *
FROM dept
WHERE 1=2;

제약조건 정의

부적절한 자료가 입력되는 것을 방지
테이블레벨 및 컬럼레벨에서 규칙을 적용하며(not null 제외), 테이블에서 행이 삽입/갱신/삭제될 때마다 규칙이 적용됨
- not null은 무조건 컬럼 레벨에서만 규칙 적용됨
종속성이 존재할 경우 테이블 삭제를 방지함
일시적으로 DISABLE/ENABLE 할 수도 있음
제약조건 이름은 ‘테이블명_컬럼명_제약종류(PK/FK/UK/NN/CK)’ 이렇게 짓는것을 권장

-- 컬럼 레벨
CREATE TABLE 테이블명
(컬럼명 데이터타입 CONSTRAINT 제약조건명 제약종류,
 ...);

-- 테이블 레벨
CREATE TABLE 테이블명
(컬럼명 데이터타입,
 ...,
 CONSTRAINT 제약조건명 제약종류(컬럼명))

USER_CONSTRAINTS 데이터 사전을 조회하면 테이블의 제약조건 확인 가능

SELECT *
FROM USER_CONSTRAINTS
WHERE table_name IN('DEPARTMENT', 'EMPLOYEE');
-- 테이블명 대문자로 써야함

PRIMARY KEY(PK): 테이블에 대한 기본키 생성
- 중복 불가, null 불가(UNIQUE + NOT NULL)
- 각 행을 유일하게 식별함
- 한 테이블 당 하나의 기본키만 존재 가능
  - 컬럼의 집합(복합 컬럼)은 사용 가능
  - 복합 컬럼 지정은 테이블레벨만 가능

CREATE TABLE department
(deptno NUMBER(2) CONSTRAINT department_deptno_pk PRIMARY KEY,
 dname  VARCHAR2(15),
 loc    VARCHAR2(15));

INSERT INTO department VALUES(10, '인사과', '서울');
INSERT INTO department VALUES(10, '영업', '서울'); -- error!
INSERT INTO department VALUES(NULL, '영업', '서울'); -- error!

-- 컬럼 레벨
CREATE TABLE pk_tab1
(id     NUMBER(2) CONSTRAINT pk_tab1_id_pk PRIMARY KEY,
 name   VARCHAR2(10));

-- 테이블 레벨
CREATE TABLE pk_tab2
(id     NUMBER(2),
 name   VARCHAR2(10),
 CONSTRAINT pk_tab2_id_pk PRIMARY KEY(id));

-- 복합 컬럼으로 기본키 지정
CREATE TABLE department3
(deptno NUMBER(2),
 dname  VARCHAR2(15),
 loc    VARCHAR2(15),
 CONSTRAINT department3_deptno_pk PRIMARY KEY(deptno, loc));

INSERT INTO department3 VALUES (10, 'AA', 'AA');
INSERT INTO department3 VALUES (10, 'BB', 'AA'); -- error!
INSERT INTO department3 VALUES (10, 'AA', 'BB');

-- 두 컬럼의 집합이 기본키이므로
-- deptno가 같아도 loc이 다르면 유일한 것으로 판단됨

UNIQUE(UK): 해당 컬럼에 중복을 제한함
- NULL값 저장 가능
- 복합 컬럼 사용가능
  - 복합 컬럼 지정은 테이블레벨만 가능

-- 컬럼 레벨
CREATE TABLE uni_tab1
(deptno NUMBER(2) CONSTRAINT uni_tab1_deptno_uk UNIQUE,
 dname  CHAR(14),
 LOC    CHAR(13));
 
-- 테이블 레벨
CREATE TABLE uni_tab2
(deptno NUMBER(2),
 dname  CHAR(14),
 loc    CHAR(13),
 CONSTRAINT uni_tab2_deptno_uk UNIQUE(deptno));

INSERT INTO uni_tab1 VALUES (10, 'AA', 'AA');
INSERT INTO uni_tab1 VALUES (10, 'BB', 'BB'); --error!
INSERT INTO uni_tab1 VALUES (null, 'AA', 'AA');

-- 복합 컬럼 사용
CREATE TABLE sawon
(s_no       NUMBER(2),
 s_name     VARCHAR2(10),
 s_email    VARCHAR2(20),
 CONSTRAINT sawon_uk UNIQUE(s_name, s_email));

NOT NULL(NN): 해당 컬럼에 NULL 입력을 방지
- 컬럼 레벨에서만 지정 가능
PRIMARY KEY를 UNIQUE + NOT NULL 로도 지정 가능

CREATE TABLE department6
(deptno NUMBER(4) CONSTRAINT department6_deptno_pk UNIQUE NOT NULL,
 dname  VARCHAR2(15),
 -- 그냥 loc VARCHAR2(15) NOT NULL 이렇게 써도 됨
 loc    VARCHAR2(15) CONSTRAINT department6_loc_nn NOT NULL,
 CONSTRAINT department6_dname_uk UNIQUE(dname));

CHECK(CK): 해당 컬럼에 반드시 만족해야 될 조건을 지정

CREATE TABLE sawon1
(s_no   NUMBER(2),
 s_name VARCHAR2(10),
 s_sal  NUMBER(10) CONSTRAINT sawon1_s_sal_ck CHECK(s_sal < 500));

CREATE TABLE sawon2
(s_no       NUMBER(2),
 s_name     VARCHAR2(10),
 s_gender   CHAR(3),
 CONSTRAINT sawon2_s_gender_ck CHECK(s_gender IN('남', '여')));

INSERT INTO sawon1 VALUES (10, 'AA', 400);
INSERT INTO sawon1 VALUES (20, 'BB', 500); -- error!
INSERT INTO sawon2 VALUES (10, 'AA', '남');
INSERT INTO sawon2 VALUES (20, 'AA', '뭵'); -- error!

FOREIGN KEY(FK): 테이블에 대한 외래키(참조키) 생성
- 해당 테이블에서 다른 테이블을 참조할 때 올바른 데이터만 참조 가능하도록 제약하는 방법
- 부모 테이블의 PK, UK로 정의된 열을 자식 테이블에서 지정할 수 있음 (컬럼명 동일)
  - 지정한 열의 값과 일치하거나 NULL값이어야 함
- 복합 컬럼 사용가능
- 컬럼 레벨일 땐 REFERENCES만, 테이블 레벨일 땐 FOREIGN KEY 와 REFERENCES 키워드 둘다 사용해 줘야 함

-- 부모 테이블 --
CREATE TABLE dept02
(deptno NUMBER(2) CONSTRAINT dept02_deptno_pk PRIMARY KEY,
 dname  VARCHAR2(15),
 loc    VARCHAR2(15));

INSERT INTO dept02(deptno, dname, loc) VALUES(10, '인사', '서울');
INSERT INTO dept02(deptno, dname, loc) VALUES(20, '개발', '광주');
INSERT INTO dept02(deptno, dname, loc) VALUES(30, '관리', '부산');
INSERT INTO dept02(deptno, dname, loc) VALUES(40, '영업', '경기');

-- 자식 테이블 (컬럼 레벨) --
CREATE TABLE emp02
(empno  NUMBER(4) CONSTRAINT emp02_empno_pk PRIMARY KEY,
 ename  VARCHAR2(15),
 deptno NUMBER(2) CONSTRAINT emp02_deptno_fk REFERENCES dept02(deptno));

INSERT INTO emp02 VALUES(1000, 'JOHN', 10);
INSERT INTO emp02 VALUES(2000, 'MIKE', 50); -- error(parent key not found)
-- 부모 테이블인 dept02 테이블의 deptno에 50번이 없으므로 에러남

-- 자식 테이블 (테이블 레벨) --
CREATE TABLE emp03
(empno  NUMBER(4) CONSTRAINT emp03_empno_pk PRIMARY KEY,
 ename  VARCHAR2(15),
 deptno NUMBER(2),
CONSTRAINT emp03_deptno_fk FOREIGN KEY(deptno) REFERENCES dept02(deptno));

부모 테이블에서 자식 테이블이 참조하고 있는 값이 있는 행은 삭제할 수 없음
자식테이블은 지워도 부모테이블에 영향 없음

DELETE FROM dept02
WHERE deptno = 10; -- error! (child record found)

부모 테이블의 행 삭제 시 문제될 수 있는 자식 테이블 행 설정법
- ON DELETE CASCADE: 부모 테이블의 행이 삭제되면 해당 행을 참조하는 자식 테이블의 행도 같이 삭제
- ON DELETE SET NULL: 부모 테이블의 행이 삭제되면 해당 행을 참조하는 자식 테이블의 컬럼을 NULL로 설정

-- ON DELETE CASCADE --
CREATE TABLE emp02
(empno  NUMBER(4) CONSTRAINT emp02_empno_pk PRIMARY KEY,
 ename  VARCHAR2(15),
 deptno NUMBER(2) CONSTRAINT emp02_deptno_fk REFERENCES dept02(deptno) ON DELETE CASCADE);

DELETE FROM dept02
WHERE deptno = 10;
-- deptno가 10번인 행이 부모, 자식 테이블에서 모두 삭제

-- ON DELETE SET NULL --
CREATE TABLE emp02
(empno  NUMBER(4) CONSTRAINT emp02_empno_pk PRIMARY KEY,
 ename  VARCHAR2(15),
 deptno NUMBER(2) CONSTRAINT emp02_deptno_fk REFERENCES dept02(deptno) ON DELETE SET NULL);

DELETE FROM dept02
WHERE deptno = 20;
-- deptno가 20번인 행이 부모 테이블에선 지워지고
-- 자식 테이블에선 deptno가 null이 됨

DROP 명령어로 부모 테이블 삭제 시 CASCADE CONSTRAINTS 옵션을 주어야만 삭제가 가능하며, 자식 테이블의 제약조건(FK)도 함께 삭제됨
제약조건만 사라질 뿐, 데이터는 그대로임

DROP TABLE dept02; -- error!
DROP TABLE dept02 CASCADE CONSTRAINTS;

[SQL] Day7 - DML

CheeseB — Tue, 12 Jan 2021 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

DML(Data Manipulation Language: 데이터 조작어)

DML

DB 내의 테이블에 새로운 행을 입력하거나, 수정 혹은 삭제하는 명령어
DML 종류
- INSERT
- UPDATE
- DELETE
- MERGE
DML문장에 의한 변경사항을 관리하거나, 변경사항을 하나의 논리적 트랜젝션으로 포함시키는 명령어
트랜젝션
- COMMIT
- ROLLBACK
- SAVEPOINT

INSERT

INSERT: 테이블에 데이터를 새로 입력함
- 한번에 하나의 행을 입력하는 것이 기본
- 서브쿼리를 이용해 한번에 여러행 동시입력 가능

INSERT INTO 테이블명(컬럼명)
VALUES(값);

주의사항
- INTO 절의 컬럼에 VALUES 절의 컬럼값을 일대일 대응하여 입력
- INTO 절에 컬럼명을 생략하면 테이블의 컬럼순서와 동일한 순서로 입력됨
- 데이터타입을 동일하게 해야하며, 데이터의 크기가 컬럼 크기보다 작아야함
- 문자, 날짜는 반드시 작은따옴표 쓰기

INSERT INTO dept(deptno, dname, loc)
VALUES(90, '인사과', '서울');

-- 원래 테이블의 순서와 달라도 상관없음
INSERT INTO dept(loc, dname, deptno)
VALUES('서울', '인사과', 70);

INSERT INTO dept
VALUES(80, '인사과', '서울');

데이터에 null값도 입력 가능
- 묵시적 방법: 컬럼명과 값 생략
  - INTO 절과 VAULE 절 둘다 생략해야됨 (하나만 생략하면 에러)
- 명시적 방법: 값에 null 키워드를 적거나 빈 문자열(”) 사용
  - null을 직접 쓰는것을 권장
not null 제약조건이 지정된 컬럼은 불가 (ex. Primary Key)

-- 묵시적
INSERT INTO dept(deptno, dname)
VALUES(91, '인사과');

-- 명시적
INSERT INTO dept
VALUES(92, '인사과', null);

INSERT INTO dept
VALUES(92, '인사과', '');

특수값 입력 가능 (USER, SYSDATE)

INSERT INTO emp(empno, ename, job, mgr, hiredate, sal, comm, deptno)
VALUES(9000, USER, '연구원', 7839, SYSDATE, 5000, NULL, 90);

특정 데이터타입 입력(RR/MM/DD, TO_DATE())

INSERT INTO emp
VALUES(9001, '홍길동', 'MANAGER', 7839, '2000/01/01', 2000, NULL, 30);
-- 날짜에 TO_DATE('2000-01-01', 'YYYY/MM/DD') 해도 됨

서브쿼리로 다중 행 입력 가능

-- emp로부터 열 두개만 카피한 비어있는 테이블 생성
-- 제약조건은 카피 안됨
CREATE TABLE copy_emp
AS
SELECT empno, ename
FROM emp
WHERE 1=2;

-- emp로부터 선택한 여러 행을 테이블에 삽입
INSERT INTO copy_emp(empno, ename)
SELECT empno, ename
FROM emp;

다중 테이블 다중 행 입력
- 무조건 INSERT ALL: 명시된 테이블 모두에 넣음
- 조건 INSERT ALL: 조건을 만족하는 테이블 모두에 넣음 (if문을 여러개 나열한 것과 동일)
- 조건 INSERT FIRST: 가장 먼저 만족하는 조건에 넣고, 이후의 조건은 만족해도 넣지 않음 (if-else문과 동일)

-- 무조건 INSERT ALL --
INSERT ALL
INTO sal_history VALUES(empno, hiredate, sal)
INTO mgr_history VALUES(empno, mgr, sal)
SELECT empno, hiredate, mgr, sal
FROM emp;

-- 조건 INSERT ALL --
-- sal이 800인 행이 두 테이블 모두에 들어감
INSERT ALL
WHEN sal = 800 THEN
    INTO sal_history VALUES(empno, hiredate, sal)
WHEN sal < 2500 THEN
    INTO mgr_history VALUES(empno, mgr, sal)
SELECT empno, hiredate, sal, mgr
FROM emp;

-- 조건 INSERT FIRST --
-- sal이 800인 행이 sal_history에만 들어감
INSERT FIRST
WHEN sal = 800 THEN
    INTO sal_history VALUES(empno, hiredate, sal)
WHEN sal < 2500 THEN
    INTO mgr_history VALUES(empno, mgr, sal)
SELECT empno, hiredate, sal, mgr
FROM emp;

UPDATE

UPDATE: 테이블에 저장된 행들을 변경함
- 한번에 여러행 동시변경 가능
- WHERE조건을 넣지 않으면 모든 행이 변경됨

UPDATE 테이블명
SET 변경사항
WHERE 조건;

UPDATE dept
SET dname = '경리과', loc = '부산'
WHERE deptno = 90;

서브쿼리로 여러 컬럼 변경가능

UPDATE emp
SET job = (SELECT job
           FROM emp
           WHERE empno = 7900),
    sal = (SELECT sal
           FROM emp
           WHERE empno = 7844)
WHERE empno = 9001;

DELETE

DELETE: 테이블에 저장된 행들을 삭제함
- 한번에 여러행 삭제 가능
- WHERE조건을 넣지 않으면 모든 행이 삭제됨

DELETE FROM 테이블명
WHERE 조건;

DELETE FROM dept
WHERE deptno = 91;

서브쿼리로 여러 행 삭제 가능

DELETE FROM emp
WHERE deptno = (SELECT deptno
                FROM dept
                WHERE dname = '경리과');

MERGE

MERGE: 구조가 같은 두개의 테이블을 비교해 하나로 합침
- ON 조건에 해당하는 행이 병합 대상 테이블에 이미 존재하면 UPDATE가, 존재하지 않으면 INSERT가 실행됨
- WHEN 절 안에 WHERE 구문이나 DELETE 구문을 추가할 수도 있음

MERGE INTO 병합 대상 테이블
USING 넣을 테이블
ON (조건)
WHEN MATCHED THEN
	UPDATE SET ...
WHEN NOT MATCHED THEN
	INSERT VALUES(...)

MERGE INTO p_total total
USING pt_01 p01
ON (total.판매번호 = p01.판매번호)
WHEN MATCHED THEN
    UPDATE SET total.제품번호 = p01.제품번호
WHEN NOT MATCHED THEN
    INSERT VALUES (p01.판매번호, p01.제품번호, p01.수량, p01.금액);
    
MERGE INTO p_total total
USING pt_02 p02
ON (total.판매번호 = p02.판매번호)
WHEN MATCHED THEN
    UPDATE SET total.제품번호 = p02.제품번호
WHEN NOT MATCHED THEN
    INSERT VALUES(p02.판매번호, p02.제품번호, p02.수량, p02.금액);

트랜젝션

Transaction: 데이터베이스의 논리적 단위
- DML문은 트랜젝션의 대상이 됨
- DML을 사용하는 순간 트랜젝션이 시작되며, COMMIT이나 ROLLBACK을 실행해야 트랜젝션이 종료됨
  - COMMIT: 트랜젝션의 모든 데이터 변경사항을 DB에 영구 반영
  - ROLLBACK: 트랜젝션의 모든 데이터 변경사항을 취소

SQL디벨로퍼에서 DML로 테이블을 조작해도 실제 DB엔 반영이 안된 상태이며, COMMIT을 해야 실제 DB에 반영되므로 반드시 DML 사용 후 COMMIT을 해줘야 한다.

INSERT INTO copy_dept VALUES(2, 'BB', 'BB'); -- 트랜젝션 시작
COMMIT; -- 트랜젝션 종료
INSERT INTO copy_dept VALUES(3, 'CC', 'CC'); -- 시작
INSERT INTO copy_dept VALUES(4, 'DD', 'DD');
ROLLBACK; -- 종료

-- DB엔 2번 값만 추가됨

하나의 트랜젝션은 하나 이상의 SQL문이 포함되며, 분할할수 없는 최소의 단위임. 그러므로 전부 적용하거나 전부 취소됨 (ALL or Nothing)
트랜젝션 내 모든 데이터 변경 사항은 트랜젝션 종료 전까진 임시적임
따라서 데이터 변경 전 데이터로 복구 가능함

INSERT INTO copy_dept VALUES(9, 'TT', 'TT');
UPDATE copy_dept SET loc = '서울';
DELETE FROM copy_dept WHERE deptno = 4;
COMMIT/ROLLBACK; -- 위의 3줄 전부 반영/취소됨

트랜젝션 중 변경된 행은 Lock이 걸리며, 트랜젝션 종료 전까지 다른 사용자는 해당 행을 변경할 수 없음

-- scott 계정 --
UPDATE copy_dept SET loc = '서울'
WHERE deptno = 4;

-- sys 계정 --
DELETE FROM scott.copy_dept
WHERE deptno = 4; -- 로딩만 돌고 실행 안됨 (Lock의 경합)

-- scott 계정 --
COMMIT; -- 로딩 끝나고 실행됨

-- sys 계정 --
COMMIT; -- 삭제 반영

트랜젝션 중 현재 사용자는 SELECT문을 이용해 미리 변경 결과를 확인할 수 있으나, 다른 사용자는 트랜젝션 종료 전까진 변경 전 결과만 확인 가능함

-- scott 계정 --
UPDATE copy_dept SET loc = '부산'
WHERE deptno = 1;

-- sys 계정 --
SELECT loc
FROM scott.copy_dept
WHERE deptno = 1; -- AA

-- scott 계정 --
COMMIT;

-- sys 계정 --
SELECT loc
FROM scott.copy_dept
WHERE deptno = 1; -- 부산

위 두가지 특성을 통해 데이터의 일관성을 보장해준다.

[SQL] Day6 - 서브쿼리

CheeseB — Mon, 11 Jan 2021 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

학습 정리

서브쿼리

서브쿼리: SELECT문 안에 또다른 SELECT문이 포함되어 있는것
- 하나의 중첩된 SELECT 문으로 여러번의 SELECT문을 수행한 결과를 얻음
서브쿼리 특징
- 서브쿼리가 먼저 실행되고, 그 결과가 메인 쿼리에 전달되어 실행됨
- 메인쿼리에서 서브쿼리 안의 컬럼을 사용할순 없음
- SELECT 뿐 아니라 FROM, WHERE, HAVING, ORDER BY, UPDATE, INSERT INTO 절에도 사용 가능
- 서브쿼리엔 반드시 괄호를 써야하며, 서브쿼리 안에선 ORDER BY절 사용 불가함

SELECT sal
FROM emp
WHERE ename = 'SMITH'; -- 800

SELECT ename, sal
FROM emp
WHERE sal < 800;

-- 위 두개의 쿼리문을 합친 결과

SELECT ename, sal
FROM emp
WHERE sal < (SELECT sal
             FROM emp
             WHERE ename = 'SMITH');

서브쿼리 종류
- 실행 결과 개수에 따라
  - 단일행 서브쿼리
  - 복수행 서브쿼리
  - 다중컬럼 서브쿼리
- 서브쿼리 위치에 따라
  - 일반 서브쿼리
  - 인라인뷰 (FROM절에 위치)
  - 상관 서브쿼리 (일반적으로 SELECT절에 위치)

단일행 서브쿼리

단일행 서브쿼리: 서브쿼리가 한개의 행을 리턴
- 반드시 단일행 연산자를 사용해야 함(=, >, <, >=, <=, !=)

SELECT ename, sal
FROM emp
WHERE sal > (SELECT AVG(sal)
             FROM emp);

하나의 메인 쿼리에 여러개의 서브쿼리 사용 가능

SELECT ename, job, hiredate, sal
FROM emp
WHERE job = (SELECT job
             FROM emp
             WHERE empno = 7521)
AND sal > (SELECT sal
             FROM emp
             WHERE empno = 7934);

HAVING 절에도 서브쿼리 사용 가능

SELECT deptno, MIN(sal)
FROM emp
GROUP BY deptno
HAVING MIN(sal) > (SELECT MIN(sal)
                  FROM emp
                  WHERE deptno = 20)

-- 'SALES' 부서의 인원수보다 적은 부서의 부서명, 인원수 검색
SELECT d.dname, COUNT(*)
FROM emp e, dept d
WHERE e.deptno = d.deptno
GROUP BY d.dname
HAVING COUNT(*) < (SELECT COUNT(*)
                   FROM emp e NATURAL JOIN dept d
                   WHERE d.dname = 'SALES');

복수행 서브쿼리

복수행 서브쿼리: 서브쿼리가 여러개의 행을 리턴
- 반드시 복수행 연산자를 사용해야 함(IN, ANY, ALL, EXISTS)

SELECT ename, deptno, sal
FROM emp
WHERE deptno IN(SELECT deptno
                FROM emp
                WHERE sal >= 1000);

IN: 서브쿼리 결과 중 하나라도 일치하면 됨

-- 업무별로 최소급여를 받는 사원의 정보 출력
SELECT empno, ename, sal
FROM emp
WHERE sal IN (SELECT MIN(sal)
              FROM emp
              GROUP BY job);

ALL: 서브쿼리의 결과 모두에 대해서 조건을 만족해야 함
- 부등호 조건에 사용

SELECT empno, ename, sal
FROM emp
WHERE sal > ALL(SELECT sal
                FROM emp
                WHERE job = 'MANAGER');

ANY: 서브쿼리의 결과 중 하나에 대해서만 조건을 만족해도 됨
- 부등호 조건에 사용

SELECT empno, ename, sal
FROM emp
WHERE sal > ANY(SELECT sal
                FROM emp
                WHERE job = 'MANAGER');

EXISTS: 서브쿼리의 결과가 존재하는지 여부를 확인
- 결과가 하나도 없으면 조건이 거짓이 되어, 선택되는 레코드가 없음

SELECT *
FROM emp
WHERE EXISTS(SELECT empno
             FROM emp
             WHERE comm IS NOT NULL);

다중 컬럼 서브쿼리

다중 컬럼 서브쿼리: 서브쿼리에서 여러개의 컬럼값을 검색하여 메인쿼리의 조건절과 비교함
- 메인쿼리의 조건절에서도 서브쿼리 컬럼수만큼 지정해야함
비교 방법
- Pairwise: 컬럼을 쌍으로 묶어서 동시에 비교
- Unpairwise: 컬럼별로 나누어서 비교 후 AND 연산 처리

-- 부서별로 가장 많은 sal을 받는 사원정보 출력

-- Pairwise
SELECT deptno, empno, ename, sal
FROM emp
WHERE (deptno, sal) IN (SELECT deptno, MAX(sal)
                        FROM emp
                        GROUP BY deptno);

-- Unpairwise
SELECT deptno, empno, ename, sal
FROM emp
WHERE deptno IN (SELECT deptno
				 FROM emp
				 GROUP BY deptno)
AND sal IN (SELECT MAX(sal)
			FROM emp
			GROUP BY deptno);

인라인 뷰

인라인 뷰: FROM절 뒤에 테이블명 대신 서브쿼리가 사용됨
- 하나의 가상 테이블을 반환
- 서브쿼리 내의 컬럼을 메인쿼리에서 사용 가능

SELECT e.deptno, total_sum, cnt
FROM (SELECT deptno, SUM(sal) total_sum, COUNT(*) cnt
      FROM emp
      GROUP BY deptno) e, dept d
WHERE e.deptno = d.deptno;

[SQL] Day5 - Join

CheeseB — Sun, 10 Jan 2021 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

학습 정리

Join

Join: 검색하려는 컬럼이 여러개의 테이블에 존재할때 사용
- 두개의 컬럼을 합쳐서 하나의 테이블로 표시 가능
- Primary Key(중복불가, null불가)와 Foreign Key를 사용하는 경우가 대부분이나, 때로 논리적인 값의 연관으로 하는 경우도 있음
- 양쪽 테이블에 공통으로 존재하는 열은 열 이름 앞에 테이블명 기술해야 함
- 공통으로 존재하지 않아도 테이블명 써주는것을 권장함(어디서 온건지 모를수 있으니까)

JOIN의 종류(1) - 오라클 조인: 오라클에서만 사용

Catasian Product: 모든 가능한 행들을 전부 조인 (거의 안씀)
- 조인 조건이 생략되거나 잘못된 경우
- 첫번째 테이블과 두번째 테이블의 모든 행이 서로 조인되는 경우
- 양쪽 행의 개수를 곱한 결과

SELECT empno, ename, job, dept.deptno, dname, loc
FROM dept, emp -- FROM에서 테이블 두개 쉼표로 같이쓰면 조인

Equi 조인: 조인 조건에서 ”=“를 사용하여, 값들이 정확히 일치하는 경우에 사용
- PK와 FK를 이용
- 단순 조인, 내부 조인이라고도 함
- WHERE절에 테이블의 조인 조건을 명시

SELECT emp.empno, emp.ename, dept.dname, dept.loc
FROM emp, dept
WHERE emp.deptno = dept.deptno; -- 부서번호가 같은 행끼리 합치기

테이블명에 alias를 적용했을 경우엔 SELECT 절과 WHERE절에 테이블명이 아닌 alias를 사용해야 함

SELECT e.empno, e.ename, d.dname, d.loc
FROM emp e, dept d
WHERE e.deptno = d.deptno;

-- 예제) 입사년도가 1982년도 미만인 사원의 부서이름과 부서별 인원 출력
SELECT d.dname 부서이름, COUNT(*) "부서별 인원"
FROM emp e, dept d
WHERE e.deptno = d.deptno
AND e.hiredate < TO_DATE('1982', 'YYYY')
GROUP BY d.dname;

-- 이것도 가능
SELECT d.dname 부서이름, COUNT(*) "부서별 인원"
FROM emp e, dept d
WHERE TO_CHAR(e.hiredate, 'YYYY') < 1982
AND e.deptno = d.deptno
GROUP BY d.dname;

두개 이상의 테이블 조인
Non-Equi 조인: 조인 조건에 ”=” 외의 연산자(BETWEEN, >, <= 등)를 사용하여, 값이 정확히 일치하진 않는 경우에 사용

SELECT e.ename, e.sal, s.grade
FROM emp e, salgrade s
WHERE e.sal BETWEEN s.losal AND s.hisal

-- 예제) Non_Equi 조인으로 3개의 테이블 조인 
SELECT e.ename, e.sal, d.dname, s.grade
FROM emp e, dept d, salgrade s
WHERE e.deptno = d.deptno
AND e.sal BETWEEN s.losal AND s.hisal;

Self 조인: 특정 테이블 자신을 자신이 Join하는 방법
- 동일 테이블 내의 한 컬럼이 다른 컬럼과 연관관계가 있을 때 사용
- null인 항목은 누락됨 (항목에 (+) 붙이면 null도 표시)
- FROM절에 두개의 테이블을 사용하는 것처럼 같은 테이블에 대해 두개의 alias를 작성해서 구분지어야 함
- 컬럼에 대해서도 어떤 테이블에서 왔는지 alias명을 반드시 기술해야 함

SELECT a.ename 사원, b.ename 관리자
FROM emp a, emp b
WHERE a.mgr = b.empno; -- b.empno(+) 로 바꾸면 null도 같이나옴

-- 예제) 7369번 사원의 이름, 관리자번호/이름/부서이름 선택
SELECT e.ename, e.mgr, m.ename, m.deptno, d.dname
FROM emp e, emp m, dept d
WHERE e.mgr = m.empno AND m.deptno = d.deptno
AND e.empno = 7369;

-- 예제) 사원의 관리자의 관리자까지 표시 (3중 self-join)
SELECT e.ename, e.mgr, m.ename, m.mgr, mm.ename
FROM emp e, emp m, emp mm
WHERE e.mgr = m.empno AND m.mgr = mm.empno;

Outer 조인: 조인 조건을 만족하지 못하는 행들도 결과에 나타낼 수 있음
- 원래는 조인 조건을 만족하지 않는 행은 결과에 나타나지 않음
- ”(+)” 기호를 사용하며, 조인시킬 값이 없는 조인 측에 위치시킴 (한쪽에만 위치할 수 있음)

-- 상위 관리자가 없는 사원의 이름도 전부 표시
SELECT e.ename, e.mgr, m.ename, m.mgr, mm.ename
FROM emp e, emp m, emp mm
WHERE e.mgr = m.empno(+)
AND m.mgr = mm.empno(+);

JOIN의 종류 - ANSI 조인(표준)

ANSI 조인 특징
- 조인의 형식이 FROM 절에서 지정됨
- 조인 조건이 WHERE 절이 아닌 ON 절에서 명시됨
CROSS JOIN: Catasian Product와 동일함

SELECT empno, ename, dname
FROM dept CROSS JOIN emp;

NATURAL JOIN: Equi 조인과 동일함
- 같은 이름을 가진 컬럼에 기반하여 알아서 조인해줌
- 양쪽 테이블에 공통 컬럼명이 반드시 하나만 있어야 함 (2개 이상이면 2개 이상의 값이 서로같은것만 추출하게 됨)

SELECT empno, ename, deptno, dname, loc
FROM emp NATURAL JOIN dept;

NATURAL JOIN과 USING 에선 공통 컬럼명에 alias를 사용하면 안됨

-- error!
-- deptno가 공통컬럼이기 때문에 특정 테이블명을 붙이면 안됨
SELECT empno, ename, e.deptno, dname, loc
FROM emp e NATURAL JOIN dept d;

-- deptno 외의 다른 컬럼은 사용 가능
SELECT e.ename, deptno, d.dname
FROM emp e NATURAL JOIN dept d
WHERE e.empno = 7369;

JOIN ~ USING: 동일 이름의 컬럼이 여러개인 경우 조인 컬럼을 지정
- NATURAL JOIN 과 비슷한 기능을 하며, 함께 사용 불가
- JOIN ~ USING 절과 JOIN ~ ON 절에서의 JOIN은 사실 INNER JOIN이지만 보통 INNER는 생략하고 사용함

SELECT empno, ename, dname, loc
FROM emp JOIN dept USING(deptno);

-- NATURAL JOIN과 마찬가지로 공통컬럼에 별칭 사용불가
SELECT e.empno, e.ename, deptno, d.dname, d.loc
FROM emp e INNER JOIN dept d USING(deptno);

NATURAL JOIN, JOIN ~ USING, Equi-Join 세가지 모두 한가지 공통컬럼을 기반으로 조인해주는 것은 동일하지만 NATURAL JOIN은 공통컬럼이 두 테이블에 딱 한가지만 있을때 사용함. 그렇지 않으면 USING이나 Equi-join으로 지정해 주어야 함

JOIN ~ ON: 조인할 컬럼을 명시하고, 임의의 조건으로 조인할 때 사용
- 복잡한 조건의 조인이 가능함 (서브쿼리, AND/OR 연산자 등)

-- INNER ~ ON 절에선 어느 테이블의 공통컬럼을 표시할 지 명시해줘야 함
SELECT e.empno, e.ename, d.deptno, d.dname, d.loc
FROM emp e INNER JOIN dept d
ON e.deptno = d.deptno;

-- 예제) 부서번호가 10번인 사원이름, 부서이름, 부서지역 표시
-- JOIN ~ ON 사용
SELECT e.ename, d.dname, d.loc
FROM emp e JOIN dept d
ON e.deptno = d.deptno
WHERE d.deptno = 10;

-- JOIN ~ USING 사용
SELECT e.ename, d.dname, d.loc
FROM emp e JOIN dept d USING(deptno)
WHERE deptno = 10;


-- 예제) 3개의 테이블 조인
-- JOIN ~ USING 사용
SELECT e.ename, e.sal, s.grade, deptno, d.dname
FROM emp e JOIN dept d USING(deptno)
JOIN salgrade s
ON e.sal BETWEEN s.losal AND s.hisal

-- JOIN ~ ON 사용
SELECT e.ename, e.sal, s.grade, e.deptno, d.dname
FROM emp e JOIN dept d
ON e.deptno = d.deptno
JOIN salgrade s
ON e.sal BETWEEN s.losal AND s.hisal


-- 예제) 사원의 관리자의 관리자까지 표시
-- JOIN ~ ON 사용
SELECT e.ename, e.mgr, m.ename, m.mgr, mm.ename
FROM emp e JOIN emp m
ON e.mgr = m.empno
JOIN emp mm
ON m.mgr = mm.empno;

LEFT/RIGHT OUTER JOIN: 좌/우측 테이블의 모든 행이 우/좌 측 테이블의 행들과 일치 여부 관계없이 모두 출력됨
- 오라클 조인의 ”(+)” 연산과 동일함
FULL OUTER JOIN: LEFT, RIGHT OUTER JOIN 결과를 합집합으로 처리한 결과와 동일함(UNION)

-- 상위 관리자가 없는 사원의 이름도 전부 표시
SELECT e.ename, m.ename, mm.ename
FROM emp e LEFT OUTER JOIN emp m
ON e.mgr = m.empno
LEFT OUTER JOIN emp mm
ON m.mgr = mm.empno;

[SQL] Day4 - 그룹함수

CheeseB — Thu, 07 Jan 2021 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

학습 정리

그룹함수

그룹함수는 GROUP BY 로 그룹화, HAVING 으로 조건을 제한함
AVG/MAX/MIN/SUM: 컬럼의 평균, 최대값, 최소값, 합계 구함
- DISTINCT: 중복값은 제외하고 처리됨
- 디폴트는 ALL인데 일반적으로 생략

SELECT AVG(sal), MAX(sal), MIN(sal), SUM(DISTINCT sal)
FROM emp
WHERE job LIKE 'SAL%';

MIN/MAX 함수는 문자, 날짜 데이터에도 사용 가능
- 다른 함수는 안됨

SELECT MIN(hiredate), MAX(hiredate)
from emp; -- 80/12/17, 82/01/23

COUNT: 컬럼에 저장된 null을 제외한 행 개수 반환
- 인자로 컬럼이 아닌 ’*’ 을 넣으면 null을 포함한 테이블의 전체 행 개수 반환

SELECT COUNT(*), COUNT(ename), COUNT(comm), COUNT(mgr)
FROM emp; -- 12, 12, 4, 11

-- 그냥 AVG하면 null값을 제외하고 계산
-- 전체 평균을 구하고자 하면 null값을 0으로 바꿔야함
SELECT AVG(comm), AVG(NVL(comm, 0))
FROM emp;

GROUP BY 없이 SELECT 뒤에 일반 컬럼과 그룹함수 동시 사용 불가

SELECT ename, MAX(sal)
FROM emp; -- error!

GROUP BY: 행들을 특정 그룹으로 묶을때 사용
- GROUP BY뒤에 기술된 컬럼, 그룹함수가 적용된 컬럼만 SELECT 뒤에 사용 가능 (리터럴은 예외)
- GROUP BY절에는 컬럼 별칭, 컬럼순서 정수값 사용 불가
- SELECT - FROM - WHERE - GROUP BY - ORDER BY 순서

SELECT ename, AVG(sal) -- error!
FROM emp
GROUP BY deptno;

-- 부서별로 행 수, 평균, 최소/최대, 총합 출력
-- 총합 별로 내림차순 정렬
SELECT deptno, COUNT(*), AVG(sal), MIN(sal), MAX(sal), SUM(sal)
FROM emp
GROUP BY deptno
ORDER BY SUM(sal) DESC;

다중 그룹화 가능

SELECT deptno, job, COUNT(*), AVG(sal), SUM(sal)
FROM emp
GROUP BY deptno, job; -- deptno로 그룹화 후 job으로 그룹화

-- 예제) 입사년도별, 월별로 입사한 사람의 월급의 합계를 출력
-- 월급의 합계가 높은순으로 정렬
SELECT TO_CHAR(hiredate, 'YYYY'), TO_CHAR(hiredate, 'MM'), SUM(sal)
FROM emp
GROUP BY TO_CHAR(hiredate, 'YYYY'), TO_CHAR(hiredate, 'MM')
ORDER BY 3 DESC;

WHERE: 그룹으로 분류하기 전, 행 제한 (1차 필터)
HAVING: 그룹으로 분류된 후, 분류된 그룹을 제한 (2차 필터)

SELECT deptno, AVG(sal)
FROM emp
WHERE AVG(sal) > 1500 -- error!
GROUP BY deptno;

-- WHERE절엔 그룹함수 사용불가
-- 그룹함수는 HAVING절에 사용해야 함!

SELECT deptno, SUM(sal)
FROM emp
WHERE sal > 800
GROUP BY deptno
HAVING SUM(sal) > 8000;

-- 예제) 급여합이 5000을 초과하는 각 업무에 대해 업무, 급여합 출력
-- 판매원은 제외하고 급여합 별로 정렬
SELECT job 업무, SUM(sal) 급여합
FROM emp
WHERE job != 'SALESMAN'
GROUP BY job
HAVING SUM(sal) >= 5000
ORDER BY 2;

-- WHERE 사용하지 않고 아래와 같이 써도 됨
SELECT job 업무, SUM(sal) 급여합
FROM emp
GROUP BY job
HAVING SUM(sal) > 5000 AND job != 'SALESMAN'
ORDER BY 2;

-- 위 사진과 같이 만들기
SELECT
    SUM(CASE job WHEN 'CLERK' THEN 1 ELSE 0 END) "CLERK",
    SUM(CASE job WHEN 'SALESMAN' THEN 1 ELSE 0 END) "SALESMAN",
    SUM(CASE job WHEN 'MANAGER' THEN 1 ELSE 0 END) "MANAGER",
    SUM(CASE job WHEN 'ANALYST' THEN 1 ELSE 0 END) "ALANYST",
    SUM(CASE job WHEN 'PRESIDENT' THEN 1 ELSE 0 END) "PRESIDENT",
    COUNT(*)
FROM emp
GROUP BY job;

[SQL] Day3 - 단일행 함수(2)

CheeseB — Wed, 06 Jan 2021 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

학습 정리

단일행 함수 - 문자열 함수(2)

LTRIM/RTRIM: 첫 문자/끝 문자부터 지정 문자 제거
- 지정문자 생략하면 공백문자 제거

-- LTRIM --
SELECT LTRIM('OMG', 'O'), LTRIM(1234, 1)
FROM dual; -- 'MG', 234

SELECT LTRIM('   MILLER   '), LENGTH(LTRIM('   MILLER   '))
FROM dual; -- 'MILLER   ', 9

-- RTRIM --
SELECT RTRIM('MILLER', 'R')
FROM dual; -- 'MILLE'

SELECT RTRIM('   MILLER   '), LENGTH(RTRIM('   MILLER   '))
FROM dual; -- '   MILLER', 9

TRIM(LEADING/TRAILING/BOTH): 처음/끝/양쪽 에서 지정문자 제거
- 방향이 생략되면 both가 기본
- 제거할 문자 생략하면 공백문자 제거

-- 양옆의 공백만 제거할거면 문자열만 인자로 넣어도 됨
-- 제거할 문자나 방향을 지정할거면 FROM 필요
SELECT TRIM(0 FROM 00012345000)
FROM dual; -- 12345

SELECT TRIM(LEADING FROM '   aa   ')
FROM dual; -- 'aa   '

SELECT TRIM(TRAILING FROM '   aa   ')
FROM dual; -- '   aa'

SELECT TRIM('  ABC  '), LENGTH(TRIM('  ABC  '))
FROM dual; -- 'ABC', 3

단일행 함수 - 수학 함수

CEIL/FLOOR: 올림/버림

SELECT CEIL(10.1), FLOOR(10.7)
FROM dual; -- 11, 10

ROUND: 반올림
- 두번째 인자 n이 양수면 소수 n+1자리, 음수면 정수 n자리에서 반올림
- n이 생략되면 기본값은 0

SELECT ROUND(4567.678), ROUND(4567.678, 0), ROUND(4567.678, 2), ROUND(4567.678, -2)
FROM dual; -- 4568, 4568, 4567.68, 4600

TRUNC: 절삭함수
- 두번째 인자 n이 양수면 소수 n+1자리, 음수면 정수 n자리에서 절삭
- n이 생략되면 기본값은 0

SELECT TRUNC(4567.678), TRUNC(4567.678, 0), TRUNC(4567.678, 2), TRUNC(4567.678, -2)
FROM dual; -- 4567, 4567, 4567.67, 4500

MOD: 나머지 연산
- 첫번째 인자 m을 두번째 인자 n으로 나눈 나머지
- n이 0이면 m 자체를 반환

SELECT MOD(10, 3), MOD(10, 0)
FROM dual; -- 1, 10

SIGN: 값이 양수/음수/0 인지 판단 (양수:1, 음수:-1, 0:0)

SELECT SIGN(100), SIGN(-20), SIGN(0)
FROM dual; -- 1, -1, 0

단일행 함수 - 날짜 함수

SYSDATE/SYSTIMESTAMP: 서버에 설정된 날짜/날짜+시간 리턴
- 날짜에 사칙연산 가능

SELECT SYSDATE 오늘, SYSDATE+1 내일, SYSDATE-1 어제
FROM dual; -- 21/01/07, 21/01/08, 21/01/06

-- 근무 년도수 구하기
SELECT TRUNC((SYSDATE - hiredate)/365) "년"
FROM emp
ORDER BY 년 DESC;

-- 근무일 수가 몇주 몇일인지 구하기
SELECT SYSDATE - hiredate "Total Days",
    TRUNC((SYSDATE - hiredate)/7) Weeks,
    ROUND(MOD((SYSDATE - hiredate),7)) Days
FROM emp;

MONTHS_BETWEEN: 날짜와 날짜 사이의 월수를 계산함
- 결과는 양수, 음수 둘다 될수 있음
- 이후의 날짜를 앞에 둬야 양수가 됨
- 결과의 소수 부분은 월의 부분을 나타냄

-- 월의 부분을 제외하고 월만 구하기 위해 TRUNC 사용
SELECT TRUNC(MONTHS_BETWEEN(SYSDATE, TO_DATE('200101', 'YYMMDD')))
FROM dual;

ADD_MONTHS: 날짜에 월을 더하거나 뺌
- 두번째 인자가 양수면 더하기, 음수면 빼기

SELECT sysdate 현재, ADD_MONTHS(SYSDATE, 1) 다음달, ADD_MONTHS(SYSDATE, -1) 이전달
FROM dual; -- 21/01/07, 21/02/07, 20/12/07

NEXT_DAY: 지정 날짜로부터 돌아오는 요일에 해당하는 가장 가까운 날짜 반환
- 요일 지정은 ‘일요일’, ‘일’, 1 과 같이 가능함
- 일:1, 월:2, …, 토:7

SELECT NEXT_DAY(SYSDATE, '일') FROM dual; -- 21/01/10
SELECT NEXT_DAY(SYSDATE, 1) FROM dual; -- 21/01/10

-- 오늘부터 5개월 뒤 돌아오는 토요일의 날짜 계산
SELECT NEXT_DAY(ADD_MONTHS(SYSDATE, 5), '토')
FROM dual; -- 21/06/12

LAST_DAY: 지정 날짜에 해당하는 월의 마지막 날짜 반환
- 윤년, 평년은 자동계산

SELECT LAST_DAY(SYSDATE)
FROM dual; -- 21/01/31

ROUND/TRUNC: 날짜를 가장 가까운 년도나 월로 반올림/절삭

SELECT ROUND(hiredate, 'YEAR'), ROUND(hiredate, 'MONTH')
FROM emp
WHERE empno = 7839; -- 81/11/17, 82/01/01, 81/12/01

SELECT TRUNC(hiredate, 'YEAR'), TRUNC(hiredate, 'MONTH')
FROM emp
WHERE empno = 7839; -- 81/11/17, 81/01/01, 81/11/01

단일행 함수 - 변환함수

sql에선 묵시적 변환이 허용되지만 권장되진 않음.
명시적 변환 종류
- TO_NUMBER, TO_DATE, TO_CHAR

SELECT empno, ename
FROM emp
WHERE empno = '7900'; -- 숫자형으로 묵시적 변환

SELECT empno, ename
FROM emp
WHERE empno = TO_NUMBER('7900'); -- 명시적 변환

SELECT empno, ename, hiredate
FROM emp
WHERE hiredate = '82/01/23'; -- 날짜형으로 묵시적 변환

SELECT empno, ename, hiredate
FROM emp
WHERE hiredate = TO_DATE('82/01/23'); -- 명시적 변환

TO_CHAR 함수는 변환 시 형식을 지정할 수 있음

SELECT SYSDATE, TO_CHAR(SYSDATE, 'YYYY/MM/DD, (AM)DY HH24:MI:SS')
FROM dual;
-- 21/01/07
-- 2021/01/07, (오후)목 12:39:22

문자열 변환 시 안에 문자열을 넣고자 할 땐 안에 큰따옴표 써야함

SELECT TO_CHAR(SYSDATE, 'YYYY"년" MM"월" DD"일"')
FROM dual; -- 2021년 01월 07일

-- 입사한 달이 9월인 사람을 빨리 입사한 순으로 정렬
SELECT empno, ename, hiredate
FROM emp
WHERE TO_CHAR(hiredate, 'MM') = '09'
ORDER BY 3;

TO_DATE는 왼쪽의 문자열을 오른쪽의 날짜 형식으로 변환함

SELECT TO_DATE('20170802181030', 'YYYYMMDDHH24MISS')
FROM dual; -- 17/08/02

-- SQL의 기본 날짜 표현방식 바꾸기
ALTER SESSION SET NLS_DATE_FORMAT='YYYY/MM/DD HH24:MI:SS';

SELECT TO_DATE('20170802181030', 'YYYYMMDDHH24MISS')
FROM dual; -- 2017/08/02 18:10:30

-- 현재 나이 구하기
SELECT (TO_CHAR(SYSDATE, 'YYYY') - 1997)+1 AS "나이"
FROM dual;

단일행 함수 - 조건함수

DECODE: switch문과 같음

SELECT empno, ename, sal, job,
	DECODE(job, 'ANALYST', sal*1.1, -- job이 'ANALYST'면 sal*1.1 
            	'CLERK', sal*1.2,
            	'MANAGER', sal*1.3,
            	'PRESIDENT', sal*1.4,
				sal) AS "급여" -- 마지막은 디폴트
FROM emp;

CASE: if문과 같음 (switch처럼 쓸수있지만 범위 조건도 가능)
- DECODE와 달리 조건마다 쉼표를 붙이지 않고 WHEN, THEN, ELSE 사용
- CASE문의 끝엔 END를 붙여줘야 함

SELECT empno, ename, sal, job,
	CASE job WHEN 'ANALYST' THEN sal*1.1
         	 WHEN 'CLERK' THEN sal*1.2
         	 WHEN 'MANAGER' THEN sal*1.3
         	 WHEN 'PRESIDENT' THEN sal*1.4
         	 ELSE sal -- 디폴트
	END "급여"
FROM emp;

SELECT empno, ename,
	CASE WHEN sal>=0 AND sal <=1000 THEN 'E'
		 WHEN sal>1000 AND sal <=2000 THEN 'D'
    	 WHEN sal>2000 AND sal <=3000 THEN 'C'
     	 WHEN sal>3000 AND sal <=4000 THEN 'B'
     	 WHEN sal>4000 AND sal <=5000 THEN 'A'
	END "등급"
FROM emp;

-- 어차피 CASE에서 위의 조건이 맞지 않으면 그 조건 제외하고 아래로 내려가므로 다음처럼 써도 됨

SELECT empno, ename,
	CASE WHEN sal <=1000 THEN 'E'
		 WHEN sal <=2000 THEN 'D'
    	 WHEN sal <=3000 THEN 'C'
     	 WHEN sal <=4000 THEN 'B'
     	 WHEN sal <=5000 THEN 'A'
	END "등급"
FROM emp;

[SQL] Day2 - 연산자, 정렬, 단일행 함수(1)

CheeseB — Tue, 05 Jan 2021 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

학습 정리

비교 연산자

날짜형식에도 비교 연산 가능

SELECT empno, ename, sal, hiredate
FROM emp
WHERE hiredate >= '81/11/17'; -- 81년 11월 17일 이후

BETWEEN a AND b: a와 b 사이 (a, b 포함)

SELECT empno, ename, sal
FROM emp
WHERE sal BETWEEN 1000 AND 2000; -- 정수

SELECT empno, ename, sal, hiredate
FROM emp
WHERE hiredate BETWEEN '81/01/01' AND '81/12/31'; -- 날짜

IN(a,b,c,…): 괄호 안의 값과 일치하는

SELECT empno, ename, job
FROM emp
WHERE empno IN(7839, 7844, 7876);

null 비교할땐 IS NULL, IS NOT NULL 사용
- ’=’ 연산자 사용 불가

SELECT comm
FROM emp
WHERE comm IS NOT NULL;

다중 리스트

SELECT ename, job, deptno
FROM emp
WHERE (job, deptno) IN (('MANAGER', 20),('CLERK', 30));

LIKE: 검색할 문자열을 정확히 알수없을 때 사용
- %: 0글자 이상의 임의 문자
- _: 1글자의 임의 문자

SELECT empno, ename, job
FROM emp
WHERE ename LIKE 'A%'; -- A로 시작하는 문자열 or A

SELECT empno, ename, job
FROM emp
WHERE ename LIKE '%A'; -- A로 끝나는 문자열 or A

SELECT empno, ename, job
FROM emp
WHERE ename LIKE '%A%'; -- A가 포함된 문자열 or A

SELECT empno, ename, job
FROM emp
WHERE ename LIKE '_L%'; -- L앞에 한글자 반드시 포함, 뒤는 무관

SELECT empno, ename, job
FROM emp
WHERE ename LIKE '____'; -- 4자리 글자

검색할 문자열에 ’%’ 나 ’_’ 가 들어가 있을땐 ESCAPE 사용
- ESCAPE로 지정한 문자 다음에 나오는 문자를 일반문자로 인식

-- '_'가 포함된 문자열을 찾고자 함

SELECT empno, ename, job
FROM emp
WHERE ename LIKE '%_%'; -- 모든 문자 다나옴(X)

SELECT empno, ename, job
FROM emp
WHERE ename LIKE '%\_%' ESCAPE '\'; -- '_'를 일반문자로 인식(O)

부정 비교연산자 3가지
- !=
- ^=
- <>

논리 연산자

AND, OR, NOT

SELECT DISTINCT job, sal
FROM emp
WHERE NOT job = 'SALESMAN'
AND/OR NOT sal <= 3000;

SELECT ename, job, empno, sal
FROM emp
WHERE sal NOT IN (800, 900);

SELECT ename
FROM emp
WHERE ename NOT LIKE 'J%';

연산자 우선순위

괄호
NOT
비교
AND
OR

SELECT ename, job, sal, comm
FROM emp
WHERE job = 'CLERK' OR job = 'ANALYST'
AND comm IS NULL
AND sal >= 1000
AND sal <= 3000;

-- AND 가 뒤에있어도 우선순위 때문에 OR보다 먼저 연산됨
-- 괄호로 묶어줘야함

SELECT ename, job, sal, comm
FROM emp
WHERE (job = 'CLERK' OR job = 'ANALYST')
AND comm IS NULL
AND sal >= 1000
AND sal <= 3000;

정렬

ORDER BY 컬럼: 컬럼 기준으로 정렬 (ASC가 기본)
- 숫자, 문자, 날짜 다 가능
- ASC: 오름차순 (생략 가능)
- DESC: 내림차순
FROM -> WHERE -> ORDER BY 순으로 써야 에러 안남

SELECT empno
FROM emp
ORDER BY empno; -- 오름

SELECT ename
FROM emp
ORDER BY ename DESC; -- 내림

ORDER BY의 기준이 되는 열은 별칭이나 쓰인 순서로 지정할 수 있음

SELECT ename, empno, sal 월급
FROM emp
ORDER BY 월급; -- sal 기준 정렬

SELECT ename, empno, sal
FROM emp
ORDER BY 2; -- empno 기준 정렬

다중 정렬도 가능
- 앞 컬럼 기준으로 먼저 정렬 후, 뒤 컬럼 기준으로 정렬

SELECT ename, deptno, sal as 월급
FROM emp
ORDER BY 2, 3;
-- deptno 기준으로 먼저 정렬한 뒤
-- deptno가 같은 레코드끼리 sal 기준으로 정렬함

null값이 있는 컬럼에선 null이 가장 큰값으로 인식됨
- 내림차순 정렬하면 가장 위에 뜸

함수

단일행 함수
- 모든 행에 대해 각각 적용됨
- 행의 개수와 동일한 개수의 결과 리턴
- SELECT, WHERE, ORDER BY 절에 사용 가능
다중행 함수 (그룹함수)
- 검색되는 모든 행에 대해 한번만 적용됨
- 한 건의 결과만을 리턴
- ex) 여러 행의 총 합계, 평균 등

단일행 함수 - 문자열 함수(1)

INITCAP: 각 단어의 첫글자를 대문자로, 나머지는 소문자로 변경

SELECT deptno, INITCAP(dname), INITCAP(loc)
FROM dept;

SELECT INITCAP('ORACLE database') FROM dual; -- Oracle Database

LOWER: 모든 글자를 소문자로 변경
UPPER: 모든 글자를 대문자로 변경

SELECT empno, deptno, job
FROM emp
WHERE LOWER(ename) = 'king';

SELECT empno, ename, job, deptno
FROM emp
WHERE ename = UPPER('king');

CONCAT: 두개의 문자열 합성 (’||’ 과 같음)
- 두개의 매개변수만 사용 가능

SELECT CONCAT('으악', ' 뭐야')
FROM dual; -- 으악 뭐야

LENGTH: 문자열 길이 출력

SELECT LENGTH('으악 뭐야')
FROM dual; -- 5

-- 이름 길이 내림차순 정렬 후 알파벳순 정렬
SELECT ename, LENGTH(ename)
FROM emp
ORDER BY 2 DESC, 1;

INSTR: 문자열에서 특정 문자의 위치 반환
- 인덱스는 1부터 시작
- 없으면 0 반환

SELECT INSTR('MILLER', 'L', 1, 2) FROM dual;
-- 'MILLER'의 1번째 글자부터 탐색 시작
-- 2번째로 나오는 'L'의 위치 반환 (반환값: 4)

LPAD/RPAD: 문자열의 왼쪽/오른쪽에 문자를 끼워넣음
- 문자열의 총 길이가 지정한 길이가 될때까지
- 첫번째 문자열이 지정한 길이보다 크면 첫번째 문자열을 n길이만큼만 반환함

SELECT LPAD('yyy', 6, '*') FROM dual; -- ***yyy
SELECT RPAD('yyy', 6, '*') FROM dual; -- yyy***
SELECT LPAD('yyy', 2, '*') FROM dual; -- yy

SUBSTR: 부분 문자열 추출
- 문자열 끝까지 추출시 세번째 인자 생략 가능

SELECT SUBSTR('abcdefg', 3, 2) FROM dual;
-- 'abcdefg'의 3번째 글자부터 길이가 2인 문자열 반환 (반환값: cd)

SELECT SUBSTR('abcdefg', -3, 2) FROM dual;
-- 뒤에서 3번째 글자부터 길이가 2인 문자열 반환 (반환값: ef)

SELECT SUBSTR('abcdefg', 4) FROM dual;
-- 'abcdefg'의 4번째 글자부터 끝까지 반환 (반환값: defg)

-- 예제) 주민번호 뒷글자 처리
SELECT RPAD(SUBSTR('000101-3234232', 1, 8), 14, '*')
FROM dual;
-- 000101-3******

REPLACE: 특정 문자열을 다른 문자열로 치환

SELECT REPLACE('JACK and JUE', 'J', 'X') FROM dual;
-- XACK and XUE

[SQL] Day1 - SQL기본, Select, Where

CheeseB — Mon, 04 Jan 2021 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

활동 정리

오라클 DBMS 설치 (11g XE)
관리자 설정 (sys/oracle)
SQLdeveloper 설치 (sys계정 접속 추가)
sys계정으로부터 scott/tiger 계정 생성 (권한 부여: 접속, 테이블 사용 권한)
sys로부터 scott의 테이블 생성
데이터베이스 개요, select, where문 학습

학습 정리

초기 세팅

유저 생성, 변경 및 권한 부여

CREATE USER scott IDENTIFIED BY tiger; -- scott/tiger 계정의 생성
ALTER USER scott IDENTIFIED BY tiger; -- scott 계정의 비밀번호를 tiger로 변경
GRANT CONNECT, RESOURCE TO scott; -- 관리자가 scott에게 db접속 및 사용 권한 부여

계정 잠금 설정 및 해제

ALTER USER hr ACCOUNT LOCK/UNLOCK; -- 계정 잠금 설정/해제
ALTER USER hr IDENTIFIED BY hr ACCOUNT UNLOCK; -- 계정 잠금 해제 및 비밀번호 변경

관계형 데이터베이스

데이터 구조 (2차원 테이블)
- 열: column
- 행: record
SQL은 대소문자 구분이 없지만 권장사항은 있음
SQL 명명 규칙
- 대문자: SQL 예약어
- 소문자: 테이블, 뷰, 컬럼을 비롯한 모든 식별자

SELECT

기본 select, from 구문

SELECT * FROM emp;
SELECT ename FROM emp;
SELECT empno, ename FROM emp; -- 쉼표로 여러 컬럼 열거하면 쓴 순서대로 출력됨

3줄에 걸쳐 쓴 select, from, where 구문

SELECT empno, ename
FROM emp
WHERE ROWNUM < 10;

테이블 정보 조회

SELECT * FROM TAB; -- 현재 갖고있는 모든 테이블 조회
DESC dept; -- dept테이블의 컬럼정보 조회

컬럼에 별칭(alias)사용 가능
- 원본 컬럼명이 바뀌진 않음
- 별칭에서 AS는 생략 가능함
- 별칭에 공백문자 등 특수문자를 사용하려면 쌍따옴표로 묶어줘야 함

SELECT ename AS 성명, empno AS 사번, sal AS 급여 FROM emp;

SELECT ename AS 이름 FROM emp;
SELECT ename 이름 FROM emp; -- 윗줄과 동일

SELECT ename AS "사원 이름" FROM emp;

SQL에선 반드시
- 작은따옴표 사용: 문자, 문자열, 날짜데이터
- 큰따옴표 사용: only 별칭
’||’ 이건 여러개의 문자열을 연결해서 하나의 문자열로 생성함

SELECT ename||sal AS "이름+월급" FROM emp; -- 컬럼+컬럼
SELECT ename||'사원' "이름 직업" FROM emp; -- 컬럼+문자열
SELECT ename||'의 직급은 '||job||'이다.' AS "사원별 직급" FROM emp;

숫자, 날짜형에 사칙연산(+,-,*,/,()) 쓰면 가상의 컬럼으로 결과 보여짐
- 연산식이 컬럼명으로 표시됨
- 원본 데이터가 바뀌거나 연산 결과가 테이블에 추가된건 아님
오라클은 컬럼에 기본적으로 null 허용. (허용 안하도록 변경 가능)
null값을 비교하려면 IS NULL, IS NOT NULL 사용
null 값을 가진 컬럼 연산하려면 NVL이나 NVL2 써야함
- NVL(컬럼, 기본값): 컬럼값이 null이면 기본값으로 표시
- NVL2(컬럼, A, B): 컬럼값이 null이 아니면 A, null이면 B로 표시
- 역시나 원본값은 안바뀜

SELECT empno 번호, ename 이름, sal 월급, sal*12+NVL(comm, 0) 연봉 FROM emp;

dual 테이블은 연산값을 테스트하고 테이블로 출력해보고 싶을때 씀
- sys에 디폴트로 dual이란 테이블 있음

SELECT 10*10 FROM dual; -- 100
SELECT SYSDATE FROM dual; -- 21/01/05

DISTINCT 키워드는 중복값 제거

SELECT DISTINCT job FROM emp;

WHERE

WHERE 키워드는 검색조건 지정

SELECT empno, ename, job, deptno
FROM emp
WHERE deptno = 30; -- SQL에서는 '같다'라는 표현식을 = 하나만 씀 (== 아님)

SELECT empno, ename, sal, sal*12 연봉
FROM emp
WHERE ename = 'BLAKE'; -- '=' 연산자로 문자 비교 시 대소문자까지 정확히 일치해야함

SELECT empno, ename, job, deptno
FROM emp
WHERE hiredate = '81/11/17'; -- 날짜 데이터 비교

[자바스크립트] 기본 문법, 반복문, 조건문, 함수

CheeseB — Wed, 16 Sep 2020 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

기본 문법, 반복문, 조건문

자바스크립트에서의 기본 출력 방법: alert(표시할 문자) 웹 브라우저에 경고창 띄움

문자열을 쓸 땐 작은따옴표 큰따옴표 아무거나 쓸 수 있음 (일관되게만 쓰면 됨) 만약 문자열 안에 따옴표를 써야한다면 바깥의 따옴표와 다른 따옴표를 쓰거나 이스케이프 문자 (’, “)를 써야함

불 자료형끼리 크기 비교 가능. (true는 1 false는 0으로 변환)

여러 변수를 한 번에 선언, 초기화 가능

선언하지 않았거나, 선언했지만 초기화하지 않은 변수의 자료형은 undefined undefined도 null처럼 빈값을 의미하지만 다른점은 null은 사용자가 직접 값을 비울때 사용, undefined는 컴퓨터가 디폴트로 넣어주는 빈값

prompt() 함수 입력창을 띄우고 사용자에게 입력받은 걸 문자열로 리턴함 숫자 값을 얻고싶다면 Number(prompt())이렇게 변환해줘야 함 첫번째 인자는 입력창 위의 설명란, 두번째 인자는 입력 칸 안에 디폴트로 띄울 값

confirm() 함수 사용자에게 확인을 요구하는 메시지 창 띄움 확인을 누르면 ture 리턴, 취소 누르면 false 리턴

문자와 숫자 혹은 문자와 문자를 + 연산하면 숫자가 문자로 변환되어 합쳐진 문자가 됨

52 + '12' // 5212
'52' + '12' // 5212

하지만 + 가 아닌 그 외의 연산들은 문자를 숫자로 변환하여 연산함

4 * '3' // 12
'4' * '3' // 12

Number(), String()으로 자료형을 변환시키듯 Boolean()을 통해 불 자료형으로 변환시키는 것도 가능

// 아래의 다섯가지 경우만 false로 변환됨
// 그 외 나머지는 전부 true
Boolean(0)
Boolean(NaN)
Boolean('')
Boolean(null)
Boolean(undefined)

// 아래의 두개도 비어있지 않은 문자열이므로 true로 변환
Boolean('0')
Boolean('false')

== 이 연산자는 두 값을 비교할 때 자료형을 동일하게 변환해서 비교 (자료형 무시하고 값만 비교), === 이 연산자는 있는 그대로 비교 (자료형도 비교)

// 전부 true (=== 로 쓰면 전부 false)
'' == false
'' == 0
0 == false
'123' == 123

템플릿 문자열(ECMAscript 6 버전) 은 문자열 내부에 표현식을 삽입할 때 + 연산자 대신 사용할 수 있으며, “ 기호로 감싸 만들고 문자열 내부에 ${} 기호를 사용해 표현식을 삽입함

// 123 + 42 는 168이다
alert('123 + 45 는 ' + (123 + 45) + '이다');
alert(`123 + 45 는 ${123 + 45}이다`)
// 동일한 결과지만 코드가 더 간결해짐

// 변수도 사용 가능
var num = 10;
alert(`변수 num의 값은 ${num}이다`)

let, const 키워드 (ECMAscript 6버전)

키워드	구분	선언 위치	재선언
var	변수	전역 스코프	가능
let	변수	해당 스코프	불가능
const	상수	해당 스코프	불가능

var는 전역 스코프의 위치에 변수를 선언하는 키워드 let은 메모리 등의 자원을 적절히 이용할 수 있도록 특정 스코프 내부에서만 변수 사용 가능. (스코프를 벗어나면 제거)

{
	var varA = 10;
	// 해당 스코프 밖에서도 사용 가능
}

{
	alert(varA); // 오류 없이 동작
}

alert(varA); // 오류 없이 동작

for (var i = 0; i < 10; i++) {}
alert(i); // 오류 없이 동작

{
	let varB = 10;
	// 해당 스코프 밖에선 사용 불가
}

{
	alert(varB); // 오류
}

alert(varB); // 오류

for (let j = 0; j < 10; j++) {}
alert(j); // 오류

var로 선언한 변수는 (특히 비동기 함수를 사용할 때) 다양한 실수를 유발할 수 있으므로 ECMAscript 6를 사용할 수 있는 환경에선 var 키워드를 사용하지 않는 것이 좋음

// var 키워드 사용
// 1초 간격으로 0,1,2를 출력하길 의도했지만
// 실제론 1초 간격으로 3,3,3을 출력함
for (var i = 0; i < 3; i++) {
	setTimeout(() => {
		alert(i);
		}, 1000 * i);
}

// let 키워드 사용
// 의도한 대로 1초 간격으로 0,1,2를 출력함
for (let i = 0; i < 3; i++) {
	setTimeout(() => {
		alert(i);
		}, 1000 * i);
}

// ECMAscript 5 이전까지의 해결 방법
// 함수로 한번 감싸고, 사용할 변수를 전달하는 방법
for (var i = 0; i < 3; i++) {
	((i) => {
		setTimeout(() => {
			alert(i);
		}, 1000 * i);
		})(i);
}

템플릿 문자열과 let, const 키워드는 ECMAscript 6버전에 추가된 것이므로 인터넷 익스플로러에서는 사용이 불가함

자바스크립트에선 하나의 배열에 모든 자료형을 다 넣을 수 있음. 배열 또한 객체의 일종

var array = [123, 'String', true, function(){}, {}, [273, 103]]

문자열과 배열의 길이를 알고싶을 땐 array_name.length 사용, 배열에 요소를 추가하고 싶을 땐 array_name.push(element) 사용.

for 반복문의 특이한 사용

var startTime = new Date().getTime();

for (var cps = 0; new Date().getTime() < startTime + 1000; cps++) {}
alert('초당 연산 수: ' + cps);

배열이나 객체에 쉽게 접근할 수 있는 반복문으로 for in (인덱스), for of (값) 반복문이 있음. for of 구문은 ECMAscript 6 버전에 추가된 기능임

// 배열의 인덱스를 통해 값 접근
for (var i in array) {
	alert('i번째 요소: ' + array[i]);
}

// 배열의 값에 바로 접근
for (const value of array) {
	alert(`요소 값은 ${value}`);
}

자바스크립트에선 파이썬처럼 인덱스와 값을 반복문으로 한번에 접근할 순 없으므로 for in과 for of를 적절히 사용해야 함 for of 는 ECMAscript 5 이전 버전에선 사용 불가하므로 주의

함수

자바스크립트에서 함수를 작성하는 방법 (익명함수)

var func_var = function() {
	// blabla..
};

alert(typeof(func_var)); // function

자바스크립트에서 함수를 작성하는 방법 (선언적 함수)

function func_name() {
	// blabla..
}

웹 브라우저는 스크립트의 내용을 한줄씩 읽기 전에 선언적 함수부터 읽으므로 함수 선언보다 위에서 호출해도 잘 동작함.

func_name();

function func_name() {
	// blabla..
}

하지만 익명함수는 위와 같이 할 수 없음.

// 에러!
func_var();

var func_var = function() {
	// blabla..
}

동일한 이름의 선언적 함수와 익명함수를 같이 쓴다면 익명함수가 실행됨. 선언적 함수가 먼저 생성되고 익명함수가 나중에 생성되기 때문

var test = function() {alert('함수 A');}
function test() {
	alert('함수 B');
}

test(); // '함수 A' 출력

자바스크립트에선 함수를 선언할 때 리턴 형과 매개변수의 형을 지정해 주지 않음

자바스크립트에선 함수를 호출할 때 함수 생성 시 지정한 매개변수 개수보다 많거나 적은 매개변수를 사용하는 것을 허용함. 이 때 추가된 매개변수는 무시, 부족한 매개변수는 undefined 처리됨

function test(a, b) {
	alert(a);
	alert(b);
}

test('a', 'b', 'c'); // a b
test('a'); // a undefined

가변 인자 함수는 매개변수의 개수가 변할 수 있는 함수를 뜻함. 자바스크립트는 매개변수의 개수를 정의된 것과 다르게 사용해도 되지만, 여기서 말하는 가변인자 함수는 매개변수를 모두 활용하는 함수임. ex) Array() 함수

함수 형태	설명
Array()	빈 배열을 생성
Array(number)	매개변수 만큼의 크기를 갖는 배열을 생성
Array(any, any, …, any)	매개변수를 배열로 생성

가변 인자 함수는 arguments 변수를 사용해 만들 수 있음. arguments는 매개변수의 배열로, 자바스크립트의 모든 함수는 내부에 기본적으로 arguments 변수가 존재함

function sumAll() {
	alert(typeof(arguments) + ':' + arguments.length);
}

sumAll(1,2,3,4,5); // obj:5

function sumAll() {
	var output = 0;
	for (var i = 0; i < arguments.length; i++) {
		output += arguments[i];
	}
	return output;
}

alert(sumAll(1,2,3,4,5)); // 15

위 코드는 다음과 같이 for in 구문으로 만들어도 무방함

function sumAll() {
	var output = 0;
	for (var i in arguments) {
		output += arguments[i];
	}
	return output;
}

alert(sumAll(1,2,3,4,5));

ECMAscript 6 버전이라면 아래와 같이 for of 구문을 사용해도 좋음

function sumAll() {
	let output = 0;
	for (const value of arguments) {
		output += value;
	}
	return output;
}

alert(sumAll(1,2,3,4,5));

Array() 함수처럼 매개변수의 개수가 다를 때 서로 다르게 동작하도록 하려면 arguments의 요소 개수에 따라 조건을 설정하면 됨

function test() {
	var length = arguments.length;

	if (length == 0){
		// blabla..
	}
	else if (length == 1){
		// blabla..
	}
	else{
		// blabla..
	}
}

함수에서 아무 값도 리턴하지 않았는데 리턴값을 받으려 한다면 undefined가 나옴

function returnNothing() {
	return;
}

var output = returnNothing();
alert(output); // undefined

내부함수는 함수 내부에 선언하는 함수를 뜻함. 내부 함수는 해당 함수를 포함하는 함수에서만 사용할 수 있음

function external_func() {
	function internal_func1(){
		alert('inter1');
	}
	function internal_func2(){
		alert('inter2');
	}

	internal_func1();
}

external_func(); // inter1

internal_func2(); // 에러!

한 프로그램에 같은 이름의 함수가 있다면 뒤에 선언한 함수에 덮어씌어짐. 내부함수를 사용하면 외부에 같은 이름의 함수가 있어도 내부 함수를 우선 실행하므로 충돌을 방지함


// 아래의 square함수에 덮어씌어져 실행되지 않음
function square(x) {
return x * x;
}

function pythagoras(width, height) {
	return Math.sqrt(square(width) + square(height));
}

 // 아래의 square 함수가 선언되기 전에 호출한다 해도
 // 자바스크립트는 선언적 함수를 먼저 다 읽은 다음 코드를 실행하므로
 // 덮어씌어진 square 함수로 실행됨
alert(pythagoras(3, 4));

function square(width, height, hypotenuse) {
	if (width * width + height * height == hypotenuse * hypotenuse) {
		return true;
	} else {
		return false;
	}
}

// 위의 square 함수를 내부함수로 변경
// 외부의 함수에 영향을 받지 않지만 외부에서 사용 불가
function pythagoras(width, height) {
	function square(x) {
		return x * x;
	}
	return Math.sqrt(square(width) + square(height));
}

자기호출함수란 함수를 생성하자마자 호출하는 함수를 뜻함. 이것 또한 다른 개발자에게 영향을 주지 않도록 하는 방법임

(function() {
	alert('선언하자마자 실행해버리깃!');
})();

(function(a, b) {
	alert('선언하자마자 ' + a + b + '실행해버리깃!');
})(1, 2);

다른 함수의 매개변수로 전달하는 함수를 콜백함수라고 함

function callTenTimes(cb) {
	for (var i = 0; i < 10; i++) {
		cb();
	}
}

var callback = function() {
	alert('함수 호출')
};

callTenTimes(callback);

콜백함수는 대부분 익명함수로 사용하는 경우가 많음

callTenTimes(function() {
	alert('함수 호출');
});

함수를 리턴하는 함수

function returnFunction(){
	return function(){
		alert('returned function');
	};
}

// 방법 1
// 리턴된 함수를 변수에 넣어 사용
var func = returnFunction();
func();

// 방법 2
// 괄호를 두번 씀으로써, 호출한 함수에서 리턴된 함수를 바로 호출함
returnFunction()();

함수를 리턴하는 함수를 사용하는 가장 큰 이유는 클로저 때문.

var로 변수를 선언했다 해도 함수 안에 있는 변수는 지역변수이므로 외부에서 사용할 수 없으며, 함수 실행 시 생성되고 종료 시 사라짐.

function test(name) {
	var output = 'hello' + name;
}

test('js');
alert (output); // 에러!

하지만 클로저를 사용하면 이 규칙을 위반할 수 있음.

function test(name) {
	var output = 'hello' + name;
	return function() {
		alert(output);
	};
}

test('js')(); // hello js

// 원래대로라면 output변수는 지역변수이므로 함수 종료 시 사라져야 하지만
// 해당 변수가 이후에도 활용될 수 있으므로 자바스크립트는 변수를 제거하지 않고 남겨둠

여기서 클로저의 정의는 아래와 같이 다양함 지역변수를 남겨두는 현상 test() 함수로 생성된 공간 리턴된 함수 자체 살아남은 지역변수 output

지역변수 output을 남겨둔다 해서 외부에서 마음껏 사용할 수 있는 것은 아님 반드시 리턴된 클로저 함수를 사용해야만 지역 변수 output을 사용할 수 있음 클로저 함수로 인해 남은 지역 변수는 클로저 함수 각각의 고유한 변수임

function test(name) {
	var output = 'hello' + name;
	return function() {
		alert(output);
	};
}

var test1 = test('web');
var test2 = test('js');

test1(); // hello web
test2(); // hello js

alert(output); // 에러!

[자바스크립트] 내장함수

CheeseB — Wed, 16 Sep 2020 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

자바스크립트 내장 함수

내장함수 정의

자바스크립트에서 자체적으로 제공하는 함수로, alert() 함수와 prompt()등이 있다.

타이머 함수

메서드 이름	설명
setTimeout(function, millisecond)	일정 시간 후 함수를 한번 실행함
setInterval(function, millisecond)	일정 시간마다 함수를 반복 실행함
clearTimeout(id)	해당 id의 setTimeout 함수 중지
clearInterval(id)	해당 id의 setInterval 함수 중지

setTimeout() 함수는 한번만 실행하므로 특별히 주의할 사항이 없지만 setInterval() 함수는 지속적으로 컴퓨터의 자원을 소비하므로 꼭 중지시켜 주어야 함

// 1초마다 함수 실행
var intervalID = setInterval(function() {
	alert('1초 경과');
}, 1000);

// 10초 뒤에 함수 실행
setTimeout(function() {
	clearInterval(intervalID);
}, 10000);

setTimeout() 함수와 setInterval()함수를 사용하면 타이머 아이디를 리턴하는데, 이 아이디를 clearTimeout()함수나 clearInterval()함수의 매개변수에 넣어주면 타이머를 정지할 수 있다.

인코딩, 디코딩 함수

함수 이름	설명
escape()	알파벳, 숫자, 일부 특수문자(@ * - _ + . /)를 제외하고 모두 인코딩함. 1바이트 문자는 %XX, 2바이트 문자는 %uXXXX 형태로 변환
unescape()	위 함수의 디코딩 버전
encodeURI(uri)	escape()함수에서 인터넷 주소에 사용되는 일부 특수문자(: ; / = ? &)는 변환하지 않음
decodeURI(encodedURI)	위 함수의 디코딩 버전
encodeURIComponent(uriComponent)	알파벳, 숫자를 제외한 모든 문자를 인코딩함. UTF-8 인코딩과 동일
decodeURIComponent(encodedURI)	위 함수의 디코딩 버전

모두 비슷한 기능을 수행하므로 어떤것을 사용해도 상관 없다.

코드 실행 함수

함수 이름	설명
eval(string)	문자열을 자바스크립트 코드로 실행함

var willEval = '';
willEval += 'var number = 10;';
willEval += 'alert(number);';

eval(willEval); // 10

alert(number); // 10

eval() 함수는 문자열을 자바스크립트 코드로 실행하는 함수이므로 eval() 함수로 실행된 코드에서 정의한 변수를 활용할 수도 있다.

숫자 확인 함수

함수 이름	설명
isFinite(number)	number가 유한한 값인지 확인
isNaN(number)	number가 NaN인지 확인

자바스크립트는 숫자를 0으로 나누면 Infinity라는 값이 들어간다.

var number = 1/0;
alert(number + ':' + isFinite(number)); // Infinity : false

또한 자바스크립트에는 Infinity라는 변수가 존재하지만, 음수를 0으로 나누면 -Infinity가 되므로 Infinity 변수와 비교하지 말고 반드시 isFinite() 함수를 사용해야 한다.

var number = -10/0;
alert(number == Infinity) // false
alert(number == -Infinity) // true

alert(isFinite(number)) // false

NaN도 마찬가지로 NaN 이라는 변수가 존재하지만 NaN끼리 비교하는 것은 불가하므로 반드시 isNaN() 함수로 확인해야한다.

alert(NaN == NaN) // false
alert(isNaN(NaN)) // true

숫자 변환 함수

자바스크립트는 Number() 함수 외에도 또 다른 숫자 변환 함수를 제공한다.

함수 이름	설명
parseInt(string)	문자열을 정수로 변환
parseFloat(string)	문자열을 유리수로 변환

Number() 함수는 인자에 숫자로 바꿀수 없는 부분이 하나라도 있으면 NaN으로 변환하지만, 위의 두가지 함수는 숫자로 변환할 수 있는 부분까지는 모두 숫자로 변환한다.

var won = '1000원';
var dollar = '1.5$';

alert(Number(won) + ':' + Number(dollar)); // NaN:NaN
alert(parseInt(won) + ':' + parseInt(dollar)); // 1000:1
alert(parseFloat(won) + ':' + parseFloat(dollar)); // 1000:1.5

// 앞부터 읽으므로 맨 앞에 숫자가 오지 않으면 변환 불가
alert(parseInt('$1000') + ':' + parseFloat('$1000')); // NaN:NaN

parseInt()는 맨 처음에 0x로 시작하면 16진수로 생각하고 변환한다.

parseInt('0x273'); // 627
parseInt('273'); // 273

parseFloat('0x273') // 0

parseInt()함수의 두번째 매개변수에 진법을 입력하면 해당 진법의 수로 인식한다.

parseInt('FF', 16); // 255
parseInt('52', 10); // 52
parseInt('11', 8); // 9
parseInt('10', 2) // 2

parseFloat() 함수는 중간에 e가 들어가면 자릿수로 인식한다.

parseFloat('52.273e5'); // 5227300

[자바스크립트] 콜백함수, 화살표 함수 등

CheeseB — Wed, 16 Sep 2020 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

자바스크립트 실행 순서

자바스크립트의 함수 중 아래 함수는 웹 브라우저에 처리를 부탁하는 함수이다. 웹 브라우저가 처리하고, 처리가 완료되었다는 것을 자바스크립트에 알려주는 방식이다.

타이머 함수
웹 요청 관련 함수

이 함수들은 다른 코드의 실행이 모두 끝나기 전까진 실행되지 않는다.

alert('a');

setTimeout(function() {
	alert('b');
}, 0);

alert('c');

위의 예시에서 타이머의 시간을 0으로 설정한다 해도 다른 코드가 끝날때까진 실행되지 않기 때문에 출력 순서는 abc가 아닌 acb가 된다.

// 실행 불가
setTimeout(function() {
	alert('set timeout');
}, 0);

while(true) {}

이는 회사에서 일하는 동안 집에 배송된 택배를 확인하지 못하는 것과 마찬가지이다. 0초 뒤에 택배를 집에 보내달라 해 봤자 회사 일이 끝나지 않았으므로 택배를 확인할 수 없는 것이다.

반복문과 콜백 함수

자바스크립트의 실행 순서 때문에 발생하는 문제는 반복문에서도 생긴다.

for(var i = 0; i < 3; i++) {
	setTimeout(function(){
		alert(i);
	}, 0);
}

위 코드의 실행 결과는 3, 3, 3이다. 이는 setTimeout()함수가 실행되는 시점이 반복문이 모두 끝난 이후이므로 발생하는 문제이다.

계획대로 0, 1, 2를 출력하고자 한다면 변수를 따로 복사해 두어야 하며, 이 때 자기 호출 함수와 클로저를 사용한다.

for (var i = 0; i < 3; i++) {
	(function(closed_i) {
		setTimeout(function() {
			alert(closed_i);
		}, 0);
	})(i);
}

다른 해결 방법으론 배열의 forEach() 메서드가 있다. forEach() 메서드는 배열 요소 하나하나를 콜백함수의 매개변수로 사용할 수 있도록 한다.

// 콜백함수의 i 인자에 배열 요소가 차례로 들어가며 호출됨
[0, 1, 2].forEach(function(i) {
	setTimeout(function() {
		alert(i);
	}, 0);
})

이 또한 함수 내부에서 클로저가 만들어지므로 정상적으로 실행된다.

forEach의 콜백함수의 인자로 배열 요소 뿐 아니라 인덱스, 전체 배열도 사용할 수 있다.

const arr = [1,2,3,4,5];

arr.forEach(function(element, index, array){
    console.log(`${array}의 ${index}번째 요소 : ${element}`);
});

forEach를 쓸 땐 continue나 break로 반복을 제어할 수 없고, throw(예외)를 발생시켜야만 반복을 종료할 수 있다는 점을 유의해야 한다.

ECMAScript 6에서는 반복문에 let 키워드를 사용함으로써 간단히 해결할 수 있다.

for(let i = 0; i < 3; i++) {
	setTimeout(function(){
		alert(i);
	}, 0);
}

기본(default) 매개변수

자바스크립트에선 매개변수를 입력하지 않았을 때 매개변수를 강제로 초기화할 수 있다. 단순히 매개변수가 undefined 라면 값을 넣어주는 방식으로 구현할 수 있다.

function test(a, b, c) {
	if (!b) {b = 10;}
	if (!c) {c = 20;}

	alert(a + ':' + b + ':' + c);
}



test(100, 50); // 100:50:20

일반적으론 아래와 같이 짧은 조건문을 사용하여 간단히 초기화 시킨다.

function test(a, b, c) {
	// b값이 있으면 b를 넣고 없으면 10을 넣음
	b = b || 10;
	c = c || 20;

	alert(a + ':' + b + ':' + c);
}

test(100, 50);

자바스크립트에선 논리 연산자의 좌변만으로 연산을 끝낼 수 있다면 우변을 계산하지 않는다는 점을 이용해 짧은 조건문을 만들 수 있다.

true || alert('실행되지 않음');
false || alert('실행됨');

true && alert('실행됨');
false && alert('실행되지 않음');

if (10 < 20) {
	alert('boom!');
}

// 위와 동일한 결과
10 < 20 && alert('boom!');

가독성이 떨어져서 다른 용도로는 거의 사용되지 않지만, 매개변수를 초기화 하는 방법으론 매우 많이 쓰인다.
논리 연산 결과를 변수에 넣으면 나중에 연산된 피연산자의 값이 들어가는 점을 활용한다.

var a = 0;

a = a || 10; // a = 10
a = 1 < 2 || 20; // a = true
a = 1 < 2 && 20; // a = 20
a = 0 && 1; // a = 0
a = 10 && true; // a = true
a = '' && '오?'; // a = ''
a = '엥' || '왱'; // a = '왱'

ECMAScript6 에서는 기본 매개변수를 쉽게 만들 수 있는 문법을 제공한다.

function test(a, b = 10, c = 20) {
	alert(a + ':' + b + ':' + c);
}

test(100, 50);

화살표 함수 (ECMAScript 6)

익명 함수를 다음과 같이 간단하게 사용할 수 있는 것이 ECMAScript 6에 추가된 화살표 함수이다.

// function() {}
() => {}

이전의 익명 함수와 다른 것은 this 키워드의 의미이다.

함수	this 키워드
익명 함수	함수 자체에 바인딩되어 있는 객체 (window 객체 또는 프로토타입 객체)
화살표 함수	전역 객체 (웹 브라우저 환경에선 window 객체)

ECMAScript 6 코드를 ECMAScript 5 코드로 변환해주는 바벨과 같은 트랜스파일러는 화살표 함수를 익명함수로 단순 변환해버리므로 this 키워드를 주의해서 사용해야 한다. 함수 내부에서 this 키워드를 사용하지 않는다면 완전히 치환해서 사용해도 좋다.

바벨은 let 키워드도 var로 단순 변환하므로 비동기 함수 등을 사용할 때 주의해야 한다.

자바스크립트 코드 스타일 가이드와 에어비앤비 자바스크립트 가이드에는 기존의 함수 리터럴을 사용하지 말고 화살표 함수만 사용할 것을 장려하고 있다. 화살표 함수를 사용할 때는 다음과 같은 전제조건이 있다.

프로토타입을 사용하지 않고, ECMAScript 6에서 추가된 클래스를 사용할 때
jQuery의 문서 객체 조작에서 this 키워드가 아니라 event.currentTarget을 사용할 때

그리고 아래와 같이 함수 안의 코드가 한줄이라면 return 키워드를 쓰지 않아도 값을 리턴하며, 중괄호를 생략해도 된다.

const multiply = (a, b) => a * b;

alert(multiply(1, 2)); // 2

전개 연산자 (ECMAScript 6)

ECMAScript 6 에선 마침표 3개(…)를 찍어 표기하는 전개 연산자가 추가되었다. 전개 연산자는 함수나 배열에 적용 가능하며, 전개 연산자를 사용하는 경우는 다음과 같다.

가변 매개변수 함수를 만들 때
함수 호출 시 배열의 요소를 하나하나 매개변수로 넣고 싶을 때

이전에는 arguments 객체를 활용해서 가변 매개변수를 만들었지만, 전개 연산자를 사용해서 만들 수도 있다.

// arguments 객체 사용
function test1() {
	alert(arguments[0]);
	alert(arguments[1]);
	alert(arguments[2]);
}

// 전개 연산자 사용
function test2(...numbers) {
	alert(numbers[0]);
	alert(numbers[1]);
	alert(numbers[2]);
}

전개 연산자로 받는 매개변수의 이름을 arguments로 정의하면 기존의 arguments 객체가 덮어씌워지므로 다른 이름을 사용하는 것이 좋다.

전개 연산자는 다른 매개변수와 조합해서 입력할 수도 있다. 이 때 전개 연산자는 반드시 맨 뒤 매개변수에 딱 하나만 사용해야 한다. (앞에다 사용하면 어디까지가 가변 매개변수인지 모르기 때문)

function test(a, b, ...numbers) {
	console.log(numbers);
}

test(1, 2, 3, 4, 5); // [3, 4, 5]

arguments 객체를 사용해서 가변 매개변수 함수를 만들 때보다 전개 연산자를 사용할 때 좋은 점은 아래와 같다.

다른 매개변수와 조합 가능
매개변수에 좀 더 명확한 이름을 붙여 가독성을 향상

또한 arguments 객체는 배열이 아니라 배열처럼 생긴 특별한 객체인 ‘배열 유사 객체’ 이지만, 전개 연산자로 입력한 변수는 완전한 배열이라는 것이 다른 점이다.

배열의 요소를 매개변수로 다 넣고 싶을 때, 이전의 ECMAScript 5 까지는 아래와 같이 해야 했다.

function test(a, b, c, d) {
	alert(`${a}:${b}:${c}:${d}`);
}

var array = [1, 2, 3, 4];
test.apply(null, array); // 1:2:3:4

모든 함수에는 apply() 메서드가 있다. 첫번째 매개변수는 함수 내부에서 활용할 this 객체, 두번째는 매개변수 배열을 넣는다.

위 방법은 첫번째 매개변수를 잘못 사용하면 문제가 될 수도 있고, 코드의 가독성이 떨어지기 때문에 ECMAScript 6 에서는 전개 연산자로 함수의 매개변수에 배열을 전개해서 넣을 수 있도록 했다.

function test(a, b, c, d) {
	alert(`${a}:${b}:${c}:${d}`);
}

var array = [1, 2, 3, 4];
test(...array); // 1:2:3:4

또한 아래와 같이 일부를 배열로 채우고 나머지에 다른 매개변수를 넣거나, 배열을 병합해서 매개변수로 전달하는 것도 가능하다.

function test(a, b, c, d) {
	alert(`${a}:${b}:${c}:${d}`);
}

var array = [1, 2];

test(10, 20, ...array); // 10:20:1:2
test(...array, 3, 4); // 1:2:3:4
test(...array, ...array); // 1:2:1:2

[파이썬] 리스트

CheeseB — Wed, 16 Sep 2020 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

파이썬에서 빈 리스트를 생성하는 두가지 방법은 아래와 같다.

a = []
b = list()

range함수를 사용해 리스트를 초기화하는 방법은 아래와 같다.

b = list(range(1, 11)) # [1,2,3...,10]

파이썬에서는 + 연산자를 이용해 두 리스트를 합칠 수 있다. 같은 값이 있어도 그대로 중복되어 합쳐진다.

a = [1,2,3]
b = [1,2,3,4,5,6]

c = a + b # [1,2,3,1,2,3,4,5,6]

리스트의 맨 뒤에 요소를 추가하고 싶다면 append(값) 함수를 사용한다.

a = [1,2,3]
a.append(4) # [1,2,3,4]

리스트의 특정 인덱스에 요소를 추가하고 싶다면 insert(인덱스, 값) 함수를 사용한다.

a = [1,2,3,4]
a.insert(2, 5) # [1,2,5,3,4]

리스트의 맨뒤 요소를 삭제하고 싶다면 pop() 함수를 사용한다.

a = [1,2,5,3,4]
a.pop() # [1,2,5,3]

리스트의 특정 인덱스 요소를 삭제하고 싶다면 pop(인덱스) 함수를 사용한다.

a = [1,2,5,3]
a.pop(2) # [1,2,3]

리스트에서 특정 값을 가지는 요소를 삭제하고 싶다면 remove(값) 함수를 사용한다.

a = [1,2,3]
a.remove(2) # [1,3]

리스트의 특정 값에 해당하는 요소의 인덱스를 반환하고 싶다면 index(값) 함수를 사용한다.

a = [1,3,5,7,9]
a.index(5) # 2

리스트의 모든 값을 합치고자 하면 sum(리스트) 함수를 사용한다.

a = [1,2,3,4,5]
sum(a) # 15

리스트의 최대값, 최소값을 구하고자 하면 max(리스트), min(리스트) 함수를 사용한다.

a = [1,2,3,4,5,6]

max(a) # 6
min(a) # 1

리스트의 요소를 랜덤으로 섞고 싶다면 random 패키지의 shuffle 함수를 사용한다.

import random as r

r.shuffle(a)

리스트의 요소를 오름차순으로 정렬하고 싶으면 sort()함수를 사용하고, 내림차순으로 정렬하고 싶으면 sort(reverse = True) 함수를 사용한다.

a = [3,1,5,2,4]

a.sort() # [1,2,3,4,5]
a.sort(reverse=True) # [5,4,3,2,1]

리스트를 빈 리스트로 초기화하고자 한다면 clear()함수를 사용한다.

a.clear()
print(a) # []

리스트도 문자열과 마찬가지로 슬라이스가 가능하다. a[from:end] 는 a 리스트를 from 인덱스부터 end-1 인덱스까지 슬라이스한다.

a = [1,2,3,4,5]

a[:3] # [1,2,3]
a[2:4] # [3,4]
a[2:] # [3,4,5]

리스트를 역순으로 배치하고 싶다면 a[::-1]와 같이 하면 된다. 이는 문자열에도 적용된다.

a = [1,3,2,5,4]
b = "acbde"

a[::-1] # [4,5,2,3,1]
b[::-1] # "edbca"

리스트의 길이를 구하고 싶다면 len()함수를 사용한다.

a = [1,2,3,4,5]
len(a) # 5

len()함수를 이용해서 리스트의 요소를 하나하나 접근할 수 있다.

for i in range(len(a)):
	print(a[i])

하지만 아래와 같은 방법이 가장 많이 쓰인다.

for x in a:
	print(x)

그리고 리스트의 요소 뿐 아니라 인덱스 값 까지 활용하고 싶다면 아래와 같이 enumerate()함수를 사용하면 된다. enumerate()는 해당 리스트에 대한 튜플을 생성해준다.

a = [10, 20, 30, 40]

for x in enumerate(a):
	print(x)
# (0, 10)
# (1, 20)
# (2, 30)
# (3, 40)

리스트는 대괄호로 나타내지만, 튜플은 소괄호로 나타낸다.

a = [1,2,3] #리스트
b = (1,2,3) #튜플

리스트와 튜플의 접근법은 a[0], b[0] 이렇게 대괄호로 동일하다. 리스트와 튜플의 차이점은, 튜플은 값을 변경할 수가 없다는 것이다.

b = (1,2,3)
b[0] = 7 # error!

enumerate로 리스트의 튜플을 생성한 후에 인덱스와 값을 따로따로 접근할 수도 있다. 튜플의 0번째는 리스트의 인덱스, 1번째는 리스트의 값이다.

for x in enumerate(a):
	print(x[0], x[1])

하지만 위의 방법보다 아래의 방법을 제일 많이 사용한다.

for idx, value in enumerate(a):
	print(idx, value)

all(조건 for x in a) 이것은 a리스트의 모든 요소 x가 전부 조건을 만족해야 참이다.

if all(60>x for x in a):
	print("True")
# a의 모든 요소가 60보다 작아야 참이 됨

any(조건 for x in a) 이것은 a리스트의 요소 x 중 하나라도 조건을 만족하면 참이다.

if any(15>x for x in a):
	print("True") # a의 요소 중 하나라도 15보다 작으면 참이 됨

파이썬에서 1차원 리스트를 만드는 또다른 방법은 아래와 같다.

a = [0] * 3
# [0,0,0]

파이썬에서는 2차원 리스트를 다른 언어들처럼 a[][] = {} 이런 식으로 만들 수 없다. 파이썬에서 2차원 리스트를 만드는 방법은 아래와 같다.

a = [[0] * 3 for _ in range (3)]
# [[0,0,0], [0,0,0], [0,0,0]]

2차원 리스트에 단일 for문을 돌리면 행마다 접근할 수 있다.

a = [[0] * 3 for _ in range (3)]

a[0][0] = 1
a[1][1] = 2
a[2][2] = 3

for x in a:
  print(x)
# [1,0,0]
# [0,2,0]
# [0,0,3]

2차원 리스트에 이중 for문을 사용하면 리스트의 요소 하나하나 접근할 수 있다.

a = [[0] * 3 for _ in range (3)]

a[0][0] = 1
a[1][1] = 2
a[2][2] = 3

for x in a:
  for y in x:
    print(y, end=' ')
  print()
# 1 0 0
# 0 2 0
# 0 0 3

파이썬엔 리스트와 튜플 외에도 set 자료형이 있다.

set 특징

중복 없음
순서 없음
{} 대괄호로 표시

s1 = set("Hello")
print(s1) # {'e', 'H', 'l', 'o'}

리스트, 튜플, set 간에는 쉽게 변환이 가능하다.

s1 = set([1,2,3]) # {1, 2, 3}
l1 = list(s1) # [1, 2, 3]
t1 = tuple(l1) # (1, 2, 3)

[파이썬] 문자열 내장 함수

CheeseB — Wed, 16 Sep 2020 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

upper - 전부 대문자로 만들기

msg = "Hello World"
print(msg.upper()) # HELLO WORLD

print(msg) # Hello World
# 문자열 함수는 문자열에 함수 처리를 한 결과를 리턴할 뿐, 원본 문자열 자체를 바꾸진 않는다

lower - 전부 소문자로 만들기

print(msg.lower()) # hello world

find - 주어진 단어가 나오는 가장 첫 인덱스를 리턴

print(msg.find('l')) # 2

count - 주어진 단어가 나오는 개수를 리턴

print(msg.count('l')) # 3

[start:end] - 문자열의 start인덱스부터 end-1 인덱스까지 슬라이스

print(msg[1:4]) # ell
print(msg[:3]) # Hel
print(msg[8:]) # rld

len - 문자열의 길이 리턴

print(len(msg)) # 11

isupper - 문자가 대문자인지 확인

# 이렇게 for문을 쓰면 msg문자열의 문자 하나하나씩 접근 가능
for x in msg:
    if x.isupper():
        print(x) # HW

islower - 문자가 소문자인지 확인

for x in msg:
    if x.islower():
        print(x) # elloorld

isalpha - 문자가 알파벳인지 확인

for x in msg:
    if x.isalpha():
        print(x) # HelloWorld

ord - 문자의 아스키 값 리턴

tmp = 'A'
print(ord(tmp)) # 65

chr - 아스키 값에 해당하는 문자 리턴

tmp = 65
print(chr(tmp)) # A

[파이썬] 입출력과 연산자

CheeseB — Wed, 16 Sep 2020 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

print(a, b, c, sep=”) 이 문장에서 sep 부분을 빼고 실행시키면 자동으로 a b c 이렇게 공백으로 띄어서 출력되지만 sep을 지정하면 지정한 문자로 구분되어 출력된다. 예를들어 sep=” 이렇게 하면 abc 이렇게 붙어서 나오고 sep=’,’ 이렇게 하면 a,b,c 이렇게 출력된다.
print(a, end=’ ’) 이 문장에서 end부분을 빼고 실행하면 자동으로 a를 출력한 뒤 줄바꿈이 출력된다. 하지만 end를 지정하면 a 출력 후 지정한 문자가 출력된다. 예를들어 print(a, end=’ ‘)이땐 a 뒤에 공백이 출력되고 print(a, end=’,’) 이땐 a 뒤에 쉼표가 출력된다.
input()함수로 입력받은 것은 문자열 형태이다. 그러므로 a, b = input().split() 으로 문자열을 받았다면 a = int(a) b = int(b) 이렇게 따로따로 바꾸거나 애초에 a, b = map(int, input().split()) 이렇게 받으면 된다.
a = input().split() 하고 공백 단위로 여러개를 입력받으면 a는 받은 문자열들의 리스트가 된다. 만약 a, b = input().split() 으로 두개의 값을 받으면 a와 b는 각각 문자열이 된다. 이를 정수로 변환하고 싶으면 a, b = map(int, input().split()) 으로 해야하고, 그걸 다시 하나의 리스트로 만들고싶으면 a = list(map(int, input().split())) 이렇게 해야한다.
5/2 연산의 결과는 2.5이며 5//2 연산의 결과는 2이다. // 이것은 몫 연산이다. 그리고 ** 이 연산은 거듭제곱 연산으로, 5**2 이것은 5의 2승이다.
4.5 + 3 연산의 결과는 7.5이다. 서로 형이 다른것끼리 연산하면 더 큰 범위로 형변환 되는 것이다.
조건문에서 if 0 < x < 10: 이런식으로 중간 범위 조건을 쓰는것이 가능하다.
파이썬은 증감연산자(++, –)를 사용할 수 없다. 그 대신 i+=1 이나 i-=1 이렇게 써야 한다.
for에도 else문이 따라올 수 있다. for문이 원래의 반복 조건을 다 마치고 정상적으로 종료된 후에 else문이 실행되며, 만약 for문이 도중에 break로 중단되면 else문은 실행되지 않는다.

[파이썬] 함수

CheeseB — Wed, 16 Sep 2020 15:00:00 GMT

예전 블로그에 작성된 글을 옮긴 게시글입니다.

파이썬에서 함수 정의는 def 키워드를 사용한다. for문, if문과 마찬가지로 들여쓰기 되어있는 부분 까지가 함수 정의 부분이다.

def add(a, b):
  c = a+b
  return c

함수 정의 부분은 함수 호출하는 곳보다 반드시 위에 있어야 한다.

파이썬은 함수의 리턴값이 두 개일 수 있다. (두개의 리턴값이 하나의 튜플로 반환됨)

def add(a, b):
  c = a+b
  d = a-b
  return c, d

# (c, d)

아래는 간단한 소수 판별 알고리즘을 함수로 작성한 것이다.

def isPrime(x):
  for i in range(2, x):
    if x%i == 0:
      return False
  return True

a = [12, 13, 7, 9, 19]
for y in a:
  if isPrime(y):
    print(y)

파이썬에는 람다함수라는 개념이 있는데, 이는 익명함수 혹은 람다 표현식으로도 불린다.
그냥 함수와 람다함수의 차이는 다음과 같다.

# 그냥 함수
def plus_one(x):
  return x+1

# 람다함수 (x: 인자, x+2: 리턴값)
plus_two = lambda x: x+2

print(plus_one(1)) #2
print(plus_two(1)) #3

얼핏 보면 그냥 함수를 써도 되는 것을 굳이 람다함수를 쓰는 이유가 있을까 싶지만, 람다함수는 내장함수의 인자로 편리하게 사용할 수 있다. 다음은 그냥 함수와 람다함수를 이용해서 리스트에 함수를 매핑하는 코드이다.

여기서 map(a,b) 함수는 a 함수를 b 자료에 모두 적용시키는 기능을 가진다. 만약 a가 자료형이라면 b 자료를 a 자료형으로 모두 변환시킨다.

# 그냥 함수
def plus_one(x):
  return x+1

a = [1,2,3]
print(list(map(plus_one, a))) # [2,3,4]


# 람다함수
a = [1,2,3]
print(list(map(lambda x: x+1, a))) # [2,3,4]