WEB
-
2023-04-17 1. 방법 JUnit은 독립된 환경에서의 테스트를 지원하기 때문에 테스트의 순서가 보장되지 않는다. 때문에 동일한 객체 참조가 있을 경우에는 테스트 케이스들의 순서를 보장해주어야 하는 경우가 있는데, 아래의 예제를 보자. import org.junit.FixMethodOrder; import org.junit.Test; public class TestCase1 { static int number1 = 0; @Test public void a1_test(){ number1 += 1; System.out.println("test1 =================================" + number1); } @Test public void a2_test(){ number1 += ..
[Spring] JUnit4 에서 테스트 순서 지정하는 방법2023-04-17 1. 방법 JUnit은 독립된 환경에서의 테스트를 지원하기 때문에 테스트의 순서가 보장되지 않는다. 때문에 동일한 객체 참조가 있을 경우에는 테스트 케이스들의 순서를 보장해주어야 하는 경우가 있는데, 아래의 예제를 보자. import org.junit.FixMethodOrder; import org.junit.Test; public class TestCase1 { static int number1 = 0; @Test public void a1_test(){ number1 += 1; System.out.println("test1 =================================" + number1); } @Test public void a2_test(){ number1 += ..
2023.04.17 -
2023-04-13 1. useEffect 리액트를 기존에 사용해봤으면 해당 함수가 어떠한 기능을 수행하는지 알 수 있을 것이다. 해당 함수를 첫번째 매개 값으로는 수행할 함수를 받으며, 두번째 매개 값으로는 배열을 받는데 해당 배열에 있는 값이 변경될 경우에 첫번째의 있는 함수가 실행되게 된다. 여기서 useEffect의 비교 대상은 getServersideprops 이기 때문에 첫번째 매개 변수는 fetch 형태로 백엔드 서버에서 데이터를 가져오는 함수라고 가정해보자. import React, { useState, useEffect } from 'react'; function MyComponent() { const [data, setData] = useState(null); useEffect(() =..
[Next.js] useEffect 와 getServersideprops 의 차이점2023-04-13 1. useEffect 리액트를 기존에 사용해봤으면 해당 함수가 어떠한 기능을 수행하는지 알 수 있을 것이다. 해당 함수를 첫번째 매개 값으로는 수행할 함수를 받으며, 두번째 매개 값으로는 배열을 받는데 해당 배열에 있는 값이 변경될 경우에 첫번째의 있는 함수가 실행되게 된다. 여기서 useEffect의 비교 대상은 getServersideprops 이기 때문에 첫번째 매개 변수는 fetch 형태로 백엔드 서버에서 데이터를 가져오는 함수라고 가정해보자. import React, { useState, useEffect } from 'react'; function MyComponent() { const [data, setData] = useState(null); useEffect(() =..
2023.04.13 -
2023-04-05 1. 방법 기존에는 아래의 코드를 사용했었다. useEffect(() => { if (performance.navigation.type === 1) { console.log('Page was refreshed'); // Do something when page is refreshed } }, []); 하지만 현재 performance.navigation.type 는 deprecated 되어 다른 방안을 찾아야 했는데 아래와 같은 글을 발견했다. https://stackoverflow.com/questions/58652880/what-is-the-replacement-for-performance-navigation-type-in-angu lar What is the replacement..
[Next.js] 페이지 새로고침 여부 확인 방법 (F5)2023-04-05 1. 방법 기존에는 아래의 코드를 사용했었다. useEffect(() => { if (performance.navigation.type === 1) { console.log('Page was refreshed'); // Do something when page is refreshed } }, []); 하지만 현재 performance.navigation.type 는 deprecated 되어 다른 방안을 찾아야 했는데 아래와 같은 글을 발견했다. https://stackoverflow.com/questions/58652880/what-is-the-replacement-for-performance-navigation-type-in-angu lar What is the replacement..
2023.04.04 -
2023-03-22 1. 정의 공식문서에 따르면 TypeScript에서 Object는 하나로 정의 되는 타입이 아니라고 한다. 아래의 코드를 살펴보자. interface Pointlike { x: number; y: number; } interface Named { name: string; } function logPoint(point: Pointlike) { console.log("x = " + point.x + ", y = " + point.y); } function logName(x: Named) { console.log("Hello, " + x.name); } const obj = { x: 0, y: 0, name: "Origin", }; logPoint(obj); logName(obj); Poi..
[TypeScript] 타입스크립트 오브젝트 타입의 특징2023-03-22 1. 정의 공식문서에 따르면 TypeScript에서 Object는 하나로 정의 되는 타입이 아니라고 한다. 아래의 코드를 살펴보자. interface Pointlike { x: number; y: number; } interface Named { name: string; } function logPoint(point: Pointlike) { console.log("x = " + point.x + ", y = " + point.y); } function logName(x: Named) { console.log("Hello, " + x.name); } const obj = { x: 0, y: 0, name: "Origin", }; logPoint(obj); logName(obj); Poi..
2023.03.22 -
2023-03-15 1. 방법 사용 방법은 아래와 같다. interface는 대부분 type 키워드와 동일한 역할을 하지만, Object 객체 타입을 명시할 때 사용하는 경우가 많다. interface Person { firstName: string; lastName: string; } function greeter(person: Person) { return "Hello, " + person.firstName + " " + person.lastName; } 객체 지향적인 언어를 사용해 봤다면 interface를 class가 받아 구현체로 사용할 수도 있다. 여기서 키워드 implements 를 사용하는데 type 역시 해당 키워드 사용이 가능하다. class Player implements Person..
[TypeScript] 타입스크립트 인터페이스 사용방법 및 Type과 차이점2023-03-15 1. 방법 사용 방법은 아래와 같다. interface는 대부분 type 키워드와 동일한 역할을 하지만, Object 객체 타입을 명시할 때 사용하는 경우가 많다. interface Person { firstName: string; lastName: string; } function greeter(person: Person) { return "Hello, " + person.firstName + " " + person.lastName; } 객체 지향적인 언어를 사용해 봤다면 interface를 class가 받아 구현체로 사용할 수도 있다. 여기서 키워드 implements 를 사용하는데 type 역시 해당 키워드 사용이 가능하다. class Player implements Person..
2023.03.15 -
2023-01-24 1. 정의 SecurityContextHolder는 기본적으로 security context에 접근하는 것을 도와주는 클래스라고 볼 수 있다. 또한 해당 클래스를 호출하여 실행할 때마다 동일 스레드에서 가져온다. 추가적으로 Spring Security 가 자체적으로 메모리를 관리하기 때문에 메모리 누수를 걱정하지 않아도 된다고 한다. 이제 SecurityContextHolder 가 어떻게 사용자 정보를 가져오는지 보자. 2. 방법 아래의 코드는 현재 로그인한 유저 정보를 가져오는 구체적인 코드이다. 해당코드에서 SecurityContextHolder 는 security context의 정보를 가져와 security context 가 가지고 있는 사용자의 정보를 조회하여 변수에 할당하는..
[Spring Security] SecurityContextHolder와 사용자 정보2023-01-24 1. 정의 SecurityContextHolder는 기본적으로 security context에 접근하는 것을 도와주는 클래스라고 볼 수 있다. 또한 해당 클래스를 호출하여 실행할 때마다 동일 스레드에서 가져온다. 추가적으로 Spring Security 가 자체적으로 메모리를 관리하기 때문에 메모리 누수를 걱정하지 않아도 된다고 한다. 이제 SecurityContextHolder 가 어떻게 사용자 정보를 가져오는지 보자. 2. 방법 아래의 코드는 현재 로그인한 유저 정보를 가져오는 구체적인 코드이다. 해당코드에서 SecurityContextHolder 는 security context의 정보를 가져와 security context 가 가지고 있는 사용자의 정보를 조회하여 변수에 할당하는..
2023.01.24 -
2023-01-22 1.방법 우선 script 태그 안에 아래의 내용을 삽입한다. th:inline="javascript" 다음은 변수를 사용하고자 하는 함수를 아래와 같이 cdata 형식으로 묶어준다. /* /*]]>*/ 마지막으로 request 객체에 담은 변수를 [[${ }]] 형식으로 담아 사용하면 된다. var regex =[[${regexAllPermit}]]; 아래는 전체 예제 코드이다. 메인 이미지 출처 : 사진: Unsplash의Tianhao Wang
[Thymeleaf] 타임리프 변수 자바스크립트에서 사용하는법2023-01-22 1.방법 우선 script 태그 안에 아래의 내용을 삽입한다. th:inline="javascript" 다음은 변수를 사용하고자 하는 함수를 아래와 같이 cdata 형식으로 묶어준다. /* /*]]>*/ 마지막으로 request 객체에 담은 변수를 [[${ }]] 형식으로 담아 사용하면 된다. var regex =[[${regexAllPermit}]]; 아래는 전체 예제 코드이다. 메인 이미지 출처 : 사진: Unsplash의Tianhao Wang
2023.01.22 -
2023-01-02 1. 방법 아래와 같이 | 구분자를 쌍 따옴표 안의 시작점과 끝점에 두면 여러 파라미터를 받아 th:text 안에 넣을 수 있다. //dto 형식의 파라미터의 경우 //단순 파라미터의 경우 메인 이미지 출처 : Photo by Sam Goodgame on Unsplash
[Thymeleaf] th:text 안에 문자 합치기 / 파라미터 여러개 넣기2023-01-02 1. 방법 아래와 같이 | 구분자를 쌍 따옴표 안의 시작점과 끝점에 두면 여러 파라미터를 받아 th:text 안에 넣을 수 있다. //dto 형식의 파라미터의 경우 //단순 파라미터의 경우 메인 이미지 출처 : Photo by Sam Goodgame on Unsplash
2023.01.02 -
2022-12-20 1. 방법 th:each 와 th:text를 사용하면된다. th:each 에서 list 형 객체를 가져오고 이 객체를 alias 설정 후에 th:text 에 담아서 데이터를 출력해주면 된다. 메인 이미지 출처 : Photo by Jane Duursma on Unsplash
[Thymeleaf] 타임리프 반복문 사용하는 방법2022-12-20 1. 방법 th:each 와 th:text를 사용하면된다. th:each 에서 list 형 객체를 가져오고 이 객체를 alias 설정 후에 th:text 에 담아서 데이터를 출력해주면 된다. 메인 이미지 출처 : Photo by Jane Duursma on Unsplash
2022.12.20 -
2022-12-18 1. 방법 유저의 권한의 경우 Authentication 객체를 사용해 현재 로그인한 유저의 권한 정보를 가져오고 자신이 구현한 서비스에 접근 권한이 있는지 없는지를 확인할 수 있는 flag 변수를 선언함으로써, 접근 제어를 설정할 수 있게끔 소스코드를 구현했다. 이후 접근 권한이 있을 경우 유저의 계정 정보를 확인할 수 있도록 UserDetails 객체를 사용하여 유저의 계정명을 가져온다. import import org.springframework.security.core.Authentication; import org.springframework.security.core.GrantedAuthority; import org.springframework.security.core.co..
[Spring Security] 로그인 유저 이름과 / 권한 확인하는 방법2022-12-18 1. 방법 유저의 권한의 경우 Authentication 객체를 사용해 현재 로그인한 유저의 권한 정보를 가져오고 자신이 구현한 서비스에 접근 권한이 있는지 없는지를 확인할 수 있는 flag 변수를 선언함으로써, 접근 제어를 설정할 수 있게끔 소스코드를 구현했다. 이후 접근 권한이 있을 경우 유저의 계정 정보를 확인할 수 있도록 UserDetails 객체를 사용하여 유저의 계정명을 가져온다. import import org.springframework.security.core.Authentication; import org.springframework.security.core.GrantedAuthority; import org.springframework.security.core.co..
2022.12.18 -
2022-12-13 1. fragment insert와 replace를 사용하기 전에 이 두 키워드를 통해 불러올 fragment를 먼저 설정해 주어야 한다. head.html 위의 html 파일에서 중요한 부분은 이 부분이다. 해당 영역이 thymeleaf의 fragment가 되어 다른 thymeleaf 파일에서 import 할수 있는 태그가 된다. nav.html Test 네비게이션 역할을 할 태그 도 하나의 fragment로 지정해 주었다. 2. insert / replace fragment로 지정한 thymeleaf의 fragment는 두 가지 방법으로 import 할 수 있다. 첫 번째는 insert 다 insert는 th:insert="html/nav.html :: navFragment"라고 ..
[Thymeleaf] 타임리프 fragment / insert / replace 사용법2022-12-13 1. fragment insert와 replace를 사용하기 전에 이 두 키워드를 통해 불러올 fragment를 먼저 설정해 주어야 한다. head.html 위의 html 파일에서 중요한 부분은 이 부분이다. 해당 영역이 thymeleaf의 fragment가 되어 다른 thymeleaf 파일에서 import 할수 있는 태그가 된다. nav.html Test 네비게이션 역할을 할 태그 도 하나의 fragment로 지정해 주었다. 2. insert / replace fragment로 지정한 thymeleaf의 fragment는 두 가지 방법으로 import 할 수 있다. 첫 번째는 insert 다 insert는 th:insert="html/nav.html :: navFragment"라고 ..
2022.12.13 -
2022-11-25 0. 사용 라이브러리 https://clipboardjs.com/ clipboard.js A modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzipped clipboardjs.com 우리가 사용할 라이브러리는 clipboard.js 이며 이를 cdn 으로 불러와서 클립보든 복사 기능을 구현할 예정이다. 1. 스크립트 코드 스크립트 코드이며, class 선택자에 따라 동작하게 만들었다. 2. html 코드 test 입니다. copy 여기서 data-clipboard-action 부분은 복사할지 자를지에 대한 선택이며, 자르기 옵션은 cut 을 적어주면 된다. data-clipboard-target..
[JavaScript] 자바 스크립트 클립보드 복사 구현하기2022-11-25 0. 사용 라이브러리 https://clipboardjs.com/ clipboard.js A modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzipped clipboardjs.com 우리가 사용할 라이브러리는 clipboard.js 이며 이를 cdn 으로 불러와서 클립보든 복사 기능을 구현할 예정이다. 1. 스크립트 코드 스크립트 코드이며, class 선택자에 따라 동작하게 만들었다. 2. html 코드 test 입니다. copy 여기서 data-clipboard-action 부분은 복사할지 자를지에 대한 선택이며, 자르기 옵션은 cut 을 적어주면 된다. data-clipboard-target..
2022.11.25 -
2022-11-14 1. 방법 최초 실행하고 싶은 메서드를 우선적으로 만든 후 아래와 같이 코드를 작성한다. import org.springframework.beans.factory.InitializingBean; import org.springframework.stereotype.Component; import lombok.RequiredArgsConstructor; @Component @RequiredArgsConstructor public class ServiceInit implements InitializingBean{ private final ServiceInitTest serviceInitTest; //자신이 사용하고자 하는 클래스를 작성 @Override public void afterPro..
[Spring] 스프링 부트 최초 실행 init 메소드 생성 방법2022-11-14 1. 방법 최초 실행하고 싶은 메서드를 우선적으로 만든 후 아래와 같이 코드를 작성한다. import org.springframework.beans.factory.InitializingBean; import org.springframework.stereotype.Component; import lombok.RequiredArgsConstructor; @Component @RequiredArgsConstructor public class ServiceInit implements InitializingBean{ private final ServiceInitTest serviceInitTest; //자신이 사용하고자 하는 클래스를 작성 @Override public void afterPro..
2022.11.14 -
2022-10-28 1. 방법 test.properties 파일 내용 test=test1;test2;test3 properties 파일의 value에 구분하고 싶은 문자열을 두고 ; 를 구분 기호로 사용하였다. @Configuration 파일 내용 @Configuration @PropertySources({ @PropertySource(name = "app", value = "classpath:config/test.properties", encoding = "UTF-8") }) @Getter public class PropertiesConfig implements EnvironmentAware { @Override public void setEnvironment(Environment env) { } //..
[Spring] Properties 파일 배열 형태로 저장 및 불러오기2022-10-28 1. 방법 test.properties 파일 내용 test=test1;test2;test3 properties 파일의 value에 구분하고 싶은 문자열을 두고 ; 를 구분 기호로 사용하였다. @Configuration 파일 내용 @Configuration @PropertySources({ @PropertySource(name = "app", value = "classpath:config/test.properties", encoding = "UTF-8") }) @Getter public class PropertiesConfig implements EnvironmentAware { @Override public void setEnvironment(Environment env) { } //..
2022.10.28 -
2022-09-07 암호화된 사용자 정보를 파라미터로 넘기는 과정에서 + 기호가 포함되어 있으면, 해당 기호가 공백으로 치환되어 전달되는 경우가 있다 이를 해결하는 방법을 알아보자. 1. 원인 아래의 참고링크에서 확인해보면 + 는 쿼리 스트링에서 하나의 의미를 가지는 문자열이기 때문에 이러한 문제가 나타난다고 한다. 비슷한 문자열로는 &를 예로 들 수 있다. 그래서 +를 적절한 다른 문자열로 치환을 해줘야 한다고 한다. 2. 해결 방법 아래와 같이 + 기호가 들어간 문자열을 encodeURIComponent 메소드로 감싸서 파라미터를 전달해주면 + 기호의 생략 없이 전달이 되게 된다. var param = vartest+12314 var encodedURL = "http://example.com/test..
[JavaScript] 자바스크립트 파라미터 + 기호 제거되는 문제해결2022-09-07 암호화된 사용자 정보를 파라미터로 넘기는 과정에서 + 기호가 포함되어 있으면, 해당 기호가 공백으로 치환되어 전달되는 경우가 있다 이를 해결하는 방법을 알아보자. 1. 원인 아래의 참고링크에서 확인해보면 + 는 쿼리 스트링에서 하나의 의미를 가지는 문자열이기 때문에 이러한 문제가 나타난다고 한다. 비슷한 문자열로는 &를 예로 들 수 있다. 그래서 +를 적절한 다른 문자열로 치환을 해줘야 한다고 한다. 2. 해결 방법 아래와 같이 + 기호가 들어간 문자열을 encodeURIComponent 메소드로 감싸서 파라미터를 전달해주면 + 기호의 생략 없이 전달이 되게 된다. var param = vartest+12314 var encodedURL = "http://example.com/test..
2022.09.07 -
2022-08-09 @Bean과 @Component는 두 개다 스피링 IOC의 객체를 생성하는 기능을 한다. 이 둘의 차이점을 알아보자. 1. @Bean vs @Component 우선 @Bean 은 @Configuration와 세트로 사용된다. @Configuration은 기존의 config (XML에서 작성하던) 형식의 파일들을 java.class 형태로 작성할 수 있도록 도와주는 어노테이션이다. @Configuration 안에는 IOC에 들어간 bean이 필요한데, 이러한 객체를 생성하는 메서드에게 @Bean 어노테이션을 적어준다. 예로는 아래와 같이 DB 접속 정보가 들어간 config 파일에 사용한다. @Configuration public class DatasourceConfig { @Bean ..
[Spring] @Bean 과 @Component 의 차이를 알아보자.2022-08-09 @Bean과 @Component는 두 개다 스피링 IOC의 객체를 생성하는 기능을 한다. 이 둘의 차이점을 알아보자. 1. @Bean vs @Component 우선 @Bean 은 @Configuration와 세트로 사용된다. @Configuration은 기존의 config (XML에서 작성하던) 형식의 파일들을 java.class 형태로 작성할 수 있도록 도와주는 어노테이션이다. @Configuration 안에는 IOC에 들어간 bean이 필요한데, 이러한 객체를 생성하는 메서드에게 @Bean 어노테이션을 적어준다. 예로는 아래와 같이 DB 접속 정보가 들어간 config 파일에 사용한다. @Configuration public class DatasourceConfig { @Bean ..
2022.08.09 -
2022-07-06 1. 방법 팝업창 호출을 a 태그에서 진행 시 발생할 수 있는 이슈사항으로 해결 방법은 아래와 같다. 함수 호출 뒤에 return false; 를 선언해 주면 기존 부모 창에 위치 변함없이 팝업창을 띄울 수 있다. 메인 이미지 출처 : Photo by Jason Hudson on Unsplash
[JavaScript] 자바 스크립트 팝업창 띄울때 기존 부모창 스크롤 상단 이동 해결방법2022-07-06 1. 방법 팝업창 호출을 a 태그에서 진행 시 발생할 수 있는 이슈사항으로 해결 방법은 아래와 같다. 함수 호출 뒤에 return false; 를 선언해 주면 기존 부모 창에 위치 변함없이 팝업창을 띄울 수 있다. 메인 이미지 출처 : Photo by Jason Hudson on Unsplash
2022.07.06 -
2022-06-10 정적이 파일 properties 에는 주로 config(설정 관련 값)들이 들어 있다. 이들을 하나의 class화 시켜 getter로 사용하는 방법을 알아보자. 1. test.properties TEST_KEY=test123 우선 자신의 properties의 파일의 정확한 경로와 가져와야 하는 키/값을 알고 있어야 한다. 2. PropertiesConfig import org.springframework.beans.factory.annotation.Value; import org.springframework.context.EnvironmentAware; import org.springframework.context.annotation.Configuration; import org.sp..
[Spring] .properties 파일 getter로 불러오는[읽는] 방법2022-06-10 정적이 파일 properties 에는 주로 config(설정 관련 값)들이 들어 있다. 이들을 하나의 class화 시켜 getter로 사용하는 방법을 알아보자. 1. test.properties TEST_KEY=test123 우선 자신의 properties의 파일의 정확한 경로와 가져와야 하는 키/값을 알고 있어야 한다. 2. PropertiesConfig import org.springframework.beans.factory.annotation.Value; import org.springframework.context.EnvironmentAware; import org.springframework.context.annotation.Configuration; import org.sp..
2022.06.10 -
2022-06-08 자신이 서비스하는 웹 애플리케이션에서 쓸데없이 로봇들이 크롤링하는 것들을 막을 수 있는 방법이 있다. robots.txt를 사용하는 건데 이를 spring에서는 어떻게 적용하는지 알아보자. - 방법 사실 방법은 매우 간단하다. /** * 봇 크롤링 막기 */ @RequestMapping(value = "/robots.txt") @ResponseBody public void robotsBlock(HttpServletRequest request, HttpServletResponse response) { try { response.getWriter().write("User-agent: *\nDisallow: /\n"); } catch (IOException e) { log.info("exc..
[Spring] 스프링에서 robots.txt 적용하는 방법2022-06-08 자신이 서비스하는 웹 애플리케이션에서 쓸데없이 로봇들이 크롤링하는 것들을 막을 수 있는 방법이 있다. robots.txt를 사용하는 건데 이를 spring에서는 어떻게 적용하는지 알아보자. - 방법 사실 방법은 매우 간단하다. /** * 봇 크롤링 막기 */ @RequestMapping(value = "/robots.txt") @ResponseBody public void robotsBlock(HttpServletRequest request, HttpServletResponse response) { try { response.getWriter().write("User-agent: *\nDisallow: /\n"); } catch (IOException e) { log.info("exc..
2022.06.08 -
2022-05-06 기존에 @RequestBody 어노테이션을 사용하다가, content-type이 text/plain 형식의 json 데이터를 처리해야 하는데, [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'text/plain;charset=UTF-8' not supported] 같은 오류가 발생하였으며, 이를 해결하는 방법을 찾아 공유하고자 한다. 방법은 아래와 같다. - 코드 @RequestMapping(value="/") public void test(HttpServletRequest request){ //body에 있는 제이슨을 받은 객체 String bodyJson = ""; StringBuilder str..
[Spring] HttpServletRequest 로 Body 내용 가져오기[json]2022-05-06 기존에 @RequestBody 어노테이션을 사용하다가, content-type이 text/plain 형식의 json 데이터를 처리해야 하는데, [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'text/plain;charset=UTF-8' not supported] 같은 오류가 발생하였으며, 이를 해결하는 방법을 찾아 공유하고자 한다. 방법은 아래와 같다. - 코드 @RequestMapping(value="/") public void test(HttpServletRequest request){ //body에 있는 제이슨을 받은 객체 String bodyJson = ""; StringBuilder str..
2022.05.06