16장 리덕스란 가장 많이 사용하는 리액트 상태 관리 라이브러리로, 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시킬 수 있어 효율적으로 관리할 수 있습니다. 또한, 똑같은 상태를 공유해야할 때도 여러 컴포넌트 없이 손쉽게 값을 전달하거나 업데이트할 수 있습니다. 다음과 같은 흐름으로 진행합니다. 16.1.1 액션액션 객체는 다음과 같은 형식으로 이루어져 있습니다. 액션 객체는 type 필드를 꼭 가지고 있어야합니다.{ type: 'TOGGLE_VALUE'} 16.1.2 액션 생성 함수 액션 생성 함수(action creator)는 액션 객체를 만들어 주는 함수입니다. function addTodo(data) {return { type: 'ADD_TODO', data};} ..

25-26/React.js 2026. 1. 16. 10:00

1. 데이터베이스 설치1) MySQL 설치데이터베이스와 상호작용을 위해서 데이터 관리 시스템 (DBMS) 필요DBMS는 MySQL 사용 아래 링크에서 MySQL Installer for Windows 다운로드https://dev.mysql.com/downloads/ MySQL :: MySQL Community Downloads dev.mysql.com 2) MySQL 기본 명령SQL은 데이터베이스용 쿼리 언어.데이터 정의 언어(DDL), 데이터 조작 언어(DML), 데이터 제어 언어(DCL) 데이터베이스 관련 명령어CREATE DATABASE DB이름; // DB 생성SHOW DATABASE; // DB 조회DROP DATABASE DB이름; // DB 삭제테이블 관련 명령어CREAT..

25-26/Spring 2026. 1. 13. 10:00

세 번째 프로젝트 [감정 일기장] 앱을 만듭니다.프로젝트 준비는 다음 순서로 진행합니다. 요구사항 분석하기 리액트 앱 만들기 폰트 설정하기 이미지 준비하기[감정 일기장]은 일기를 작성하면서 그날의 자기 감정을 표현하는 서비스이며, 4페이지로 구성되어 있습니다.프로젝트의 요구사항은 다음과 같습니다. Home 페이지Home은 사용자가 앱에 접속하면 처음으로 만나는 페이지입니다.이런 페이지를 보통 인덱스 페이지라고 부르며 경로는 '/'입니다. 인덱스 페이지는 웹 서비스에서 대문 역할을 합니다.Home 페이지는 크게 상단의 헤더 섹션과 하단의 일기 리스트로 구성됩니다.헤더 섹션에는 월 단위로 일기를 조회하는 기능이 있는데, 좌우 버튼을 클릭하면 월 단위로 날짜를 이동합니다.일기 리스트 섹션에는 '..

25-26/React.js 2026. 1. 9. 10:00

1. RESTful 웹 서비스의 개요REST(Representational State Transfer) 원리를 사용하여 HTTP와 웹의 장점을 최대한 활용할 수 있는 아키텍처입니다.특정 자원에 대해 CRUD(Create, Read, Update, Delete) 연산을 수행하기 위해 URI로 자원을 명시하고, GET, POST, PUT, DELETE 등의 HTTP 방식을 사용하여 요청을 보냅니다.RESTful 웹 서비스의 3대 구성 요소리소스 (Resource): 서버의 고유한 아이디를 가진 자원을 의미하며 URI에 해당합니다.메서드 (Method): 리소스에 대해 요청을 보내는 방식으로 GET, POST, PUT, PATCH, DELETE 등이 있습니다.리소소 형태 (Representation): 클라이..

25-26/Spring 2026. 1. 2. 10:00

1. Context리액트 컴포넌트 트리 전체를 대상으로 데이터 공급하는 기능입니다.'Props Drilliing' 문제 해결하기 위해서 사용합니다.'Props Drilliing: 컴포넌트 계층 구조에서 컴포넌트 간에 값으 전달할 때 발생합니다.목적지까지 데이터를 전달하기 위해서 컴포넌트에 일일이 Props 전달합니다.데이터 교환 구조 파악하기 어렵다는 한계가 있습니다. "컴포넌트 A 와 컴포넌트 B가 동일한 문맥 아래에 있다" -> 컴포넌트 A,B가 동일한 목적(기능)을 가지고 있다라는 뜻으로 이해할 수 있습니다. (TodoEditer,TodoList,TodoItem-모두 할일 관리하기 문맥 컴포넌트)일일이 Props를 전달하지 않아도 Contetext를 사용하면 컴포넌트 트리 전역에 데이터 공급 가능..

25-26/React.js 2026. 1. 2. 10:00

1. 예외 처리1) 예외 처리 (exception handling)오류 처리문제 발생 -> 해당 처리 중단 -> 다른 처리비정상 종료 막음. 정상 실행 상태 유지예외 처리 방법: @ResponseStatus, @ExceptionHandler, @ControllerAdvice2) @ResponseStatusHTTP 상태 코드 서버가 정상 처리되었는지, 오류 발생했는지 등의 정보를 담고 있는 코드HTTP 상태 코드 주요 유형상태 코드설명400BAD_REQUST일반적인 요청 실패401UNAUTHORIZED클라이언트 인증 문제403FORBIDDEN인증 상태와 상관없이 접근 금지404NOT_FOUND요청 url에 해당하는 리소스 없음405METHOD_NOT_ALLOWDhttp 메서드가 지원되지 않음406NOT_A..

25-26/Spring 2025. 12. 26. 10:00

Read: 할 일 리스트 렌더링하기TodoList 컴포넌트의 기능이면서 CURD의 두 번째 요소인 Read 기능을 만들어보자.Read 기능을 이용하면 배열에 저장한 여러 할 일 아이템을 반복해서 렌더링할 수 있다.배열을 리스트로 렌더링하기App 컴포넌트의 State 변수 todo에는 배열 형태로 여러 개의 할 일 아이템이 저장되어 있다. 따라서 배열 todo를 TodoList 컴포넌트에 Props로 전달한다.(...)function App() { (...) return ( );}export default App;src/App.js TodoList 컴포넌트에서는 App에서 Props로 전달된 todo를 리스트로 렌더링해야 한다. 이때 배열 메서드 map을..

25-26/React.js 2025. 12. 26. 10:00

11장. 노드 서비스 테스트 이번 장은 NodeBird 서비스에 테스팅을 적용하는 장임.개발자나 QA들이 실제 서비스를 개발 완료한 후, 자신이 만든 서비스가 제대로 동작하는지 테스트함.(테스팅 중 테스트 과정을 자동화 하는 경우도 있음) 11.1 테스트 준비하기$npm i -D jset package.json에는 test라는 명령어를 등록해줌.명령어를 실행할 때 jest가 실행 됨.//package.json{ "name":... "version":... ... "scrpits":{ "start":... "test":"jest" }, ...}이 후 폴더 안에 middlewares.test.js를 만든다.테스트용 파일은 파일명과 확장자 사이에 test나 sp..

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

project 2 [할 일 관리] 앱 만들기1.프로젝트 준비하기- 요구사항 분석하기[할 일 관리] 앱의 UI 요소를 컴포넌트 단위로 표현하면 아래와 같습니다.Header: 오늘의 날짜를 형식에 맞게 보여줍니다.TodoEditor: 새로운 할 일 아이템을 등록합니다.TodoList: 필터링된 할 일 리스트를 렌더링합니다.(검색 폼이 공백일 경우, 필터링하지 않습니다.)TodoItem: 기본 정보 외에도 체크박스와 버튼이 있습니다. 체크박스를 클릭하면 할 일 완료 여부가 토글되고, 삭제 버튼을 누르면 해당 아이템이 삭제됩니다. - 리액트 앱 만들기1. 새로운 폴더 project2 생성.2. project2를 불러온 후, 터미널을 열고 npx create-react-app . 명령을 입력해 리액트 앱 생성.3..

25-26/React.js 2025. 12. 19. 10:00

1. API 서버 이해하기 API (Application Programming Interface): 다른 애플리케이션에서 현재 프로그램의 기능을 사용할 수 있게 허용하는 접점. 웹 API: API를 서버에 올려 URL을 통해 접근할 수 있게 만든 창구. 인증된 사용자에게 제공하고 싶은 정보만 공개 가능함. 크롤링(Crawling)과의 차이: 크롤링: 웹사이트가 제공하지 않는 정보를 자체적으로 수집. 트래픽 증가 유발 및 법적 문제 소지 있음. API: 공식적으로 허용된 제한 내에서 정보를 제공하므로 안정적임. 활용: 프런트엔드와 분리된 서버 운영, 모바일 앱 서버, 다른 서비스와의 데이터 공유 등. 2. 프로젝트 구조 갖추기 구조 분리: nodebird-ap..

25-26/Node.js 2 2025. 12. 19. 10:00

1. 스프링 시큐리티의 개요시큐리티: 허가된 사용자만 특정 웹페이지에 접근할 수 있도록 제한하는 보안 기능을 쉽게 구현할 수 있다. 1.1 스프링 시큐리티스프링 시큐리티: 스프링을 기반으로 하는 애플리케이션에서 보안을 담당하는 프레임워크.로그인 및 로그아웃 기능인증 및 승인사용자의 URL 접근 허용 또는 차단OAuth 구현통합 인증, 경량 디렉터리 액세스 프로포콜 구현역할 기반 액세스 제공1.2 기본 설정Build.gradle파일에 의존 라이브러리를 등록해야 합니다. dependencies { implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity6'} 2. 시큐리티 세부 구성 설정@Configuration@EnableWebSecu..

25-26/Spring 2025. 12. 19. 10:00

1. API 서버 이해하기: API 란? - (Application Programming Interface)의 약자 - 다른 애플리케이션에서 현재 프로그램의 기능을 사용할 수 있게 허용하는 접점 1.1. 웹 API: 다른 웹 서비스의 기능을 사용하거나 자원을 가져올 수 있는 창구 : 다른 프로그램에서 현재 프로그램의 기능을 사용할 수 있게 허용함 1.2. 웹 API 서버 : 서버에 API를 올려서 URL을 통해 접근할 수 있게 만든 것 1.3. 크롤링(crawling) : 웹 사이트가 자체적으로 제공하는 API가 없거나 API 이용에 제한이 있을 때 사용하는 기술: 웹 사이트의 정보를 일정 주기로 수집해 자체적으로 가공 : 도메인/robots.txt에 접속하여 웹 사이트가 어떤 페이지의 크롤링을 허..

25-26/Node.js 1 2025. 12. 19. 10:00