Tip (7) 썸네일형 리스트형 ts + webpack에서 datepicker 사용하기 1. jquery-ui-dist 설치 datepicker는 jquery-ui에서 제공하고 있으며, 다운받으면 사용할 수 있다. 그런데 나같은 경우 jquery-ui로 webpack 설정을 하는데 실패해서 jquery-ui-dist를 사용했다. npm i jquery-ui-dist 2. @types/jqueryui 설치 typescript와 jquery-ui의 호환을 위해서 @type/sjqueryui를 설치한다. (datepicker만 사용하려면 @types/jquery.ui.datetimepicker를 설치해도 된다.) npm i @types/jqueryui 3. alias 설정 lib 설치가 끝났으면 webpack.config.js에서 alias 설정을 해준다. (alias 설정은 꼭 안 해도 되지만.. h2 db tcp 접속 에러 h2 DB에 tcp로 최초 접속 시 다음과 같이 에러가 난다. 이런 경우 tcp 방식이 아닌 file 방식으로 먼저 접속해야 한다. 이를 위해서 JDBC URL의 tcp://localhost/를 file:로 바꿔주면 된다. 즉, jdbc:h2:file:~/Desktop/private/h2/example로 설정해준다. 또한 file:은 생략하고 jdbc:h2:~/Desktop/private/h2/example로 써도 file 방식으로 접속된다. 최초에 이렇게 접속 후 다시 tcp방식으로 접속해주면 정상동작하는 것을 확인할 수 있다. 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.. date type input에 placeholder 만들기 date type inptu에 placeholder를 넣고싶다는 생각이 들었다. 그런데 찾아보니까 내가 원하는대로 동작하는 코드는 딱히 없었다. 그래서 직접 작성했다. .date_empty:before에서 calc를 사용할 때 %를 사용해서인지 너비가 계속 변하여서 input의 width를 200px로 고정시켜주니 괜찮아졌다. 또한 42px을 빼주는 이유는 맨 끝에 있는 아이콘의 공간을 남겨주기 위한 것이다. 이건.... 그냥 직접 해보면 42px을 빼주는 게 딱 알맞다는 것을 깨닫게 된다. 동작은 다음 링크에서 확인해볼 수 있다! https://jsfiddle.net/rinkokomong/p5o4u1vj/3/ 더 좋은 방법이 있으면, 공유해주세요!!! VSCode REST Client REST Client는 Vs extension으로 api 호출을 브라우저가 아닌 vs 상에서 가능해주도록 한다 먼저 REST CLIENT extension을 다운받아주자! 사용법 http를 확장자로 가지는 파일에 다음과 같은 형식으로 텍스트를 입력해준다. ### method url Protoco 위와 같이 파일 작성 시 ### 아래에 send request 버튼이 생긴다. 이 send request를 클릭하면 요청이 보내지고, 결과를 확인할 수 있다. Rest Client를 통해 api를 테스트하고 결과를 확인하여 편리하게 코딩할 수 있다~ git에 access token과 함께 push하기 push하다보면 remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. 와 같은 에러를 만날 수 있다. 그냥 간단히 설명하자면 '패스워드 인증은 지원 안 하니까 access token을 사용하세요'라는 뜻이다. 그래서 우리는 access token을 만들어줘야 된다.. 별로 어렵진 않다. 알아보자!! 1. github 사이트에서 우측 상단 프로필을 클릭하면 메뉴가 나오는데 여기서 Settings를 선택해준다.(아래쪽에 있어요!) 2. 왼쪽의 메뉴바에서 `Developer Settings`를 클릭해준다. (아래쪽에 있어요!) 3. 왼쪽의 메뉴바에서 .. Ajax 게시판과 뒤로 가기 ajax는 성능이 안 좋아서 쓰지 않지만, 프로젝트를 유지보수하다보면 고대 유물들이 많다. 내가 맡은 프로젝트는 그 중 하나였다... Ajax로 구현된 게시판이 있었는데, 뒤로 가기 시 페이지 유지와 검색 결과를 유지해달라는 요청사항이 있었다. 검색 결과 유지 일단 첫 번째 관문은 검색 결과 유지였다. 처음에는 ready function 안에 페이지를 로드하는 코드를 작성했다. 그런데 그렇게 했더니 input 안에 값이 있음에도 불구하고 ready 안에서 찍으면 없다고 나왔다. 이게 왜 문제인지 알려면 내가 맡은 프로젝트의 코드 구조를 알아야 한다. 간단하게 쓰겠다. ready() changePage(페이지로드함수) ajax로 데이터 요청(검색 구분자로 select의 선택 값과 키워드로 input 안의 .. 이전 1 다음
