16장의 키워드 JSON 개요 @RestController JSON 응답 처리 @RequestBody JSON 요청 처리 JSON 데이터의 날짜 형식 다루기 ResponseEntity 객체 리턴, 응답 코드 지정 요청 객체 검증하기 JSON JSON(JavaScript Object Notation)은 간단한 형식을 갖는 문자열로 데이터 교환에 주로 사용한다. 중괄호를 사용하여 객체를 표현 객체는 (이름, 값) 쌍을 가짐 JSON 형식으로 표현한 데이터의 예) { "name": "새싹이들", "birth": 2022, "member": ["유즈", "otcr", "파오리", "스머프"] } Jackson Jackson은 자바 객체와 JSON 형식 문자열 간 변환을 처리하는 라이브러리이다. public cl..

22-23/22-23 Spring 2 2023. 2. 2. 11:15

초보 웹 개발자를 위한 스프링5 프로그래밍 입문 15장을 다루고있습니다. 15장의 키워드 # 웹 구성 요소 # 서블릿-컨트롤러-서비스-DAO의 관계 # 패키지 구성 1. 간단한 웹 어플리케이션의 구성 요소 프론트 서블릿(DispatcherServlet) 컨트롤러 + 뷰 서비스 DAO 복습 프론트 서블릿(DispatcherServelt) : 서블릿 컨테이너 제일 앞단에서 서버로 오는 모든 요청을 받아 처리하는 창구 역할 컨트롤러 (252p) 컨트롤러 : 사용자의 요청을 처리한 후 뷰에 모델 객체를 넘겨주는 역할 (250p) 서비스 : 요청에 대해 어떤 처리를 할지 접근하는 파트(기능의 로직을 구현) DAO(Data Access Object) : DB와 웹 간에 데이터를 이동시켜주는 역할(데이터베이스의 조회..

22-23/22-23 Spring 2 2023. 2. 2. 11:14

17.1 작업 환경 설정 $ yarn create react-app react-redux-tutorial $ cd react-redux-tutorial $ yarn add redux react-redux Prettier를 적용하고 싶다면 디렉터리에 다음과 같이 .prettierrc 파일을 작성하세요. { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } 17.2 UI 준비하기 리액트 프로젝트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것입니다. 프레젠테이셔널 컴포넌트란 주로 상태 관리가 이루어지지 ..

22-23/22-23 리액트 스타터 3 2023. 1. 12. 10:01

이번장에서는 리덕스를 사용하여 리액트 애플리케이션 상태를 관리하는 방법에 대해 알아보겠습니다. 소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만 프로젝트의 규모가 커짐에 따라 상태 관리가 복잡해질 수 있습니다. 리덕스를 사용하여 상태 관리를 하면 다음과 같은 장점이 있습니다. 1. 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있어 코드를 유지보수 하는데 도움이 됩니다. 2. 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 유용합니다. 3. 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화할 수 있다. 이번 실습의 흐름은 다음과 같습니다. 프로젝트 준비 → 프레젠테이셔널 컴포넌트 작성 → 리덕스 관련 코드 작성 → 컨테이너 컴..

22-23/22-23 리액트 스타터 1 2023. 1. 12. 10:01

리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는데 도움이 될 수 있습니다. 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수 있습니다. 리덕스를 사용할 때 주로 react-redux라는 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용하여 처리합니다. I. 작업 환경 설정 1. create-react-app으로 새로운 프로젝트 생성 2. 리덕스와 react-redux 라이브러리 설치 $ yarn add redux react-redux 3. .prettierrc 파일 작성 { "..

22-23/22-23 리액트 스타터 2 2023. 1. 12. 10:01

16.1 개념 미리 정리하기 (1) 액션 상태에 어떠한 변화가 필요하면 하나의 객체로 표현되는 액션이란 것이 발생합니다. 액션 객체는 type 필드를 반드시 가지고 있어야 합니다. 이 값을 액션의 이름이라고 생각하면 됩니다. 그리고 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 작성자 마음대로 넣을 수 있습니다. { type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' } } (2) 액션 생성 함수 액션 생성 함수는 액션 객체를 만들어 주는 함수입니다. function addTodo(data) { return { type: 'ADD_TODO', data }; } (3) 리듀서 리듀서는 변화를 일으키는 함수입니다. 액션을 만들어서 발생시키면 리듀서가 ..

22-23/22-23 리액트 스타터 3 2023. 1. 12. 10:00

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리입니다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다. 또한, 컴포넌트끼리 같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있습니다. 리덕스 라이브러리는 전역 상태를 관리할 때 효과적입니다. 코드의 유지 보수성을 높이고, 작업 효율을 극대화할 수 있습니다. 리덕스는 편리한 개발자 도구를 지원하고 미들웨어 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있습니다. 이전 장에서 배운 Context API로 같은 작업을 할 수 있습니다. 단순히 전역 상태 관리만 요구된다면 Context API를 사용하는 것으로 충분합니다. ..

22-23/22-23 리액트 스타터 1 2023. 1. 12. 10:00

🔍 서버리스? 서버리스, 영어로는 Server(서버) + less(없는)이다. 서버를 클라우드가 대신 관리해 주는 것. 서버를 클라우드 서비스가 대신 관리해 주기 때문에, 개발자 또는 운영자가 서버를 관리하는 데에 대한 부담이 준다. 대표적으로는 AWS와 GCP에서 다양한 서버리스 서비스를 제공한다. 📌 AWS 서비스 알아보기 AWS의 람다(Lambda), API 게이트웨이 (API Gateway), S3이 있다. 📌 Google Cloud 서비스 알아보기 Google Cloud의 앱 엔진 (App Engine), 파이어베이스 (Firebase), 클라우드 펑션스 (Cloud Functions), 클라우드 스토리지 (Cloud Storage) 등이 있다. 📌 기능에 따른 구분 ✅ FaaS 람다와 클라우드..

22-23/22-23 Node.js 2023. 1. 12. 10:00

14장의 키워드 @DateTimeFormat 애노테이션 @PathVariable 애노테이션 @ExceptionHeader 애노테이션 @ControllerAdvice 애노테이션 💡이번 장에서 구현할 기능 1. 날짜를 이용한 회원 검색 기능 추가 2. 회원 ID를 이용한 회원 정보 조회 기능 추가 3. 위 2개의 기능에서 발생할 수 있는 에러 처리 1. 날짜를 이용한 회원 검색 기능 추가 회원 가입 일자를 기준으로 검색하는 기능 ⇒ selectByRegdate() 메서드 // p.383 public class MemberDao{ ... // 특정 기간 동안에 가입한 회원 목록을 보여주는 기능 // from, to 파라미터로 날짜를 입력받는다. public List selectByRegdate(LocalDat..

22-23/22-23 Spring 2 2023. 1. 12. 10:00

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리로, 이를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 이외에도 Context API를 통해서 전역 상태를 관리할 수 있지만, 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기 때문에 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋다. I. 개념 미리 정리하기 리덕스를 사용하면서 접하게 될 키워드의 개념이다. 1. 액션 상태에 어떠한 변화가 필요하면 액션(action)이 발생한다. 이는 하나의 객체로 표현되며, 액션 객체는 다음과 같은 형식으로 이..

22-23/22-23 리액트 스타터 2 2023. 1. 12. 10:00

I. 라우팅이란? 라우팅: 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것 블로그를 만든다고 가정한다면, 블로그 애플리케이션은 다음과 같은 페이지로 구성되어 있습니다. 글쓰기 페이지: 새로운 포스트를 작성하는 페이지 포스트 목록 페이지: 블로그에 작성된 여러 포스트의 목록을 보여주는 페이지 포스트 읽기 페이지: 하나의 포스트를 보여주는 페이지 이렇게 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다. 리액트에서 라우팅 시스템을 구축하기 위해 사용할 수 있는 선택지는 크게 두 가지가 있습니다. 리액트 라우터(React Router) : 리액트의 라우팅 관련 라이브러리 중 가장 오래되고 가장 많..

22-23/22-23 리액트 스타터 2 2023. 1. 5. 10:28

🔍 서비스 운영을 위한 패키지 📌 morgan과 express-session ✅ process.env.NODE_ENV 배포 환경인지 개발 환경인지를 판단할 수 있는 환경 변수다. 주로 배포 환경일 때는 morgan을 combined 모드로, 개발 환경일 때는 dev 모드로 사용한다. 📌 시퀄라이즈 시퀄라이즈에서 가장 큰 문제는 비밀번호가 하드 코딩되어 있다는 것이며, JSON 파일이므로 변수를 사용할 수 없다. 시퀄라이즈는 JSON 대신 JS 파일을 설정 파일로 쓸 수 있게 지원한다. 📌 cross-env cross-env 패키지를 사용하면 동적으로 process.env(환경 변수)를 변경할 수 있다. 또한, 모든 운영체제에서 동일한 방법으로 환경 변수를 변경할 수 있게 된다. npm start시에 실행..

22-23/22-23 Node.js 2023. 1. 5. 10:01