atomicdev 님의 블로그

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..

방명록 웹 애플리케이션 개발: 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 데이터베이스 설계..

React 애플리케이션을 GitLab을 사용한 CI/CD와 AWS를 통한 배포로 구성하는 방법을 단계별로 설명드리겠습니다. 이 구성에서는 GitLab CI/CD 파이프라인을 사용하여 React 애플리케이션을 AWS S3와 CloudFront에 자동으로 배포하는 인프라를 구축합니다.1. AWS S3와 CloudFront 설정Step 1: S3 버킷 생성S3 버킷 생성:AWS Management Console에서 S3로 이동한 후 새로운 버킷을 생성합니다.버킷 이름은 고유해야 하며, AWS가 지원하는 모든 리전에 걸쳐 사용됩니다.버킷을 정적 웹사이트 호스팅용으로 설정:S3 설정에서 '정적 웹사이트 호스팅'을 활성화하고, 인덱스 문서(index.html) 및 오류 문서(error.html)를 설정합니다.버킷 ..

실시간 기능 구현: WebSocket을 이용한 실시간 알림 및 데이터 업데이트이번 강의에서는 WebSocket을 사용해 실시간 알림 및 데이터 업데이트 기능을 구현합니다. WebSocket은 서버와 클라이언트가 지속적으로 연결을 유지하며, 양방향 통신을 통해 실시간으로 데이터를 주고받을 수 있는 프로토콜입니다. 이를 통해 실시간 채팅, 알림, 주식 가격 변화와 같은 기능을 구현할 수 있습니다.1. WebSocket 개요1.1 WebSocket이란?WebSocket은 전통적인 HTTP 요청-응답 방식과 달리, 서버와 클라이언트 간에 지속적인 연결을 유지하여 실시간 데이터를 주고받을 수 있습니다. 클라이언트가 서버에 요청을 보내고 응답을 받는 구조가 아니라, 서버가 클라이언트로 직접 데이터를 **푸시(pus..

페이지네이션 기능 구현: 대량의 게시글 처리를 위한 서버 및 클라이언트 페이지네이션이번 강의에서는 대량의 게시글을 효율적으로 처리하기 위한 페이지네이션(pagination) 기능을 구현합니다. 페이지네이션을 사용하면 모든 데이터를 한 번에 로드하지 않고, 페이지 단위로 나누어 클라이언트에 전달할 수 있습니다. 이는 성능을 최적화하고, 사용자 경험을 개선하는 데 매우 유용합니다.1. 페이지네이션 개요페이지네이션은 대량의 데이터를 페이지 단위로 나누어 서버와 클라이언트에서 각각 처리하는 기법입니다.1.1 페이지네이션 흐름클라이언트 요청: 사용자는 페이지 버튼을 클릭하여 원하는 페이지의 데이터를 요청합니다.서버에서 데이터 처리: 서버는 해당 페이지에 해당하는 데이터만 클라이언트에 전달합니다.결과 출력: 클라이..

검색 기능 구현: 게시글 및 사용자 검색 기능이번 강의에서는 게시글 및 사용자를 검색하는 기능을 구현하고, API에서 필터링된 데이터를 반환하는 방법을 다룹니다. 이를 통해 웹 애플리케이션에서 특정 키워드로 게시글과 사용자를 쉽게 찾을 수 있도록 합니다.1. 검색 기능 구현 개요검색 기능을 구현하기 위해서는 클라이언트에서 사용자가 입력한 검색어를 서버로 전달하고, 서버에서 해당 검색어에 맞는 결과를 필터링하여 반환해야 합니다.검색 흐름사용자가 검색어 입력: 사용자는 게시글 또는 사용자를 검색할 수 있는 입력 필드를 통해 검색어를 입력합니다.서버로 요청 전송: 입력된 검색어가 서버로 전송됩니다.API에서 필터링된 데이터 반환: 서버에서는 검색어와 일치하는 데이터를 데이터베이스에서 필터링하여 반환합니다.결과..

PM2를 사용한 Node.js 서버 관리이번 강의에서는 PM2를 사용하여 Node.js 애플리케이션을 관리하는 방법을 다룹니다. PM2는 Node.js 애플리케이션을 배포하고, 자동 재시작 및 프로세스 관리, 로깅 등의 기능을 제공하는 프로세스 매니저입니다. 서버 운영을 효율적으로 할 수 있도록 도와주며, 애플리케이션이 중단 없이 동작하도록 보장합니다. 1. PM2 설치 및 기본 사용법1.1 PM2 설치PM2는 전역적으로 설치할 수 있습니다. 다음 명령어를 통해 설치를 진행합니다.npm install -g pm2 설치 후 PM2의 버전을 확인하여 정상적으로 설치되었는지 확인합니다.pm2 -v 1.2 Node.js 애플리케이션 실행PM2를 사용하여 Node.js 애플리케이션을 실행하려면 다음 명령어를 사용..

CI/CD 개념 및 GitHub Actions를 활용한 자동 배포 설정이번 강의에서는 **CI/CD(Continuous Integration/Continuous Deployment)**의 개념을 설명하고, 이를 GitHub Actions를 사용해 자동 배포 환경을 설정하는 방법을 다룹니다. CI/CD는 개발의 자동화된 과정으로, 코드 변경 사항이 즉각적으로 테스트되고, 문제없이 통과될 경우 자동으로 배포되는 시스템을 의미합니다.1. CI/CD 개념 설명1.1 CI(Continuous Integration, 지속적 통합)**지속적 통합(CI)**는 개발자가 코드를 변경할 때마다 자동으로 빌드 및 테스트를 수행하는 과정입니다. 개발자들은 코드를 자주 통합하고, 각 통합이 올바르게 동작하는지 확인하기 위해 자..

프로젝트 최적화 및 빌드: React 프로젝트 빌드 과정 및 배포 준비이번 강의에서는 React 프로젝트를 빌드하고, Node.js 백엔드와 프론트엔드를 연동하여 배포를 준비하는 과정을 다룹니다. 이를 통해 최종 웹 애플리케이션을 최적화하고, 프로덕션 환경에서 실행할 수 있도록 설정합니다.1. React 프로젝트 빌드 과정React는 개발 환경에서 개발 서버를 사용해 빠른 개발 사이클을 지원하지만, 실제로 배포할 때는 정적 파일로 빌드하여 서버에 배포해야 합니다. 빌드 과정은 이러한 정적 파일을 생성하고, 최적화된 버전을 만듭니다.1.1 React 빌드 명령어프로젝트가 준비되었으면 npm을 사용해 빌드합니다.npm run build 이 명령어를 실행하면 build 폴더가 생성되고, React 애플리케이션..

댓글 기능 구현: 댓글 작성 및 조회 API 및 프론트엔드에서 댓글 입력 및 표시이번 강의에서는 댓글 기능을 구현하여 사용자가 게시글에 댓글을 작성하고, 작성된 댓글을 조회하는 방법을 다룹니다. Node.js와 MySQL을 사용해 댓글 관련 API를 구현하고, React에서 댓글 입력과 조회를 처리합니다.1. 댓글 작성 및 조회 API 구현1.1 댓글 테이블 생성먼저 MySQL에서 댓글 데이터를 저장할 comments 테이블을 생성합니다. 각 댓글은 게시글과 연결되며, 댓글 작성자의 이름과 댓글 내용이 저장됩니다.CREATE TABLE comments ( id INT AUTO_INCREMENT PRIMARY KEY, post_id INT, -- 댓글이 속한 게시글 ID use..