공부 기록일지📚

브랜치 종류 main(구: master) : 프로젝트 최종 배포 중심 브랜치 develop: 개발이 진행되는 브랜치, 배포할 수준의 기능을 갖추면 relese 브랜치로 머지 feature: 기능을 개발하는 브랜치, develop 브랜치에서 파생되는 브랜치며 develop 브랜치로 머지 release: 개발된 내용을 배포하기 위해 준비하는 브랜치, 충분한 테스트를 통해 버그를 검사하고 배포할 준비가되었다고 판단하면 main으로 머지하여 배포한다. 버그 수정 내용을 develop 브랜치에도 반영하고, 최종적으로 main에 머지 hotfix: 출시 버전(main)에서 버그를 수정하는 브랜치, main브랜치에서 생성되며, 수정이 완료되면 dev, main 브랜치에 수정 사항을 반영 브랜치 네이밍 feature:..

프론트엔드 과제를 하면서 구현되어있는 백엔드 api를 쓰기 위해 로컬에서 서버를 켰는데 네트워크 요청이 자꾸 실패하는 상황이었습니다. 첫번째로 원인 파악에 나선 것은 endpoint 였는데, 아무리 봐도 문제가 없었고 next.js에서 서버를 구동했을 때, 붉은 폰트가 나오는 것이 에러메세지가 아니라 정상 구동됐을 때도 저렇게 떴기 때문에 제대로 읽지 못하고 넘겨버린 것이 문제였습니다. 결론적으로 1시간정도 헤맸었는데 그냥 8080 포트를 이미 사용중인 프로그램이 있기 때문에 해당 프로그램을 kill해주면 되는 문제였습니다. (에러 메세지가 뜨면 제대로 확인하자..^ ^) 8080포트로 다른 프로그램을 실행 시킨 기억이 없어서 vscode를 다 끄고 다시 재가동했어도 똑같은 에러메세지가 발생해서 결국 직..

TS에서 프로미스는 Promise 타입으로 표시합니다. const p1 = Promise.resolve(1) //Promise .then((a) => a + 1) //Promise .then((a) => a + 1) //Promise .then((a) => a.toString()); // Promise //then을 전부 다 실행시킨 최종 결괏값을 p1에 리턴한다. const p2 = Promise.resolve(2); // Promise const p3 = new Promise((res, rej) => { setTimeout(res, 1000); }); Promise.all([p1, p2, p3]).then((result) => console.log(result)); //결과: ['3',2,undefi..

Required 분석 { interface Profile { name?: string; age?: number; married?: boolean; } type Name = Profile["name"]; type R = { //-? 의미: 옵셔널(?)을 빼라 라는 의미("-"의 명칭은 modifier ?) //T라는 인터페이스의 프로퍼티의 key를 가져올 때 optional은 빼고 가져오라는 의미 [key in keyof T]-?: T[key]; }; //type Required = { [P in keyof T]-?: T[P]; } // P = key // Readonly //type Readonly = { readonly [P in keyof T]: T[P]; }; //만약에 남의 타입을 가져올 때 re..

Partial interface Profile { name: string; age: number; married: boolean; } const cong: Profile = { name: "cong", age: 27, married: false, }; //Partial의 기능: 프로퍼티들을 전부 "?" 옵셔널로 만들어 준다.(필수값이었던 것들을) const noMarriedCong: Partial = { name: "cong", age: 28, }; Partial 을 직접 구현해보기 //Partial을 직접 구현해보기 //맵드 타입스랑 인덱스드 시그니처 사용 type Name = "Human" | "Animal"; //keyof 뒤에는 interface가 올 수 있다. (type alias도 가능, js..

오버로딩 타입을 하나로만 정의하는 것이 베스트긴하지만 다 정의하지 못할 때 사용한다.(제네릭으로 깔끔하게 못만들겠다 싶을때 쓰면 좋을듯) 오버로딩을 했으면 실제 구현부에서는 any를 사용해도 된다. (아래 추가설명) 함수도 앞에 declare키워드를 붙이고 오버로딩이 가능하다. (declare키워드가 붙은 함수는 TS를 속여 body부분을 작성해주지 않고 선언부만 적어도 된다.) -> 여기서 실제 사용할 때의 구현부 타입은 any로 지정해줘도 된다(오버로딩된 타입들이 제대로 작성되어 있다면). // declare를 함수 앞에 붙이면 선언만하고 구현부(body부분)는 쓰지 않아도 TS가 인식하기로는 구현부는 다른 곳에 있구나 //라고 속일 수 있다. declare function add(x: number,..

제네릭 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징이다. 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용된다. TS에서 제네릭은 클래스, 인터페이스, 함수에서 쓸 수 있음(제네릭 함수, 제네릭 인터페이스, 제네릭 클래스) 제네릭은 타입에 대한 함수라고 생각하면 된다는 ..제로초님 (선생님의 머리를 갖고싶어요) function add(x: T, y: T): T { return x + y } add(1, 2); add(1, 2); add('1', '2'); add('1', '2'); add(1, '2'); 제네릭 선언 위치 기억하기 function a() {} class B(..

타입스크립트 4.8 업데이트에 추가된 타입 {} Object (대문자로 시작) -> 이 두가지 타입은 모든 타입을 가리키며 모든 값을 받을 수 있다. (null과 undefined는 제외) unknown도 any와 마찬가지로 모든 값을 받을 수 있는데 unknown이 4.8버전부터 {} | null | undefined 와 같이 성립되기 때문에 조건문에 들어갔을 때 아래와 같이 된다. const z: unknown = "hi"; //모든 타입이 들어가기 때문에 hi도 들어갈 수 있다. if (z) { z; //z의 타입이 {}이다. 파라미터로 들어온 z 는 unknown인데 true일때는 {}인 것 } else { z; //unknown } 실제로 객체 타입은 object가 있는데 string의 원시값을..