시작하기 간간이 패턴 공부를 했지만 Observer패턴은 처음 들어봤다.😂 채팅 서버를 한번 구축해 보고 싶다는 생각에 서치하던 중 Spring Webflux, RxJava를 접하게 되었고 Webflux로 채팅서버를 만들어보면 좋겠다는 생각에 공식문서나 기술문서를 이리저리 찾아봤는데 "발행자, 구독자"라는 키워드가 무진장 나오면서 Observer패턴이 등장했다. 걍 무시하고 Webflux지식을 줍줍 할랬는데..... 도통 뭔말인지 이해가 되질 않아 기초인 Observer패턴을 공부하게 되었다. 패턴을 공부한다고 Webflux를 자세히 알지는 못하겠지만 "어느정도 플로우는 알겠지!"라는 느낌적인 느낌으로 공부해 본다. 레고레고! 개념 먼저 위키백과에서 설명하는 옵저버 패턴의 개념을 읽어보자. (습관처럼 위..

개념 Trigger란 Trigger가 설정된 테이블에 특정 이벤트가 발생한 경우 미리 설정된 작업이 자동으로 실행되는 것을 말한다. 아래 그림을 보면, Table에 INSERT, UPDATE, DELETE와 같은 이벤트가 발생할 경우 Trigger가 실행된다. Trigger에는 이벤트가 발생되면 동작되는 SQL명령문과 어떤 이벤트에 Trigger가 실행될지를 정의한다. Trigger 속성 및 이벤트 실행 시점 속성 이벤트 발생 시점 기준으로 Trigger 실행 순서를 설정하는 속성이다. 종류는 2가지가 있으며 아래와 같다. AFTER 이벤트 발생 후 Trigger 실행 BEFORE 이벤트 발생 전 Trigger 실행 이벤트 이벤트는 Trigger실행 기준이 된다. 아래의 이벤트가 한개라도 발생된다면 Tr..

개념 template의 사전적 의미는 견본, 형판이다. 의미를 HTML에 적용하면 특정 영역을 견본처럼 때어낸 독립적인 형태를 말하며, 이런 형태는 견본처럼 여기저기서 사용할 수 있게 한다. 너무 거창하게 설명하는 것 같다....... 아래 그림을 보자. Page1과 Page2에서 공통으로 사용하는 Header영역을 템플릿 조각이다. 이렇게 템플릿 조각을 사용하면 중복되는 코드를 막을 수 있고 Header에 수정사항이 발생해도 공통으로 사용하기 때문에 Page1과 Page2도 동일하게 수정사항이 반영된다. 이제 예제를 보면서 사용방법을 알아보자! 예제 디렉토리 구조 Controller @Controller @RequestMapping("/main") public class MainController { ..

Rest Api개발 시 Spring Security를 Jwt token방식으로 사용해 왔었다. token방식을 사용하게 되면 신경써야할 사항들이 생긴다. 그래서 Rest Api에 Spring Security Form방식으로 사용할 수 있는 방법을 공부 해보자! 환경 셋팅 및 프로젝트 생성 Spring Boot 2.6.2 Java 1.8 Spring Security 5.6.1 Mysql Mybatis 우선, 기본적인 Spring Boot 프로젝트를 생성한다. 이때 Spring Web, Spring Security, Lombok, DevTool, Mysql connector와 같이 기본적인 dependency와 함께 프로젝트를 만든다. org.springframework.boot spring-boot-sta..

티스토리에 기본 폰트를 바꿔보자! 폰트는 대부분 무료인 눈누와 함께 한다. 폰트 변경 순서는 아래와 같다. 눈누에서 원하는 폰트 찾기 CSS에 찾은 폰트 코드 넣기 순서를 보면 알 수 있듯 폰트 변경은 아주 간단하다. 하지만, 현재 티스토리에 적용된 스킨이 어떤거에 따라 달라질수있다. 나는 티스토리에서 기본으로 제공해주는 Book Club스킨을 사용하고 있는데, 글 본문 폰트가 변경되지 않아 한참 애먹었다. 하지만 난 발자~발자~ 개발자 아닙니까! 사사삭~ 이슈를 해결해버렸지 뭐얌! 여튼 개인이 사용하고있는 스킨에 따라 폰트가 변경되지 않는 영역이 생길 수 있습니다! 자! 쓰짤때기 없는 인트로는 그만하고 폰트를 변경 해보자아~ 폰트 찾기 예쁜 폰트를 무료로 사용할 수 있는 사이트가 있다. 그거슨 바로오 ..

VSCode 디렉토리 구조 보기 방식 변경 VSCode 탐색기 영역에 작업 하고있는 디렉토리 구조를 볼 수 있다. 해당 디렉토리 구조를 보고 재빠르게 현재 작업하고 있는 디렉토리 위치를 알 수 있고 다른 디렉토리 위치도 파악 할 수있다. 하지만 아래와 같이 디렉토리 계층(java/com/example/demo)이 많을 경우 VSCode에서는 한줄로 표시 된다. 생각보다 한눈에 디렉토리 구조를 파악하기 힘들다. 설정을 변경해서 디렉토리 나열 방식을 변경 해보자. VSCode 설정에 가서(단축키: Ctrl + ,) Compact Folders를 검색하자. 기본 default로 Compact Folders가 체크 된 상태다. 해당 체크를 해제하면 아래와 같이 디렉토리구조가 나열되어 표시 된다. 추가로 Ctrl..

Cookie 쿠키(영어: cookie)란 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 일컫는다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다. 쿠키는 소프트웨어가 아니다. 쿠키는 컴퓨터 내에서 프로그램처럼 실행될 수 없으며 바이러스를 옮길 수도, 악성코드를 설치할 수도 없다. 하지만 스파이웨어를 통해 유저의 브라우징 행동을 추적하는데에 사용될 수 있고, 누군가의 쿠키를 훔쳐서 해당 사용자의 웹 계정 접근권한을 획득할 수도 있다. - 위키백과 - 쿠키에 대한 개념은 위키백과의 설명글을 참고하면 이해..

모든 에러가 그렇겠지만 이번에 만난 에러도 상당한 답답함을 안겨줬다. 페이지에서 다른 페이지로 이동하여 특정 조건을 체크해서 충족되면 정상 이동하고 불충족되면 다시 이전 페이지로 Redirect하는 기능을 구현하는 중 만났다. 만들고 싶은 기능을 예를 들면 : A페이지에서 B페이지로 router이동을 하는데 query정보가 없거나 잘못된 경우 A페이지로 Redirect하는 것 이다. 해당 기능을 구현하기 위해 라우터가드인 beforeRouteEnter()를 사용하여 B페이지에 접근 시 제일 먼저 query를 체크 한다. query조건이 만족되면 정상적으로 B페이지를 화면에 출력하고 불충족되면 next()를 이용해 A페이지로 Redirect을 한다. 하지만 Redirect를 하게 될경우 오늘 주제인 에러를..

여러 블로그를 보면 LocalStorage와 SessionStorage를 함께 비교하며 이해하기 쉽게 작성된 글이 많다. 처음에는 나도 다른 블로그와 다르지 않게 LocalStorage와 SessionStorage를 비교하면서 덤으로 Cookies까지 곁들이려고 했으나..... 문해력이 턱없이 부족해서.... 쉽지가 않았다.... LocalStorage, SessionStorage, cookies 각각 따로 정리하고 3개 모두 비교하는 정리글을 추가로 작성할 것 이다. 다소 중복되는 내용이 많겠지만 글쓰기 능력이 딸리니깐.... 뭐 어쩔수 없다는 예전부터 LocalStorage와 SessionStorage를 자주 사용했지만 단순 저장소로 생각하고 서로 구분없이 그때그때 마음에 끌리는 저장소를 선택해서 사..

LocalStorage 대부분 데이터 저장을 위해 DB를 사용한다. DB만큼 큰 용량을 가진건 아니지만 데이터를 저장할 수 있는 저장소를 브라우저에서 지원한다. 저장소 종류는 LocalStorage, SessionStorage가 있으며, Cookies도 저장소와 같은 역할을 할 수 있다. LocalStorage, SessionStorage는 HTML5에서 추가된 저장소이며, 데이터 저장 시 key=value의 쌍으로 저장 되고 key를 기반으로 데이터를 조회 한다. 보통 localStorage와 sessionStorage를 많이 비교한다. 그도 그럴것이 동일한 기능(데이터 저장)을 가지고 있지만 확연한 차이점을 가지고 있기 때문이다. 이번 편에서는 로컬스토리지만 파헤처본다. 세션스토리지, 쿠키에 대해서는..