본문 바로가기

자바스크립트71

[Refactoring] 변수 추출하기 1. 개요 - 지역변수를 활용해 표현식을 쪼개서 관리하기 쉽게 만든다 - 표현식에 이름을 붙이는 것 - 함수 추출하기와 상당히 유사하다. - 반대로 작업하면 변수 인라인하기이다. 2. 절차 - 불변 변수를 하나 선언하고 이름을 붙일 표현식의 복제본을 대입한다. - 원본 표현식을 새로 만든 변수로 교체한다. - 테스트 - 표현식을 여러 곳에서 사용한다면 변수로 바꿔준다. - 주기적으로 테스트해준다. 3. 예시 - 주문수량 * 개별가격 부분을 추출해보자 - 다음은 수량 할인 / 배송비 부분을 추출해본다. - 주석은 지워도 된다. 리턴 뒤 표현식 자체가 주석처럼 이해하기 쉽게 정리되었기 때문이다. 4. 예시 2 - OOP에서 - 변수로 추출할 수도 있지만, 메서드로 추출할 수도 있다. - 덩치가 큰 클래스에서.. 2023. 5. 3.
[Refactoring] 함수 인라인하기 1. 함수 인라인하기 : - 함수의 본문이 제목보다 읽기 명확한 경우에는 함수제목이 거슬릴 뿐이다. 함수를 인라인으러 넣어버리는 작업을 행하기도 한다. - 이전 단계에서 함수 추출하기의 반대 행위이며, 함수의 목적과 행위의 흐름을 파악하기 좋은 방향으로 추출 혹은 인라인을 진행한다. - 좋은 코드는 컴퓨터가 읽기 좋은 코드가 아니고 사람이 읽기 좋은 코드이다. 그래서 이짓거리(리팩터링)를 하는거다. - 간접호출을 너무 과하게 쓰는 코드도 인라인 대상이다. 위임관계가 복잡하게 얽혀 있으면 인라인 해버려서 차라리 한눈에 파악이라도 하는 방향이 낫다. 2. 함수 인라인 절차 1) 다형 메서드인지 확인한다 : 다형메서드란 동일한 이름을 가지지만 호출되는 객체의 유형에 따라 다른행동을 수행하는 메서드이다. - 서.. 2023. 5. 1.
[JS] 맨날 까먹는 for 반복 관련 문법 다시 총정리 let arr = [1, 2, 3, 4, 5]; let obj = {a: 1, b: 2, c: 3}; 1. for loop : 자유롭게 정해서 순회 for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } 2. for of : 배열의 각 요소 순회 (배열) for (let val of arr) { console.log(val); } 3. for in : 객체의 각 key 순회 (객체) for (let key in obj) { console.log(key, obj[key]); // a 1, b 2, c 3 } 4. .forEach() : 함수형 프로그래밍 스타일을 따른다. (배열) arr.forEach(function(val, index) { conso.. 2023. 5. 1.
[TS] TS연습하기16 : 다이나믹 타입 지정(완) //타입파라미터를 이용한 다이나믹 타입 지정 type Age2 = T // 타입파라미터 지정 방법 const 에이지:Age2 = '스트링이어야지'; // 타입파라미터 사용 방법 //삼항연산자를 활용한 다이나믹 타입 지정 type Age3 = T extends string ? string : unknown ; const 에이지2:Age3 = '스트링이면' const 에이지3:Age3 = 123; // 에이지3 은 unknown이 된다. //연습하기 type FirstItem = T extends any[] ? T[0] : any //파라미터로 array를 입력할 경우 array의 첫자료의 타입을 그대로 남겨주고 아니면 any 타입 2023. 4. 13.
[TS] TS연습하기15 : index signature, keyof 연산자 //index signature 문법 interface StringOnly { [key : string] : string //모든 문자로된 속성은 string 타입이다. } const car이다:StringOnly = { name : 'carName', age : '32', //string이어야 한다. } //깊은 object의 type (Recursive) : 쓸 일이 거의 없다. interface TypeFont { 'font-size': TypeFont|number } const cssFont:TypeFont = { 'font-size':{ 'font-size':{ 'font-size' : 123 } } } // 조건부 타입변환기(keyof 연산자) type Car1 = { //type을 잘못 지정.. 2023. 4. 13.
[TS] TS연습하기14 : d.ts 1. d.ts - 이름.d.ts - 타입, 인터페이스 등을 담는 곳 2. 자동생성 - tsconfig에 "declaration" : true 로 해주면 ts파일마다 d.ts가 자동으로 생성됨. - d.ts 파일은 export import 해서 사용해야 한다. - override 가 가능하다. - tsconfig에 "typeRoots":["./types"] 이렇게 작성하면 여기에 있는 type들은 글로벌하게 이용이 가능하다. (types/common/이름.d.ts 이렇게 루트를 설정해줘야 한다.) 3. 외부 라이브러리 사용 시 타입정의가 안되어있으면 - typescript 공식 홈페이지에 가서 찾아보면 된다. - npm 설치 시 대부분 들어온다. - typeRoots 옵션을 설정한 경우 node_modul.. 2023. 4. 13.
[TS] TS연습하기13 : declare //외부 .js에 있는 변수를 .ts에서 이용하고 싶은 경우 // declare을 통해 변수를 재정의한다. declare let a:number; //declare 정의 내용은 힌트이므로 js로 변환되지 않음. console.log(a+1) //ts파일 -> ts파일로 변수를 가져다쓰고 싶은 경우 //명시적으로 import export 사용한다. // import {어쩌고} from './data' 이렇게 //global 만드는 방법도 있긴 하다. d.ts 만들지 이건 안쓴다. 다음시간은 d.ts declare global{ type HumanName = string } export{} 2023. 4. 13.
[TS] TS연습하기12 : array와 tuple, rest parameter //array 의 tuple 자료형 const 멍멍:[string, number, string, boolean?] = ['혜자',3,'번 짖는다'] //optional ? 은 맨 뒤에 쳐야한다. //사용 const bark = (...x:[string, number, string, boolean?]):void =>{ //rest parameter의 엄격한 타입지정 console.log(x) } bark(...멍멍); //[ '혜자', 3, '번 짖는다' ] //Spread Operator의 타입지정 let arr = [1,2,3]; let arr2:[number,number, ...number[]] = [4,5, ...arr]; //rest parameter랑 똑같다 // 연습하기 const test:[.. 2023. 4. 13.