티스토리

ukss

검색하기

블로그 홈

ukss

employerukss.tistory.com/m

알면 쓸데 있고 신박한 잡학사전을 추구하는 블로그

구독자: 2

방명록 방문하기

주요 글 목록

sitemesh 사용시 pc, mobile 구분하기 어느덧 신규 프로젝트에 투입된지 2달여가 지나가고 있다. 현재 프로젝트는 17년 기준으로 개발 된 프로젝트에 대해 마이그레이션 작업을 하는 프로젝트여서 과거 소스 및 라이브러리를 유지해야하는 부분이 있었다. 오늘은 sitemesh를 통해 같은 url로 접근시 pc, mobile에 대한 레이아웃을 분기하는 작업에 대해 정리하려한다. 보통 sitemesh를 통해 pc, mobile의 레이아웃 분기는 url에 /mobile 과 같이 특정한 값을 추가하여 분기하는데, 필자의 경우는 같은 url을 유지하고 싶어하는 요구조건이 있어 sitemesh의 내부 작업이 불가피했다. sitemesh 기본 설정은 검색을 통해 금방 알 수 있으니 생략하고, 이번 프로젝트에서 위의 경우를 해결하기 위한 내용을 중점적으로 다루겠다.. 공감수 0 댓글수 0 2023. 9. 21.
Spring Security 사용시 Role prefix 변경 금년도에 들어서면서 신규 프로젝트를 맡게되었습니다. 해당 프로젝트에서 역할은 Backend 영역으로 REST API 프로젝트에 대한 환경설정 및 서비스 개발입니다. 우선 해당 프로젝트는 Front 영역과의 인증 부분에서 JWT 방식을 이용했습니다. 그리고 추가로 Spring Security를 통한 보안성을 강화했습니다. 이렇게 기본적인 구성과 함께 Test API를 배포했습니다. 이때는 사용자 권한에 대해서 기본적으로 ROLE_USER, ROLE_ADMIN을 부여하였습니다. Spring Security에서 기본적으로 권한의 prefix가 `ROLE_`입니다. 그렇기에 Test API에서도 사용자 정보에서 권한정보값을 앞에서와 같이 지정하였습니다. 그러나 해당 프로젝트에서 권한 설정값은 앞의 규칙을 준수하.. 공감수 1 댓글수 0 2023. 2. 23.
Spring Security 사용시 Cors 처리 CORS란? CORS(Cross-Origin Resource Sharing)는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조입니다. 기본적으로 HTTP request는 Cross-Site HTTP Requests가 가능합니다. 그러나 보안상의 이유로 브라우저에서는 Same Origin Policy를 적용 받기 때문에 요청이 불가합니다. 즉, 프로토콜, 호스트명, 포트가 같아야만 요청이 가능합니다. 최근 프로젝트를 진행하면서 Back End 서버를 구성하고 REST API를 구성하여 Front End 개발자분께 제공하였습니다. 처음 프로젝트를 구성할때 WebMvcConfigurer를 임플리먼트하여 클래스를 생성하고 @Configurati.. 공감수 0 댓글수 0 2023. 2. 12.
[메타코딩] 스프링부트 강좌 51강(블로그 프로젝트) - XSS와 CSRF 1. XSS란 : 크로스 사이트 스크립팅이라하며, 웹 애플리케이션에서 많이 나타나는 취약점의 하나로 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점이다. 2. SCRF란 : 크로스 사이트 요청 위조는 웹사이트 취약점 공격의 하나로, 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)를 특정 웹사이트에 요청하게 하는 공격을 말한다. 공감수 0 댓글수 0 2022. 12. 26.
[캡티브 포털] 기본 브라우저 전환 이슈 1. Captive portal이란? Captive portal(캡티브 포털)이란 Wi-Fi 또는 유선 네트워크에 새로 연결된 사용자에게 네트워크 리소스에 대한 광범위한 액세 권한이 부여되기 전에 표시되는 웹브라우저로 액세스하는 웹 페이지입니다. https://en.wikipedia.org/wiki/Captive_portal Captive portal - Wikipedia From Wikipedia, the free encyclopedia Jump to navigation Jump to search Web page displayed to new users of a network An example of a captive web portal used to log onto a restricted networ.. 공감수 0 댓글수 6 2022. 12. 22.
Ref는 어떤 상황에서 사용해야 할까? 보통 HTML에서 id를 이용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있습니다. 이를 바롤 ref(reference의 줄임말) 개념입니다. 리액트 컴포넌트 안에서는 id를 사용하면 안될까? -> 리액트 컴포넌트 안에서도 id를 사용할 수는 있습니다. 그러나 권장하지 않습니다. 이유는 리액트 컴포넌트의 경우 여러 번 사용한다고 하면, 유일해야 하는 id의 특성에 위반하기 때문입니다. 다른 라이브러리나 프레임워크와 함께 id를 사용해야 할 경우에는 id 뒷부분에 추가 텍스트를 붙여 중복을 방지해야 합니다. 그렇다면, ref는 어떤 상황에서 사용해야 할까? -> DOM을 꼭 직접적으로 건드려야 할 때 입니다. 공감수 0 댓글수 1 2022. 11. 7.
[메타코딩] 스프링부트 강좌 45강(블로그 프로젝트) - 스프링 JPA의 OSIV 전략 OSIV(Open Session In View) OSIV는 영속성 컨텍스트를 뷰까지 열어둔다는 뜻이다. 위의 경우 LAZY전략으로 조회시 롯데팀에 대한 정보가 조회되지 않는다. 이유는 서비스에서 영속성 컨텍스트가 종료되었기 때문이다. 이와 같은 경우를 해결하기 위해 영속성 컨텍스트 종료를 컨트롤러에서 종료하게 하여, 컨트롤러에서도 롯데팀에 대해서 조회 할 수 있게 한다. 단, 이때 프록시를 통해 정보를 조회 할 수는 있으나, I, U, D와 같은 기능은 할 수 없다.(트랜잭션이 종료되었기 때문에) 정리해서 다시 그리면 아래와 같습니다. 강의 주소 : https://youtu.be/fSXh4hWJtKo 공감수 4 댓글수 0 2022. 9. 28.
[메타코딩] 스프링부트 강좌 44강(블로그 프로젝트) - 스프링의 전통적인 트랜잭션 강의 주소 : https://youtu.be/y4a0X7dS2q8 공감수 0 댓글수 0 2022. 9. 28.
Webpack과 Babel을 위용한 React 개발 환경 구성하기 최근 프로젝트 중에 Webpack과 Babel에 대해 이야기를 많이 들었습니다. 필자는 프론트엔드에 대해서 비기너이고, 보통 프로젝트를 구성할때 CRA를 통해서 구성하는데, 이때는 웹팩을 건드는 일이 거의 없는 것 같습니다. 이번에는 CRA가 아닌 Webpack과 Babel을 통하여 React를 개발 환경을 구성해보겠습니다. 참고 자료 : https://berkbach.com/%EC%9B%B9%ED%8C%A9-webpack-%EA%B3%BC-%EB%B0%94%EB%B2%A8-babel-%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-react-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0-fb87d.. 공감수 0 댓글수 0 2022. 9. 17.
npm init -y 란? Webpack을 통한 React 예제를 진행 중 npm init -y이란 명령어에서 옵션인 -y에 대해 궁금해졌습니다. package.json을 만들기 위해 npm init이라는 명령어 사용시 기본 양식을 일일히 설정해줘야 하는데 옵션 -y를 추가하면, 이러한 설정값들을 default값으로 설정하여 package.json을 만들겠다는 의미입니다. -y의 의미는 'yes'라는 의미입니다. 공감수 0 댓글수 0 2022. 9. 17.
Google Map 만들기 2 1부에 이어, 2부에서는 Map Component를 그리고, 지도가 표출되도록 하겠습니다. 이에 앞서 1부에서 CRA를 통해 설치 된 리액트 버전이 v18인데 v17로 다운그레이드 하겠습니다. * 참고 자료 https://homubee.tistory.com/36 [React] 리액트 버전 낮추기(변경/다운그레이드) + 오류 해결 오늘은 리액트 버전 낮추는 방법에 관해 알아보겠습니다. 진행하며 발생할 수 있는 오류까지 자세히 살펴볼 예정입니다. 종속성 문제 때문에 최신 버전이 아닌 리액트를 사용해야 하는 경우가 homubee.tistory.com 1부에서 설치되지 않았던 @mui/styles를 설치하겠습니다. D:\workspace_vscode\react_google_map> npm install @mui.. 공감수 0 댓글수 0 2022. 9. 15.
Google Map 만들기 1 1. create-react-app을 통해 기본적은 react 프로젝트를 생성합니다. D:\workspace_vscode> npx create-react-app react_google_map 2. 생성 된 프로젝트가 정상적으로 실행되는지 확인합니다. D:\workspace_vscode> npm run start 3. 불필요한 코드를 정리합니다. // index.js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); // App.js import .. 공감수 0 댓글수 1 2022. 9. 7.
[메타코딩] 스프링부트 강좌 43강(블로그 프로젝트) - REPEACTABLE READ 2. MySQL InnoDB 스토리지 엔진 Repeatable read 이상 방식을 사용 -> 부정합 발생하지 않습니다. 리핏테이블 리드 방식에서는 트랜젝션이 종료되지 않은 순간까지는 동일한 조회 결과가 나옵니다. 보통 스프링에서 CRUD에서 CUD에서만 트랜잭셔널 어노테이션을 붙이게 되는데, R에서도 트랜잭셔널 어노테이션을 붙이는게 좋습니다. 강의 주소 : https://youtu.be/n1lvzeffDMk 공감수 0 댓글수 1 2022. 9. 4.
[메타코딩] 스프링부트 강좌 42강(블로그 프로젝트) - READ COMMIT의 정합성 문제 - 일어날 수 있는 문제의 경우 위와같이 정산 서비스에 대해서 조회시 만원의 결과를 보여주다가 어느순간 커밋이후 2만원으로 결과가 보여진다면, 데이터의 정합성이 깨지는 것입니다. 이러한 현상을 PHANTOM READ(팬텀 리드)라 합니다. 이러한 팬텀 리드 현상을 해결하기 위해서는REPEATABLE READ 방식을 써야 합니다. 강의 주소 : https://youtu.be/4iDNmluK6DE 공감수 0 댓글수 1 2022. 9. 4.
[메타코딩] 스프링부트 강좌 41강(블로그 프로젝트) - DB격리수준 READ COMMIT - 트랜잭션 : 일이 처리되기 위한 가장 작은 단위 - DB 격리 수준 1. 오라클 READ COMMIT 오라클의 경우는 변경하려고하는 데이터가 커밋이 되기 전까지는 undo영역의 데이터를 읽어옵니다. 좌측의 A트랜잭션이 업데이트 후 커밋 직전에 B트랜잭션에서 empno=11을 조회하게 되면, 장보고가 아닌 임꺽정이 조회됩니다. 강의 주소 : https://youtu.be/FbeU3ZHgOhs 공감수 0 댓글수 1 2022. 9. 4.
[메타코딩] 스프링부트 강좌 40강(블로그 프로젝트) - ResponseDto 수정 - ResponseDto.java의 status의 형태를 HttpStatus -> int로 변경합니다. package com.cos.blog.dto; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; @Data @NoArgsConstructor @AllArgsConstructor @Builder public class ResponseDto { int status; T data; } - UserApiController.java package com.cos.blog.controller.api; import org.springframework.beans.factor.. 공감수 0 댓글수 2 2022. 9. 4.
[메타코딩] 스프링부트 강좌 39강(블로그 프로젝트) - 회원가입 하기 두번째 완료 @Service : 스프링이 컴포넌트 스캔을 통해서 Bean에 등록을 해주는 어노테이션입니다.(IoC) - UserService.java 파일을 생성합니다. package com.cos.blog.service; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.cos.blog.model.User; import com.cos.blog.repository.UserRepository; // 스프링이 컴포넌트 스캔을 통해서 Bean에 등록을 해줌. IoC @Service public class UserService { @Autowired priva.. 공감수 0 댓글수 1 2022. 8. 10.
[메타코딩] 스프링부트 강좌 38강(블로그 프로젝트) - 회원가입 하기 Ajax요청 user.js를 생성하여 아래와 같이 작성합니다. let index = { init: function() { $('#btn-save').on('click', () => { // function(){}, ()=>{} this를 바인딩하기 위해서!! this.save(); }); } , save: function() { //alert('user의 save함수 호출됨'); let data = { user: $('#username').val(), password: $('#password').val(), email: $('#email').val() }; //console.log(data); // ajax호출시 default가 비동기 호출 // ajax 통신을 이용해서 3개의 데이터를 json으로 변경하여 inse.. 공감수 0 댓글수 0 2022. 8. 9.
[메타코딩] 스프링부트 강좌 37강(블로그 프로젝트) - Ajax를 사용하는 이유 두번째 2. 비동기 통신을 하기 위해서이다. 강의 주소 : https://youtu.be/2PMMQHok3U4 공감수 0 댓글수 1 2022. 8. 9.
[메타코딩] 스프링부트 강좌 36강(블로그 프로젝트) - Ajax를 사용하는 이유 첫번째 1. 요청에 대한 응답을 html이 아닌 Data(json)를 받기 위하여 강의 주소 : https://youtu.be/2PMMQHok3U4 공감수 0 댓글수 1 2022. 8. 9.
[메타코딩] 스프링부트 강좌 35강(블로그 프로젝트) - 회원가입을 위한 기초세팅 - joinForm.jsp 파일을 아래와 같이 수정합니다. Username Password Email 회원가입완료 필자는 form태그의 action, method를 이용한 form submit이 아닌 ajax를 이용하여 데이터 통신을 위해 위와 같이 설정하였습니다. - user.js static 하위에 js 폴더를 만들고 user.js 파일을 생성합니다. let index = { init: function() { $('#btn-save').on('click', () => { this.save(); }); } , save: function() { let data = { user: $('#username').val(), password: $('#password').val(), email: $('#email'.. 공감수 0 댓글수 1 2022. 8. 8.
[메타코딩] 스프링부트 강좌 34강(블로그 프로젝트) - 로그인, 회원가입 화면 만들기 Header, Footer와 같이 공통되는 영역에 대해서는 중복되는 코드를 줄이게 위해 아래와 같이 layout으로 설정합니다. 1. 기존에 작성되었던 index.jsp에서 스크립트 태그를 body 가장 하단에 위치시켜줍니다. 2. header.jsp로 아래의 내용을 복사해줍니다. Ukss 로그인 회원가입 3. footer.jsp로 아래의 내용을 복사해줍니다. Created by Ukss 📞 010-1234-1234 🏴 서울시 강남구 테헤란로 4. index.jsp로 다시 돌아와 header.jsp, footer.jsp 파일들을 include 해줍니다. 제목 적는 부분 내용 적는 부분 상세보기 이제, 로그인화면과 회원가입 화면을 만들어줍니다. 이를 위해 UserController를 아래와 같이 작성합니다.. 공감수 0 댓글수 1 2022. 8. 8.
[메타코딩] 스프링부트 강좌 33강(블로그 프로젝트) - 메인화면 만들기 1. blog package 하위에 controller package를 생성 후 아래의 클래스를 생성합니다. - UserController.java - BoardController.java 2. src/main/webapp/WEB-INF/views/ 하위에 아래의 jsp를 생성합니다. - index.jsp Ukss 로그인 회원가입 제목 적는 부분 내용 적는 부분 상세보기 Created by Ukss 📞 010-1234-1234 🏴 서울시 강남구 테헤란로 기본적인 HTML 구조를 완성합니다. 강의 주소 : https://youtu.be/f2IXBWi_8sA 공감수 0 댓글수 1 2022. 8. 5.
[메타코딩] 스프링부트 강좌 32강(블로그 프로젝트) - 스프링 기본파싱전략과 json통신 1. Get요청(select) http://localhost:8000/blog/user?username=ssar 특징 : body로 데이터를 담아 보내지 않습니다. 2. Post, Put, Delete 요청(데이터를 변경) - 데이터를 담아 보내야 할 것이 많음. - username, password, email, address, gender, createDate - form 태그 method='Post' - form 태그 -> get요청, post요청 (key=value) - 자바스크립트로 요청을 해야함. 통일 : 자바스크립트로 ajax요청 + 데이터는 json으로 통일!! - 사용O form:form 태그 -> post요청, put요청, delete요청, get요청 가능 - 사용X 3. 오브젝트로 데.. 공감수 0 댓글수 1 2022. 8. 5.
[메타코딩] 스프링부트 강좌 31강(블로그 프로젝트) - Exception처리하기 @ControllerAdvice @RestController public class GlobalExceptionHandler { @ExceptionHandler(value=Exception.class) public String handleArgumentException(IllegalArgumentException e) { return ""+e.getMessage()+""; } } @ControllerAdvice : 모든 Exception에 대해 수렴되게 하는 어노테이션입니다. @ExceptionHandler(value=Exception.class) : Exception의 종류를 선언하여, 해당 Exception에 대해서 받을 수 있습니다. 강의 주소 : https://youtu.be/qYxWWWVpJkA 공감수 0 댓글수 1 2022. 8. 5.
[메타코딩] 스프링부트 강좌 30강(블로그 프로젝트) - 삭제하기 테스트 @DeleteMapping("/dummy/user/{id}") public String delete(@PathVariable int id) { try { userRepository.deleteById(id); } catch (EmptyResultDataAccessException e) { return "삭제에 실패하였습니다. 해당 id는 DB에 없습니다."; } return "삭제되었습니다. id : " + id; } deleteById는 void 반환타입이여서 try catch를 이용하여 예외처리를 잡아줍니다. 강의 주소 : https://youtu.be/vOXgQYX7nok 공감수 0 댓글수 1 2022. 7. 28.
[메타코딩] 스프링부트 강좌 29강(블로그 프로젝트) - 영속성 컨텍스트와 더티체킹 더티체킹 - 영속화 되었다 : Request에 의해 Controller에서 User객체를 Save 할때 JPA내의 영속성 컨텍스트내의 1차캐시에 해당 객체가 생성되는것을 말합니다. - flush : 영속화 된 객체를 DB에 밀어넣는 행위를 말합니다.(버퍼를 비운다라고 말합니다.) 간단한 예로 어떤 창고에 있는 물건들을 더 큰 창고로 옮기는 행위라고 말 할 수 있습니다. 특징으로 flush긴 flush지만 이때 1차캐시에 있는 객체를 지우지는 않습니다. - 더티체킹의 동작원리 메소드 상단에 Transactional 어노테이션을 선언한 이후, 2번 id를 가진 객체를 update를 하고 싶어 호출하였다고 가정합니다. 그러면, DB에서 2번 id를 가진 데이터를 JPA 영속성 컨텍스트에 객체를 영속화를 시키며.. 공감수 0 댓글수 1 2022. 7. 28.
[메타코딩] 스프링부트 강좌 28강(블로그 프로젝트) - update 테스트 updateUser 메소드를 아래와 같이 생성합니다. // save 함수는 id를 전달하지 않으면 insert를 해주고 // save 함수는 id를 전달하면 해당 id에 대한 데이터가 있으면 update를 해주고 // save 함수는 id를 전달하면 해당 id에 대한 데이터가 없으면 insert를 해요. // email, password @PutMapping("/dummy/user/{id}") public User updateUser(@PathVariable int id, @RequestBody User requestUser) { // json데이터를 요청 => Java Object(MessageConvertor의 Jackson라이브러리가 변환해서 받아줘요.) System.out.println("id :.. 공감수 0 댓글수 1 2022. 7. 28.
[메타코딩] 스프링부트 강좌 27강(블로그 프로젝트) - 전체 select 및 paging 테스트 모든 유저를 조회합니다. @GetMapping("/dummy/users") public List list() { return userRepository.findAll(); } 페이징을 이용한 조회입니다. // 한 페이지당 2건의 데이터를 리턴받아 볼 예정 @GetMapping("/dummy/user/page") //public Page pageList(@PageableDefault(size=2, sort = "id", direction = Sort.Direction.DESC) Pageable pageable) { public List pageList(@PageableDefault(size=2, sort = "id", direction = Sort.Direction.DESC) Pageable pageabl.. 공감수 0 댓글수 1 2022. 7. 28.
[메타코딩] 스프링부트 강좌 26강(블로그 프로젝트) - id로 select 테스트 DummyControllerTest 내에 id 조회용 메서드를 생성합니다. // http://localhost:8000/blog/dummy/user/5 // {id} 주소로 파라메터를 전달 받을 수 있음. @GetMapping("/dummy/user/{id}") public User detail(@PathVariable int id) { // user/4을 찾으면 내가 데이터베이스에서 못찾아오게 되면 user가 null이 될 것 아냐? // 그럼 return null이 리턴이 되자나... 그럼 프로그램에 문제가 있지 않겠니? // Optional로 너의 User객체를 감싸서 가져올테니 null인지 아닌지 판단해서 return해!!! User user = userRepository.findById(id)... 공감수 0 댓글수 1 2022. 7. 28.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.