본문 바로가기

웹 프로그래밍168

[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.
[유데미 | winterlood 이정환] 프로젝트로 배우는 React.js & Next.js 마스터리 클래스 강의 내용 정리 (섹션 15 ~ 16: Next.js 렌더링 2 - SSG, Next.js 렌더링 3 - ISR) 섹션 15: Next.js 렌더링 2 - SSG SSG(정적 사이트 생성: Static Site Generation) 이해하기 SSR: 브라우저의 요청에 따라 실시간으로 서버 측에서 페이지를 렌더링 하는 것 SSG: 서버 측에서 페이지를 빌드 타임에 한 번만 렌더링 하는 것. 프로젝트 빌드 할 때 페이지가 미리 생성된다. 즉, 페이지 생성 시점에 따라 SSR, SSG의 차이가 나타난다. SSG 프로젝트를 빌드할 때 html 페이지가 미리 생성된다. 이후 브라우저가 페이지를 요청하면, 미리 생성되어 있는 html 파일을 반환해 준다 렌더링이 완료된 페이지를 화면에 그려준다. 4. hydration 과정을 거쳐 응답이 가능한 웹페이지를 생성한다. (SSR과 동일) 장점 SSR에 비해 응답 속도가 굉장히 빠르.. 2024. 1. 22.
[유데미 | winterlood 이정환] 프로젝트로 배우는 React.js & Next.js 마스터리 클래스 강의 내용 정리 (섹션 14: Next.js 렌더링 1 - SSR) 섹션 14: Next.js 렌더링 1 - SSR SSR(서버 사이드 렌더링) 이해하기 첫 번째 렌더링: 리액트 컴포넌트와 같이 js로 작성된 페이지를 실제 html 코드로 변환하는 과정 두 번째 렌더링: 변환된 html을 화면(브라우저)에 실제로 그리는 것 js 코드와 html 요소들을 서로 연결함 👉 Hydration (수화) 동작하지 않는 html 요소들에 js 코드를 연결시켜주는 과정 이 과정을 거치면 버튼, 인풋 등 브라우저와 상호작용이 가능해진다. SSR(서버 사이드 렌더링) 적용하기 1 pages > index.js export default function Home({ name }) { return {name}; } // 해당 컴포넌트를 SSR 방식으로 동작하게 한다. export const.. 2024. 1. 22.
[유데미 | winterlood 이정환] 프로젝트로 배우는 React.js & Next.js 마스터리 클래스 강의 내용 정리 (섹션 13: 페이지 라우터) 섹션 13: Next.js 페이지 라우터 페이지 라우터 _app.js / _document.js Next 앱에서 _app.js와 _document.js는 page의 역할을 하는 컴포넌트는 아니다. 대신 Next 앱에 반드시 존재해야 할 필수 컴포넌트를 정의하는 파일. 모든 페이지 or 모든 컴포넌트에 적용되어야 하는 공통 로직이나 데이터를 다루는 컴포넌트. _app.js import '@/styles/globals.css' export default function App({ Component, pageProps }) { return } _app.js는 리액트의 App.jsx와 유사한 역할을 수행한다. (모든 페이지의 root 컴포넌트 역할) 모든 페이지의 컴포넌트는 _app에 자식 컴포넌트로 배치되어 .. 2024. 1. 21.
수익형 웹사이트를 위해 구글 애드센스 적용(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.
반응형

티스토리툴바