🔍 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

9장의 키워드 # MVC # 스프링 MVC # DispatcherServlet # JSP # HTTP 요청 파라미터 # MVC Model - View - Controller의 구조를 갖는 아키텍처 패턴 # 스프링 MVC 개발자들이 스프링을 사용하는 이유로, 스프링이 지원하는 웹 MVC 프레임워크를 사용할 수 있다는 이점을 꼽는다. # 스프링 MVC 사용법 STEP 1. 프로젝트 생성 및 의존성 설정 pom.xml 태그의 값을 war(web application archive)로 설정 의존 추가 서블릿 3.1 JSP 2.3 JSTL 1.2 spring-webmvc // sp5-chap09/pom.xml ... sp5-chap09 war javax.servlet javax.servlet-api 3.1.0 p..

22-23/22-23 Spring 2 2022. 11. 24. 10:00

🔍 API 서버 이해하기 API : Application Programming Interface, 프로그램의 기능을 사용할 수 있게 허용하는 접점 웹 API : 다른 웹 서비스의 기능을 사용하거나 자원을 가져올 수 있는 창구, URL을 통해 접근할 수 있게 만든 것이 웹 API 서버 📌 크롤링 (Crawling) 표면적으로 보이는 웹 사이트의 정보를 일정 주기로 수집해 자체적으로 가공하는 기술 🔍 프로젝트 구조 및 JWT를 설정해 보자 다른 서버에 NodeBird 서비스의 게시글, 해시태그, 사용자 정보를 JSON 형식으로 제공하는 것이 목표! 단, 인증된 사용자에게 정해진 할당량 안에서 API 호출을 허용한다 API는 타인에게 데이터를 제공하는 것인 만큼, 별도의 인증 과정이 필요하다. 이를 위해서는 ..

22-23/22-23 Node.js 2022. 11. 24. 10:00

이번 8장에서 다룰 Hooks는 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업(함수 컴포넌트에서 상태 관리하기, 렌더링 직후 작업 설정하기 등)을 할 수 있게 합니다. 이는 리액트 v16.8에 새로 도입되었습니다. 이번 장에서 리액트 내장 Hooks를 사용하고 커스텀 Hooks를 만들어봅시다. 실습을 위하여 create-react-app을 이용해 새로운 프로젝트를 생성합시다. $ yarn create react-app hooks-tutorial 8. 1 useState 3장에서 사용하였던 useState는 가장 기본적인 Hook이며 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 합니다. 함수 컴포넌트에서 상태를 관리해야 할 때 이 Hook을 사용하면 됩니다. 이 useState를 사용하여 숫자 ..

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

해당 포스트는 초보 웹 개발자를 위한 스프링 5 프로그래밍 입문 [최범균 저] 책 내용을 참고하였습니다. ❗프로젝트 준비 프로젝트 폴더 구조 src/main/java : 자바 코드, 설정 파일 위치 src/main/webapp : HTML, CSS, JS 등이 위치할 폴더 src/main/webapp/WEB-INF : web.xml 파일이 위치할 폴더 src/main/webapp/WEB-INF/view : 컨트롤러의 결과를 보여줄 JSP 파일 위치 pom.xml 4.0.0 sp5 sp5-chap11 0.0.1-SNAPSHOT war javax.servlet javax.servlet-api 3.1.0 provided javax.servlet.jsp javax.servlet.jsp-api 2.3.2-b02 ..

22-23/22-23 Spring 1 2022. 11. 24. 10:00

**Hooks를 사용하는 방법 (1) 리액트 내장 Hooks 사용하기 (2) 커스텀 Hooks 만들기 I. useState => 함수 컴포넌트에서도 가변적 상태를 지닐 수 있게 해준다 //Counter.js import { useState } from 'react'; const Counter = () => { const [ value, setValue ] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 }; }; export default Counter; useState 함수의 파라미터에는 상태의 기본값이 들어가며, 여기서는 0이다 이 함수는 호출 시, 배열을 반환하며, 배열의 첫 번째..

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

해당 포스트는 초보 웹 개발자를 위한 스프링 5 프로그래밍 입문 [최범균 저] 책 내용을 참고하였습니다. ❗ 스프링 MVC 핵심 구성 요소 : 스프링 빈으로 등록해야 하는 것 회색 배경: 개발자가 직접 구현해야하는 요소 DispatcherServlet은 모든 연결을 담당한다. 웹 브라우저로부터 요청이 오면 DispatcherServlet은 그 요청을 처리하기 위해 HandlerMapping에게 요청하여 컨트롤러 객체를 검색한다 HandlerMapping은 클라이언트의 요청 경로를 이용해 이를 처리할 컨트롤러 빈 객체를 DispatcherServlet에게 다시 전달한다. 컨트롤러 객체를 전달 받았다고 바로 컨트롤러 객체의 메서드를 실행할 수 있지는 않다. @Controller, Controller 인터페이..

22-23/22-23 Spring 1 2022. 11. 17. 10:02

🔍 package.json 프로젝트를 만들기 전 항상 package.json을 제일 먼저 생성해야 한다. npm init 혹은 직접 만들어도 된다. // package.json { "name": "nodebird", "version": "0.0.1", "description": "익스프레스로 만드는 SNS 서비스", "main": "app.js", "scripts": { "start": "nodemon app" }, "author": "seol", "license": "MIT" } 🔍 관계 📌 1:N 현재 이 장에서 실습하는 것 중 User 모델과 Post 모델은 1:N 관계며 hasMany로 연결되어 있다. // models/user.js ... static associate(db) { db.User...

22-23/22-23 Node.js 2022. 11. 17. 10:01

해당 포스트는 초보 웹 개발자를 위한 스프링 5 프로그래밍 입문 [최범균 저] 책 내용을 참고하였습니다. ❗ 웹 어플리케이션 개발을 위한 디렉터리 구조 src/main/java : 스프링 소스 코드 src/main/webapp : HTML, CSS, JS, JSP 등 웹 어플리케이션을 구현하는데 필요한 코드 src/main/webapp/WEB-INF : web.xml 파일 위치(DispatcherServlet 등록) src/main/webapp/WEB-INF/view 📌 pom.xml ... sp5-chap09 war javax.servlet javax.servlet-api 3.1.0 provided javax.servlet.jsp javax.servlet.jsp-api 2.3.2-b02 provided..

22-23/22-23 Spring 1 2022. 11. 17. 10:01