9.1 프로젝트 구조 갖추기가장 먼저 'nodebird'라는 폴더를 만들어준다. 항상 package.json을 제일 먼저 생성해야 한다. package.json을 생성해주는 npm init 명령어를 콘솔에서 호출해도 되고 직접 만들어도 된다. version, desciprtion, author, license는 원하는 대로 자유롭게 수정할 수 있다. scripts 부분에 start 속성은 잊지 말고 넣어줘야 한다.{ "name": "nodebird", "version": "0.0.1", "description": "익스프레스로 만드는 SNS 서비스", "main": "app.js", "scripts": { "start": "nodemon app" }, "author": "ZeroCho", "licens..

25-26/Node.js 1 2025. 11. 28. 11:33

1. 프로젝트 세팅 및 패키지 설치먼저 프로젝트 폴더(`nodebird`)를 생성하고 초기화를 진행mkdir nodebirdcd nodebirdnpm init -y1-1. 필요 패키지 설치서버 구동, DB 연결, 인증, 이미지 처리에 필요한 라이브러리들을 한 번에 설치핵심 패키지npm i express cookie-parser express-session morgan multer dotenv nunjucks데이터베이스 관련 (MySQL, Sequelize)npm i sequelize mysql2 sequelize-cli로그인/인증 관련 (Passport)npm i passport passport-local passport-kakao bcrypt개발용 패키지 (코드 수정 시 서버 자동 재시작)npm i -..

25-26/Node.js 2 2025. 11. 28. 10:00

1. 유효성 검사 개요1) 유효성 검사란폼 페이지 -> 서버로 전송될 때, 유효한 데이터가 전송되는지 검사유효성 검사 필수적인 폼 데이터입력 데이터 null날짜, 이메일 형식나이를 숫자로 입력입력 데이터의 제한 길이로그인 인증 시 아이디, 패스워드 유효회원가입 시 입력 아이디 중복 2) 유효성 검사 설정@Valid 애너테이션 이용의존 라이브러리 등록 : bulid.gradle 파일에 validation 의존 라이브러리 추가@Valid 설정 : 요청 처리 메서드에 @Valid 선언 3) 유효성 검사 유형Bean Validation : 도메인 클래스 멤버 변수 -> 제약사항 애너테이션 선언ConstraintValidator : 도메인 클래스 멤버 변수 -> 사용자 정의 애너테이션 선언Validator : 모..

25-26/Spring 2025. 11. 28. 10:00

UseReducer와 상태 관리 상태 관리 : 앱의 복잡성을 줄이고, 사용자 인터페이스의 일관성을 유지하는데 중요한 역할. state : “시간이 지나면서 바뀌는 데이터”. 버튼 클릭 횟수, 입력 폼 값 등등.. UseState와 UseReduceruseState - 상태값과 해당 값을 업데이트하는 함수를 반환한다. 상태가 단순할 때 유용, 기본적인 상태 관리 방식useReducer - 상태 업데이트 로직을 컴포넌트 외부로 추출하여 더 구조화된 형태로 관리할 수 있다. 복잡할 때 유용하다.const [state, dispatch] = useReducer(reducer, initialState); - state: 현재 상태 값 - dispatch(action): 상태를 바꾸기 위해 “액션”..

25-26/React.js 2025. 11. 28. 10:00

1. 다국어 처리의 개요다양한 언어로 작성된 메시지를 웹 브라우저에 따라 각언어에 해당하는 메시지로 표현할 수 있다. 2. MessageSource를 이용한 다국어 처리1. 메지시 리소스 파일 작성언어 대한 메시지 리소스 파일(.properties)을 생성하고 출력 메시지를 작성합니다.key=value 쌍으로 messages.properties// 파일이름_ko.propertiesPersom.form.Enter.message = 당신의 정보를 입력하세요. 2. 기본 환경 설정Spring Boot는 MessageSource라는 인터페이스를 제공하며, 이를 통해 messages.properties와 같은 메시지 리소스 파일에서 언어별 메시지를 가져와 출력합니다.웹 브라우저의 언어 설정(Locale)에 따..

25-26/Spring 2025. 11. 21. 10:00

1. hook1.1 useState가장 기본적인 hook입니다. 함수형 컴포넌트에서도 가변적인 상태를 지닙니다. 함수형 컴포넌트에서 상태를 관리해야 한다면 Hook을 사용하면 됩니다.const [value, setValue] = useState(0);함수의 파라미터에는 상태의 기본값을 넣어줘야 합니다. 배열의 요소중 첫번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수입니다. 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고, 정상적으로 리렌더링 됩니다. 1.1.1 useState 여러 번 사용하기useState 함수는 하나의 상태 값만 관리 가능하기 때문에 여러 번 사용하고자 한다면 useState를 여러 번 사용하면 됩니다.import React, { useState } from '..

25-26/React.js 2025. 11. 21. 10:00

8장. 몽고디비 8-1. NoSQL vs SQL MySQL은 SQL을 사용하는 대표적인 데이터베이스인 반면에, 몽고디비는 대표적으로 NoSQL이라 불리는 데이터 베이스이다.SQL(MySQL)NoSQL(몽고디비)규칙에 맞는 데이터 입력테이블 간 JOIN 지원안정성, 일관성용어(테이블, 로우, 칼럼)자유로운 데이터 입력컬렉션 간 JOIN 미지원확장성, 가용성용어(컬렉션, 다큐먼트, 필드) MySQL은 규칙적이고 안정성이 중요하며 JOIN이 가능한 데이터베이스MongoDB는 유연하고 확장성이 뛰어나며 JOIN이 어려운 데이터베이스 8-4. 데이터 베이스 및 컬렉션 생성하기 MongoDB 시작$ mongo admin -u [이름] -p [비밀번호]관리자 권한으로 MongoDB 셸에 접속DB 선택/생성> u..

25-26/Node.js 1 2025. 11. 21. 10:00

1. NoSQL vs SQL노드와 몽고디비 모두 자바스크립트 문법을 사용함. 즉, 하나의 언어를 사용하여 웹 애플리케이션을 만들 수 있음.NoSQL은 RDBMS보다 뚜렷한 특징을 가지고 있음.NoSQL(Not only SQL): 고정된 테이블이 없음. 예를 들어 MySQL로 users 테이블을 만든다면 name, age 등의 컬럼과 자료형, 옵션 등을 정의해야 하지만 몽고디비는 users 컬렉션만 만들면 끝임. 컬렉션에는 어떠한 데이터든 들어갈 수 있음. 또한 MySQL과 달리 JOIN 기능이 없고 데이터의 일관성이 덜함.확장성: 데이터를 빠르게 넣을 수 있음.가용성: 쉽게 여러 서버에 데이터를 분산할 수 있음. MySQL의 테이블, 로우, 컬럼을 몽고디비에서는 각각 컬렉션, 다큐먼트, 필드라고 칭함...

25-26/Node.js 2 2025. 11. 21. 10:00

1. DB(Data Base)지금까지는 변수에 모든 데이터를 저장. - 서버 종료시 메모리 정리 → 변수에 저장된 데이터도 사라짐DB를 이용하면, 서버가 종료되어도 데이터가 사라지지 않게 할 수 있음. DataBase관련성을 가지며, 중복이 없는 데이터들의 집합 DataBase Management System(DBMS)DB를 관리하는 시스템RDBMS(Relational DBMS) 관계형 DBMS를 많이 사용함. Oracle, MySQL, MMSQL 등등이 해당 2. MySQL과 WorkBench 설치 MySQL 설치MySQL 공식 사이https://dev.mysql.com/downloads/installer/ MySQL :: Download MySQL InstallerMySQL Installer ..

25-26/Node.js 2 2025. 11. 14. 10:00

project 1 [카운터] 앱 만들기1.프로젝트 준비하기요구사항 분석하기: 프로젝트를 구현하기 전, 어떤 설계와 기능으로 구현할지 살펴보는 과정 [카운트] 앱의 경우 두가지 영역이 필요합니다.현재의 카운트를 표시하는 영역인 뷰어(Viewer)카운트를 늘리거나 줄일 수 있는 6개의 버튼이 있는 제어 영역인 컨트롤러(Controller) 컴포넌트 단위로 생각하기: 리액트에서 앱 구현시에는 컴포넌트 단위 생각이 필요 [카운터] 앱에는 3개의 컴포넌트가 있습니다.App 컴포넌트: Viewer 와 Controller 컴포넌트를 감싸는 템플릿Viewer 컴포넌트: 현재의 카운트 표시Controller 컴포넌트: 카운트 제어이때 하나의 컴포넌트는 단 하나의 역할만 수행합니다.2.UI 구현하기UI는 사용..

25-26/React.js 2025. 11. 14. 10:00

1. 파일 업로드파일 업로드 : 파일을 웹 브라우저 -----> 서버로 전송1) 파일 업로드 설정application.properties 파일 설정spring.servlet.multipart.enabled=true spring.servlet.multipart.file-size-threshold=2KB spring.servlet.multipart.location=C:/upload spring.servlet.multipart.max-file-size=200MB spring.servlet.multipart.max-request-size=215MB 2) 파일 업로드 웹 페이지폼 태크 사용method 는 POSTenctype 는 multipart/form-dataaction 는 실행 파일input 태그의 typ..

25-26/Spring 2025. 11. 14. 10:00

7장. MySQL 7-1. 데이터 베이스란?: 관련성을 가지며 중복이 없는 데이터들의 집합 - 데이터베이스를 관리하는 시스템을 DBMS(DataBase Management System)라고 한다. > DBMS 중에는 RDBMS(Relational DBMS)라고 부르는 관계형 DBMS가 많이 사용된다 * 대표적인 RDBMS로 Oracle, MySQL, MSSQL 등이 있음 * 이들은 SQL이라는 언어를 사용해 데이터를 관리함- 보통 서버의 하드 디스크나 SSD 등의 저장 매체에 데이터를 저장한다. > 저장 매체가 고장 나거나 사용자가 직접 데이터를 지우지 않는 이상 계속 데이터가 보존된다. * 서버 종료 여부와 상관없이 데이터를 계속 사용할 수 있음 > 서버에 데이터베이스를 올리면 여..

25-26/Node.js 1 2025. 11. 14. 10:00