본문 바로가기

웹 프로젝트73

[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.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (입출금 내역 - POST, PATCH, DELETE 요청) 🚧 사전 작업 uuid 라이브러리 설치 고유 식별자(id)를 생성해주는 서드파티 라이브러리 npm install --save uuid body-parser 패키지 설치 request.body에 있는 데이터에 접근하기 위해 사용하는 구문 분석 패키지 app.js // 본문을 먼저 파싱 -> 본문의 json 데이터를 추출해서 객체나 배열 같이 일반적인 js 구조로 변환 app.use(bodyParser.json()); * body-parser ??? Express body-parser middleware body-parser Node.js body parsing middleware. Parse incoming request bodies in a middleware before your handlers, av.. 2024. 1. 27.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (입출금 내역 - GET 요청 보내기) 기본 라우터 추가하기(GET 요청 사용) app.js const express = require("express"); const bodyParser = require("body-parser"); const app = express(); const transactionsRouter = require("./routes/transactions-routes"); app.use(transactionsRouter); app.listen(5000); * app.use() 지정된 경로에 존재하는 미들웨어 함수를 마운트한다. (요청된 경로와 일치하는 미들웨어 함수가 실행된다.) Express 4.x - API 참조 Express 4.x API express() Creates an Express application. T.. 2024. 1. 26.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 백엔드 구현하기 (사전 작업 - express, nodemon, body-parser 설치 및 테스트 작성) 🚧 사전 작업 express 설치 npm install express --save 참고: https://expressjs.com/ko/starter/installing.html nodemon 설치 매번 서버를 수동으로 재실행해야 하는 문제 해결 npm install nodemon --save-dev nodemon: 파일이 변경될 때마다 서버를 재실행해준다. --save-dev: 개발자 전용 라이브러리 package.json script 처리 package.json "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":"nodemon node app.js" }, start 부분을 입력하고 서버 실행 시에는 `npm start.. 2024. 1. 25.
수익형 웹사이트를 위해 구글 애드센스 적용(Next.js + github pages 배포) 수익형 사이트를 위해 구글 애드센스를 달아보겠다. 나는 도메인에 미리 구글 애드센스 승인을 받아놓은 상태이기 때문에, 승인 과정 없이 광고를 사이트에 게재하는 과정만 담아볼 예정이다. 먼저 구글 애드센스 사이트에 접속한다. Google 애드센스 - 웹사이트에서 수익 창출하기 Google 애드센스의 웹사이트 수익 창출 기능을 사용하여 수익을 올려보세요. Google 애드센스에서 광고 크기를 자동으로 최적화하여 광고의 노출 및 클릭 가능성이 높아집니다. adsense.google.com 만약 구글 애드센스에 광고를 게시하고자 하는 사이트를 등록해 두지 않았다면, 사이트 탭으로 가서 사이트부터 등록해야 한다. 나는 이미 사이트가 등록되어 있는 상태이기 때문에 바로 광고 게시 관련 내용부터 살펴보겠다. 광고 스.. 2024. 1. 21.
Next.js 웹사이트 구글 서치 콘솔, 네이버 서치 어드바이저, 다음 웹마스터 도구에 등록 (+sitemap.xml, robots.txt 생성 및 등록) sitemap.xml, robots.txt 추가 next-sitemap 패키지 설치 npm i next-sitemap 프로젝트 루트 폴더에 next-sitemap.config.js 생성한 뒤 만들고자 하는 사이트맵 정보를 입력해 준다. /** @type {import('next-sitemap').IConfig} */ module.exports = { siteUrl: "내 웹사이트 도메인" || "http://localhost:3000", generateRobotsTxt: true, sitemapSize: 7000, changefreq: "daily", priority: 1, robotsTxtOptions: { policies: [ { userAgent: "*", allow: "/", }, ], }, };.. 2024. 1. 21.
웹 사이트 Favicon 등록 및 SEO 최적화 Favicon Favicon 디자인 favicon을 만들기 위해 canva에서 직접 디자인을 했다. 디자인은 안에서 주는 템플릿을 이용해서 간단하게 만들 수 있다. 캔버스 사이즈는 48x48로 제작했다. Favicon 생성 https://convertico.com/ ConvertICO.com - Convert PNG to ICO and ICO to PNG files This free online icons converter allows you to convert PNG to ICO files with ease. convertico.com 만든 이미지를 위 사이트에 드래그하면 간단하게 favicon을 생성할 수 있다. 이렇게 생성된 favicon을 favicon이라는 이름으로 변경한 뒤 public 폴더에.. 2024. 1. 20.
GitHub Pages로 배포한 Next.js 프로젝트에 커스텀 도메인 등록(+배포 후 커스텀 도메인 초기화 현상 방지) 이전 포스팅에서 GitHub Pages를 이용해 프로젝트 배포까지 마쳤다. Next.js 프로젝트 Github Pages 배포 이전에 React로 이력서 페이지를 만들어 github에 배포한 적이 있다. github을 이용한 배포는 처음이었기에 당시에도 시간이 꽤 걸리기는 했지만 관련 정보가 많기도 했고 단순히 명령어를 입력하는 florescene.tistory.com 이제 배포한 사이트에 유료로 구매한 도메인을 등록하고, 구글 콘솔 및 네이버 서치 어드바이저 등록, 구글 애드센스 적용과정이 남았다. 시행착오를 상당히 많이 거쳤기 때문에 나중을 위해서라도 과정을 등록해 두고 싶었다. 기록을 하지 않으면 금세 휘발되어 버리기 때문에... 커스텀 도메인 등록 나는 hosting.kr 사이트에서 유료 도메인을.. 2024. 1. 20.
Next.js 프로젝트 Github Pages 배포 이전에 React로 이력서 페이지를 만들어 github에 배포한 적이 있다. github을 이용한 배포는 처음이었기에 당시에도 시간이 꽤 걸리기는 했지만 관련 정보가 많기도 했고 단순히 명령어를 입력하는 터미널을 바꾼 것으로 오류가 해결되었기 때문에 배포가 어렵지는 않았다. 하지만 next.js 배포는 더 어려웠다. next.js 배포 방법이 최근에 살짝 변경된 모양이었는데, 그 이유 때문에 검색을 해서 상위권에 올라와 있던 포스팅을 따라 해서는 배포가 정상적으로 진행되지 않았다. 혼자 에러 코드 관련해서 찾아보고 여러 방법으로 배포를 진행해 본 결과 다행히도 웹 사이트 배포에 성공했고, 이후의 웹 사이트 배포에 참고하기 위해 실제로 배포에 사용한 방법을 정리해 보기로 했다. `gh-pages` 패키지 .. 2024. 1. 19.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 프론트엔드 초안 작성하기(라우터 설정, 가계부 월별 이동하기 구현) 기초공사 새로 기획한 프로젝트 내용에 필요하지 않은 코드를 모두 지우고 폴더 구조를 수정하고, 라우트도 새로 작성했다. --- SPA Pages `/`: 대시보드 `/authenticate`: 회원가입, 로그인 폼 `/calendar`: 캘린더 `/transactions`: 유저 입출금 기록 `/challenge`: 챌린지 `/community`: 커뮤니티 `/community/new`: 게시글을 추가하는 페이지로 연결 `/community/:cid`: 게시글을 조회 및 수정하는 페이지로 연결 `/profile`: 환경설정 및 개인 정보 페이지 import React, { useState } from "react"; import { BrowserRouter as Router, Routes, Route }.. 2024. 1. 16.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 기존 React + Spring Boot 소셜 로그인 코드 삭제하기 기존에 리액트와 스프링부트 지식이 없는 상태에서 인터넷에서 찾은 지식만으로 프로젝트를 만들었더니, 스프링 프로젝트를 켜지 않으면 리액트 프로젝트도 수정할 수 없는 매우 귀찮은 상태가 돼 버렸다. 어차피 앞으로 진행할 프로젝트의 백엔드 부분은 node.js와 express를 사용하게 될 테니 스프링부트 코드는 이제 쓸모가 없는 상황이다. 따라서 프로젝트를 다시 시작하기 전에 가장 먼저 해야 할 것이 리액트와 스프링부트 연동을 해제하는 일이었다. 인텔리제이 Run 활성화 스프링부트 실행 시 run 활성화가 되어 있지 않아서 구글링을 통해 해결방법을 찾아보았다. 아래 블로그를 보고 해결했다. [JAVA] intellij Run 비활성화 시 해결 방법 intellij Run 비활성화 시 해결 방법 intelli.. 2024. 1. 13.
반응형

티스토리툴바