typeScript (46) 썸네일형 리스트형 [Remix] 풀 스택 컴포넌트(Full Stack Components) 컴포넌트와 백엔드 코드를 함께 두는 이유(colocate)와 방법을 알아봅니다. 원문입니다 : https://www.epicweb.dev/full-stack-components Full Stack Components There’s this pattern I’ve been using in my apps that has been really helpful to me and I’d like to share it with you all. www.epicweb.dev 백엔드와 UI 코드의 환상적인 결합 remix를 활용할 때, 페이지를 개발하는 방법은 아래와 같습니다. export async function loader({ request }: LoaderArgs) { const projects = await ge.. [TS]유효성 검증(validation) 대신 구문 분석(Parsing)하세요 io-ts, Runtypes 및 Zod와 같은 라이브러리를 사용하여 모든 타입의 수신 및 발신 데이터를 안전하게 구문 분석하는 방법을 알아봅시다. TLDR : 검증과 객체 생성을 동시해 해주며 타입스크립트 타입도 만들어 주는 라이브러리를 사용하자 원문입니다 : https://itnext.io/parse-dont-validate-incoming-data-in-typescript-d6d5bfb092c8 사용자 입력을 검증하는 것이 모든 웹 프로그래밍의 초석이라는 것은 누구나 알고 있습니다. 사실, 소프트웨어로 들어오는 모든 입출력 데이터는 검증되어야 합니다. 그런데 검증 대신 파싱하라는게 무슨말인가요?(parse, don’t validate) 검증 예시 yup과 같이 인기 있는 자바스크립트 유효성 검사 라이.. 완벽하게 타입 안전한 웹 애플리케이션 개발[Fully Typed Web Apps] ...의 번역입니다 : https://www.epicweb.dev/fully-typed-web-apps Fully Typed Web Apps The main thing that makes end-to-end type safety difficult is simple: boundaries. The secret to fully typed web apps is typing the boundaries. www.epicweb.dev 타입스크립트는 환상적입니다. function add(a: number, b: number) { return a + b } add(1, 2) // type checks just fine add('one', 3) // does not type check 위 코드도 멋지지만, 저는 더 큰 관.. 타입스크립트 데코레이터 완벽 가이드[A Complete Guide to TypeScript Decorators] 공식 문서에서 추천하는 커뮤니티 가이드의 번역입니다. https://saul-mirone.github.io/a-complete-guide-to-typescript-decorator/ A Complete Guide to TypeScript Decorators Decorators make your code leaner. saul-mirone.github.io 데코레이터는 TypeScript의 세계를 더 멋지게 만듭니다. 사람들은 Angular 및 Nestjs와 같이 이 멋진 기능을 기반으로 구축된 많은 라이브러리를 사용합니다. 이 블로그에서 나는 많은 세부 사항을 가진 데코레이터를 탐색할 것입니다. 이 블로그를 읽은 후 이 강력한 기능을 언제, 어떻게 사용해야 하는지 알 수 있기를 바랍니다. TLDR 데코레.. javascript 프로젝트에 d.ts를 이용하여 타입스크립트 도입하기 javascript를 메인으로 사용하는 프로젝트에 사정상 코드베이스를 타입스크립트로 마이그레이션 할 수 없을 때, d.ts를 통해 타입스크립트의 힘을 활용하는 방법을 알아봅니다. 해당 내용은 사내에서 프로젝트를 진행하며 배운 내용을 정리한 것임을 말씀드립니다. d.ts파일이란? 기본적으로 c언어의 header와 같은 역할을 합니다. 즉 각 모듈(파일)에 대한 인터페이스 역할만 하지, 모듈 내부의 타입 안정성에 대해서는 전혀 보장해주지 않습니다. 하지만 d.ts파일을 js파일의 타입 체킹에 이용할 수 있습니다. [Front, 2022-09-14] Typescript d.ts 파일을 js 프로젝트에서 사용할 수 있을까? d.ts 파일의 타입 선언 활용하기 d.ts 파일 내부에서는 타입 선언과 변수, 함수 선.. [typescript] d.ts 파일을 js 프로젝트에서 사용할 수 있을까? .d.ts 파일을 js 프로젝트에서 사용할 수 있을까요? js 개발자의 타입 안전성을 보장하면서 말입니다. 아래 페이지의 스크립트를 이용하여 js 파일의 대략적인 타입을 .d.ts 파일로 추출한뒤, .d.ts의 타입을 좀 더 상세하게 작성했습니다. https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html Documentation - Creating .d.ts Files from .js files How to add d.ts generation to JavaScript projects www.typescriptlang.org npx -p typescript tsc src/**/*.js --declaration --allo.. CREATE-REACT-APP에서 절대경로 임포트 사용하기 with typescript CREATE-REACT-APP에서 절대경로 임포트를 사용하는 방법을 알아봅니다. tsconfig.json 아래의 baseUrl, include 속성을 변경해줍니다. { "compilerOptions": { ... "baseUrl": "src" }, "include": ["src"] } yarn start 또는 npm run start를 실행하여 다시 시작합니다. 아래와 같은 문제가 발생할 수 있습니다. Visual Studio Code를 닫았다가 다시 엽니다. 대부분의 사람들은 이렇게 하면 문제가 해결됩니다. 그렇지 않은 경우 설정을 열고 Import Module Specifier를 검색하세요. TypeScript > Preferences > Import Module Specifier에서 찾을 수 있습니.. 타입스크립트 : React.FC는 그만! children 타이핑 올바르게 하기 참고자료 : https://stackoverflow.com/questions/65548388/react-propswithchildren-with-no-props-other-than-children React.PropsWithChildren with no props other than `children`? I have a component with no props other than children, i.e.: function Foo({ children }: React.PropsWithChildren) {} React.PropsWithChildren requires an argument. If I do React.PropsWithChil... stackoverflow.com 리액트에는 React.Props.. 이전 1 2 3 4 5 6 다음
