Racon

ExpressJS ES6 설정 Node.js는 common.js 방식을 따릅니다. ES6 사용이유 Fat Arrow Function, 템플릿 리터럴 (Template Literal) 등 사용하기 쉬운 문법들이 ES6에 포함 되어 있다. CommonJS -> ES6 폴더 및 파일 구조 변경 "server"폴더를 생성한다. create a folder "bin", "routes" 폴더 와 "app.js" 파일을 "server"폴더에 이동시킨다. "bin > www" 파일을 www.js로 변경한다. "public" 폴더를 프로젝트 루트에 그대로 둡니다. bin/www.js > ES6 코드로 변환 TIP! 생성된 코드를 ES6로 변환하는 작업은 조금 번거롭기 때문에 여기에 코드를 게시하고 자유롭게 복사하여 붙여..

프로젝트 생성 Node Express 설치 npm install express-generator -g Node Express 프로젝트 생성 express --no-view backend 'backend' : 프로젝트 이름 Node Express 폴더 이동 cd backend Node Express package.json 생성 npm init Node Express 서버 실행 npm start 만약 "Error: Cannot find module 'http-errors'" 에러 시 npm install 최초 Dependency cookie-parser 쿠키 헤더를 구문 분석하고 req.cookies를 쿠키 이름으로 키가 지정된 개체로 채웁니다. 선택적으로 다른 미들웨어에서 사용..

개요 Toast UI Editor은 기본적은로 MarkDown 기반의 Editor이다. 그래서 Image를 추가 하게 되면 MarkDown 형식으로 저장이 되는데 이러면 Image의 align을 셋팅을 할수 가 없다. 마크다운을 div Tag 로 덮은다음 align을 설정해도 원하는데로 적용이 되질 않았다. 그래서 Button 커스텀을 하였다. 기존의 이미지 업로드 버튼을 제거 하고 새로 비슷하게 만들어 버튼을 추가해 주었다. 코드

개요 API 개발 도중 @PathVariable를 enum Type으로 설정 하였다. 이러다 보니 한가지 오류가 발생했는데 Enum에 없는 데이터가 넘어 오면 Exception이 발생 하였습니다. 이를 해결하기 위해 Spring Boot Converter를 사용하였습니다. 이는 @PathVariable 뿐만 아니라 @ModelAttribute, @RequestParam에서도 동작 한다고 되어 있다. 따라서 외부에서 날라오는 데이터를 바인딩 하는데 Header에 있는 데이터 뿐만 아니라 Body에 있는 데이터도 되는지 한번 확인해 봐야 할꺼 같다.(Stack Over Flow에서 비슷한 질문인데 확인 해봐 야 할거 같습니다.) Spring Boot Document Spring 3.0 Document에는 이..

개요 Enum에 잘못된 값을 넣게 되면 오류가 뜨게 되므로 이를 방지 하기 위해 @JsonCreator을 사용 코드 public enum LangCode { KO, JA, EN; // Enum에 데이터를 입력 하면 실행이된다. // 원하는 데이터가 없으면 null이 입력이 된다. @JsonCreator(mode = JsonCreator.Mode.DELEGATING) public static LangCode findByCode(String name) { return Stream.of(LangCode.values()) .filter(c -> c.name().equals(name.toUpperCase())) .findFirst() .orElse(null); } }

개요 Mysql 과 Mybatis로 개발을 진행 하였습니다. Paging 처리된 List를 불러오는 도중 하나의 Row에 특정 code list를 한번에 불러 왔어야 했습니다. 그러다 보니 Left Join과 Limit을 처리 하면 code list 별로 짤린후 resultMap이 되어 Collection을 사용해도 정확한 Paging 데이터를 가져올수 없었습니다. 그래서 서브쿼리에 GROUP_CONCAT을 사용하여 Code List를 한번에 문자로 받아 왔습니다. 하지만 이는 String으로 넘어 오기 때문에 List Type 으로 각각 쪼갤려면 서버에서 for문을 돌려서 하나하나 split 하여야 했습니다. 이러한 동작을 별도로 하기 전에 TypeHandler를 사용하여 resultMap에서 데이터를..

개요 RestAPI 개발을 하다가 외부 에서 API요청시 잘못된 Path로 MissingPathVariableException이 발생할때가 있었다. Exception이 뜨는건 좋은데 Log에 Exception이 같이 기록 되는데 매우 보기 안 좋았다. 그래서 ExceptionHandler를 사용하여 잘못된 요청이라는 Json을 Return하도록 설정 하였다. 수정 코드 // Exception이 발생하면 CustomExceptionHandler을 체크 하겠다는 어노테이션입니다. @RestControllerAdvice public class CustomExceptionHandler { // ()안에 작성되는 Exception을 Handler역활을 하겠다는 어노테이션입니다. @ExceptionHandler({..

개요 웹 서비스를 개발 하다 보면 대량의 이미지를 화면에 띄우기도 한다. 이때 고화질의 이미지 이거나 수많은 양의 이미지를 불러오게 되면 서비스의 질의 저하 된다. 만약 Netflix, Youtubu같이 썸네일이 많은 서비스 같은 경우(심지어 영상이 주요 서비스 이다.) 이미지를 최적화 해주지 않으면 제대로된 서비스를 제공하기 어렵다. 그렇기 때문에 이미지 최적화 방법을 모색 하였고 이미지 최적화 블로그에서 잘 정리 되어 있는 내용을 찾았다. 이 글은 위의 블로그 내용을 한번 더 정리 한 내용이다. 이미지 최적화의 장점 웹 페이지 바이트를 절약할 수 있다. 사이트 성능 향상 브라우저가 다운로드해야하는 바이트가 줄어든다. 클라이언트의 대역폭에 여유가 생긴다. 콘텐츠를 더 빨리 다운로드하여 화면에 렌더링한다..

개요 Cookie와 LocalStorage다시 한번 확인을 해봐야 하는 계기가 생겼다. Nuxt를 개발 할때 사용자 인증 유무에 따라 Login페이지 강제 이동을 시켜야 할때가 있었는데 Vue에서는 Vuex를 사용하여 LocalStorage에 사용자 정보를 입력하여 MiddleWare에서 처리를 했다. 하지만 Nuxt에서는 SSR처리를 하다보니 상세 페이지 및 로그인외 페이지에 직접 접근을 하게 되면 화면이 보였다가 Login페이지로 이동하였다. 이유는 Vue에서는 CSR기반이다 보니 바로 LocalStorage에 접근을 하지만 Nuxt에서는 Server단계에서 LocalStorage에 접근을 못하니 이러한 문제가 생겼다. 추후에 Nuxt에 ServerMiddleWare가 있다는 것은 알았지만 한번더 상..

뷰 템플릿 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼수있는 형태의 HTML로 변환해 주는 속성 템플릿 속성을 사용하는 방법 ES5에서 뷰인스턴스의 template 속성 사용 ``` ``` !Tip render() 사용자가 볼수 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환합니다. 변환된 render() 함수는 최종적으로 사용잦가 볼 수 있는 화면을 그리는 역할을 합니다. 그리고 변환 과정에서 뷰의 반응성이 화면에 더해집니다. 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법 템플릿에서 사용하는 뷰의 속성과 문법 데이터 바인딩 HTML 화면 요소를 뷰 인스..