TIL

https://www.typescriptlang.org/ko/docs/handbook/2/typeof-types.html Documentation - Typeof Type Operator 타입 컨텍스트에서 typeof 연산자 사용하기. www.typescriptlang.org typeof 타입 연산자 자바스크립트에 이미 typeof 연산자가 있다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/typeof typeof - JavaScript | MDN typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다. developer.mozilla.org 타입스크립트는 타입 컨텍스트에서 변수나 프로퍼티의 타..

효율적으로 상수 관리하기 타입스크립트에서는 포괄적인 타입(string, number, ...) 외에도 정확한 값을 타입으로 설정하는 것이 가능하다. let title: 'typescript'; title = 'javascript'; // Type 'javascript' is not assignable to type 'typescript' 타입스크립트에서는 컴파일러가 자동으로 타입을 추론하는 기능을 제공한다. let은 변수의 값을 언제든 바꿀 수 있기 때문에 더 포괄적인 타입으로 값을 추론하고, const의 경우는 변경이 불가능하기 때문에 리터럴 타입으로도 추론된다. let title = 'typescript'; // let title: string const content = 'typescript; //..

https://www.typescriptlang.org/ko/docs/handbook/2/functions.html#%EB%82%98%EB%A8%B8%EC%A7%80-%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98%EC%99%80-%EC%9D%B8%EC%88%98 Documentation - More on Functions TypeScript에서 함수가 어떻게 동작하는지 알아봅시다. www.typescriptlang.org 나머지 매개변수와 인수 나머지 매개변수(Rest Parameter) 정해지지 않은 수의 인수를 받아들이는 함수를 Rest Parameter를 이용해 정의할 수 있다. function multiply(n: number, ...m: number[]) { return m...

생활코딩님의 쇼츠보고 감명받아 정리하는 내용! 프로젝트를 하면 할수록 쌓이는 node_modules의 지옥.. npkill을 통해 좀 더 편리하게 node_modules를 관리해보자. https://www.npmjs.com/package/npkill npkill List any node_modules directories in your system, as well as the space they take up. You can then select which ones you want to erase to free up space.. Latest version: 0.10.0, last published: 3 months ago. Start using npkill in your project by runnin..

자바스크립트 패키지 매니저 패키지를 프로젝트에 설치, 갱신, 삭제하는데 사용되는 도구를 패키지 매니저라고 한다. 자바스크립트의 패키지 매니저는 npm, yarn이 있다. 두가지 모두 패키지 잠금 기능을 지원한다. npm은 package-lock.json을, yarn은 yarn.lock 파일을 패키지 잠금 파일로 사용한다. 즉, 패키지 잠금 파일은 프로젝트에서 어떤 패키지 매니저를 사용하는지에 따라 달라진다. 패키지 관리 매커니즘 npm을 사용하든 yarn을 사용하든 프로젝트의 메타 정보는 package.json을 통해 관리된다. package.json에는 해당 프로젝트가 의존하고 있는 모든 패키지 이름과 버전이 나열되어 있다. 일반적으로 설치되어야 하는 패키지들은 dependencies에, 개발할 때만 ..

한 번쯤은 build한 결과물을 열어서 내가 작성한 코드가 어떻게 변환되어 있는지 확인해보자. 프론트엔드 또한 인프라 환경에 관심을 가져야 한다. 특히 웹 서비스의 많은 부분이 컨테이너 기반으로 돌아가기 때문에 도커는 언제든지 공부해두면 무조건 도움이 된다! redux는 flux 패턴을 자바스크립트로 표현한 구현체라고 생각하면 된다. redux-thunk는 까보면 53줄 밖에 안된다.(코드 보기 전부터 겁먹지 말자) React Query뿐만 아니라 SWR 등의 캐시 패러다임의 라이브러리들이 채택하고 있는 전략이 stale-while-revalidate이다. stale-while-revalidate로 최신 상태 유지(꼭 읽어보기) stale-while-revalidate는 1) 캐시된 응답이 오래될 수도 ..

함수 오버로드 몇몇 자바스크립트 함수는 다양한 인수의 개수, 타입을 통해 호출될 수 있다. (eg. Date를 생성하고 인수로 타임스탬프 하나만 받을 수도 있고 월, 일, 연도를 받는 함수를 만들 수도 있다.) 타입스크립트에서는 이를 오버로드 시그니처를 작성함으로써 묘사할 수 있다. 그러기 위해 함수 시그니처 몇 개(보통 2개 이상)를 적은 후 함수 본문을 작성하면 된다. function makeDate(timestamp: number): Date; // 오버로드 시그니처 1 function makeDate(m: number, d: number, y: number): Date; // 오버로드 시그니처 2 function makeDate(mOrTimestamp: number, d?: number, y?: ..

https://www.typescriptlang.org/ko/docs/handbook/2/functions.html Documentation - More on Functions TypeScript에서 함수가 어떻게 동작하는지 알아봅시다. www.typescriptlang.org 함수 타입 표현식 함수를 설명하는 가장 간단한 방법은 함수 타입 표현식이다. function greeter(fn: (a: string) => void) { fn("Hello, World"); } function printToConsole(s: string) { console.log(s); } greeter(printToConsole); (a: string) => void는 문자열 타입 a를 하나의 매개변수로 가지고 반환값이 없는 ..

원티드에서 진행하는 프리온보딩 프론트엔드 챌린지를 듣게 되었다. 사실 이전에 프리온보딩 코스를 수료했었기 때문에 굳이 또 챌린지를 할 생각은 없었다. 하지만 챌린지는 전에 들었던 교육과는 이름만 비슷하지 방식은 완전 다르기도 하고, 계속 혼자 공부하는 것보다 다른 사람과 함께 하는 것이 좋을 거라고 생각해서 신청했다. (강의 기간이 2주로 짧기 때문에 부담도 적었다.) 사전과제로는 간단한 회원가입/로그인, 투두리스트를 만들었다. 신청을 늦게하기도 했고, 그 사이에 기술 과제들이 많아서 거의 사전과제를 못했다. 아직 초반이니 빨리 만들고 추가 과제도 해야겠다. 과제는 이 레포지토리에서 진행할 예정! 오늘은 간단하게 커리큘럼 및 목표 등을 설명하고 사전 과제 코드리뷰를 진행했다. 아래는 그 내용 정리. 강의..

타입스크립트를 프로젝트에서는 많이 사용해봤지만 개념을 제대로 공부해본 적은 없기 때문에 핸드북 내용을 정리해보려 한다. 자료는 공식 타입스크립트 핸드북과 캡틴판교님의 타입스크립트 핸드북을 참고할 예정. 타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한 언어이다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 변환해주는 컴파일 과정을 거쳐야 한다. 타입스크립트를 써야 하는 이유 에러의 사전 방지 타입스크립트를 사용하면 에러를 사전에 방지할 수 있다. // math.js function sum(a, b) { return a + b; } 위의 코드는 두 숫자의 합을 구하는 함수 코드이다. sum(10, 20); // 30 sum('10', '20'); //1020 숫자 10과 20을..