본문 바로가기

분류 전체보기438

[땅콩코딩] 타입스크립트 강좌 내용정리(TS의 특성, 설치 및 환경설정, 타입추론, 타입명시, 인터페이스) 보호되어 있는 글 입니다. 2024. 3. 11.
[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.
[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.
반응형

티스토리툴바