atomicdev 님의 블로그

강의 10: 배포 및 최종 점검내용 요약 및 학습 목표GitHub에 소스코드 푸시 및 관리GitHub 리포지토리 생성, 소스코드 커밋 및 푸시 방법Git Branch 및 버전 관리 기초배포 준비서버와 클라이언트 코드 최적화환경 변수 설정 및 보안 체크불필요한 코드와 콘솔 로그 제거Node.js 서버를 클라우드에 배포하기Heroku, Vercel, AWS를 통한 배포 방법 이해Heroku와 Vercel에 배포하는 단계별 가이드배포 후 최종 점검 및 앱 상태 확인실습 세부 내용1. GitHub에 소스코드 푸시 및 관리GitHub 리포지토리 생성 및 초기 설정GitHub에 새로운 리포지토리를 생성하고 프로젝트를 연결합니다.Git을 사용해 로컬 프로젝트를 GitHub 리포지토리에 푸시합니다.bash코드 복사# ..

삭제 기능과 페이징 구현내용 요약 및 학습 목표삭제 기능 구현상세보기 페이지에서 삭제 버튼을 통해 글을 삭제하는 기능 추가삭제 요청 후 목록 페이지로 이동하는 흐름 학습페이징 기능 구현글 목록에 페이지 번호 추가 및 페이지 전환 기능 구현백엔드 API에서 페이징 처리 설정React Query를 사용해 페이지 데이터 패칭 및 페이지 전환 기능 구현실습 세부 내용1. 삭제 기능 구현: 글 상세보기에서 삭제 버튼 추가삭제 요청 구현: Axios를 사용해 백엔드에 삭제 요청을 보내고, 성공 시 목록 페이지로 이동합니다.// PostDetail.jsimport React from 'react';import { useParams, Link } from 'react-router-dom';import { useQuer..

상세보기 및 수정 페이지 구현내용 요약 및 학습 목표상세보기 페이지 구현특정 글의 내용을 확인하는 상세보기 페이지 구현글의 작성 내용, 작성자명, 작성 시간 등을 표시React Query를 통해 특정 글의 데이터를 API로부터 가져오기글 수정 페이지 구현글 수정 페이지에서 기존 내용을 수정할 수 있도록 구현작성 내용, 작성자명 등 기존 데이터를 폼에 채워서 수정 가능수정 후 저장/취소 버튼으로 데이터 반영 및 페이지 이동 설정React Router로 페이지 라우팅 설정React Router를 사용해 상세보기와 수정 페이지로 이동각 페이지 간의 데이터 연동 설정하여 UX 개선실습 세부 내용상세보기 페이지 구현: 글 내용, 작성자, 작성시간 표시데이터 패칭: React Query를 사용해 특정 글의 데이터를..

방명록 작성 및 목록 페이지 구현내용 요약 및 학습 목표글 작성 페이지 구현하기입력 폼과 저장/취소 버튼을 추가하여 사용자가 메시지와 작성자명을 입력할 수 있도록 설정Redux와 React Query를 사용하여 서버와 연동글 목록 페이지 구현하기작성된 글을 리스트 형식으로 출력제목을 클릭하면 상세보기 페이지로 이동할 수 있도록 링크 설정Redux와 React Query로 서버 데이터 연동하기Redux와 React Query를 활용해 글 작성과 목록 데이터를 서버와 연동하여 실시간으로 표시실습 세부 내용글 작성 페이지 구현: 입력 폼과 저장/취소 버튼 추가 (src/components/WriteForm.js)Form 컴포넌트 생성: 사용자가 입력한 글을 서버로 전송하기 위해 form을 구현합니다.Redux..

Redux Toolkit과 React Query 설정 및 데이터 상태 관리 내용 요약 및 학습 목표:Redux Toolkit으로 전역 상태 관리 설정하기Redux Toolkit의 주요 개념 소개Redux 설치 및 프로젝트에 기본 설정Slice 생성 및 전역 상태 관리와 액션 정의하기React Query로 서버 상태 관리와 데이터 패칭 구현하기React Query의 개념과 이점 설명React Query 설치 및 초기 설정서버 상태와 클라이언트 상태의 차이점 이해서버와 연결해 데이터 패칭 및 캐싱 설정하기Redux와 React Query를 함께 사용하기Redux와 React Query를 효율적으로 결합하여 상태 관리하기상태의 종류별(클라이언트 상태와 서버 상태)로 Redux와 React Query의 역할 분..

React 프로젝트 생성 및 Tailwind CSS 설정강의 목표React로 프론트엔드 프로젝트를 시작하면서 Tailwind CSS를 사용하여 기본적인 스타일링을 설정합니다. Tailwind CSS의 유틸리티 클래스를 활용해 간편하고 빠르게 UI 스타일링을 적용하는 법을 배웁니다.1. Create React App으로 프론트엔드 프로젝트 생성React 프로젝트 생성guestbook-app이라는 이름으로 프로젝트를 생성합니다.npx create-react-app guestbook-app cd guestbook-app프로젝트 파일을 확인합니다.기본적으로 제공되는 src, public 등의 폴더 구조를 확인합니다.App.js, index.js 파일이 주요 시작점입니다. 2. Tailwind CSS 설치 및 기..

Node.js와 Express로 API 구현 (2) - 방명록 CRUD API이번 강의에서는 방명록의 CRUD API를 구체적으로 구현하고, Postman을 통해 각 API가 올바르게 작동하는지 테스트하는 방법을 배웁니다. 실습 위주로 진행하며, API 요청과 응답의 전체 흐름을 따라갈 수 있도록 설명합니다.1. 방명록 작성 (Create) API 구현기능 설명:사용자가 작성한 이름과 메시지를 데이터베이스에 저장하는 API입니다.라우트 설정POST 요청을 통해 방명록을 작성합니다. server.js 파일에 다음 코드를 추가하세요.app.post('/api/guestbook', (req, res) => { const { name, message } = req.body; const sql = 'INSER..

Node.js와 Express로 백엔드 서버 설정 및 API 구현 (1)이 강의에서는 Node.js와 Express를 사용해 백엔드 서버를 설정하고 MySQL과 연결해 API를 구현하는 과정을 다룹니다. 백엔드 서버 설정부터 CRUD 기능을 위한 API 설계까지 상세하게 설명하므로 초보자도 쉽게 따라 할 수 있습니다.1. Node.js와 Express 기본 서버 설정Node.js 프로젝트 초기화프로젝트 폴더를 만들고, 터미널을 열어 다음 명령어를 사용해 Node.js 프로젝트를 초기화합니다.위 명령어로 생성된 package.json 파일에는 프로젝트의 기본 정보와 의존성을 관리하는 설정이 포함됩니다.mkdir guestbook-backend cd guestbook-backend npm init -y Ex..

MySQL 데이터베이스 설계 및 초기화내용 요약MySQL 데이터베이스 및 테이블 생성MySQL을 설치하고 데이터베이스 초기 설정을 진행합니다.guestbook_app이라는 데이터베이스를 생성하고 방명록 기능을 위한 테이블을 정의합니다.방명록 테이블 구조 설계방명록 테이블을 설계하여 다음과 같은 필드를 포함합니다:id (INT, Primary Key, AUTO_INCREMENT): 각 글의 고유 식별자name (VARCHAR): 작성자명message (TEXT): 작성 내용created_at (TIMESTAMP): 글 작성 시간 (자동으로 현재 시간 입력)SQL 쿼리 작성법 및 기본 CRUD 명령어 학습MySQL 기본 CRUD(Create, Read, Update, Delete) 쿼리 문법을 배우며 데이터..

프로젝트 개요 및 환경 설정내용 요약이 강의에서는 프로젝트의 전체 개요와 개발 환경 설정을 진행합니다. 방명록 애플리케이션에서 구현할 주요 기능과 사용 기술 스택을 살펴보고, 프로젝트에 필요한 개발 환경을 구축합니다. Node.js와 MySQL을 설치하고 기본 프로젝트를 설정하며, Visual Studio Code와 필수 확장 도구 설치 및 GitHub 리포지토리 설정을 통해 코드 형상관리를 시작합니다.1. 프로젝트 개요 설명프로젝트 목표: 방명록 애플리케이션을 개발하여 글 작성, 글 목록, 상세보기, 수정 및 삭제 기능을 구현합니다.기능 소개:글 작성: 작성자명과 메시지를 입력하고 저장.글 목록: 글 번호, 작성 시간, 제목, 작성자를 보여주는 리스트 페이지.상세보기: 글 내용과 작성자, 작성시간을 보..