코딩기록지

1.Enum (열거형 타입)

기본형은 이렇다.

enum Test {
	ADMIN,
	CUSTOMER,
	USER
}

숫자를 직접 할당해도 되지만 굳이 입력하지 않아도 자동으로 할당된다.

enum Test {
	ADMIN = 0,
	CUSTOMER = 1,
	USER=2
}

배열처럼 처음부터 0,1,2 순서로 할당됨.

물론 원하는대로 할당 숫자와 위치를 지정할 수도 있다.

enum Test {
	ADMIN ,
	CUSTOMER = 10,
	USER
}

Test.ADMIN //0
Test.CUSTOMER //10
Test.USER //11

프로퍼티값이 많고, 코드가 복잡할 경우 혹시 모를 오타와 통일되지 않는 값을 적어넣는 등의 실수를 방지할 수 있다.

const user1 = {
    name:"이름이다",
    (중간에 많은 프로퍼티 존재)
    role: "user"
}
...
..
.
const user25 = {
    name:"이름이다25",
    (중간에 많은 프로퍼티 존재)
    role:"usere"
}

이런 오타 방지 가능

문자 할당도 가능하다.

enum Test {
    ADMIN = "admin" ,
    CUSTOMER = "customer",
    USER = "user"
}

2. any 

특정 변수 타입을 모를 때 사용한다. 이 변수에 문자가 담길지, 숫자가 담길지, 불리언이 담길지...

• any타입에는 모든 값이 들어가고, 모든 메서드가 사용 가능하다.

let anyVar:any = 10;
anyVar = "Hi"
anyVar = {}
anyVar = ()=>{};

anyVar.toUpperCase();
anyVar.toFixed();

위 예시처럼 숫자, 문자, 객체, 함수까지 모두 할당 가능하고, 

문자열 메서드, 숫자 메서드를 사용해도 오류가 뜨지 않는다.

하지만 이렇게 무분별하게 any 타입을 사용하고 값을 재할당 할 경우, 런타임에서 오류가 발생할 수 있음에 주의해야한다.

위 코드에서도 계속해서 다른 타입의 값을 anyVar 에 할당했다.

최종적으로 anyVar에 함수가 할당되고,

anyVar.toUpperCase(); 함수가 실행되면 anyVar에서 문자열을 찾을 수 없어 오류가 발생한다.

any타입은 불가피한 경우가 아니면 사용 자제해보기!

• 변수에도 any타입을 담을 수 있다.

let num:number = 100;
let anyVar:any = "hello"

num = anyVar

3.unknown

• any처럼 어떤 값이라도 저장할 수 있지만 보다 안전하다.
• 연산, 메서드 사용이 불가하다.
• any와는 달리 어떤 변수에도 저장 불가능

4.void

• 값을 반환하지 않는 함수의 반환값 타입을 정의한다.

function foo():void{
 	console.log("hello") // return 값이 없다
}

• 변수에도 void 할당이 가능하다.

let testVar:void


testVar = undefined;

이 때 void 타입인 변수에는 undefined만 담을 수 있다.

tsconfig.json에서 컴파일러옵션의 strictNullChecks을 false 체크하면 null도 담을 수 있다.

5.never

• 말 그대로 불가능을 의미
• 함수가 어떤 값도 반환하지 않는 모순된 함수일경우
• 변수에 할당 시 어떤 값도 담을 수 없다. (any 포함)

1.원시타입

하나의 값만 저장 가능하다.

• number,string,boolean

var extra:number = 10
//변수 extra는 숫자타입이다.

var extra:string="테스트"
//변수 extra는 문자타입이다.

var extra:boolean=true
//변수 extra는 boolean타입으로 true 혹은 false 값만 담을 수 있다.

• null과 undefined는 그 자체만 넣을 수 있다.

var extra:null = null;
var extra:undefined=undefined;

2.리터럴타입

변수에 담긴 값 그 자체가 타입이 된다.

var Test:10 = 10
var Test2:false = false

리터럴타입으로 변수를 정의하게 되면 변수에 다른 값은 할당할 수 없게된다.

3.배열

var numArr:number[] = 123
var Array<number> = [1,2,3] //제네릭
var Array:number[][] = [[1,2] , [1,2,3]] //다차원 배열

• 배열 요소가 다양한 타입을 갖고있다면 유니온 타입을 이용한다.

var testArry:(string | number)[] = ["문자", 123]

여기서 string이거나 number의 순서가 바뀌어도 된다.

4.튜플

• 배열의 길이와 타입, 순서를 고정하고 싶다면 튜플을 사용한다.

var testArray:[number,string,number] = [12,"문자",2]

숫자,문자,숫자 순서의 길이 3인 배열로 고정되었다.

주의할 점은 배열 관련된 함수를 사용할 때이다.

var arr:[number,number] = [1,3];
arr.push(12);
console.log(arr) //[1,2,12]

즉, 튜플로 길이를 고정해놓았다해도 이처럼 요소가 추가, 삭제될 수 있으니 주의해서 사용해야한다.

5.객체

• 객체 타입 기본 정의 방법

객체의 타입을 정의하는 방법은 앞서 언급했던 타입들과 살짝 다르다.

var obj:object = {
	name:"이름",
    	age:10
}

여기에서는 오류 발생이 없지만

var obj:object = {
	name:"이름",
    	age:10
}

obj.name

이렇게 호출하는 순간 오류메시지가 뜬다.

• 객체 리터럴 타입

var obj:{
	name:string;
    	age:number
} = {
	name:"이름",
    	age:10
}

객체 리터럴 타입을 이용해 각 프로퍼티의 타입을 구체적으로 설정한다.

결론적으로 객체의 구조를 기준으로 타입이 정의된다고 볼 수 있는데, 타입스크립트에서는 이처럼 객체가 구조적 타입 시스템을 택한다.

• 선택적 프로퍼티

var obj: {
	name:string;
    	age?:number
} = {
	name:"이름이다",
}

코드를 짜다 보면 어떤 프로퍼티는 있을 수도 있고 없을 수도 있다..

확실하지 않지만 일단 있다면 number타입으로 집어넣어보고싶다! 라면 위 예제처럼 프로퍼티 key 값 뒤에 ? 를 붙인다.

• 읽기전용 프로퍼티

var obj: {
	readonly name:string
} = {
	name:"이름이다"
}

readonly가 붙은 프로퍼티는 이제 읽기전용이되어 다른 값을 할당할 수 없다.

실제로 obj.name = "이름이 아니다" 와 같이 값을 재할당하려하면 오류가 뜬다.

• 타입 별칭

타입을 변수처럼 정의해 중복을 막는다. 코드 길이가 줄어들어 더 깔끔하게 코드짜기 가능~

type User = {
	name:string;
    	age:number;
        position:string
}

let user1: User = {
	name: "이름1",
    	age:17,
    	position:"학생"
}

let user2: User = {
	name: "이름2",
    	age:30,
    	position:"직장인"
}

• 인덱스 시그니처

위의 타입 별칭보다 더 코드를 줄이면서 객체 타입을 유연하게 정의할 수 있다.

정의해야 할 프로퍼티가 너무 많을 때 유용하게 쓸 수 있다.

type User = {
	[key: string] : string
}

프로퍼티와 값이 모두 문자열로 정의된다.

type User = {
	[key: string] : string
}

type User = {
	[key: string] : string;
	testkey: string
}

type User = {
	[key: string] : string;
	testkey: number;
}
//오류

type User = {
	[key: string] : string;
	testkey: "문자열"
}
//가능

type User = {
	[key: number] : string;
	testkey: string
}
//가능

특별하게 따로 지정하고싶은 key값이 있다면 이렇게 따로 지정 가능하다.

주의할 점은 인덱스 시그니처의 값 타입과 일치하거나 호환되어야한다는 점이다.

인덱스 시그니처는 이론만 봤을 땐 어떤 경우에 사용하는지 감이 오지 않지만 일단 외워두기.

슬라이드가 바뀔 때 마다 progressbar가 멈추고 새로 시작하도록한다.

swiperMain.on('slideChange', function)이 핵심인데, 

var swiper = new Swiper("", {

    on: {

    slideChange: function(){}

 }

})

이렇게 스와이퍼 선언할 때 한꺼번에 안에 넣어도 상관은없다. 

개인적으로는 복잡해서 따로 넣는걸 선호하는 편..

See the Pen Untitled by yeaseula (@yeaseula) on CodePen.

임의로 슬라이드를 넘겨도 progressbar는 처음부터 다시 동작을 시행한다.

중간에 offset을 집어넣은 이유는..

removeClass, addClass가 반복적으로 적용되긴하지만 

결과적으로 보면 'animation 클래스를 지운다'는 결과로 변동이 없기때문에 이를 인식하지 못한다. 

그래서 offset을 측정해서 변동있음을 알리기 위해 집어넣었다.

첫 회사 포트폴리오 만들 때도 사용했던 fullPage.

업무중에 다시 만났다. 

하나도 안반갑다.

cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css">

See the Pen Untitled by yeaseula (@yeaseula) on CodePen.

잘 챙겨야될 것은 fullpage 영역 안에 들어가는 각각의 태그들에 section 클래스를 달아주면 되고, 

보통 footer의 경우는 높이를 100vh나 차지하지 않기때문에...

그냥 강제로 높이지정 해버렸더니 자연스럽게 스크롤 됨.

+ 클라이언트가 추가로 요청한 사항인데 

footer 영역에선 굳이 앵커가 필요 없다며 footer까지 스크롤이 들어갔을 때 앵커를 아예 없애달라고 했다.

개발자도구를 켜보면 

스크롤해서 각 섹션에 도달할 때 마다 body의 클래스명이 바뀌는 걸 확인할 수 있다.

앵커를 없애거나 뭔가 변화를 주고싶은 영역에서의 body 클래스명을 확인한 후 

jquery를 이용해 쉽게 변경 가능. (코드펜 참고)

보험 가입 희망 양식 작성 시 간단한 보험료 계산 기능을 추가하길 원해서 만들게 되었다.

가입을 원하는 상품들을 라디오와 체크박스 버튼을 통해 선택하도록 만들어야했다.

완성작 먼저!

See the Pen Untitled by yeaseula (@yeaseula) on CodePen.

실제로는 여기서 탭 기능까지 추가해 몇 가지 기능들을 더 넣어야했지만 다 빼버리고 가장 기본적인 동작 원리만 뽑아왔다.

코딩을 하기 전 어떤 부분에 신경을 써야 하는지 머릿속에 간단하게 떠올렸다.

- 배열을 사용해보자.
- 라디오타입은 label 하나를 선택하면 직전에 선택한 label은 자동으로 취소되므로 
배열에 하나의 값만 담기도록 만들자.
- 체크박스타입은 원하는대로 선택이 가능하기때문에 체크해제했을 때 배열에서 삭제하는 기능만 신경쓸 것.

1. 라디오 버튼에 들어간 함수

normalArray = new Array;

	function normalSelect(){
		var normal_extravar = document.querySelector('input[name="extra_vars6"]:checked');
		var normal_extravar_val = $(normal_extravar).val();
		normalArray.push(normal_extravar_val);
		if(normalArray.length > 1){
			normalArray.shift();
		}
	}

배열을 하나 만들어 선택한 value를 뒤에 넣는다. (push 사용)
배열의 길이가 1을 넘어가면 앞에있는 value값을 삭제한다. (shift 사용)
그러면 항상 배열의 길이는 1을 넘지 않게되고 가장 최근에 선택한 값만 배열에 존재하게 된다!

굴러들어온 돌로 박힌 돌 빼는 전략!

생각보다 간단하다. 사실 아는게 별로 없어서.. 알고있는 지식 최대한 활용하는 수 밖에...ㅠㅠ

2. 체크박스에 들어간 함수

specialArray = new Array;

	function eoSelect(checked){
		var special_extravar = $(checked).val();
		if(checked.checked==true){
			specialArray.push(special_extravar);
		} else {
			for(i=0; i < specialArray.length;i++){
				if(specialArray[i] == special_extravar){
				specialArray.splice(i,1)
				}
			}
		}
	}

체크가 됐으면 체크된 input 의 value를 배열에 넣는다.
체크가 해제됐으면 배열에 있는 값들 중 체크해제 된 input의 value와 일치하는 값이 있는지 찾아본다.
해당 인덱스번호의 값만 배열에서 삭제한다.

3. 라디오, 체크박스에 전부 들어가는 함수

function calculation(){
	var TotalPrice = document.getElementsByClassName('total_price')[0];
	var result = 0;

	if(specialArray.length > 0){
		for(i=0; i<specialArray.length;i++){
			result += parseInt(specialArray[i]);
		}
	}
	if(normalArray.length > 0){
		result += parseInt(normalArray[0]);
	}


	Res=result.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
	TotalPrice.value = Res+'원';
}

normalArry와 specialArray를 모두 합해서 총 계산 칸에 넣는다.

끝!