우리는 이전의 단원들을 통해 리액트의 기본기부터 컴포넌트를 스타일링하는 방법까지를 배웠습니다. 지금까지 배운 내용을 활용하여 프런트 엔드를 공부할 때 자주 구현하는 일정관리 애플리케이션을 만들어보겠습니다. 이번 실습은 다음과 같은 순서로 진행됩니다. 프로젝트 준비하기 UI 구성하기 기능 구현하기 I. 프로젝트 준비하기 1. 프로젝트 생성 및 필요한 라이브러리 설치 일정 관리 애플리케이션을 만들기위해 터미널에 create-react-app을 사용한 명령어를 입력하겠습니다. 또한 프로젝트가 생성되면 todo-app 디렉터리로 이동하여 애플리케이션을 만들 때 필요한 라이브러리를 설치하세요. $ yarn create react-app todo-app $ cd todo-app $ yarn add node-sass..

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

해당 포스트는 초보 웹 개발자를 위한 스프링 5 프로그래밍 입문 [최범균 저] 책 내용을 참고하였습니다. ❗ JSON JavaScript Object Notation의 약자인 JSON은 간단한 형식을 갖는 문자열로 데이터 교환에 사용된다. { "name" : "코너" "age" : 2 "related" : [ "덕성여대", "컴퓨터공학과" ] } 중괄호로 객체 표현 이름, 값의 쌍 값에는 문자열, 숫자, 불린, null, 배열, 다른 객체가 올 수 있음 ❗ Jackson Jackson은 자바 객체와 JSON 형식 문자열 간 변환을 처리하는 라이브러리 com.fasterxml.jackson.core jackson-databind 2.9.4 com.fasterxml.jackson.datatype jackso..

22-23/22-23 Spring 1 2022. 12. 8. 10:10

해당 포스트는 초보 웹 개발자를 위한 스프링 5 프로그래밍 입문 [최범균 저] 책 내용을 참고하였습니다. ❗ 간단한 웹 어플리케이션의 구성 요소 프론트 서블릿 컨트롤러 + 뷰 서비스 DAO 프론트 서블릿은 웹 브라우저의 모든 요청을 받는 창구 역할로, 요청을 분석해서 알맞은 컨트롤러에 전달한다. 스프링 MVC에서는 DispatcherServlet이 프론트 서블릿의 역할을 수행한다. 컨트롤러는 어플리케이션이 제공하는 기능과 사용자 요청을 연결하는 매개체로 기능 제공을 위한 로직을 직접 수행하지는 않고 서비스에게 그 처리를 위임한다. 서비스는 기능의 로직을 구현한다. 서비스는 DB연동이 필요하면 DAO(Data Access Object)를 사용한다. DAO는 DB와 웹 어플리케이션 간에 데이터를 이동시켜 주..

22-23/22-23 Spring 1 2022. 12. 8. 10:09

해당 포스트는 초보 웹 개발자를 위한 스프링 5 프로그래밍 입문 [최범균 저] 책 내용을 참고하였습니다. 13장에서 작성한 예제를 이어서 작성합니다. ❗ 회원가입 날짜로 회원 검색 📌selectByRegdate MemberDao에 회원 가입 일자를 기준으로 검색하는 기능, selectByRegdate 추가 public List selectByRegdate(LocalDateTime from, LocalDateTime to) { // from 부터 to 사이에 있는 REGDATE 값을 갖는 Member 목록 반환 List results = jdbcTemplate.query( "select * from MEMBER where REGDATE between ? and ? " + "order by REGDATE d..

22-23/22-23 Spring 1 2022. 12. 8. 10:09

9.1 가장 흔한 방식, 일반 CSS CSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것입니다. 이름을 지을 때 특별한 규칙을 사용하거나 CSS Selector를 활용할 수 있습니다. 9.1.1 이름 짓는 규칙 컴포넌트 이름-클래스 형태로 지어집니다. (ex: App-header) BEM 네이밍은 CSS 방법론 중 하나로, 이름을 지을 때 일종의 규칙을 준수하여 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식입니다. (ex: .card__title-primary) .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-item..

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

해당 포스트는 초보 웹 개발자를 위한 스프링 5 프로그래밍 입문 [최범균 저] 책 내용을 참고하였습니다. ❗ HttpSession 로그인 상태를 유지하기 위해서는 HttpSession을 이용하거나 쿠키를 이용하면 된다. HttpSession을 사용하려면 다음의 두 방법 중 하나를 선택하면 된다. 요청 매핑 애노테이션 적용 메서드에 HttpSession 파라미터를 추가한다. 요청 매핑 애노테이션 적용 메서드에 HttpServletRequest 파라미터를 추가하고 HttpServletReuqest를 이용해서 HttpSession을 구현한다. 📌HttpSession 파라미터 추가 @PostMapping public String(loginCommand loginCommand, Errors errors, Http..

22-23/22-23 Spring 1 2022. 12. 1. 10:01

10장의 키워드 #DispatcherServlet #HandlerMapping #HandlerAdapter #ViewResolver 1. 스프링 MVC 핵심 구성 요소 : 스프링 빈으로 등록 컨트롤러, JSP : 개발자가 직접 구현 DispatcherServlet은 모든 연결을 담당 웹 브라우저로부터 요청이 들어오면 DispatcherServlet이 전달 받는다. (일종의 창구 역할) 요청을 처리하기 위한 컨트롤러 객체를 HandlerMapping에게 검색해달라 요청한다. 2-1. HandlerMapping이 이를 처리할 컨트롤러 빈 객체를 DispatcherServlet에게 리턴한다. (클라이언트 요청 경로 이용) DispathcerServlet은 컨트롤러 객체를 처리할 수 있는 HandlerAdapt..

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

컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있지만, 이번에 다룰 스타일링 방식은 다음과 같다. 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식이다. Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드 작성을 쉽게 작성할 수 있도록 해준다. CSS Module : 스타일 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션이다. styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 적용된 컴포넌트를 제작할 수 있다. I. 가장 흔한 방식, 일반 CSS css를 작성할 때 가장 중요한 점은 CSS 클래..

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

🔍 Test ✅ test의 역할 코드나 함수가 제대로 실행되는지 검사하고 값이 일치하는지 검사한다. test 함수의 첫 번째 인수로는 테스트에 대한 설명을 적고, 두 번째 인수인 함수에는 테스트 내용을 적는다. except 함수의 인수로 실제 코드를, to Equal 함수의 인수로 예상되는 결과값을 넣는다. expect에 넣은 값과 toEqual에 넣은 값이 일치하면 테스트를 통과한다. // routes/middlewares.test.js { test('1+1은 2입니다.', () => { expect(1 + 1).toEqual(2); }); 🔍 유닛 테스트 작은 단위의 함수나 모듈이 의도된 대로 정확히 작동하는지 테스트하는 것. 단위 테스트라고도 부르며, 나중에 함수를 수정하면 기존에 작성해둔 테스트는..

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

해당 포스트는 초보 웹 개발자를 위한 스프링 5 프로그래밍 입문 [최범균 저] 책 내용을 참고하였습니다. ❗ 태그로 메시지 출력하기 홈페이지를 개발할 때 다국어 지원이 필요하다면 우리는 각 언어별로 사용할 문자열을 파일에 보관하고 알맞을 때 꺼내 쓸 필요가 있다. 스프링은 이 기능을 태그로 제공하고 있다. 전체적인 방법은 다음과 같다. 문자열을 담은 메시지 파일을 작성한다. 메시지 파일에서 값을 읽어오는 MessageSource 빈을 설정한다. JSP 코드에서 태그를 사용하여 메시지를 출력한다. 📌메시지 파일 작성 메시지 파일은 프로퍼티 파일 형식으로 작성한다. src/main/resources 에 message 폴더를 생성하고 label.properties 파일을 생성한다. 인코딩은 'UTF-8'로 설..

22-23/22-23 Spring 1 2022. 12. 1. 10:00

리액트에서는 다양한 방식으로 컴포넌트를 스타일링할 수 있습니다. 이번 장에서는 자주 사용하는 4가지 방식을 알아보도록 하겠습니다. 먼저 이번 예시에서는 create-react-app을 이용해 새로운 프로젝트를 만듭니다. styling-react 프로젝트를 만들고 열어주세요. $ yarn create react-app styling-react $ cd styling-react $ yarn start 9.1 가장 흔한 방식, 일반 CSS 기존의 CSS 스타일링에 불편을 겪지 않고, 새로운 기술을 배우고 싶지 않다면 일반 CSS를 계속 사용해도 괜찮습니다. 실제로 소규모 프로젝트에서는 새로운 스타일링 시스템을 적용하는 것이 불필요할 수도 있습니다. 방금 만든 프로젝트에는 App.js 파일과 App.css 파일..

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

Hooks는 리액트 v16.8에 새로 도입된 기능으로, 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업(함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect)을 할 수 있게 해 줍니다. 이번 실습은 우선 리액트 내장 Hooks를 사용하고 다음으로 커스텀 Hooks를 만드는 흐름으로 진행하겠습니다. 실습을 진행하기 위해 create-react-app을 사용하여 새로운 프로젝트를 생성해주세요. $ yarn create react-app hooks-tutorial 8.1 useState 3장에서도 사용해 보았던 useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. 만약 함수 컴포넌트에서 상태를 관..

22-23/22-23 리액트 스타터 3 2022. 11. 24. 10:27