프레임워크

RedirectAttributes 란? (feat. addFlashAttribute 에 대한 설명 포함)

RedirectAttributes 란? 리디렉션을 수행할 때 한 컨트롤러 메서드에서 다른 컨트롤러 메서드로 Attributes 를 전달하는데 이용되는 스프링 프레임워크의 인터페이스이다. 일반적인 시나리오에서 Attributes 를 저장할 땐 Model 의 addAttribute() 메서드를 많이 이용한다. RedirectAttributes 가 필요할 때 이를테면, 주문이 완료된 후 주문 결과 상세페이지로 리다이렉팅하고 그 결과를 보여주고 싶을 때 이용할 수 있다. 주문 처리가 끝났을 때 생성된 주문번호를 리다이렉트 페이지쪽으로 넘겨줄 수 있다. RedirectAttributes 적용하고 데이터 저장하기 간단히 RedirectAttributes 타입의 파라미터를 컨트롤러 메서드에 작성하면 된다. 데이터 저..

스프링 프레임워크 버전 4.2에서 4.3 업그레이드시 변화사항

개요 스프링 프레임워크 버전 4.2에서 4.3으로 버전업을 수행했을 때 어떠한 변화가 일어나는지 알아보자. 시멘틱 버저닝에 대한 설명 아래는 스프링 프레임워크 버저닝에 대한 오피셜한 설명입니다. MAJOR, if incremented, may involve a significant amount of work to upgrade. / Major features and potential breaking changes MINOR, if incremented, should involve little to no work to upgrade. / Backward compatible features PATCH, if incremented, should involve no work. / Backward compatib..

스프링 부트 (Spring Boot) 란?

스프링 부트 소개: 스프링 부트 (Spring Boot) 란? 스프링 기반 앱을 독립실행형(standalone)으로 빠르게 개발할 수 있도록 도와주는 미리 구성된(pre-configured) 환경이다. 스프링 프레임워크의 대체재로 오해하면 안 된다. 스프링 부트가 탄생하게 된 이유 스프링 프레임워크의 버전이 계속 업데이트되며 환경을 구성하는 일이 점점 어려워졌기 때문이다. 프레임워크가 발전하며 여러가지 문제들을 마주하게 되었고 마주한 문제들을 해결하려 모듈을 추가하다보니 프로젝트를 잘 구성하는 것조차 어려운 일이 되어버렸다. 너무 많은 선택지가 생겨버렸다. 많은 선택지는 문제에 대한 다양한 해결 방법을 제공했지만, 한편으로는 높은 진입장벽을 만드는 원인도 되었다. 이에 대한 해결책으로 몇몇 기업에서는 자..

DispatchServlet.doDispatch() 함수 끝까지 따라가서 HandlerMapping 과 HandlerAdapter 알아보기

doDispatch() 함수 끝까지 따라가서 HandlerMapping 과 HandlerAdapter 알아보기 스프링의 핵심 동작을 담당하는 DispatcherServlet 에서 요청 처리에 사용될 핸들러를 찾아주고, 실행할 때 사용된다. HandlerMapping 은 요청에 따른 핸들러를 찾아준다. HandlerAdapter 는 찾아낸 핸들러를 실행시켜줄 Adapter 이다. 실제 동작 살펴보기 코드와 동작을 디버깅하며 어떤 일이 벌어지는지 살펴보자. 예제 코드 @RestController public class HelloController { @RequestMapping("/") public String sayHello() { return "Hello, world!"; } } 로컬 환경에서 스프링에 ..

토비의 스프링 5장 요약 정리 - 서비스 추상화

서비스 추상화 자바에는 표준 스펙, 상용 제품, 오픈 소스를 통틀어서 사용 방법과 형식은 다르지만 기능과 목적이 유사한 기술이 존재한다. 환경과 상황에 따라 기술이 바뀌고, 그에 따른 API를 사용하고 다른 스타일의 접근 방법을 따라야 한다는 것은 매우 피곤한 일이다. 지금까지 만든 DAO에 트랜잭션을 적용해보며 스프링이 어떻게 성격이 비슷한 여러 종류의 기술을 추상화하고 이를 일관된 방법으로 사용할 수 있도록 지원하는지 알아보자. 사용자 레벨 관리 기능 추가 현재 UserDao에서는 소위 CRUD라고 말하는 기능만 제공한다. 그 외에 어떠한 비즈니스 로직도 제공하지 않는다. 새로운 요구사항이 들어와서 단지 정보를 넣고 검색하는 것 외에도 정기적으로 사용자의 활동내역을 참고해서 레벨을 조정해주는 기능이 ..

Next.js API 핸들러 커스텀 미들웨어 구성하기

개요 Next.js 에서는 /pages/api 경로 아래에 완전히 백엔드에서만 동작하는 API 를 구성할 수 있도록 Next.js API Routes 를 제공하지만, 이와 함께 사용하며 HTTP Method 를 필터링해주거나 세션 인증 여부에 따른 페이지 반환 등을 해줄 미들웨어의 지원이 부족하다. (아니면 내가 아직 Node.js 서버 라이브러리에 대해서 무지해서 모르는 것일 수도 있다.) 하지만, 높은 자유도가 있어서 직접 만들면 되는 부분이다. 구성 코드 API 응답 형태 및 HTTP Method enum 정의 export interface ApiResponse { ok: boolean; status: number; message?: string; [key: string]: any; } export..

next.js import 경로 예쁘게 하기

개요 import withHandler from "../../../libs/server/withHandler"; import 경로가 깊어지면 위와 같은 일이 일어난다. next.js 에서 typescript 를 사용한다는 가정 하에 import 에 들어가는 경로를 ../../../ 과 같은 경로 없이 예쁘게 표현하려면 어떻게 해야 할까? Step 1: baseUrl 지정하기 typescript 프로젝트에서 baseUrl 은 tsconfig.json 파일에서 정할 수 있다. { "compilerOptions": { "baseUrl": ".", // ... } } Step 2: Paths 지정하기 { "compilerOptions": { "baseUrl": ".", "paths": { "@libs/*": [..

Next.js 의 API routes

Next js API Routes 란? Next.js 에서 놀랍게도 API 를 빌드할 수 있는 솔루션을 제공한다. 더이상 프론트엔드 프레임워크로 보기엔 무리가 있을 것 같다. pages/api 내부에 있는 파일은 /api/* 로 매핑되어 page 가 아닌 API 엔드 포인트가 된다. 서버사이드에서만 번들링되고 클라이언트 사이드의 번들링 크기를 키우지 않는다. 예제 pages/api/user.js 파일을 다음과 같이 작성하면, 상태코드 200 OK 와 함께 { name: 'John Doe' } 를 응답하는 API 를 만들 수 있다. export default function handler(req, res) { res.status(200).json({ name: "John Doe" }); } ..

next.js 의 Dynamic Routes (동적 라우트)

개요 미리 정의된 URL 주소로만 라우팅하는 것이 아니라 사용자가 접근한 경로 혹은 상황에 따라 동적인 라우팅을 제공하고 싶을 때 사용할 수 있는 방식이다. 이를테면, /my-profile/ 뒤에 이름을 주어서 회원들의 프로필을 표현하고 싶다면? /my-profile/ray-kim 페이지에서는 ray-kim 의 프로필을 제공하고, /my-profile/jake-seo 페이지에서는 jake-seo 의 프로필을 제공하고 싶을 때 사용할 수 있다. Next.js 에서는 [param] 과 같이 페이지에 존재하는 컴포넌트 파일명에 괄호를 씌우는 것으로 가능하다. 이를테면 pages/my-profile/[name].js 와 같이 경로를 구성하면 위에서 예로 들었던 /my-profile/jake-seo 와 같은 UR..

Next.js getServerSideProps 서버사이드 렌더링 알아보기

Next.js 의 getServerSideProps 란? Next.js 의 Pre-render 에서 알아보았듯 Next.js 는 Create React App 으로 만든 리액트 프로젝트와 다르게 JS 파일을 이용해 어느정도 기본 HTML 파일을 만든 뒤 해당 파일에서 자바스크립트가 동작할 수 있도록 하는 Hydration 이라는 과정을 거쳐서 렌더링을 한다. Next.js 에서 getServerSideProps() 라 불리는 함수를 함수를 export 하면, API 에서 가져오는 데이터까지 Next.js 의 Pre-render 내용에 포함시킬 수 있다. 혹은 클라이언트에서 민감한 정보를 공개하고 싶지 않을 때 getServerSideProps 를 이용해 서버에서 처리하고 클라이언트에서는 어떤 일이 일어났..

next.js 내부 next.config.js 파일에서 할 수 있는 일들

next.config.js 파일에서 설정 가능한 것들 next.config.js 는 next.js 프로젝트를 생성하면 자동으로 생성되는 설정파일이다. 이 파일에 내용을 더하는 것으로 다양한 next.js 기능을 이용할 수 있다. Redirect Redirect 기능은 A 라는 페이지에 방문하면 자동으로 B 라는 페이지로 이동시켜주는 기능을 말한다. module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true, }, ] }, } next.config.js 에 async redirects() 메서드를 작성하면 redirect 기능을 이용할 수 있다. sourc..

Next.js 에서 Hydration 이란 무엇인가?

Next.js 에서 자주 등장하는 Hydration 이란 무엇일까? Next.js 를 공부하다보면 Hydration 이라는 말을 많이 볼 수 있다. Hydration 이라는 말이 많이 나오는 이유는 Next.js 가 기본적으로 서버사이드 렌더링을 지원해서이다. Hydration 이란, 정적 호스팅 혹은 서버사이드 렌더링을 통해 받은 HTML 웹 페이지를 동적인 웹페이지 로 만드는 과정을 말한다. 보통은 이벤트 핸들러 같은 것들을 붙여서 동적인 웹페이지를 만들곤 한다. Next.js 는 Hydration 과정에서 리액트가 작동하는데 필요한 데이터를 모두 넘겨준다. 그래서 서버사이드 렌더링 이후에 우리의 앱을 부드럽게 리액트로 연결시켜 SPA 처럼 동작하게 만들어준다.