웹 프로그래밍/👨👨👧👧소셜 가계부24 [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 7(타입 폴더 구조 및 타입명 변경, 마이그레이션 완료 소감) 타입스크립트 마이그레이션이 완료됐지만 구현할 때 타입명이나 폴더 구조를 신경 쓰지 않고 진행했기에 코드가 엉망진창이었다. 따라서 오늘은 폴더 구조도 변경하고 타입 이름도 조금 더 명시적으로 바꾸어주었다. 폴더 구조 타입스크립트로 프로젝트를 진행하는 건 처음이라 타입을 어떤 식으로 폴더에 정리해야 할지 고민을 많이 했다. 그 과정에서 다른 개발자 분들의 프로젝트도 많이 찾아봤는데, 딱히 어떻게 하면 좋다 그런 건 없는 것 같고 각자 규정한 컨벤션에 따르는 듯하다. 나는 `src > types` 폴더 아래에 각 기능 별로 타입과 인터페이스를 묶어 정리했다. `index.ts` 파일에서는 정의해 둔 타입 모듈을 모두 export 해 주었다. // index.ts export * from "./user"; ex.. 2024. 4. 17. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 6(index, 리덕스 코드) 이전 마이그레이션 관련 포스팅 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.. 2024. 4. 17. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 5(Auth: Test 계정 Auto Fill 구현, Community: pagination 마이그레이션) 이전 마이그레이션 관련 포스팅 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.. 2024. 4. 14. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 4(가계부 페이지 관련 컴포넌트: TransactionList, Modal) 이전 마이그레이션 관련 포스팅 JavaScript → TypeScript 마이그레이션 1(세팅, App, AppRouter) JavaScript → TypeScript 마이그레이션 2(대시보드 페이지, 대시보드 관련 컴포넌트: state 빈 배열 초기화 never type 에러 해결) JavaScript → TypeScript 마이그레이션 3(가계부 페이지, Button 컴포넌트: onClick 함수 타입 지정, 자잘한 오류들 해결) 저번 포스팅에 이어 이번에도 가계부 관련 페이지 코드를 TypeScript로 변경해 볼 예정이다. 기존 코드 확장자를 jsx → tsx로 변경한 뒤 오류가 생기는 부분이나 흰 점선이 나타나며 타입 지정하라고 지정해 주는 부분 위주로 변경해 보겠다. 변경 전 코드는 아래와 같.. 2024. 4. 8. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 3(가계부 페이지, Button 컴포넌트: onClick 함수 타입 지정, 자잘한 오류들 해결) 이전 마이그레이션 관련 포스팅 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.. 2024. 4. 4. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 2(대시보드 페이지, 대시보드 관련 컴포넌트: state 빈 배열 초기화 never type 에러 해결) TS 마이그레이션 1편 [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 1(세 마이그레이션 이유 기존에 프로젝트를 개발하면서 타입 때문에 발생한 에러를 잡느라 오랫동안 헤맸던 경험이 있다. (몽고DB의 ObjectId와 string으로 된 id를 비교해서, 게시글을 작성한 유저임에도 florescene.tistory.com 지난 마이그레이션 1편에 이어서 오늘은 대시보드 관련 컴포넌트를 마이그레이션 해보았다. 다른 컴포넌트는 이전에 했던 것처럼 useSelector의 타입만 지정해 주면 되는 거라 간단히 끝났다. 그런데 한 컴포넌트에서 기존 빈 배열([])로 state값을 초기화한 부분에서 never typ.. 2024. 4. 3. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 개인정보, 토큰 저장 방식 변경2 (redux-persist 보안: redux-persist-transform-encrypt) 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 라이브러리를 사용해 보려고 했다. 그런데 라이브러리 .. 2024. 3. 31. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 개인정보, 토큰 저장 방식 변경1 (LocalStorage → redux-persist) 기존의 프로젝트에서, 사용자의 토큰값과 토큰 유효기간, 사용자 정보를 브라우저에 저장하기 위한 저장소로 Local Storage를 택했다. 그러나 이런 식으로 개인정보를 저장하면 보안에 취약하다는 말을 듣고 다른 방식으로 유저 데이터를 저장할 수 있는 방법을 찾아 구현해 보기로 했다. 기존 프로젝트의 구조 살펴보기 우선 현재 소셜 가계부 프로젝트의 구조는 다음과 같다. //Auth.jsx const handleAuthSubmit = async (e) => { e.preventDefault(); setIsLoading(true); let responseData; try { if (isLoginMode) { responseData = await loginAPI(form); } else { responseDa.. 2024. 3. 31. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 1(세팅, App, AppRouter) 마이그레이션 이유 기존에 프로젝트를 개발하면서 타입 때문에 발생한 에러를 잡느라 오랫동안 헤맸던 경험이 있다. (몽고DB의 ObjectId와 string으로 된 id를 비교해서, 게시글을 작성한 유저임에도 불구하고 게시글 수정, 삭제를 하지 못했다...) 이때의 경험을 토대로 요즘 뜨고 있는 타입스크립트를 프로젝트에 적용해 보자는 생각을 하고, 본격적으로 JS -> TS 마이그레이션에 들어갔다. 필요한 환경설정 설치 (+ tsconfig.json 설정) npm i -D typescript @types/node @types/react @types/react-dom @babel/preset-typescript npm install typescript tsc --init 여기까지 입력하면 `tsconfig.j.. 2024. 3. 27. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 배포 (서버: Koyeb, 프론트: vercel) 진행 중인 프로젝트의 기본적인 기능이 모두 마무리되어 배포를 해보기로 했다. 🎍 백엔드 서버 배포 😀 서버 배포 서비스 결정 전에 Heroku를 이용해 서버 배포했다가 과금 맞은 경험이 있었기에(Heroku는 완전히 유료전환되었다고 한다. 전에 그것도 모르고 강의에서 하라는 대로 Heroku에서 배포했더니 일주일 남짓한 기간 동안 배포한 비용을 지불하게 되었다....😂) 찾아보니 Heroku의 대체 배포 서비스로 Koyeb과 fly.io가 유명한 것 같다. fly.io는 도커를 이용해서만 배포가 가능한데 Koyeb은 깃헙 레파지토리를 연결해서 간단히 배포가 가능하다고 한다. 나는 도커를 한 번도 사용해 본 적이 없어 도커를 사용하려면 또 도커를 배워야 하는데... 서버 배포와 도커 사용은 내게 있어 우선.. 2024. 3. 7. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 리덕스(Redux)로 가계부 데이터 상태 관리 1(리덕스 선택이유, 리덕스 정의 및 스토어, 액션, 리듀서 정의, 덕스패턴 적용까지) 리덕스 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜 더욱 효율적으로 관리할 수 있게 도와준다. 글로벌 상태 관리도 손쉽게 할 수 있다. 미들웨어로 다양한 작업(비동기, 로깅) 가능 🤔 왜 상태관리 라이브러리로 리덕스를 선택했는가? npmtrends를 통해 살펴보면, Redux는 다른 상태관리 라이브러리보다 월등히 높은 사용률을 보이고 있다. 요즘 채용공고를 보면 recoil, zustand도 제법 보이는데 recoil의 경우 1년 전이 마지막 update라 관리가 안 되고 있는 느낌이었고, zustand는 다른 프로젝트에서 한 번 다루어보려고 계획하고 있다. Redux는 Context API가 지금 형태로 사용되기 전(`useReduce.. 2024. 3. 7. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 몽고DB 연동 후 데이터 전송하기 (입출금 내역 POST, GET, PATCH, DELETE 요청) 🚧 사전 작업 필요한 패키지 설치 npm install dotenv mongoose dotenv: 환경변수 .env를 관리해 주는 패키지 computer-science-student.tistory.com mongoose: 비동기 환경에서 작동하도록 설계된 MongoDB 객체 모델링 도구 https://velog.io/@soshin_dev/Node.js-Mongoose-%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90 MongoDB 드라이버 설치 npm install --save mongodb 데이터베이스와 상호작용할 수 있는 sdk 설치 MongoDB 아틀라스 접속 및 회원가입, 데이터 베이스 만들기 MongoDB 연결하기(1) 회원가입 로그인 부분은 생.. 2024. 1. 28. 이전 1 2 다음 반응형
