본문 바로가기

분류 전체보기

 (115)
css로 글자길이에 따라 글자 생략하기 css를 이용하여 긴 글자를 자르는 법을 알아보자! 먼저 html은 대충 만들어준다. 너무 긴 글자는 잘립니다. 참고해주세요. 그리고 css를 다음과 같이 먹여준다. .cut-letter { text-overflow: ellipsis; /* text-overflow: clip; */ overflow: hidden; white-space: nowrap; width: 100px; } 그러면 width를 넘는 긴 글자가 •••으로 나타난다. text-overflow 속성을 ellipsis가 아닌 clip으로 지정하면 글자가 잘리게 된다. 또한 scroll을 방지하기 위해 overflow 속성을 hidden으로 주고, 개행되지 않도록 white-space 속성을 nowrap으로 설정해야 한다. 코드는 jsfid..
SQL parameter 값 확인하기 JPA를 통해서 DB로 SQL을 전송하면 console에 parameter값이 ?로 찍히는 것을 볼 수 있다. 이 ?로 찍히는 parameter 값을 확인하는 2가지 방법을 알아보자! application.yml 설정 #생략 logging.level: org.hibernate.type: trace 위와 같이 logging.level.org.hibernate.type을 trace로 설정해주면 parameter가 console창에 찍히는 것을 볼 수 있다. console창 Hibernate: insert into member (username, id) values (?, ?) 2022-01-20 08:49:13.310 TRACE 40114 --- [ main] o.h.type.descriptor.sql.Ba..
Checked Exception에서 Transaction rollback시키기 @Transactional은 Checked Exception이 터지면 rollback 시켜주지 않는다. 나는 어떤 Exception이 터지든 rollback시키고 싶었다. 물론 rollbackFor라는 옵션을 사용해서 rollback시킬 수 있지만, 나는 @Transactional(rollbackFor = Throwable.class)를 계속 쓰는 게 싫었다. 그러던 중 stackoverflow에서 관련 글을 확인할 수 있었다. 방법은 굉장히 간단하다. package refill.station.config.annotation; import org.springframework.transaction.annotation.Transactional; import java.lang.annotation.Element..
date type input에 placeholder 만들기 date type inptu에 placeholder를 넣고싶다는 생각이 들었다. 그런데 찾아보니까 내가 원하는대로 동작하는 코드는 딱히 없었다. 그래서 직접 작성했다. .date_empty:before에서 calc를 사용할 때 %를 사용해서인지 너비가 계속 변하여서 input의 width를 200px로 고정시켜주니 괜찮아졌다. 또한 42px을 빼주는 이유는 맨 끝에 있는 아이콘의 공간을 남겨주기 위한 것이다. 이건.... 그냥 직접 해보면 42px을 빼주는 게 딱 알맞다는 것을 깨닫게 된다. 동작은 다음 링크에서 확인해볼 수 있다! https://jsfiddle.net/rinkokomong/p5o4u1vj/3/ 더 좋은 방법이 있으면, 공유해주세요!!!
함수의 prototype https://code-mania.tistory.com/135 Prototype JS는 프로토타입 기반언어라고 불리기도 한다. 이 프로토타입이란 무엇인지 어떤 메카니즘이 있는지 알아보자!! [[Prototype]] 다들 객체를 console에 찍어본 경험이 한 번 정도는 있을 것이다. 이 때 code-mania.tistory.com 전 시간에 살펴본 Prototype은 모든 객체에 적용된다. 하지만 함수에는 조금 더 추가된 Prototype 메카니즘이 적용된다. new Method()와 같이 함수 앞에 new 키워드를 사용하여 객체를 생성할 수 있다. 이 new 키워드에는 약간의 비밀이 숨겨져있다. 비밀을 이해하기 위해 먼저 함수의 prototype이라는 프로퍼티에 대해 알아보자! 우선 prototype..
Prototype JS는 프로토타입 기반언어라고 불리기도 한다. 이 프로토타입이란 무엇인지 어떤 메카니즘이 있는지 알아보자!! [[Prototype]] 다들 객체를 console에 찍어본 경험이 한 번 정도는 있을 것이다. 이 때 객체를 찍어보면 정체불명의 [[Prototype]]이 같이 찍히게 된다. 이는 숨김 프로퍼티로 모든 JS 객체들이 가지고 있으며, 다른 객체를 참조하는 속성이다. (null이 될 수도 있다.) 이 [[Prototype]]이 참조하는 객체를 프로토타입이라고 부른다. 일반적으로 객체들은 기본적으로 최상위 객체인 Object를 프로토타입으로 가지게 된다. 또한 이 Object는 프로토타입으로 null을 가지게 된다. 이 프로토타입은 JS에서 상속의 기능을 한다. 프로토타입의 메카니즘은 다음과 같다. ..
Generic 오늘은 TypeScript에서 Generic을 어떻게 사용하는지에 대해 알아보겠다. Genric은 단일 타입이 아닌 다양한 타입에서 작동하는 function, class, interface를 만들 때 사용된다. 간단히 다음 예시를 살펴보자! function printValGeneric(val: T): T { console.log(val); return val; } const a = printValGeneric('hi'); const a2 = printValGeneric('hi'); 'printValGeneric' 함수는 입력받은 값을 출력 및 반환하는 함수이다. 먼저 문법부터 살펴보면 함수를 선언할 때 'T'라는 타입변수를 로 감싸서 입력받고 있다. 또한 'T' 타입의 인수 'val'을 입력받고 있고, ..
운영 yaml과 개발 yaml을 구분하기 운영을 위한 yml과 개발 yml을 구분하는 방법을 알아보자! 물론 해당 내용은 properties에도 동일하게 적용된다! application.yml spring: # 환경설정(개발: dev, 운영: prod) profiles: active: dev #DB datasource: driver-class-name: com.mysql.cj.jdbc.Driver tomcat: test-on-borrow: true validation-query: SELECT 1 application.yml에는 공통속성을 정의해놓으면 된다. 여기서 주의할 속성은 spring.profiles.active이다. 해당 부분에 dev라고 명시되어있다. 이런 경우 spring이 application.yml을 load하고 applicati..

티스토리툴바