거니의 velog

5. 서버 사이드 렌더링과 코드 스플리팅 * 이제 서버 사이드 렌더링을 구현한 프로젝트에 코드 스플리팅을 도입해 볼 차례이다. 일단 리액트에서 공식적으로 제공하는 코드 스플리팅 기능인 React.lazy와 Suspense는 서버 사이드 렌더링을 아직 지원하지 않는다. 2019년 4월 기준에서는 리액트 공식 메뉴얼에서도 서버 사이드 렌더링과 코드 스플리팅을 함께 사용할 때는 Loadable Components를 사용할 것을 권장하고 있다. * Loadable Components에서는 서버 사이드 렌더링을 할 때 필요한 서버 유틸 함수와 웹팩 플러그인, babel 플러그인을 제공해 준다. 일단 yarn을 사용하여 Loadable Components를 설치해 보자. $ yarn add @loadable/com..

(6) redux-saga 코드 준비하기 * 이번에는 redux-saga를 사용하는 경우 서버 사이드 렌더링을 어떻게 해야 하는지 알아보자. * yarn으로 redux-saga를 설치하자. $ yarn add redux-saga * users 리덕스 모듈에서 redux-saga를 사용하여 특정 사용자의 정보를 가져오는 작업을 관리해 보자. [modules/users.js] import axios from "axios"; import { call, put, takeEvery } from "redux-saga/effects"; const GET_USERS_PENDING = "users/GET_USERS_PENDING"; const GET_USERS_SUCCESS = "users/GET_USERS_SUCCES..

4. 데이터 로딩 * 데이터 로딩은 서버 사이드 렌더링을 구현할 때 해결하기가 매우 까다로운 문제 중 하나이다. 데이터 로딩을 한다는 것은 API 요청을 의미한다. 예를 들어 페이지에서 필요로 하는 데이터가 있다면 API를 요청해서 응답을 받아 와야 한다. 일반적인 브라우저 환경에서는 API를 요청하고 응답을 받아 와서 리액트 state 혹은 리덕스 스토어에 넣으면 자동으로 리렌더링하니까 큰 걱정은 없다. 하지만 서버의 경우 문자열 형태로 렌더링하는 것이므로 state나 리덕스 스토어의 상태가 바뀐다고 해서 자동으로 리렌더링되지 않는다. 그 대신 우리가 renderToString 함수를 한 번 더 호출해 주어야 한다. 게다가 서버에서는 componentDidMount 같은 라이프사이클 API도 사용할 수..

package kr.or.ddit.controller.board; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.InputStream; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.inject.Inject; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import org.apache.commons.io.IOUtils; import org.apache.commons.lang3.StringUti..

${board.boTitle } ${board.boDate } / ${board.boHit } ${board.boWriter } 내용 ${board.boContent } ${boardFile.fileName } (${boardFile.fileFancysize }) download 삭제 수정 목록 package kr.or.ddit.controller.board; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.InputStream; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.inject.Inject..

and (bo_title like '%' || #{searchWord} || '%') and (bo_writer like '%' || #{searchWord} || '%') and (bo_title like '%' || #{searchWord} || '%') and (bo_writer like '%' || #{searchWord} || '%') select count(bo_no) from board where 1=1 select b.* from ( select a.*, row_number() over (order by a.bo_no desc) rnum from ( select bo_no, bo_title, bo_content, bo_writer, bo_date, bo_hit from board where..

파일명을 입력하세요! delete 등록 취소 목록 package kr.or.ddit.controller.board; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.inject.Inject; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import org.apache.commons.lang3.StringUtils; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.spring..

package kr.or.ddit.controller.board; import java.util.List; import javax.inject.Inject; import org.apache.commons.lang3.StringUtils; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.Reques..

package kr.or.ddit.controller.board; import java.util.List; import javax.inject.Inject; import org.apache.commons.lang3.StringUtils; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.Reques..

로그인 ${errors.memId } ${errors.memPw } 로그인 아직 회원이 아닌가요? 회원가입 package kr.or.ddit.controller.conn; import java.util.HashMap; import java.util.Map; import javax.inject.Inject; import javax.servlet.http.HttpSession; import org.apache.commons.lang3.StringUtils; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.stereotype.Controller; ..