728x90 반응형 분류 전체보기238 2024.08.18, weekly memoirs 1.오랜만의 주간 회고록!그 동안 쓰지 않은 이유는.... 느낀 게 아무 것도 없기 때문.........이다부랴부랴 일 + 동료 팀원분들 퇴사로 인한 송별회로 다른 걸 생각할 여유가 없었다 동료 분들이 한둘 나가기 시작하면 나도 이직해야하나... 하는 생각이 자연스럽게 드는 거 같긴 하다더군다나 입사 동기분이 이직하셔서 크게 휘청이는 나의 마음... 그래도 아직은.... 레거시가 되어가는 나의 이력서 + 요즘 기업에서 요구하는 리액트 스펙 생각하면 아직 애매한 거 같다 2.회사에서 계속 리액트 쓰고 있다초반에 컴포넌트 나누느라 고생했는데 요즘 그 덕 잘 보고 있다 한번 유용하게 짠 내 컴포넌트 열자식 안 부러움 요 근래는 프린트 미리보기 + 엑셀 다운로드 작업을 계속 했는데처음에 컴포넌트 틀 만드는.. 2024. 8. 18. 타입스크립트 - infer 타입스크립트가 추론한 타입을 사용할 때 컨디셔널 타입과 함께 사용함 Q : 그럼 이미 추론한 걸 그대로 두지 왜 infer로 끄집어내서 사용하려고 할까? A : 복잡한 기능에선 쓰일 데가 있음 복잡한 타입 추론:TypeScript가 자동으로 추론하지 못하는 복잡한 상황에서 infer를 사용하여 원하는 부분만 추출하거나 변형할 수 있습니다.예를 들어, 특정 함수의 반환 타입을 추출하거나, 제네릭 타입 내의 특정 부분만 추출할 때 유용합니다.유틸리티 타입 작성:TypeScript에는 ReturnType이나 Parameters와 같은 유틸리티 타입이 있습니다. 이러한 유틸리티 타입은 infer를 사용하여 다양한 타입 정보를 추출합니다. 유틸리티 타입을 직접 정의하거나, 기존 유틸리티 타입을 변형할 때 in.. 2024. 8. 18. 타입스크립트 - enum 열거형 타입 enum 전에도 한번 봤던 적 있는데https://0119eunji.tistory.com/231 책에 나오길래 다시 정리 enum(열거형) 타입은말 그대로 여러 상수를 나열하는 목적으로 쓰임 enum Status { New, InProgress, Completed, Cancelled} 이런 enum이 있다면var status = { "0" : 'New', "1" :'InProgress', "2" :'Completed', "3" :'Cancelled' New : 0, InProgress : 1, Completed : 2, Cancelled: 3} 런타임시 이런 자바스크립트 코드가 됨 enum Status { New, .. 2024. 8. 18. 타입스크립트 - class 클래스는 값이면서 타입임 const Person = class { name; age; married; constructor(name:string,age:number,married:boolean){ this.name = name; this.age = age; this.married = married; }} 이렇게 씀 constructor에 멤버를 넣기 전에 한번 써줘야됨멤버의 타입은 생략 가능함 멤버와 constructor는 짝이 맞아야 함=> 그러니까 이 짝이 맞는 걸 타입체킹하는 거임. 더 엄격한 타입 검사를 원하면 implements 예약어를 쓰면 됨 interface Human { name: string; age : number; married : boolean; s.. 2024. 8. 18. 타입스크립트 공변성, 반공변성 공변성 :A -> B 일 때, T -> T반공변성 : A -> B 일 때 T -> T 이변성 : A -> B 일 때 T -> T 됨 T -> T 됨무변성 : A -> B 일 때 T -> T 도 안되고 T -> T 도 안됨 기본적으로 타입스크립트는 공변성의 갖고 있음근데 함수의 매개변수는 반공변성을 갖고 있음 이때 ts.config에서 strictFunctionTypes 체크 되어 있어아함체크 안되어 있으면 타입스크립트는 매개변수에 대해 이변성을 띔 반환값에서의 공변성 사례 1. a -> b 인 상황number | string => number function a (x:string):number {return Number(x)}type B = (x:string) => number | string;l.. 2024. 8. 11. 타입스크립트 오버로딩 타입스크립트 오버로딩 함수 자체를 오버로딩하는 경우* 오버로딩된 함수의 시그니처를 선언한 후, 바로 뒤에 실제 함수 구현을 제공해야함 function add(x: number, y: number): number (+1 overload) *** 오버로딩 순서 중요함 *** function test(a:string): string;function test(a:string | null): number;function test(a:string | null): string | number { if(a){return "string"} else {return 123}}const result = test("hi") 인자를 string으로 넘겼을 때 result는 가장 첫번째에 있는 리턴값 string이 .. 2024. 8. 11. 싱글톤 정말 많이 쓰는 패턴 싱글톤특정 클래스의 인스턴스가 오직 하나만 생성되도록 보장하는 디자인 패턴임 클래스 형class Singleton { constructor() { if (Singleton.instance) { return Singleton.instance; } this.value = Math.random(); Singleton.instance = this; } getValue() { return this.value; }}const singleton1 = new Singleton();const singleton2 = new Singleton();console.log(singleton1 === singleton2); // trueconsole.log(sing.. 2024. 8. 4. 클로저 - hof - 리액트 - hoc - class 프론트엔드 개발자라면 중요한 클로저 개념...클로저 예시 찾아보면 모두 class 형밖에 없다 Q: 그럼 함수형에는 클로저 개념이 없는 걸까?A :아님 함수형 클로저function out (a:string){ let outV = "밖"; function inner(){ console.log("inner", outV) console.log("props",a) } return inner}const instance1 = out("인스턴스단 변수1");const instance2 = out("인스턴스단 변수2");const instance3 = out("인스턴스단 변수3");instance1()instance2()instance3()/**'inner' '밖''props' '인스턴스단 변수.. 2024. 8. 4. es5은 어떻게 브라우저에서 동작했을까 & UMD 파면 팔수록 넘 헷갈려서 다시 정리함 commonJS는 2009년에 만들어짐가져올 때const {name} = require("../name.js");내보낼 때exports.name = "something"; es5표준을 기반으로node의 모듈 시스템을 위해 만들어짐(require문 자체는 commonJS에서 만듦) 아무튼 commonjs는 node"서버"를 위한 모듈 시스템임동기적으로 동작함모든 모듈이 순서대로 로드, 실행됨 // counter.jslet count = 0; // 모듈의 비공개 변수module.exports = { increment: function() { count += 1; return count; }, decrement: function() { count .. 2024. 7. 28. 이전 1 2 3 4 5 ··· 27 다음 728x90 반응형
