atomicdev 님의 블로그

상세보기 및 수정 페이지 구현내용 요약 및 학습 목표상세보기 페이지 구현특정 글의 내용을 확인하는 상세보기 페이지 구현글의 작성 내용, 작성자명, 작성 시간 등을 표시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. 프로젝트 개요 설명프로젝트 목표: 방명록 애플리케이션을 개발하여 글 작성, 글 목록, 상세보기, 수정 및 삭제 기능을 구현합니다.기능 소개:글 작성: 작성자명과 메시지를 입력하고 저장.글 목록: 글 번호, 작성 시간, 제목, 작성자를 보여주는 리스트 페이지.상세보기: 글 내용과 작성자, 작성시간을 보..

방명록 웹 애플리케이션 개발: React와 Node.js를 활용한 풀스택 프로젝트이 강좌에서는 MySQL, Node.js, React, Tailwind CSS, Redux Toolkit, React Query를 활용하여 방명록 애플리케이션을 구축합니다. 기본적인 데이터베이스 설정부터 백엔드 API 구축, 프론트엔드 구현, 상태 관리, 그리고 최종 배포까지 차근차근 따라가며 진행할 수 있습니다.강의 1: 프로젝트 개요 및 환경 설정내용 요약프로젝트의 전체 개요 설명 (방명록의 기능과 개발 스택)개발 환경 설정: Node.js, MySQL 설치 및 프로젝트 기본 설정Visual Studio Code 및 필수 확장 도구 설치GitHub 리포지토리 설정과 Git 기본 사용법강의 2: MySQL 데이터베이스 설계..

GitLab과 VS Code를 연동하고, 새로운 브랜치를 생성하여 코드 수정 후 커밋 및 푸시하는 절차를 상세히 설명하겠습니다.1. GitLab과 VS Code 연동Step 1: GitLab에서 Personal Access Token 생성GitLab에 로그인하고 오른쪽 상단의 프로필 아이콘을 클릭한 후 Settings로 이동합니다.왼쪽 메뉴에서 Access Tokens를 선택합니다.Token name(예: VSCodeToken), Expiration date, Scopes에서 api, read_user, read_repository, write_repository를 선택하고 Create personal access token을 클릭합니다.생성된 Token을 복사하여 안전한 곳에 보관합니다. (이 Toke..