웹 프로젝트75 [😺Just Meow It: 고양이의 조언] Three.js + Next.js / vercel 배포 및 구글/네이버 검색어 등록, 구글 애드센스 광고 추가 http://florescene.tistory.com/506 웹 사이트 Favicon 등록 및 SEO 최적화Favicon Favicon 디자인 favicon을 만들기 위해 canva에서 직접 디자인을 했다. 디자인은 안에서 주는 템플릿을 이용해서 간단하게 만들 수 있다. 캔버스 사이즈는 48x48로 제작했다. Favicon 생성 https://conveflorescene.tistory.com https://florescene.tistory.com/507 Next.js 웹사이트 구글 서치 콘솔, 네이버 서치 어드바이저, 다음 웹마스터 도구에 등록 (+sitemap.xml,sitemap.xml, robots.txt 추가 next-sitemap 패키지 설치 npm i next-sitemap 프로젝트 루트 .. 2025. 4. 5. [😺Just Meow It: 고양이의 조언] Three.js + Next.js / 3D 고양이 모델을 화면에 띄워보자 📌 프로젝트 초기 세팅 (Next.js + TypeScript + Three.js)# Next.js 프로젝트 생성npx create-next-app@latest just-meow-it --typescript# 필요한 패키지 설치cd just-meow-ityarn installyarn add @react-three/fiber @react-three/drei three`@react-three/fiber` === R3F → Three.js를 React에서 사용할 수 있도록 도와주는 라이브러리. 즉 Three.js의 React 버전`@react-three/drei` → Three.js 유틸리티 (카메라, 조명, OrbitControls 등)`three` → Three.js 라이브러리 📌 기본 코드 (고양이 .. 2025. 3. 30. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: styled-components 잘 사용해 보기 (스타일 코드 리팩토링) 보호되어 있는 글 입니다. 2024. 5. 19. [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 커뮤니티 게시글 검색 기능 구현 보호되어 있는 글 입니다. 2024. 5. 19. [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. 이전 1 2 3 4 ··· 7 다음 반응형
