인기글
-
[HTTP] Content-Type
Spring boot로 파일 다운로드를 구현 하던 중 Content-Type을 보게 되었다. Content-Type? Content-Type?? Content-Type???????????? 컨텐트 타입???????????? HTTP Header에 Conent-Type을 이래저래 지정하고 File을 Byte으로 읽어서 응답하면 브라우저에서 다운 받을 수 있는 것 같은데...... Content-Type에 대한 개념이 없으니 코드를 봐도 이해할 수 없다. 그래서 먼저 Content-Type을 공부하고 기능 구현을 하기로 했다. 개념 Content-Type이란, HTTP 통신에서 전송되는 데이터의 타입을 나타내는 header정보 중 하나 이다. Content-Type에 따라 데이터를 받는 측에서는 데이터를 어..
2021.08.16
-
[HTML / CSS]input[type="text"]에 아이콘 넣기
최종 결과 HTML 부모안에 input을 자식요소로 넣어준다. CSS #insert_list #drop_the_text input{ background: #343a40; background-image: url(list.png); background-position: 5px center; padding-left: 40px; border: 1px solid #2e3238; width: 100%; height: 30px; box-sizing: border-box; outline: none; border-radius: 3px; } 👉 background-image: url(list.png); 배경 이미지로 아이콘 이미지를 넣는다. 👉 background-repeat: no-repeat 이미지가 작아서 반복이 된..
2019.08.09
-
템플릿 조각(th:fragment, th:insert, th:replace)
개념 template의 사전적 의미는 견본, 형판이다. 의미를 HTML에 적용하면 특정 영역을 견본처럼 때어낸 독립적인 형태를 말하며, 이런 형태는 견본처럼 여기저기서 사용할 수 있게 한다. 너무 거창하게 설명하는 것 같다....... 아래 그림을 보자. Page1과 Page2에서 공통으로 사용하는 Header영역을 템플릿 조각이다. 이렇게 템플릿 조각을 사용하면 중복되는 코드를 막을 수 있고 Header에 수정사항이 발생해도 공통으로 사용하기 때문에 Page1과 Page2도 동일하게 수정사항이 반영된다. 이제 예제를 보면서 사용방법을 알아보자! 예제 디렉토리 구조 Controller @Controller @RequestMapping("/main") public class MainController { ..
2021.12.29
-
[VSCode] 디렉토리(폴더) 구조 보기 방식(전체 나열) 변경
VSCode 디렉토리 구조 보기 방식 변경 VSCode 탐색기 영역에 작업 하고있는 디렉토리 구조를 볼 수 있다. 해당 디렉토리 구조를 보고 재빠르게 현재 작업하고 있는 디렉토리 위치를 알 수 있고 다른 디렉토리 위치도 파악 할 수있다. 하지만 아래와 같이 디렉토리 계층(java/com/example/demo)이 많을 경우 VSCode에서는 한줄로 표시 된다. 생각보다 한눈에 디렉토리 구조를 파악하기 힘들다. 설정을 변경해서 디렉토리 나열 방식을 변경 해보자. VSCode 설정에 가서(단축키: Ctrl + ,) Compact Folders를 검색하자. 기본 default로 Compact Folders가 체크 된 상태다. 해당 체크를 해제하면 아래와 같이 디렉토리구조가 나열되어 표시 된다. 추가로 Ctrl..
2021.09.07
-
[프로그래밍] SessionStorage
여러 블로그를 보면 LocalStorage와 SessionStorage를 함께 비교하며 이해하기 쉽게 작성된 글이 많다. 처음에는 나도 다른 블로그와 다르지 않게 LocalStorage와 SessionStorage를 비교하면서 덤으로 Cookies까지 곁들이려고 했으나..... 문해력이 턱없이 부족해서.... 쉽지가 않았다.... LocalStorage, SessionStorage, cookies 각각 따로 정리하고 3개 모두 비교하는 정리글을 추가로 작성할 것 이다. 다소 중복되는 내용이 많겠지만 글쓰기 능력이 딸리니깐.... 뭐 어쩔수 없다는 예전부터 LocalStorage와 SessionStorage를 자주 사용했지만 단순 저장소로 생각하고 서로 구분없이 그때그때 마음에 끌리는 저장소를 선택해서 사..
2021.08.27
-
[Vue] Dom접근 하기 - $ref, $refs
개념 Vue를 사용하면 직접 Dom요소에 접근할 경우가 거의 없다. 하지만 가끔 Dom을 직접 접근하여 컨트롤 해야 될 경우가 생길 수 있다. (아마 특정 영역에 focus를 주기 위해 많이 사용하지 싶다.) 이때 사용하는 속성이 $ref 이다. (자바스크립트의 querySelector와 같은 역할) $ref 기본기 👉 ref="target" 접근하고 싶은 태그에 ref속성명을 할당 한다. ref는 id처럼 중복이 불가능 하다. 👉 console.log('target', this.$refs.target) $refs로 해당 태그에 접근 할 수 있다. 콘솔에는 가 출력 된다. 👉 mounted(){ ... } $refs는 component가 렌더링 된 후에 접근이 가능하다. 만약, beforeCreate또는..
2021.08.09
-
[Spring Boot] 파일 다운로드 - 서버에서 다운
시작하기 파일 다운받기 구현 방법은 대표적으로 2가지가 있는 것 같다. 하나는 Front에서 Blob로 변환 시켜 a태그의 download속성을 사용해 구현하는 방법. 하나는 Back에서 byte로 파일을 읽어 응답하면 Front에서 바로 다운받게 하는 방법. 처음에 말한 Front에서 Blob로 변환시켜 다운받는 방법은 IE, Edge, Firefox, Chrome, Safari등 일부 버전에서 지원하지 않는다. 브라우저 지원에 영향을 받지 않는다면 download속성을 사용해 Front에서 작업을 해도 상관 없지만 브라우저 신경을 쓰고 싶지 않다면 Back에서 기능을 구현하는게 좋을 것 같다. Front 파일 다운로드 👉 파일 다운로드 예제를 간단하게 하기 위해 하드코딩으로 파일 다운로드 주소를 hr..
2021.08.16
-
[Vue] 동적라우팅 route변화 감지
동적 라우팅의 문제점 동일한 레이아웃에 데이터만 달라질 경우 동일한 component를 재사용하는 것이 효율적이다. 한 개의 component에 params로 구분해 데이터 값만 변경하면 된다. 그런데 한번 렌더링 된 component는 route가 변경되더라도 라이프사이클 훅을 한번 더 호출하지 않아 문제가 발생한다. 예를 들어 라우터 1로 렌더링 된 component는 다음 라우터 2가 랜더링 될 때 라이프사이클 훅이 호출되지 않아 component는 params가 바뀐지 몰라 created 등이 실행되지 않는다. 문제 해결 router-link 코드 라우터1 라우터2 👉 라우터1 라우터 1, 라우터 2는 home component를 같이 사용한다. component를 같이 사용을 하지만 사용자가 라..
2020.11.01
-
[Vue] class 동적 바인딩
Class 동적 바인딩 Vue로 Front 개발을 하다 보면 동적으로 Class를 추가 또는 삭제를 해야 될 때가 있다. JQuery는 잘모르지만 JQuery에서 addClass(), removeClass()와 비슷한 개념 이다. 딱히 어렵지 않아 예제를 보면 쉽게 이해할 수 있다. 문법 :class="{ '클래스이름' : '조건' }" 조건이 true경우 클래스이름이 바인딩 되고 false경우 바인딩된 클래스이름이 제거 된다. 기초 사용법 Class Bind 바인딩 👉 isBind값이 true경우 red클래스가 바인딩 되어 스타일이 적용되고 false경우 red클래스가 바인딩에서 해제되어 적용된 스타일이 사라진다. red는 아래 style에 정의 되어 있다. 👉 버튼을 클릭하면 setBind()가 실행..
2020.11.04
-
[HTTP] Cookie 기본 개념
Cookie 쿠키(영어: cookie)란 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 일컫는다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다. 쿠키는 소프트웨어가 아니다. 쿠키는 컴퓨터 내에서 프로그램처럼 실행될 수 없으며 바이러스를 옮길 수도, 악성코드를 설치할 수도 없다. 하지만 스파이웨어를 통해 유저의 브라우징 행동을 추적하는데에 사용될 수 있고, 누군가의 쿠키를 훔쳐서 해당 사용자의 웹 계정 접근권한을 획득할 수도 있다. - 위키백과 - 쿠키에 대한 개념은 위키백과의 설명글을 참고하면 이해..
2021.09.02
-
[Vue] 조건부 렌더링(v-if, v-show)
조건부 렌더링(Conditional Rendering) 개념 조건부 렌더링이란, 조건에 따라 화면에 렌더링 하는 것을 말한다. 조건이 참(true)일 경우 화면에 렌더링되고 거짓(false)일 경우 렌더링 되지 않는다. Vue에서는 v-if, v-show가 조건부 렌더링 역할을 한다. v-if The directive v-if is used to conditionally render a block. The block will only be rendered if the directive’s expression returns a truthy value. - vue 공식문서 - vue 공식문서에 따르면, "v-if는 조건에 따라 블록을 렌더링하기 위해 사용되며, true값을 반환할 때만 렌더링 된다." 소개 ..
2021.08.04
-
[Spring Boot] Rest API 에 Spring Security Form 로그인 적용하기
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..
2021.12.27
-
[Vue] input에 숫자만 입력 가능하게 하기
예제 👉 👉 bindNumber(event) { ... } @input로 사용자가 input에 값을 입력 할때 마다 number에 할당한다. event에서 사용자가 입력한 값을 가져올 수 있다. v-model을 사용할 경우 number에 바로 바인딩이 가능하다. 하지만 현재 input이벤트로 bindNumber method를 한번 거친 후 number에 바인딩 한다. 그 이유는 아래에서 확인 가능하다. 👉 number(val){ ... } bindNumber method가 실행 되면, number에 값이 할당 되고, watch에서 number을 감지 해서 내부 로직이 실행 된다. 👉 const reg = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]/ 한글, 영어를 감지하는 정규표현식 이다. 정규표현식에 따라 감지하..
2021.08.02
-
[Mysql] Trigger
개념 Trigger란 Trigger가 설정된 테이블에 특정 이벤트가 발생한 경우 미리 설정된 작업이 자동으로 실행되는 것을 말한다. 아래 그림을 보면, Table에 INSERT, UPDATE, DELETE와 같은 이벤트가 발생할 경우 Trigger가 실행된다. Trigger에는 이벤트가 발생되면 동작되는 SQL명령문과 어떤 이벤트에 Trigger가 실행될지를 정의한다. Trigger 속성 및 이벤트 실행 시점 속성 이벤트 발생 시점 기준으로 Trigger 실행 순서를 설정하는 속성이다. 종류는 2가지가 있으며 아래와 같다. AFTER 이벤트 발생 후 Trigger 실행 BEFORE 이벤트 발생 전 Trigger 실행 이벤트 이벤트는 Trigger실행 기준이 된다. 아래의 이벤트가 한개라도 발생된다면 Tr..
2022.03.06
-
[Vue] Naver 간편 로그인 (naverLogin_implicit-1.0.3.js) 구현
"SNS 간편 로그인을 언젠가 한번 만들어 봐야지" 생각은 있었다. 생각은 있었지만 계획은 없었는지 계속 미루고 있다가 만들어야만 하는 경우가 생겨, 자의가 아닌 타의에 의해 만들게 되었다. 그러다 보니 프로세스가 약간 이상할 수 있다. 그래도 SNS 간편 로그인에 대해 많은 공부를 하게 되었다. (Google, Kakao 간편 로그인도 했는데 대부분 프로세스는 같고 용어만 살짝 다르다.) Vue를 이용해 구현한 예제가 많다. 대부분 SDK를 사용한 예제들 이다. 하지만 Naver 개발 문서에 튜토리얼은 naverLogin_implicit-1.0.3.js를 사용한 예제로 짜여있어 참고하여 만들었다. SDK랑 크게 다르지 않는 것 같다. 예제 시퀀스 다이어그램 사용자가 Naver 계정으로 로그인 시 Nav..
2021.07.31
-
[Vue] 이벤트 전달 - Props
개념 Vue component와 component의 데이터 전달을 하기 위한 방법 중 하나 이다. Props의 주요 성격은 아래와 같다. component와 component는 부모와 자식 관계가 성립 되어야 한다. 단반향 데이터 흐름을 가진다.(one-way-down binding) component와 component는 부모와 자식 관계가 성립 되어야 한다. // parent component 👉 현재 parent component에 Child component를 불러와 주입 시켰다. 이렇게 parent compoent와 Child component를 부모와 자식 관계로 만들었다. 이제 Props를 사용 할 수 있게 된다. Props는 부모(parent compoent)에서 자식(Child compo..
2021.08.08
-
[Spring Boot] Jackson 기본 개념과 LocalDateTime변환 이슈
개념 Jackson을 공부하기 앞서 기본적인 용어를 알아보자. 직렬화 객체를 문자열로 변환하는 과정 역직렬화 반대로 문자열에서 객체를 변환하는 과정 Jackson은 위에서 언급한 직렬화, 역직렬화를 도와주는 자바 라이브러리다. Jackson이 객체를 문자열로 변환해서 응답해주면 응답받은 곳은 문자열의 형태가 Json포맷을 하고 있어 해당 문자열을 받은 쪽은 Json으로 파싱이 가능한 것이다. 예제에 앞서 spring boot로 프로젝트를 생성하자. 다행스럽게 spring boot의 경우 Jackson라이브러리를 기본으로 제공한다. 즉 dependency를 따로 주입할 필요가 없다. (spring boot버전 따라 다를 수 it다!) 예제 Object to Json 기초 예제 자바 객체에서 Json포맷 형..
2022.03.21
-
[VSCode] 자동완성 단축키 추가
시작하기 아마 javascript 개발 중 사용 빈도가 높은 코드가 console.log()다. console.log()를 사용하는 이유는 여러가지가 있지만 그 중에서 간단한 디버깅을 위해 제일 많이 사용하는 것 같다. 그런데 매번 console.log()를 처음부터 적기란 앵간 귀찮은 일이 아니다. 그래서 찾아봤다. 몇글자만 입력하면 console.log()가 자동으로 생성되는 방법을! 간단한 설정으로 코드 작성시 효율성이 높아진다😆 자동완성 단축키 추가 및 사용법 👉 파일> 기본설정> 사용자 코드 조각 👉 자동완성을 적용시킬 언어 선택 언어마다 자동완성을 설정 할 수 있다. 👉 "console.log print" : { ... } prefix는 자동단축키 약어를 설정 body는 위 자동단축키 약어를 ..
2021.07.18
-
[Webflux] RSocket Basic
Introduction 어렴풋 기억을 되살려 보면 RSocket과 첫 만남은 Stack Overflow에서 시작되었다. Java로(정확하게 말하면 Spring Boot)로 채팅 서버를 구축하기 위한 기술 스택을 찾던 중 우아한 형제들 기술 블로그를 보게 되었다. 역시나 우아한 형제들은 내가 지금까지 듣도 보도 못한 기술들을 나열했다. 그중 Spring Webflux가 핵심 키워드로 판단하고 구글링을 오지게 했다. (진짜 정말 오지게 했다.😶🤤😐) 오지게 한 결과 Spring Webflux로 Websocket을 사용한 채팅 서버를 구축한 몇몇의 예제를 봤고 따라 해 봤지만 Webflux의 프로그래밍 방식이 익숙지 않아 삽질의 연속이었다. 지속적인 삽질로 배추를 세는 단위인 “포기”를 선언하려다 Stack ..
2022.04.03
-
[디자인 패턴] Singleton Pattern
시작하기 이번 프로젝트를 시작하면서 서버에서 서버(server to server)로 데이터를 주고받아 처리하는 작업이 필요했다. 특별히 인증서버를 두지않고 요청할 서버에 토큰을 받아 인증받는 정책이었다. 해당 서버에서 토큰을 받기 위해 계정 정보, 도메인 정보와 같은 필수 정보들을 db에서 한 번만 조회 후 변수에 담아 재사용하고 싶었다. 처음에는 단순하게 static에 담아 재사용 생각을 했는데 문득 싱글톤 패턴이 생각나서 지금 같은 경우에 적용하기 좋은지 생각하게 되었다. 예전에 가볍게 스쳐 지나가듯 공부를 해서 이번에 제대로 알아보려 한다. 개념 싱글톤은 이름 그대로 객체(인스턴스)를 한 개만 생성하는 패턴이다. 즉, 유일무이 하게 단 하나의 객체 생성해서 모두가 공용으로 사용한다. 굳이…!? 왜 ..
2022.03.27