보호되어 있는 글입니다.

보호되어 있는 글입니다.

타입스크립트 마이그레이션이 완료됐지만 구현할 때 타입명이나 폴더 구조를 신경 쓰지 않고 진행했기에 코드가 엉망진창이었다. 따라서 오늘은 폴더 구조도 변경하고 타입 이름도 조금 더 명시적으로 바꾸어주었다. 폴더 구조 타입스크립트로 프로젝트를 진행하는 건 처음이라 타입을 어떤 식으로 폴더에 정리해야 할지 고민을 많이 했다. 그 과정에서 다른 개발자 분들의 프로젝트도 많이 찾아봤는데, 딱히 어떻게 하면 좋다 그런 건 없는 것 같고 각자 규정한 컨벤션에 따르는 듯하다. 나는 `src > types` 폴더 아래에 각 기능 별로 타입과 인터페이스를 묶어 정리했다. `index.ts` 파일에서는 정의해 둔 타입 모듈을 모두 export 해 주었다. // index.ts export * from "./user"; ex..

이전 마이그레이션 관련 포스팅 JavaScript → TypeScript 마이그레이션 1(세팅, App, AppRouter) JavaScript → TypeScript 마이그레이션 2(대시보드 페이지, 대시보드 관련 컴포넌트: state 빈 배열 초기화 never type 에러 해결) JavaScript → TypeScript 마이그레이션 3(가계부 페이지, Button 컴포넌트: onClick 함수 타입 지정, 자잘한 오류들 해결) JavaScript → TypeScript 마이그레이션 4(가계부 페이지 관련 컴포넌트: TransactionList, Modal) JavaScript → TypeScript 마이그레이션 5(Auth: Test 계정 Auto Fill 구현, Community: paginat..

이전 마이그레이션 관련 포스팅 JavaScript → TypeScript 마이그레이션 1(세팅, App, AppRouter) JavaScript → TypeScript 마이그레이션 2(대시보드 페이지, 대시보드 관련 컴포넌트: state 빈 배열 초기화 never type 에러 해결) JavaScript → TypeScript 마이그레이션 3(가계부 페이지, Button 컴포넌트: onClick 함수 타입 지정, 자잘한 오류들 해결) JavaScript → TypeScript 마이그레이션 4(가계부 페이지 관련 컴포넌트: TransactionList, Modal) 🔐 Auth 페이지 Form 태그 내부 데이터 수정 및 submit //수정 const onEditChange = (e: ChangeEvent..

이전 마이그레이션 관련 포스팅 JavaScript → TypeScript 마이그레이션 1(세팅, App, AppRouter) JavaScript → TypeScript 마이그레이션 2(대시보드 페이지, 대시보드 관련 컴포넌트: state 빈 배열 초기화 never type 에러 해결) JavaScript → TypeScript 마이그레이션 3(가계부 페이지, Button 컴포넌트: onClick 함수 타입 지정, 자잘한 오류들 해결) 저번 포스팅에 이어 이번에도 가계부 관련 페이지 코드를 TypeScript로 변경해 볼 예정이다. 기존 코드 확장자를 jsx → tsx로 변경한 뒤 오류가 생기는 부분이나 흰 점선이 나타나며 타입 지정하라고 지정해 주는 부분 위주로 변경해 보겠다. 변경 전 코드는 아래와 같..

이전 마이그레이션 관련 포스팅 JavaScript → TypeScript 마이그레이션 1(세팅, App, AppRouter) JavaScript → TypeScript 마이그레이션 2(대시보드 페이지, 대시보드 관련 컴포넌트: state 빈 배열 초기화 never type 에러 해결) 이전에 이어서 이번에는 Transactions 페이지와 관련한 컴포넌트 마이그레이션을 진행해 볼 예정이다. Transactions 페이지 파일 형식을 jsx에서 tsx로 바꾼 뒤에 에러가 뜨는 코드를 확인하고 수정해 주었다. // Transactions.tsx import React, { useEffect, useState } from "react"; ... import { UserInfo } from "../interfa..

TS 마이그레이션 1편 [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 1(세 마이그레이션 이유 기존에 프로젝트를 개발하면서 타입 때문에 발생한 에러를 잡느라 오랫동안 헤맸던 경험이 있다. (몽고DB의 ObjectId와 string으로 된 id를 비교해서, 게시글을 작성한 유저임에도 florescene.tistory.com 지난 마이그레이션 1편에 이어서 오늘은 대시보드 관련 컴포넌트를 마이그레이션 해보았다. 다른 컴포넌트는 이전에 했던 것처럼 useSelector의 타입만 지정해 주면 되는 거라 간단히 끝났다. 그런데 한 컴포넌트에서 기존 빈 배열([])로 state값을 초기화한 부분에서 never typ..

ctyptoJS crypto-js JavaScript library of crypto standards.. Latest version: 4.2.0, last published: 5 months ago. Start using crypto-js in your project by running `npm i crypto-js`. There are 11736 other projects in the npm registry using crypto-js. www.npmjs.com `ctyptoJS`는 암호화 표준을 제공하는 자바스크립트 라이브러리이다. 원래는 `redux-persist`를 이용해 저장한 Local Storage 데이터를 암호화하기 위해 crptoJS 라이브러리를 사용해 보려고 했다. 그런데 라이브러리 ..