728x90 개발34 Spring boot에 Swagger 적용하기 개요 API 인터페이스 관리는 스펙이 변할때 마다 일일이 수정하게 되면 생각보다 많은 비용이 드는데 Swagger를 이용하면 불필요한 비용을 줄일 수 있도록 API 문서화를 도와 단순하게 관리할 수 있다. 여기서 Swagge란, OAS(Open Api Specification)를 위한 프레임워크로 API 문서 자동화 및 테스트 기능이 있다. Swagger 적용 방법 우리는 많이 사용되는 Springfox를 이용해 swagger를 적용할 것이다. 프로젝트 버전 java : 11 spring-boot : 2.7.9 springfox-swagger : 3.0.0 1. 의존성 추가 dependencies{ implementation 'io.springfox:springfox-boot-starter:3.0.0' .. 2023. 3. 31. Spring security + JWT 구현 방식 개요 사이드 프로젝트를 진행하면서 사용자 API를 개발할때 Spring Security를 적용해 보고자 소스 분석 및 개발을 진행하며 글로 정리하게 되었다. 예제 소스는 여기(github)에서 확인 가능하다. Spring security 역할 Spring security는 filter을 통해 인증(Authenticatio)과 권한(Authorization)을 확인한다. Filter 개념 Spring Security를 적용하기에 앞서 filter를 알아야 이해와 적용이 쉬울 것이다. 아마 처음 프로젝트를 개발하는 개발자들에게 filter에 대한 개념이 없었을 수도 있다. (필자도 그랬다) filter는 클라이언트 요청에 대해 사전에 걸러낼 수 있는 역할을 수행하며 요청(Request)와 응답(Respons.. 2023. 3. 29. if문 제거하기 코드를 작성할때 항상 클린코드로 작성하기 위해 고민을 했다면 한번 쯤은 고려해볼만한 작업이다. 이번에는 객체 기반 언어인 자바스크립트에서 가독성을 높이기 위해 if문을 객체의 리터럴로 표현해보자. (다양한 객체 생성 방식 중 객체 리터럴이란, 하나 이상의 속성과 속성값들을 중괄호{}를 사용하여 하나의 객체로 표현한 방식) 예제 소스 1 function executeApp(name) { if(name === "CALL"){ return "전화 앱 실행" }else if(name === "CAMERA"){ return "카메라 앱 실행" }else if(name === "MESSAGE"){ return "문자 앱 실행" }else if(name === "MUSIC"){ return "음악 앱 실행" } } .. 2022. 11. 14. [Vue.js] TypeError: Cannot read properties of undefined (reading '__ob__') 해결방법 시작점 프로젝트 당시 페이지를 이동하면 이전 페이지의 Vue를 destroy하는 과정에서 다음과 같은 에러가 발생했다. 그럼 다음 에러를 해결해보자. 프로젝트 구조 프로젝트 구조는 다음과 같이 Vue 안에 컴포넌트가 있었다. 상품리스트 Vue └ 상품별 뱃지 Vue component 편성표 Vue . . . 상품 리스트 Vue Template 상품별 뱃지 Vue Component 상품리스트 Vue가 destroy될때 우리가 기대하는 Vue의 라이프사이클은 다음과 같다. beforeDestroy 상품 리스트 beforeDestroy 상품별 뱃지 destroyed 상품별 뱃지 deestroyed 상품 리스트 하지만 위에 기대와는 다르게 상품별 뱃지 컴포넌트를 destroyed 하는 과정에서 Type에러가 발.. 2022. 10. 27. will-change를 이용한 하드웨어 가속 하드웨어 가속 하드웨어 가속은 GPU(그래픽 처리 장치)를 이용하여 CPU(중앙 처리 장치)의 처리량을 줄이고, 브라우저 렌더링을 효율화 하는 것을 말한다. 이미지, 영상 등 그래픽 처리에 대한 부분을 GPU로 분산을 하면 모바일 디바이스와 같은 환경에서 CPU에 부하를 줄일 수 있다. 하드웨어 가속을 이용하면 렌더링 될 엘리먼트만 가져와 빠르게 렌더링 처리를 할 수 있게 된다(3D transforms만 적용). CSS animation, transform, transition 속성에 자동으로 GPU 가속이 활성화 되지는 않지만 렌더링 처리 능력을 향상시킬 수 있는 몇가지 속성이 구현되어 있다. docs에 나와있듯 will-change css 속성은 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 .. 2022. 8. 29. Referer Policy 적용하기 혹시 프로젝트를 진행하면서 이미지 url을 통해 접근은 가능하나 개발중인 서비스앱 내부에서는 호출하지 못한 경험이 있는가? 필자는 다음 경험을 Referer policy를 정의하면서 접근할 수 있게 되었다. 브라우저에 직접적으로 접근은 가능하나 내가 개발중인 사이트 또는 특정 사이트에서만 접근하지 못한다면 image url이 저장된 cdn에 설정이 되어있는 것은 아닌지 의심해보며 이 포스팅을 읽고 적용해보자. Referer란? HTTP 요청을 하면 요청한 출처나 URL을 헤더에 담아 전달합니다. 이때 요청한 출처 또는 URL을 Referer 헤더라고 부릅니다. Referer를 통해 접근한 출처를 알 수 있는 유익한 정보이나 자칫 잘못하면 치명적인 정보 노출이 될 수 있다. 다음 예를 살펴보자. - 기본적.. 2022. 4. 29. java.util.Optional<T> 이란? Java 8에서 추가된 Optional 클래스는 객체(T)를 감싸주는 Wrapper class이다. 사용 목적 객체(T)가 null이더라도 NullPointerException를 발생시키지 않고 값이 없을 때의 경우를 예외처리 할 수 있다. Optional 기본 예제 Optional optional = Optional.ofNullable("예외처리"); if(optional.isPresent()){ System.out.println(optional.get()); } Optional 활용 예제 Optional optional = Optional.ofNullable(getId()); String id = optional.orElse("Default"); System.out.println(id); // get.. 2021. 12. 22. addEventListener() 사용 방법 오늘은 실무에서 경험한 addEventListener()에 대해 정리하고자 한다. addEventListener()는 나름의 노하우가 아닌 노하우가 필요했다.. 결론부터 정리하자면 addEventListener()를 사용할때는 꼭 removeEventLister()가 필요한지 여부를 생각하고 더 이상 추가해준 이벤트가 필요 없을 시 반드시 제거해주어야 한다. 그 이유는 간단하다. 추가한 이벤트를 제거하지 않고 addEventListener() 로직을 다시 타게 된다면 이벤트가 중복으로 발생할 것이다. 필자 또한 실무에서 해당 문제로 점점 중복된 이벤트가 발생했던 경험이 있다.. 저와 같은 다른 주니어 개발자들은 이런 불상사가 생기지 않기 위해 글을 정리했다. 그럼 이벤트 추가 방법과 제거 방법 모두 살펴.. 2021. 11. 1. 웹 렌더링 과정 목표 웹 렌더링을 이해한다. 렌더링 엔진의 종류(Webkit, Gecko, Blink, Trident .. )를 알아본다. 엔진 종류마다 렌더링 과정을 이해한다. 렌더링 과정 및 브라우저 구조 웹의 렌더링 과정을 이해하기에 앞서 브라우저의 구조와 렌더링 엔진에 관하여 알아두면 좀 더 이해하기 쉬울 것이다. 브라우저는 "사용자가 입력한 URL을 서버에 요청하여 받은 결과를 화면에 보여준다." 여기서 "받은 결과를 화면에 보여주는" 역할을 수행하는 곳이 렌더링 엔진(Rendering Engine)이다. 아래는 브라우저의 구조이다. 렌더링 과정은 크게 다음과 같다. 1. HTML을 Parsing하여 DOM 생성 - Document Object Model 2. CSS로 CSSOM 생성 - CSS Object M.. 2021. 9. 13. 이전 1 2 3 4 다음 728x90
