6장. 데이터베이스 연동 6.6.1 프로젝트 생성5장에서 생성한 방식과 동일하게 프로젝트 생성- 버전: 2.5.6, groupId: 'com.springboot', name: 'jpa', artifactId: 'jpa',- 의존성 선택 단계: Developer Tools: Lombok, Spring Configuration Processor, Web: Spring Web, SQL: Spring Data JPA, MariaDB Driver 5.6절에서 진행했던 Swagger 의존성을 pom.xml 파일에 추가 io.springfox springfox-swagger2 2.9.2 i..

24-25/Spring 2 2024. 11. 29. 10:00

HooksHooks는 리액트 v16.8에 새로 도입된 기능으로 함수로 만든 리액트 컴포넌트에서 클래스로 만든 리액트 컴포넌트의 기능을 이용하도록 도와주는 함수들이다. Hook은 기존의 함수형 컴포넌트에서는 할 수 없었던 작업을 할 수 있다.    앞서 공부한 내용에서 리액트 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트 두 종류가 있고 state라는 중요한 개념이 있었다. 클래스형 컴포넌트는 생성자에서 state를 정의하고 setState() 함수를 통해 state를 업데이트하고 라이프 사이클에 따라 사용할 수 있었다. 반면, 함수형 컴포넌트에서는 state를 사용하거나 라이프 사이클에 따라 구현할 수 없다. Hook의 사용은 이러한 부분을 보완하고 함수형 컴포넌트에서도 클래스로 만든 컴포넌트의 기능을..

24-25/React.js 2 2024. 11. 29. 10:00

5장: API를 작성하는 다양한 방법이번 장에서는 HTTP 메서드를 활용해 애플리케이션 개발에 필요한 내용을 소개합니다. 데이터베이스를 설치하지 않고도 외부 요청을 받아 응답하는 기능을 컨트롤러에서 어떻게 구현하는지 살펴봅니다. 5.1 프로젝트 설정프로젝트를 설정하기 위해 groupId는 com.springboot, artifactId는 api로 생성합니다. 디렉토리 구조는 아래와 같이 설정합니다. 5.2 GET API 만들기GET API는 웹 애플리케이션 서버에서 값을 가져올 때 사용됩니다. 이번 장에서는 다양한 GET API 구현 방법을 다룹니다. 5.2.1 @RequestMapping으로 구현하기@RequestMapping은 메서드에 요청 URL과 HTTP 메서드(GET, POST 등)를 매핑합니다..

24-25/Spring 3 2024. 11. 22. 14:36

5장. API를 작성하는 다양한 방법 각 HTTP 메서드에 해당하는 API(Application Programming Interface)를 개발해 보자. 데이터베이스를 설치하기 전 간단한 외부 요청을 받아 응답하는 기능을 구현하여 컨트롤러의 구성을 살펴볼 것이다. 5.1 프로젝트 설정 Group을 'com.springboot'로, Artifact와 Name을 'api'로 설정스프링 공식 사이트 - https://start.spring.io 5.2 GET API 만들기GET API는 서버에서 값을 가져올 때 사용하는 API다. GET API를 작성하는 방법은 매우 다양하다. 원활한 실습을 위하여 메서드별로 클래스를 생성한다.api/src/main/java/com.springboot.api/controlle..

24-25/Spring 2 2024. 11. 22. 10:00

익스프레스 (Express)  서버 제작 과정의 불편을 해소하고, 편의 기능을 제공하는 npm 웹 서버 프레임워크다.http 모듈의 요청과 응답 객체에 추가 기능들을 부여하고, 기존 메서드를 보완해 더욱 편리한 사용이 가능하다.  6.1. 익스프레스 프로젝트 시작하기1. 새 폴더 생성 후  package.json 생성npm init 또는 npm init -y를 입력해 다음과 같이 package.json을 생성한다. {    "name": "learn-express",    "version": "0.0.1",    "description": "익스프레스를 배우자",    "main": "app.js",    "scripts": {      "start": "nodemon app"    },    "auth..

24-25/Node.js 1 2024. 11. 22. 10:00

project 1 [카운터] 앱 만들기1. 프로젝트 준비하기프로젝트를 구현하기 전, 앱을 어떤 설계와 기능으로 구현할지 살펴보는 단계인 요구사항 분석 과정을 거쳐야 한다. 리액트 앱을 구현할 때는 컴포넌트 단위로 생각하는 게 필요하다. [카운터] 앱의 요구사항 분석을 하자면App 컴포넌트: Viewer 컴포넌트와 Controller 컴포넌트를 감싸는 템플릿Viewer 컴포넌트: 현재의 카운트 표시Controller 컴포넌트: 카운트를 제어재사용 가능한 수준에서 기능 별로 컴포넌트를 분리하면 프로젝트를 관리하기 쉬워진다.  2. UI 구현하기UI란 사용자 인터페이스라는 뜻으로, 웹 페이지에서 사용자와 상호작용하는 요소를 말한다. 요소의 외양(껍데기)라고 생각하면 된다.2-(1). Viewer 컴포넌트 만들..

24-25/React.js 1 2024. 11. 22. 10:00

1. 프로젝트 준비하기 지금까지 리액트에 대해 학습한 내용을 바탕으로 카운터 앱을 만들어 보자.  카운터 앱은 간단한 덧셈과 뺄셈 기능만 갖추고 있으므로, 첫 리액트 프로젝트에 적합하다.  프로젝트 구현에 앞서 먼저 어떤 설계와 기능을 구현할지 살펴보는 일이 필요하다. 이를 소프트웨어 공학에서는 요구사항 분석이라고 한다. 이 파트에서는 요구사항을 분석하면서 카운터 앱 프로젝트를 준비한다.   [ 요구사항 분석 ] 이 앱은 1개의 페이지에서 제목, Viewer (현재 카운트 표시 영역), Controller(카운트 제어 영역) 세 부분으로 나뉜다.   [ 컴포넌트 단위로 생각하기 ]  앞서 언급한 부분 중 Viewer와 Controller 영역을 컴포넌트로 취급하면 이 앱은 다음의 세 가지 컴포넌트로 구성..

24-25/React.js 2 2024. 11. 22. 10:00

5장. API를 작성하는 다양한 방법GET API 만들기GET API: 웹 애플리케이션 서버에서 값을 가져올 때 사용하는 API ✅ 컨트롤 클래스에 @RestController와 @RequestMapping 설정 @RestController @RequestMapping("/api/v1/get-api") public class GetController { }클래스 수준에서 @RequestMapping 설정 -> 내부 선언한 URL 리소스 앞에 @RequestMapping의 값이 공통 값으로 추가됨 ✅ @RequestMapping으로 구현하기 // http://localhost:8080/api/v1/get-api/hello @RequestMapping(value = "/hel..

24-25/Spring 1 2024. 11. 22. 10:00

🌟키워드: 익스프레스, 미들웨어, 라우팅 분리, rep와 res 객체, 템플릿 엔진 1. 익스프레스 프로젝트 시작하기- 익스프레스: http 모듈의 요청과 응답 객체에 추가 기능을 부여했다. 1. pakage.json 생성① learn-express 폴더를 만든다.② 항상 package.json을 제일 먼저 생성한다.- npm init 명령어로 단계적으로 내용물을 입력하거나- npm init -y를 입력해 파일을 만든 뒤 내용을 수정한다.③ versoin, descripition, author, license는 자유로이 수정한다. package.json{ "name": "learn-express", "version":"0.0.1", "description":"익스프레스를 배우자", "m..

24-25/Node.js 2 2024. 11. 22. 10:00

1장. 스프링 부트란?스프링 프레임워크자바 기반의 애플리케이션 프레임워크로, 엔터프라이즈급 애플리케이션*을 개발하기 위한 다양한 기능을 제공한다."애플리케이션 개발에 필요한 기반을 제공해서 개발자가 비즈니스 로직 구현에만 집중할 수 있게끔 하는 것"이 스프링의 핵심 가치이다. * 엔터프라이즈급 애플리케이션: 기업 환경을 대상으로 하는 개발     제어 역전 (IoC, Inversion of Control)일반적인 자바 개발은 객체를 생성하고 사용하는 일련의 작업을 개발자가 직접 제어하는 구조이다. 제어 역전이란 객체의 관리를 컨테이너에 맡겨 제어권이 넘어간 것을 말한다. IoC를 적용한 환경에서는 사용할 객체를 직접 생성하지 않고 객체의 생명주기 관리를 외부에 위임한다. 제어 역전을 통해 의존성 주입(D..

24-25/Spring 1 2024. 11. 15. 10:33

5.1 npm 알아보기npmNode Package Manger의 약자로 노드 패키지 매니저를 말한다.프로그래밍을 할 때 모든 기능을 직접 구현하는 것은 벅차기 때문에, 다른 사람들이 볼 수 있게 코드를 공개해 둔 서버이다.5.2 package.json으로 패키지 관리하기 package.json서비스에 필요한 패키지를 추가하다 보면 패키지가 많아지는데, 이 패키지는 각자 고유한 버전을 갖는다.이때, 같은 패키지라도 버전별로 기능이 다를 수 있으므로 패키지 버전을 관리하는 것이 필요하다.-> 패키지의 버전을 관리하는 파일이 바로 package.json이다. package.json 만들기$ npm initThis utility will walk you through creating a package.json..

24-25/Node.js 1 2024. 11. 15. 10:01

🌟키워드: 요청과 응답, REST, 쿠키, 세션, https, cluster, npm, package.json 1. 요청과 응답서버에는 요청을 받는 부분과 응답을 보내는 부분이 있어야 한다.요청 & 응답은 이벤트 방식이므로, 이벤트 리스너를 미리 등록해둬야한다.​ 노드 서버를 만드는 코드const http = require('http');http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }); res.write('Hello Node!'); res.end('Hello Server!');}) .listen(8080, () => { // 서버 연결 console.log('..

24-25/Node.js 2 2024. 11. 15. 10:00