atomicdev 님의 블로그

JWT를 이용한 사용자 인증 구현: 회원가입 및 로그인 기능이번 강의에서는 **JWT(Json Web Token)**를 사용해 사용자 인증 및 권한 부여를 구현하는 방법을 다룹니다. JWT는 웹 애플리케이션에서 사용자 인증에 널리 사용되는 방식으로, 사용자가 로그인할 때 서버에서 토큰을 발급하고, 클라이언트는 이를 저장해 이후의 요청에서 인증을 유지합니다.1. JWT란?**JWT(Json Web Token)**는 JSON 형식의 데이터를 기반으로 사용자 인증 및 권한 부여를 위한 표준입니다. JWT는 세 가지 부분으로 나뉩니다:Header: 토큰의 타입(JWT)과 해싱 알고리즘(예: HS256) 정보.Payload: 사용자 관련 정보(예: 사용자 ID, 권한 등)가 포함됨.Signature: Header..

파일 업로드 기능 구현: Multer를 사용해 파일 업로드 및 MySQL에 경로 저장이번 강의에서는 Multer를 사용해 파일 업로드 기능을 구현하고, 업로드된 파일의 경로를 MySQL에 저장하는 방법을 다룹니다. Multer는 Node.js에서 파일 업로드를 처리하기 위한 미들웨어로, 특히 Express와 함께 많이 사용됩니다.1. Multer 설치 및 설정1.1 Multer 설치파일 업로드를 처리하기 위해 Multer를 설치합니다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행합니다.npm install multer 2. Multer 설정Multer를 사용하여 파일을 업로드하고, 서버에 저장할 파일 경로를 설정합니다.2.1 서버에 Multer 설정 추가multer 미들웨어를 사용해 파일을 처리하고,..

MySQL과 Node.js 연동: 데이터를 읽고 쓰기 및 CRUD API 구현이번 강의에서는 MySQL을 Node.js와 연결하여 데이터를 읽고 쓰는 방법을 배우고, 이를 기반으로 CRUD API를 구현하는 방법을 다룹니다. Node.js에서 MySQL을 활용해 데이터베이스 작업을 자동화하고, API를 통해 데이터 처리를 효율적으로 수행할 수 있습니다.1. MySQL과 Node.js 연동1.1 MySQL 설치 및 설정MySQL이 설치되어 있지 않다면, **MySQL 공식 웹사이트**에서 다운로드하여 설치합니다. MySQL 설치 후, 데이터베이스와 테이블을 설정합니다.CREATE DATABASE node_mysql_example;USE node_mysql_example;CREATE TABLE users (..

RESTful API 개념 이해 및 Express로 간단한 API 만들기이번 강의에서는 RESTful API의 개념과 설계 방법을 배우고, Express.js를 사용하여 간단한 API 엔드포인트를 만드는 방법을 알아보겠습니다. RESTful API는 웹 애플리케이션 간에 데이터를 주고받는 방식으로, 표준화된 구조를 통해 다양한 클라이언트가 API를 쉽게 사용할 수 있게 해줍니다.1. RESTful API 개념**REST(Representational State Transfer)**는 HTTP를 기반으로 클라이언트와 서버 간에 데이터를 주고받는 아키텍처 스타일입니다. RESTful API는 이러한 원칙을 따르는 API로, 각 URL이 리소스(데이터)를 나타내고, HTTP 메서드를 사용해 리소스를 처리합니다..

React Router를 통한 페이지 이동: SPA 구현이번 강의에서는 React Router를 사용하여 **Single Page Application(SPA)**을 구현하는 방법을 다룹니다. React Router는 여러 페이지로 구성된 웹 애플리케이션에서 페이지 간의 이동을 쉽게 관리할 수 있게 도와주는 라이브러리입니다.1. React Router 설치React Router는 React에서 라우팅 기능을 제공하는 라이브러리입니다. 이 라이브러리를 사용하여 URL 경로에 따라 다른 컴포넌트를 렌더링할 수 있습니다.1.1 React Router 설치프로젝트 폴더에서 다음 명령어로 React Router를 설치합니다.npm install react-router-dom 2. 기본 라우팅 설정이제 React ..

Bootstrap을 활용한 UI 디자인: 설치 및 반응형 디자인 적용이번 강의에서는 Bootstrap을 React 프로젝트에 설치하고, 이를 활용하여 간단한 UI 디자인을 만들어보겠습니다. 특히 Grid 시스템을 이용해 반응형 웹 디자인을 구현하는 방법을 다룹니다.1. Bootstrap 설치 및 적용Bootstrap은 HTML, CSS, JavaScript로 만들어진 인기 있는 프론트엔드 프레임워크로, 빠르게 반응형 웹 페이지를 디자인할 수 있게 도와줍니다.1.1 Bootstrap 설치React 프로젝트에서 Bootstrap을 사용하려면 bootstrap 패키지를 설치해야 합니다.Bootstrap 설치: 프로젝트 폴더에서 다음 명령어를 실행합니다.npm install bootstrap Bootstrap ..

Node.js와 React 통신 설정: Axios 사용과 CORS 문제 해결이번 강의에서는 Node.js와 React 간의 통신을 설정하는 방법을 다룹니다. Axios를 사용하여 프론트엔드에서 백엔드로 데이터를 전송하고 받아오는 API 통신을 구현합니다. 또한 CORS 문제를 해결하는 방법도 설명합니다.1. Axios를 사용한 API 통신 설정Axios는 HTTP 요청을 쉽게 보낼 수 있는 자바스크립트 라이브러리입니다. 주로 GET, POST, PUT, DELETE 요청을 보내는 데 사용되며, React에서 백엔드 API와 통신할 때 유용합니다.1.1 Axios 설치먼저, Axios를 설치해야 합니다. React 프로젝트의 루트 폴더에서 다음 명령어를 실행하여 설치합니다.npm install axios ..

React 개발 환경 구축: 설치부터 기본 컴포넌트 생성까지이번 강의에서는 React 개발 환경을 구축하고, 기본적인 Create React App을 사용하여 프로젝트를 설정하는 방법을 다룹니다. 또한 JSX 문법을 이해하고, 간단한 컴포넌트를 생성하는 과정을 설명합니다.1. React 설치 및 기본 프로젝트 설정React는 사용자 인터페이스(UI)를 구축하는 데 사용되는 자바스크립트 라이브러리입니다. 이제 Create React App을 이용해 React 프로젝트를 쉽게 설정해보겠습니다.1.1 Node.js 설치 확인React를 사용하기 위해서는 Node.js가 시스템에 설치되어 있어야 합니다. 먼저 Node.js가 설치되어 있는지 확인하고, 설치되어 있지 않다면 설치하세요.node -vnpm -v 1..

강의 1: 웹 개발 기초 개념 및 기술 스택 설명이 강의에서는 웹 개발의 기본 개념과 웹 애플리케이션을 개발할 때 사용하는 기술 스택에 대해 설명합니다. 웹 개발의 기초를 이해한 후, React, Node.js, MySQL의 역할과 각 기술이 웹 개발에서 어떻게 사용되는지 소개합니다. 또한, 개발 도구인 VS Code를 설치하고 기본적인 사용법을 익히는 시간을 갖습니다.1. 웹 개발의 기본 개념웹 개발은 크게 두 부분으로 나뉩니다: **프론트엔드(Frontend)**와 **백엔드(Backend)**입니다.프론트엔드(Frontend): 사용자가 직접 상호작용하는 웹 애플리케이션의 **UI(User Interface)**를 담당하는 부분입니다. 브라우저에서 실행되며, HTML, CSS, JavaScript와..

다음은 React와 Node.js를 이용한 웹 애플리케이션 개발 강좌의 30강 강의안입니다. 각 강의는 초보자도 쉽게 따라 할 수 있도록 세부적으로 구성되었으며, 실습 중심으로 진행됩니다.1~5강: 기본 개념 및 개발 환경 설정강의 1: 웹 개발 기초 개념 및 기술 스택 설명프론트엔드와 백엔드의 개념React, Node.js, MySQL의 역할 설명VS Code 설치 및 기본 사용법강의 2: Node.js와 Express 기본 셋업Node.js 설치Express를 사용해 간단한 서버 구축기본 라우팅 및 서버 실행 실습강의 3: MySQL 설치 및 DB 연결MySQL 설치 및 데이터베이스 초기화Node.js에서 MySQL과 연결하여 기본적인 CRUD 작업 설정강의 4: React 개발 환경 구축React ..