Home

2021
0
FrontendLogin

React 로그인 Modal 만들기 2 - styled-component 사용하기

React 로그인 Modal 만들기 9 - Redux Saga 적용 React 로그인 Modal 만들기 8 - Redux 사용하기 React 로그인 Modal 만들기 7 - JWT 적용하기 React 로그인 Modal 만들기 6 - Login 구현 React 로그인 Modal 만들기 5 - 회원 가입 Back end 구현 React 로그인 Modal 만들기 4 - 비동기 처리 React 로그인 Modal 만들기 3 - 회원 가입 React 로그인 Modal 만들기 2 - styled-component 사용하기 React 로그인 Modal 만들기 React 로그인 Modal 만들기 2 - styled-component 사용하기기존에 style 내용들을 css 파일로 관리해도 문제가 없으나, React에서는 style마저도 js파일로 관리할 수 있도록 지원해주는 다양한 프레임 워크들이 있다. js파일로 관리하게 되면 React의 여러 기능을 사용하기 좋기 때문에 기존에 작성해준 Login 관련 css 내용을 js 파일로 변경하려고 한다. import styled, { keyframes } from "styled-components";export const ModalFade = keyframes`{ from { opacity: 0; margin-top: -50px; } to { opacity: 1; margin-top: 0; }}`;export const ModalBackGround = styled.div` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center;`;export const ModalBox = styled.div` width: 90%; max-width: 400px; margin: 0 auto; border-radius: 0.3rem; background-color: #fff; animation: ${ModalFade} 0.5s; overflow: hidden;`;export const LoginHeader = styled.div` position: relative; padding: 16px 64px 16px 16px; background-color: #f1f1f1; font-weight: 700; & > button { position: absolute; top: 15px; right: 15px; width: 30px; font-size: 21px; font-weight: 700; text-align: center; color: #999; border: 0; }`;export const LoginBody = styled.div` padding: 10px; & > div { padding: 5px; display: flex; align-items: center; justify-content: center; } & > div > input { padding-top: 5px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px; width: 290px; height: 30px; font-size: 14px; border: 1px solid rgb(222, 226, 230); }`;export const LoginFooter = styled.div` border-top: 1px solid rgb(222, 226, 230); padding: 7px 16px; text-align: right; & > button { padding: 6px 12px; color: #fff; background-color: #6c757d; border-radius: 5px; font-size: 13px; }`; Styled-Component 적용하기import React, { useState, useCallback } from "react";import { LoginBody, LoginFooter, LoginHeader, ModalBackGround, ModalBox,} from "../assets/css/login";const LoginTemplate = ({ open, close }) => { const [form, setForm] = useState({ email: "", password: "", }); const onChange = useCallback( (e) => { setForm({ ...form, [e.target.name]: e.target.value, }); }, [form] ); return open ? ( <ModalBackGround> <ModalBox> <LoginHeader> 로그인 <button className="close" onClick={close}> {" "} &times;{" "} </button> </LoginHeader> <LoginBody className="login-body"> <div> <input id="email" name="email" type="email" placeholder="Email" onChange={onChange} /> </div> <div> <input id="password" name="password" type="password" placeholder="Password" onChange={onChange} /> </div> </LoginBody> <LoginFooter> <button onClick={close}>닫기</button> </LoginFooter> </ModalBox> </ModalBackGround> ) : null;};export default LoginTemplate;

0
FrontendLogin

React 로그인 Modal 만들기

React 로그인 Modal 만들기 9 - Redux Saga 적용 React 로그인 Modal 만들기 8 - Redux 사용하기 React 로그인 Modal 만들기 7 - JWT 적용하기 React 로그인 Modal 만들기 6 - Login 구현 React 로그인 Modal 만들기 5 - 회원 가입 Back end 구현 React 로그인 Modal 만들기 4 - 비동기 처리 React 로그인 Modal 만들기 3 - 회원 가입 React 로그인 Modal 만들기 2 - styled-component 사용하기 React 로그인 Modal 만들기 로그인 Modal 만들기기존에 개인 프로젝트로 로그인 창을 만들게 되면 별도의 웹 페이지로 로그인 화면을 구현을 했다. 하지만 좀 더 깔끔하고 반응적인 방법을 찾다가 Modal에 대해 알게 됐고 Modal을 이용해 Login 화면을 구현해 보고자 한다. 로그인 컴포넌트 만들기가장 바깥 Wrapper는 로그인 버튼을 누른 상태와 누르지 않은 상태를 보여줘야 함으로 조건절을 이용해 classname을 변경하도록 설정한다. // Login 페이지가 열리면 modal-wrapper가 선택된다. <div className={open ? "modal-wrapper" : null}> 내부 컴포넌트도 상태에 따라 보이거나 보이지 않게 상태를 변경해줄 필요가 있어 조건절을 통해 내부 컴포넌트를 가져올 수 있도록 설정한다. {open ? ( <div className="login-modal"> <div className="login-header">로그인</div> <div className="login-input"> <div className="login-id"> <input className="email" type="email" id="email" placeholder="Email" onChange={onChangeEmail} /> </div> <div className="login-password"> <input className="password" type="password" id="password" placeholder="Password" onChange={onChangePassword} /> </div> <div className="close-login"> <button className="close-button" onClick={close}> 닫기 </button> </div> </div> </div>) : null} LoginTemplate.js

0
SpringSpring Boot

Spring Boot - MultipartFile 에서 발생하는 예외 처리

목차 Spring Boot - StreamingResponseBody Spring Boot - ResourceRegion Spring Boot - 파일 다운로드 서비스 구현하기 Spring Boot - 파일 업로드 서비스 구현하기 Spring Boot - Resource 추상화 Spring Boot - MultipartFile 에서 발생하는 예외 처리 Spring Boot - MultipartFile 를 이용한 파일 업로드 Spring Boot - Part 객체를 이용한 파일 업로드 MaxUploadSizeExceededException 예외MaxUploadSizeExceededException 예외가 발생하는 경우는 크게 두 가지가 있다. 첫 번째는 FileSizeLimitExceededException 예외가 발생했을 때 두 번째는 SizeLimitExceededException 예외가 발생했을 때다. FileSizeLimitExceededException 서버로 전송되는 각 파일 크기가 제한을 초과했을 때 발생하는 예외, 기본값은 1MB다.org.apache.tomcat.util.http.fileupload.impl.FileSizeLimitExceededException: The field file exceeds its maximum permitted size of 1048576 bytes. SizeLimitExceededException 서버로 전송되는 모든 파일 크기가 제한을 초과했을 때 발생하는 예외, 기본값은 10MB다.org.apache.tomcat.util.http.fileupload.impl.SizeLimitExceededException: the request was rejected because its size (29404104) exceeds the configured maximum (10485760)

0
DevelopJAVA

HttpClient 사용하기 - Multipart Parameter 보내기

HttpClient 사용하기 HttpClient 사용하기 - Paramater 보내기 HttpClient 사용하기 - Multipart Parameter 보내기 HttpClient 사용하기 - Multipart Parameter 보내기 Client가 서버로 파일 을 전송하거나 한번에 여러개의 Form 데이터 를 보내기 위해 사용하는 방식이다. 이미지와 같은 Binary 데이터는 기존 application/x-www-form-urlencoded 나 application/json 과 같은 요청으로 적절치 않아 multipart/form-data 형태의 데이터로 요청을 보낸다. application/x-www-form-urlencoded 는 보내는 Paramater를 encoding 해서 전송한다. 데이터가 영숫자가 아닌 경우 3바이트로 표현하기 때문에 바이너리 파일을 전송할 경우 페이로드를 3배로 만들기 때문에 비효율 적이다. multipart/form-data 의 경우는 전송한 모든 문자를 인코딩하지 않은 형태로 보낸다. 의존성 추가하기// https://mvnrepository.com/artifact/org.apache.httpcomponents/httpmimeimplementation group: 'org.apache.httpcomponents', name: 'httpmime', version: '4.3.4' MultipartEntityBuilder 를 이용해 HttpEntity 객체 생성 MultipartEntityBuilder 를 이용해 쉽게 Text나 파일을 (Key, Value) 형태로 Request Body 에 넣을 수 있다. Text를 보낼때는 addTextBody 메소드를 이용해 값을 넣어주고 이미지나 파일 데이터를 보낼 때는 addBinaryBody 메소드를 이용해 Binary 파일 을 넣어주고 Content Type 으로 MULTIPART_FORM_DATA 를 명시해준다.

0
DevelopJAVA

HttpClient 사용하기 - Paramater 보내기

HttpClient 사용하기 HttpClient 사용하기 - Paramater 보내기 HttpClient 사용하기 - Multipart Parameter 보내기 HttpClient 사용하기 - Paramater 보내기 Client가 서버로 요청과 함께 Paramater를 보내는 방법은 크게 Form 형태의 데이터를 보내는 방법과 JSON 형태의 데이터를 보내는 방법이 있다. 보통 Form 형태의 데이터는 (Key, Value) 형태의 데이터로 Http Body에 넣어서 보내고 JSON 형태의 데이터는 String 형태로 변환해 Http Body에 넣어서 보낸다. Form 형태의 데이터를 보낼 때 Header는 application/x-www-form-urlencoded 로 요청을 보내고 JSON 형태의 데이터를 보낼 때 Header는 application/json 로 요청을 보낸다. Paramater 요청 받을 수 있는 Back-end 코드/test/params 에 들어오는 Http 요청과 함께 오는 Paramater 내용을 찍어주는 로직을 작성해준다. Form 형태의 Paramater를 받을 때는 @RequestParam 을 이용해 데이터를 가져올 수 있다. @PostMapping("/test/params")public ResponseEntity testParams(@RequestParam("name") String name, @RequestParam("nickname") String nickName){ log.info("=========================== start ============================"); log.info("Name : " + name); log.info("Nickname : " + nickName); log.info("============================ end ============================="); return ResponseEntity.ok().build();} 요청시 보내는 Paramater 작성 요청시 보내는 Paramater는 NameValuePair 객체를 이용해 (Key, Value) 형태로 값을 넣어준다. 작성이 완료된 NameValuePair 객체를 이용해 HttpEntity 객체를 생성한다. HttpEntity 객체를 요청 객체 Entity에 넣어서 Http 요청을 보내면 요청시 Paramater도 같이 전달 된다. UrlEncodedFormEntity 를 이용해 만들어진 Entity에 대한 요청은 ContentType 이 application/x-www-form-urlencoded 으로 보내진다. List<NameValuePair> params = new ArrayList<>();params.add(new BasicNameValuePair("name", "test"));params.add(new BasicNameValuePair("nickname", "victor"));// NameValuePair 객체 이용해 HttpEntity 객체를 생성한다.HttpEntity entity = new UrlEncodedFormEntity(params);// 요청 객체에 Entity에 Paramater 넣어주기httpPost.setEntity(entity);

0
DevelopJAVA

HttpClient 사용하기

HttpClient 사용하기 HttpClient 사용하기 - Paramater 보내기 HttpClient 사용하기 - Multipart Parameter 보내기 HttpClient 사용하기 HttpClient 는 Apache에서 제공하는 라이브러리로 HTTP 를 사용하는 통신에 손쉽게 자원을 요청하고 응답받을 수 있게 도와준다. // https://mvnrepository.com/artifact/org.apache.httpcomponents/httpclientimplementation group: 'org.apache.httpcomponents', name: 'httpclient', version: '4.3.4' Back-end ControllerHttpClient 를 사용해 요청 테스트를 진행하기 위한 서버 Controller를 생성한다. @RestControllerpublic class HttpClientBackend { @PostMapping("/hello") @CrossOrigin(origins = "*", allowedHeaders = "*") public String hello(){ return "Hello World!"; }} HttpClient 객체 가져오기

0
SpringSpring MVC

Spring Boot @RequestMapping

목차 Spring MVC - ArgumentResolver Spring MVC - HttpMessageConverter Spring Boot Http 응답 - HTTP API, Message Body에 직접 입력 Spring Boot 응답 - 정적 리소스, 뷰 템플릿 Spring Boot 요청 메시지 - JSON Spring Boot 요청 메시지 - Text Spring Boot 쿼리 파라미터, HTML Form Spring Boot 기본 헤더 조회 Spring Boot API 예시 Spring Boot @RequestMapping Spring Boot Logging Spring Boot @RequestMapping 사용자 요청 받기RequestMapping 어노테이션을 사용해 해당 URL로 들어오는 사용자 요청을 처리할 수 있다. 이때, method를 명시하지 않을 경우 GET, POST, PUT, PATCH, DELETE 모든 method를 사용해 접근이 가능하므로, 특정 method에서만 요청을 받고 싶을 경우 method를 명시해줘야 한다. @RequestMapping(value = "/hello-basic")public String helloBasic(){ log.info("helloBasic"); return "ok";} @RequestMapping(value = "/mapping-get-v1", method = RequestMethod.GET)public String mappingGetV1(){ log.info("helloBasic"); return "ok";} GetMapping 어노테이션 사용하기@GetMapping(value = "/mapping-get-v2")public String mappingGetV2(){ log.info("helloBasic"); return "ok";}

0
SpringSpring Framework

Spring MVC Request Life Cycle - ViewResolver

목차 Spring MVC - ArgumentResolver Spring MVC Request Life Cycle - ViewResolver Spring MVC Request Life Cycle - HandlerAdapter Spring MVC Request Life Cycle - HandlerMapping Spring MVC Request Life Cycle - DispatcherServlet Spring MVC Request Life Cycle - Interceptor Spring MVC Request Life Cycle - Filter Spring MVC Request Life Cycle - ViewResolver 핸들러 어뎁터 호출 ViewResolver 호출 spring.mvc.view.prefix=/WEB-INF/views/spring.mvc.view.suffix=.jsp ViewResolver.java public interface ViewResolver { @Nullable View resolveViewName(String viewName, Locale locale) throws Exception;} 스프링 부투에서는 InternalResourceViewResolver 를 등록할때 spring.mvc.view.prefix, spring.mvc.view.suffix 설정 정보를 갖고와 등록해준다. public InternalResourceViewResolver(String prefix, String suffix) { this(); setPrefix(prefix); setSuffix(suffix);}

0
SpringSpring Framework

Spring MVC Request Life Cycle - HandlerAdapter

목차 Spring MVC - ArgumentResolver Spring MVC Request Life Cycle - ViewResolver Spring MVC Request Life Cycle - HandlerAdapter Spring MVC Request Life Cycle - HandlerMapping Spring MVC Request Life Cycle - DispatcherServlet Spring MVC Request Life Cycle - Interceptor Spring MVC Request Life Cycle - Filter HandlerAdapter 살펴보기 HandlerAdapter 는 HandlerMapping 통해 찾은 Handler를 이용해 사용자 요청(Request)를 처리하는 역할을 한다. public interface HandlerAdapter { // supports 메소드를 통해 HandlerAdapter 가 인자로 받은 handler를 지원하는지 확인한다. 보통 Handler에는 HandlerAdapter를 갖는다. boolean supports(Object handler); // handler를 이용해 사용자 Request를 처리한다. @Nullable ModelAndView handle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception; @Deprecated long getLastModified(HttpServletRequest request, Object handler);} HandlerAdapter 구현체 AbstractHandlerMethodAdapter RequestMappingHandlerAdapter HandlerAdapter 지원 여부 확인하기 supports 메소드를 이용해 HandlerAdapter가 전달받은 Handler를 지원하는지 확인한다.

0
SpringSpring Framework

Spring MVC Request Life Cycle - HandlerMapping

목차 Spring MVC - ArgumentResolver Spring MVC Request Life Cycle - ViewResolver Spring MVC Request Life Cycle - HandlerAdapter Spring MVC Request Life Cycle - HandlerMapping Spring MVC Request Life Cycle - DispatcherServlet Spring MVC Request Life Cycle - Interceptor Spring MVC Request Life Cycle - Filter Spring MVC Request Life Cycle - HandlerMapping RequestMapping 어노테이션을 처리하는 Handler, Handler Adapter는 RequestMappingHandlerMapping, RequestMappingHandlerAdapter다 HandlerMapping 살펴보기 Request(요청)와 Request를 처리하기 위한 Handler의 Mapping 정보를 관리한다. HttpServletRequest 객체 Attribute에서 Handler의 정보를 가져올 수 있다. BEST_MATCHING_HANDLER_ATTRIBUTE 요청 URL과 가장 많이 일치하는 Handler를 가져온다. PATH_WITHIN_HANDLER_MAPPING_ATTRIBUTE 요청을 처리하기 위한 Handler의 URL을 가져온다. BEST_MATCHING_PATTERN_ATTRIBUTE 요청 URL과 가장 많이 일치하는 Handler Pattern(URL)을 가져온다. INTROSPECT_TYPE_LEVEL_MAPPING URI_TEMPLATE_VARIABLES_ATTRIBUTE 요청 URL에 포함된 PathVariable 정보를 가져온다. MATRIX_VARIABLES_ATTRIBUTE 요청 URL에 포함된 MATRIX 변수 정보를 가져온다. Matrix 변수를 사용하기 위해서는 WebMvcConfigurer 를 이용해 설정해줘야 한다. 반환 값은 MultiValueMap 형태의 데이터다. PRODUCIBLE_MEDIA_TYPES_ATTRIBUTE HttpServletRequest 객체내 Attribute에서 Handler가 반환하는 Media Type 정보를 가져온다.