Language/Typescript7

• 

  Express + React 보일러플레이트를 TypeScript로 전환하며 고려한 기술적 사항들 들어가며기존에 Node.js(Express) + React로 작성된 인증 보일러플레이트를 TypeScript로 전환하는 작업을 진행했습니다. 단순히 파일 확장자를 바꾸는 것이 아니라, 프로젝트 구조 재설계, 비동기 패턴 현대화, React 메이저 버전 업그레이드까지 한 번에 수행한 과정에서 마주친 기술적 고민들을 정리합니다.전환 전 상태:백엔드: Express 4.17, Mongoose 5.11 (콜백 스타일), JWT 인증, 하드코딩된 설정값프론트엔드: React 17, CRA (react-scripts 5), Redux 4, React Router v5TypeScript, 테스트, 환경변수 설정 모두 없음1. 백엔드 tsconfig.json 설계: NodeNext를 선택한 이유{ "compilerO.. Language/Typescript 2026. 3. 21.

• 

  React Native/Typescript 환경에서 절대경로 설정하는 방법 서론 대상독자 RN 개발 시, 절대경로 사용하고 싶은 개발자 학습목표 오늘은 RN Expo와 타입스크립트 환경에서 절대 경로를 설정하는 방법에 대해서 알아보겠습니다. 본론 babel-plugin-module-resolver 설치하기 yarn add -D babel-plugin-module-resolver babel-plugn-module-resolver란 라이브러리를 설치해줍니다. babel.config.js 수정하기 그런 뒤, babel.config.js 파일에서 해당 값에 맞게 설정해줍니다. 이 때, baseUrl로 들어가는 경로에 절대경로로 설정해주고 싶은 값이 들어가도록 설정해주는 것이 중요합니다. module.exports = function () { return { presets: ["babe.. Language/Typescript 2022. 4. 1.

• 

  React Native/Typescript 환경에서 데코레이터 함수 사용하는 방법 서론 대상독자 타입스크립트 개발 시, 데코레이터 함수를 사용하고 싶은 개발자 학습목표 타입스크립트 환경에서 데코레이터 함수를 설정하는 방법에 대해서 알아보겠습니다. 본론 먼저 필요한 패키지들을 설치합니다. babel과 babel plugin 설치하기 yarn add -D @babel/core @babel/plugin-proposal-decorators @babel/plugin-proposal-decorators란 라이브러리를 설치해줍니다. babel.config.js 수정하기 그런 뒤, babel.config.js 파일에서 해당 값에 맞게 설정해줍니다. module.exports = function () { return { ..., plugins: [ ["@babel/plugin-proposal-deco.. Language/Typescript 2022. 4. 1.

• 

  [Typescript] 자주 쓰이는 Utility Types 정리하기 본론 오늘은 타입스크립트에서 자주 활용되는 Utility Types에 관하여 간단하게 정리하는 시간을 갖겠습니다. Partial Partial은 모든 타입을 옵셔널하게 불러옵니다. Pick Pick은 특정 타입의 일부분을 불러와 사용합니다. 타입의 key 값을 통해 가능합니다. interface Todo { title: string; description: string; completed: boolean; } type TodoPreview = Pick; const todo: TodoPreview = { title: "Clean room", completed: false, }; Required 모든 타입을 필수 타입으로 지정합니다. 기존 속성타입이.. Language/Typescript 2022. 2. 16.

• 

  React 환경에서 서버로 올바른 데이터 전송하는 방법 (with Typescript) 서론 대상독자 데이터를 서버로 전송하기 전에 전송하기 위한 데이터 검증 과정을 추가하려는 프론트엔드 개발자 학습목표 dto를 정의하고 dto에 맞게 데이터가 폼에서 전송 수 있도록 역직렬화 할 수 있다. react-hook-form(이하 훅폼)을 통해, 올바른 형식이 아닐 경우 에러를 띄울 수 있다. 역직렬화된 데이터를 서버로 전송하기 위해, 다시 직렬화할 수 있다. 본론 지난 시간에는 [웹 프로그래밍/기타] - Typescript 환경에서 역직렬화하는 방법을 통해, 서버로부터 받아온 json 데이터를 클래스 형태로 변환하는 과정에 대해서 살펴보았습니다. 이번 시간에는 기본 폼에서 직접 서버로 전송되는 과정과 훅폼을 활용한 데이터 검증 과정을 비교하며, 올바른 데이터가 서버로 전송될 수 있도록 데이터 검.. Language/Typescript 2021. 12. 8.

• 

  Typescript 환경에서 역직렬화하는 방법 서론 대상독자 TypeScript를 활용하여, 서버로부터 전달 받은 json 데이터를 object(class) 형태로 변환하고 싶은 개발자. 학습목표 직렬화와 역직렬화의 필요성에 대해 이해하고 실제 프로덕트에 적용할 수 있다. 데이터 검증 과정을 통해, 웹/앱 어플리케이션에서 네트워크를 통해 전송되는 데이터가 바르게 전달되었는지 확인할 수 있다. 본론 직렬화와 역직렬화의 필요성 오늘은 데이터 전송과 데이터 수신 과정에서 빠질 수 없는 두 요소가 있습니다. 바로 직렬화와 역직렬화입니다. 첫째, 직렬화란 서버로 전송될 데이터를 json 형태로 변환하는 과정입니다. 이는 HTTP 네트워크 상에서 데이터를 전송하기 위해 필요합니다. 둘째, 역직렬화란 서버에서 전달 받은 josn 데이터를 객체 형태(여기선 obj.. Language/Typescript 2021. 11. 30.

• 

  [TypeScript] 타입스크립트 환경 설정하기 학습 목표 오늘은 배워두면 프론트엔드 개발에서 유용하게 활용할 수 있는 타입스크립트 환경설정 하는 방법에 대해서 알아보겠습니다. 타입스크립트에 대해서 구구절절 설명을 늘어놓기보다는 실제 코드로 돌려보며, 어떤 성격을 가진 언어인지에 관해 차차 알아가봅시다. 타입스크립트 설치하고 설정하기 자, 먼저 디렉토리부터 만들어줍시다. 그런 후, 해당 디렉토리에서 npm init 명령어를 통해, package.json 파일을 만들어 줄 것입니다. mkdir testTsc cd testTsc npm init -y 설정이 완료되면 다음으로 넘어갑니다. 타입스크립트를 설치하는 방법에는 두 가지가 있습니다. 로컬 설치, 글로벌 설치. 특별한 경우가 아니라면, 모든 패키지는 되도록이면 로컬로 설치되는 편이 버젼 관리함에 좋기.. Language/Typescript 2021. 8. 5.