ts CRA없이 환경변수 설정하기 - dotenv, ReferenceError: process is not defined CRA에서는 간단하게 .env파일을 생성한 다음 필요한 환경변수를 설정해주면 됐는데, CRA를 사용하지 않고 타입스크립트+웹팩으로 프로젝트를 하다보니 별도로 설정이 더 필요했다. 운영체제의 입장에서 해당 프로세스를 실행시키기 위해 참조하는 변수이다. dotenv는 환경변수를 .env파일에 저장해 관리할 수 있게 해주는 Node.js 패키지이다. 보안을 고려해 관리해야하는 변수들은 dotenv... 환경변수envwebpackdotenvtsdotenv [Nest] Nest WikiDocs (4.14) 라우트핸들러란 Nest.js와같은 프레임워크에서 요청을 처리하는 엔드포인트마다 동작을 수행하는 컴포넌트 (@Get등등..) 세션관리 : 세션 쿠키를 찾은후, 해당 쿠키에대한 세션상태를 조회후 요청에 세션정보를 추가해준다 인증/인가 : 사용자가 서비스에 접근가능한 권한이 있는지 확인, Nest에선 Guard를 권장한다 인가(Authorization)은 인증을 통과한 유저가 요청한 기능을 사용할... tsTILjsnest.jsTIL Typescript 컴파일러 명령어 및 사용법 프로젝트 구조화를 위한 명령어 모음 tsconfig.json을 생성해준다. 그래서 tsconfig.json에서 내가 원하는 방식으로 ts 파일을 컴파일 커스텀을 할 수 있다. tsconfig.json이 위치한 모든 ts 파일을 컴파일해서 js파일로 만들어준다. 컴파일된 js 파일들이 ts파일과 같이 있으면 헷갈리기 때문에 tsconfig.json에 outDir에서 js를 모아놓을 경로를 지정... typescriptcompiler컴파일tscompiler 에릭말고 제네릭 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 선언 시점에 타입을 결정하는 것이 아니라 호출 시점에 타입을 결정할 수 있게 합니다. 단순한 방식을 생각해보면 아래처럼 작성할 수 있습니다. 동일한 기능을 하는 함수를 타입 때문에 두 번 정의하는 것은 누가봐도 비효율적입니다. 호출 시점에 타입이 정의되는 제네릭으로 함수 중복 문제를 해결할 수 있습니다. 전달받을... Genericstypescript타입스크립트 제네릭ts타입스크립트 슈퍼타입superType타입스크립트 서브타입subTypeGenerics 타입스크립트_tsconfing 컴파일 세부설정 ▶️ tsconfig 파일 생성하기 tsconfing.json 파일을 생성하면, 타입스크립트 .ts 파일들을 .js로 변환할 때 어떻게 변환할 지 설정할 수 있다. 리액트나 뷰를 사용하면 이미 존재할 것이나, 하드코딩시엔 직접 파일을 생성하도록 하자. 그리고 json파일 안에 이렇게 복붙하도록 하자. 'target'은 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분이다. e... ts타입스크립트ts 타입스크립트_primitive type 정리 ▶️ 변수만들때 타입 정하기 타입스크립트는 변수만들 때 변수의 타입을 지정가능하다. 변수명:타입으로 정하면되고, 예제에서 이름이라는 변수는 string타입이 되며 갑자기 숫자 이런걸 할당하려고 하면 에러가 난다. 즉 타입이라는 쉴드를 하나 씌워준다고 생각하면 편하다. (참고) : name이라는 변수는 전역변수로 사용이 불가능하다. 지정하면 다음과 같은 오류 메세지가 출력된다. ▶️ 여러가지 ... ts타입스크립트ts 타입스크립트 interface, type 컨벤션과 readonly 속성 자판기 미션에서 처음으로 적용한 타입스크립트! 타입스크립트가 익숙하지 않고 부족한 부분이 많은 것 같다.🥲 앞으로 키워드를 가지고 하나씩 정리해봐야겠다.😑 이번에는 리뷰어님이 알려주신 interface / type의 convention 그리고 readonly 속성에 대해 정리해보았다. 이름은 PascalCase를 사용한다. 멤버는 camelCase를 사용한다. I/T prefix를 사용하지 ... typescriptts타입스크립트ts 설렌당☺️nextjs+ts! ToDo 작년 이맘때쯤 리액트를 공부하면서 ToDoList를 만들었던 기억이 있다! 내 성격상 무엇이든 배울때는 직접 해보는 것을 좋아하는 편이라 이것저것 만드는데, ToDo리스트는 항상 만들었었다. 이번에 스터디를 하면서 next.js와 typeScript를 사용하게 되었는데 원리를 알면서 구현을 하려고 하니 진짜 재밌었다. 늦었다고 생각할때가 제일 빠를때이니 지금부터 열심히 하면 괜찮을거다! 오늘... tsnext.jsReactReact Type-Challenges_1 (warm-up ~ easy 1 / 2) 타입스크립트 관련 재밌는 Challenge 발견!! 난이도는 warm-up, easy, medium, hard, extreme 총 5단계로 나뉘어져있고 하나씩 진행하며 글 남겨보려 합니다..!! 참고자료 및 출처 👉 13 - Hello World 4 - Pick 7 - Readonly 11 - Tuple to Object 14 - First of Array 18 - Length of Tupl... ts타입스크립트typescriptts Toy project (TS) : Todo List 3 input 을 통해 동적으로 Todo list의 새로운 항목을 만들 수 있도록 해야한다. 그래서 새로운 AddTodo 컴포넌트를 추가해주도록 하자. AddTodo.tsx <input value={newTodo} onChange={handleChage}/>을 통해서 새로운 항목 text를 저장하고, <button type= "submit" onClick = {handleSubmit}> 버튼으로... ReacttsReact [TS/Util] 객체를 배열 형식으로 바꾸기 React를 하다보니 모듈마다 원하는 형식이 제각각이라서 요번에는 객체를 배열로 바꾸는 방법에 대해서 알아보려고 한다. 아래와 같은 과일 객체가 있다고 가정해보자 이를 배열로 바꿔서 사용하고 싶다면 Object.keys 로 먼저 키값 배열을 먼저 만들어야 한다. map 배열 메서드를 사용해서 객체의 배열로 만들어준다 코드 결과창... jstsjs JS, TS deep immutable types 만들기 코딩을 하게되면 이 배열 또는 객체가 immutable하여 외부의 영향을 안받는다는 확신이 필요할 때가 있습니다. 그러기위해 저는 TS로 개발을 하면 동결을 위해 as const 구문을 많이 사용합니다. const assertion이라고 불리는 것으로 객체를 readonly 상태 즉 immutable한 객체로 만들어 줍니다. 하지만 컴파일 타임에만 해당하는 것이고 JS가 된 파일을 보면 일반... jstsjs TIL61.Interface&Type Aliases '인터페이스'의 사용법과 '타입별칭'에 대해 알아보자. 인터페이스란 간단하게 어떠한 두개의 시스템 사이에 상호작용할 수 있게 해주는 조건, 규약을 말한다. interface + 원하는 이름, 객체 안에 항목들을 넣어주고, 타입을 지정해준다. 변수, 함수 등에 인터페이스를 활용할 수 있다. user파라미터는 User인터페이스 형식을 따르는 데이터만 받을 수 있다. Developer 값 중에 중... TILtsTIL TIL63. Union Type & Enums 특정 인자나 변수에 한가지 이상의 타입을 사용하고 싶을 때 사용한다. 자바스크립트의 OR연산자(||)와 같이 a이거나 b이다 라는 의미이다. 'MONG'이란 변수에는 string, number, boolean 타입을 모두 사용할 수 있다. 여러 타입을 모두 만족하는 하나의 타입을 의미한다. someone이라는 인자에 인터페이스 타입을 참조하였다. 이때 intersection을 사용하여 두가지... tsTILTIL JS 에서 TS 넘어가기 - 0 사실 우리가 사용하는 웹 브라우저들은 TS 를 인식하지 못합니다. 즉 우리가 TS로 작성을해도 JS로 변환을 해야지 웹 브라우저가 이를 알아먹을 수 있습니다.. 🙋 : 그러면 번거롭게 걍 JS 쓰면 안되나요? 간단한 예시를 들어보도록 하겠습니다. 만약 위 함수에서 add() 를 호출하면 어떻게 될까요? 상식적으로는 에러가 나는게 맞지만, JS는 이를 알려주지 않습니다. 그러면 어떻게 동작하냐... tsReactReact (TIL) 4. React-Native & FireBase : realTimeDataBase 오늘은 드디어 realTimeDataBase를 이용할 수 있었습니다. 오늘은 드디어 dataBase를 이용할 수 있었습니다. 하루종일 기존에 사용하던 DB 구조와는 달라서 앞으로 설계를 어떻게 해야 할까 하는 생각이 있었습니다. RDB와는 다른 방식으로 데이터를 축적할 것 같아서 주말에는 개념에 대해 공부할까 합니다. 그래도 나름 db를 연동하기도 했고, 원하는 정보를 잘 집어넣을 수 있었습... FirebasetsRNFirebase TS - Index types index type은 타입을 동적으로 사용할 때 이용. 위의 javascript를 보면 객체 obj와 property를 받아서 그 키값의 value를 return하는 함수가 있다. 이를 typescript로 표현하면 로 표현할 수 있다. 위에서 정의된 interface를 이용해 객체를 하나 만들고, objectValues함수에 넣어보면 아래와 같다 keyof T는 인덱스 타입 쿼리 연산자이다... tsts
CRA없이 환경변수 설정하기 - dotenv, ReferenceError: process is not defined CRA에서는 간단하게 .env파일을 생성한 다음 필요한 환경변수를 설정해주면 됐는데, CRA를 사용하지 않고 타입스크립트+웹팩으로 프로젝트를 하다보니 별도로 설정이 더 필요했다. 운영체제의 입장에서 해당 프로세스를 실행시키기 위해 참조하는 변수이다. dotenv는 환경변수를 .env파일에 저장해 관리할 수 있게 해주는 Node.js 패키지이다. 보안을 고려해 관리해야하는 변수들은 dotenv... 환경변수envwebpackdotenvtsdotenv [Nest] Nest WikiDocs (4.14) 라우트핸들러란 Nest.js와같은 프레임워크에서 요청을 처리하는 엔드포인트마다 동작을 수행하는 컴포넌트 (@Get등등..) 세션관리 : 세션 쿠키를 찾은후, 해당 쿠키에대한 세션상태를 조회후 요청에 세션정보를 추가해준다 인증/인가 : 사용자가 서비스에 접근가능한 권한이 있는지 확인, Nest에선 Guard를 권장한다 인가(Authorization)은 인증을 통과한 유저가 요청한 기능을 사용할... tsTILjsnest.jsTIL Typescript 컴파일러 명령어 및 사용법 프로젝트 구조화를 위한 명령어 모음 tsconfig.json을 생성해준다. 그래서 tsconfig.json에서 내가 원하는 방식으로 ts 파일을 컴파일 커스텀을 할 수 있다. tsconfig.json이 위치한 모든 ts 파일을 컴파일해서 js파일로 만들어준다. 컴파일된 js 파일들이 ts파일과 같이 있으면 헷갈리기 때문에 tsconfig.json에 outDir에서 js를 모아놓을 경로를 지정... typescriptcompiler컴파일tscompiler 에릭말고 제네릭 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 선언 시점에 타입을 결정하는 것이 아니라 호출 시점에 타입을 결정할 수 있게 합니다. 단순한 방식을 생각해보면 아래처럼 작성할 수 있습니다. 동일한 기능을 하는 함수를 타입 때문에 두 번 정의하는 것은 누가봐도 비효율적입니다. 호출 시점에 타입이 정의되는 제네릭으로 함수 중복 문제를 해결할 수 있습니다. 전달받을... Genericstypescript타입스크립트 제네릭ts타입스크립트 슈퍼타입superType타입스크립트 서브타입subTypeGenerics 타입스크립트_tsconfing 컴파일 세부설정 ▶️ tsconfig 파일 생성하기 tsconfing.json 파일을 생성하면, 타입스크립트 .ts 파일들을 .js로 변환할 때 어떻게 변환할 지 설정할 수 있다. 리액트나 뷰를 사용하면 이미 존재할 것이나, 하드코딩시엔 직접 파일을 생성하도록 하자. 그리고 json파일 안에 이렇게 복붙하도록 하자. 'target'은 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분이다. e... ts타입스크립트ts 타입스크립트_primitive type 정리 ▶️ 변수만들때 타입 정하기 타입스크립트는 변수만들 때 변수의 타입을 지정가능하다. 변수명:타입으로 정하면되고, 예제에서 이름이라는 변수는 string타입이 되며 갑자기 숫자 이런걸 할당하려고 하면 에러가 난다. 즉 타입이라는 쉴드를 하나 씌워준다고 생각하면 편하다. (참고) : name이라는 변수는 전역변수로 사용이 불가능하다. 지정하면 다음과 같은 오류 메세지가 출력된다. ▶️ 여러가지 ... ts타입스크립트ts 타입스크립트 interface, type 컨벤션과 readonly 속성 자판기 미션에서 처음으로 적용한 타입스크립트! 타입스크립트가 익숙하지 않고 부족한 부분이 많은 것 같다.🥲 앞으로 키워드를 가지고 하나씩 정리해봐야겠다.😑 이번에는 리뷰어님이 알려주신 interface / type의 convention 그리고 readonly 속성에 대해 정리해보았다. 이름은 PascalCase를 사용한다. 멤버는 camelCase를 사용한다. I/T prefix를 사용하지 ... typescriptts타입스크립트ts 설렌당☺️nextjs+ts! ToDo 작년 이맘때쯤 리액트를 공부하면서 ToDoList를 만들었던 기억이 있다! 내 성격상 무엇이든 배울때는 직접 해보는 것을 좋아하는 편이라 이것저것 만드는데, ToDo리스트는 항상 만들었었다. 이번에 스터디를 하면서 next.js와 typeScript를 사용하게 되었는데 원리를 알면서 구현을 하려고 하니 진짜 재밌었다. 늦었다고 생각할때가 제일 빠를때이니 지금부터 열심히 하면 괜찮을거다! 오늘... tsnext.jsReactReact Type-Challenges_1 (warm-up ~ easy 1 / 2) 타입스크립트 관련 재밌는 Challenge 발견!! 난이도는 warm-up, easy, medium, hard, extreme 총 5단계로 나뉘어져있고 하나씩 진행하며 글 남겨보려 합니다..!! 참고자료 및 출처 👉 13 - Hello World 4 - Pick 7 - Readonly 11 - Tuple to Object 14 - First of Array 18 - Length of Tupl... ts타입스크립트typescriptts Toy project (TS) : Todo List 3 input 을 통해 동적으로 Todo list의 새로운 항목을 만들 수 있도록 해야한다. 그래서 새로운 AddTodo 컴포넌트를 추가해주도록 하자. AddTodo.tsx <input value={newTodo} onChange={handleChage}/>을 통해서 새로운 항목 text를 저장하고, <button type= "submit" onClick = {handleSubmit}> 버튼으로... ReacttsReact [TS/Util] 객체를 배열 형식으로 바꾸기 React를 하다보니 모듈마다 원하는 형식이 제각각이라서 요번에는 객체를 배열로 바꾸는 방법에 대해서 알아보려고 한다. 아래와 같은 과일 객체가 있다고 가정해보자 이를 배열로 바꿔서 사용하고 싶다면 Object.keys 로 먼저 키값 배열을 먼저 만들어야 한다. map 배열 메서드를 사용해서 객체의 배열로 만들어준다 코드 결과창... jstsjs JS, TS deep immutable types 만들기 코딩을 하게되면 이 배열 또는 객체가 immutable하여 외부의 영향을 안받는다는 확신이 필요할 때가 있습니다. 그러기위해 저는 TS로 개발을 하면 동결을 위해 as const 구문을 많이 사용합니다. const assertion이라고 불리는 것으로 객체를 readonly 상태 즉 immutable한 객체로 만들어 줍니다. 하지만 컴파일 타임에만 해당하는 것이고 JS가 된 파일을 보면 일반... jstsjs TIL61.Interface&Type Aliases '인터페이스'의 사용법과 '타입별칭'에 대해 알아보자. 인터페이스란 간단하게 어떠한 두개의 시스템 사이에 상호작용할 수 있게 해주는 조건, 규약을 말한다. interface + 원하는 이름, 객체 안에 항목들을 넣어주고, 타입을 지정해준다. 변수, 함수 등에 인터페이스를 활용할 수 있다. user파라미터는 User인터페이스 형식을 따르는 데이터만 받을 수 있다. Developer 값 중에 중... TILtsTIL TIL63. Union Type & Enums 특정 인자나 변수에 한가지 이상의 타입을 사용하고 싶을 때 사용한다. 자바스크립트의 OR연산자(||)와 같이 a이거나 b이다 라는 의미이다. 'MONG'이란 변수에는 string, number, boolean 타입을 모두 사용할 수 있다. 여러 타입을 모두 만족하는 하나의 타입을 의미한다. someone이라는 인자에 인터페이스 타입을 참조하였다. 이때 intersection을 사용하여 두가지... tsTILTIL JS 에서 TS 넘어가기 - 0 사실 우리가 사용하는 웹 브라우저들은 TS 를 인식하지 못합니다. 즉 우리가 TS로 작성을해도 JS로 변환을 해야지 웹 브라우저가 이를 알아먹을 수 있습니다.. 🙋 : 그러면 번거롭게 걍 JS 쓰면 안되나요? 간단한 예시를 들어보도록 하겠습니다. 만약 위 함수에서 add() 를 호출하면 어떻게 될까요? 상식적으로는 에러가 나는게 맞지만, JS는 이를 알려주지 않습니다. 그러면 어떻게 동작하냐... tsReactReact (TIL) 4. React-Native & FireBase : realTimeDataBase 오늘은 드디어 realTimeDataBase를 이용할 수 있었습니다. 오늘은 드디어 dataBase를 이용할 수 있었습니다. 하루종일 기존에 사용하던 DB 구조와는 달라서 앞으로 설계를 어떻게 해야 할까 하는 생각이 있었습니다. RDB와는 다른 방식으로 데이터를 축적할 것 같아서 주말에는 개념에 대해 공부할까 합니다. 그래도 나름 db를 연동하기도 했고, 원하는 정보를 잘 집어넣을 수 있었습... FirebasetsRNFirebase TS - Index types index type은 타입을 동적으로 사용할 때 이용. 위의 javascript를 보면 객체 obj와 property를 받아서 그 키값의 value를 return하는 함수가 있다. 이를 typescript로 표현하면 로 표현할 수 있다. 위에서 정의된 interface를 이용해 객체를 하나 만들고, objectValues함수에 넣어보면 아래와 같다 keyof T는 인덱스 타입 쿼리 연산자이다... tsts