전체 글

[TypeScript_study] Record

Record K : key T : type - TypeScript는 Version 2.1부터 Utility Type인 Record Type을 도입했습니다. Record Type은 Record 형식으로 키가 Key이고 값이 Type인 객체 타입입니다. * Record를 활용하기 전 interface Score { "1" : "A" | "B" | "C" | "D" "2" : "A" | "B" | "C" | "D" "3" : "A" | "B" | "C" | "D" "4" : "A" | "B" | "C" | "D" } const score:Score { 1 : "A", 2 : "C", 3 : "B", 4 : "D", }; * Record를 활용한 코드 type Grade = "1" | "2" | "3" | "4..

[TypeScript_study] 함수 오버로딩(Function Overloading)

* 함수 오버로딩이란? TypeScript에서는 같은 이름을 가진 함수를 여러 개 정의할 수 있으며 각 함수는 서로 다른 타입을 가지는 매개변수로 정의해야 합니다. 매개변수가 다르며 이름이 동일한 함수를 함수 오버로딩이라고 합니다. * 매개변수의 개수는 동일하지만, 타입이 다른 경우 interface User { name: string; age: number; } function join(name: string, age: number|string):User|string { if(typeof age === 'number') { return ( name, age, ); } else { return "type number"; } } const kim:User = join("kim", 30); const par..

[TypeScript_study] Typescript 설치와 셋팅 & 간단 사용법(Vue, React 포함)

* 타입스크립트 쓰는 이유 - TypeScript는 JavaScript의 타입부분을 업그레드해서 사용하고 싶을 때 사용하는 일종의 JavaScript의 일종의 확장판이다. 완전 다른 언어가 아니라 JavaScript문법 그대로 이용가능한대 타입 문법을 업그레이드 해서 사용할 수 있다. - JavaScript는 타입에 관대하다. 따라서 숫자와 문자를 연산해도 아무런 문제 없이 정상적으로 작동한다. 혹은 숫자로 바꿔주는 함수에 이상한 값을 넣어도 아무런 오류가 없다. 언어 자체에서 알아서 타입을 변경해준다. (JavaScript는 Dynamic typing를 지원하는 언어이기 때문이다.) ex) 5 - "3" 혹은 parseInt([1, 2, 3]) - Dynamic typing은 간단한 기능을 개발할 때는..

[React_study] 터미널 / 브라우저 콘솔창에 warning

* 터미널 / 브라우저 콘솔창에 warning이 뜨는 이유 개발을 하다보면 에러메세지는 터미널 혹은 브라우저 개발자도구에서 확인이 된다. 간혹 노란색의 waining 메세지가 등장하는 경우가 있다. 해당 warning는 무시하고 넘어가도 된다. (빨간 error은 해결해야한다.) 대부분 Eslint에서 잘못된 코딩관습을 교정해주고 있어서 warning를 띄워주고있다. ex) 000변수를 만들었는데 사용하지 않고 있습니다. 삭제하는게 어떤가요. 개발하다보면 에러메세지는 터미널이나 브라우저 개발자도구에 뜬다고 했는데 간혹 노란색 warning 메세지가 등장하는 경우가 있습니다. 빨간 error는 해결해야하지만 warning은 개무시해도 됩니다. /*eslint-disable*/ 이라는 주석을 js 파일 최상..

[React_study] reset css 하는 방법 + npm으로 설치

* reset css를 하는 이유 브라우저마다 태그를 렌더링하는 기본 스타일이 다르고, 기본 padding,margin값들 이 적용되어 있는 부분을 초기화 하기위해 style 기본값을 0으로 만들고 list,a태그에 기본적으로 적용된 스타일들의 초기화를 위해 reset css를 해준다. [결론적으로는] 크로스 브라우징을 위해 브라우저마다 다른 기본값들에 대한 차이를 없애는것이다 * 기존에 사용하던 방법 ( css 파일 추가 ) https://meyerweb.com/eric/tools/css/reset/index.html 가장 많이 사용 하는 Reset css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public..

[JavaScript][clean-code] 클로저 (Closure)

* Closure (클로저) [참고 내용] https://latte1114.tistory.com/298 https://latte1114.tistory.com/365 * 클로저 예시 코드 function add(num1) { return function sum(num2) { return num1 + num2; }; } const addOne = add(1); console.log(addOne(3)) // 4 // 1을 넘긴상태로 scope가 기억되기 때문에 4가 호출된다. 클로저를 사용한 함수를 보면 괄호가 2개이다. 괄호가 모두 호출되면 완벽히 함수가 다 호출되고 종료된다. 그말은 즉, 괄호를 한번 실행했기 때문에 add라는 함수는 외부함수만 실행이 된거고 실행된 상태에서 내부의 함수의 환경을 기억하고 ..