언제쯔음

보호되어 있는 글입니다.

이전 글: 웹 최적화 캐시 Etag, Cache-Control 웹 최적화 캐시 Etag, Cache-Control캐시 전략은 클라이언트와 서버에 각각 적용할 수 있다. 중요한 점은 서버에 I/O Call를 발생시키지 않아야 좋은 것이다. 서버에서 Redis나 Ehcache 활용하거나, 아니면 DB 수준에서 캐싱을 사용하든koolreview.tistory.comhttps://www.npmjs.com/package/sharp sharpHigh performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, GIF, AVIF and TIFF images. Latest version: 0.33.5, last published:..

회사에서 Node 기반으로 개발을 할 수 없는 경우, 기본적인 HTML, CSS, JS를 이용할 수 밖에 없고, Spring Boot를 이용 시 타임리프를 이용해서 개발을 할 수도 있습니다.해당 기술로도 왠만한 사이트는 구현 가능하고, 모바일 사이트의 경우 경량화를 위해서 일부러 바닐라 JS를 이용하기도 합니다. 하지만 간혹  여러 페이지를 하나의 싱글 페이지오 만들어야하는 기획서를 마주한다면 기존 방식으로 구현하는 것이 조금 어려울 수도 있습니다.하나의 Html에서 여러 페이지를 만들어야 하기 때문에 UI 렌더링 로직이 복잡해지고, 데이터 조작 관련 로직이 서로 엮여 읽기도 어렵습니다. 또한 두 렌더링 로직과 데이터 관련 로직 구분도 어려워 집니다.그런 어쩔 수 없는 상황에서 상태란 개념만 가져와 데이..

Youtube 임베딩을 이용해서 내 사이트에 영상을 공유하는 일이 있을 수가 있는데, 유튜브 티가 난다면 싫을 수도 있을 수 있..다!?그런 경우 어떤 방법으로 해결할 수 있을까?먼저 CSS를 이용해서 !import를 같은 또는 JS를 이용해서 임베딩된 Youtube UI를 손을 쓸 수가! 없다.이유는 Cross Origin 문제로 그렇다.Youtube Iframe API를 이용하며 된다.이미지가 대충 안 맞는데 얼추 맞다. 그래도 가능..! START

해당 기능을 구현 시 동작: 뒤로가기 시 실제 URL은 변경되지 않고, 렌더링을 통해 뒤로가는 모습처럼 보이도록 가능하다.적용 가능한 상황: 순수 JS를 이용해서 SPA를 만드는 경우이용 기능: window.history알아두면 좋은 내용History.length 읽기 전용현재 페이지를 포함해, 세션 기록의 길이를 나타내는 정수를 반환합니다=> 실제로 경험해보니, 브라우저 처음에 들어가는 경우, length가 3이다.=> 하나씩 증가하는데, 뒤로 간다고 해당 length가 줄어들지는 않는다.=> 결국 초기값만 의미가 있을 뿐, 그 이후 의미가 없는 값으로 생각해야 한다.해당 값이 읽기 전용인 이유는 브라우저에서 보안상 history 정보를 공유할 수 없기 때문이다.사용하는 기술 CookBook1. his..

중첩 함수는 나쁜 아이가 아니에요 대게 함수를 중첩 해서 사용은 가능은 하지만 잘 하지 않는다. 그런 이유는 코드가 복잡해지고, 코드가 난해하다는 느낌이 들기도 하기 때문이다. 하지만 중첩 함수가 괜찮은 친구처럼 보이는 경우는 언제일 수 있을까? 내가 생각했을 때엔 응집도를 고려했을 때가 아닐까 싶다. 보통 코드에 대한 응집도를 높이기 위해 관련 있는 코드끼리 모아두려고 한다. 그래서 클래스를 사용한다고 본다. 그런데 클래스에 들어가는 함수에서, 함수를 호출하는 경우 코드가 복잡해지는 경향이 있다. 왜 그런가 싶으면 코드가 떨어져 있어 연결되어 있음을 볼 수가 없다. 그래서 코드를 파악하기 힘들다. 중첩 함수가 괜찮은 녀석인지 보기 위해 코드를 하나 봐보자. function order(menu) { co..

Java의 Iterator와 비슷한 느낌을 갖는 function이다. 표기법으로는 function 또는 function 으로 자신이 쓰고 싶은 방법대로 작성하면 된다. 왜 Iterator와 비슷한가? 보통 Iterator는 Collection에 들어가며, 내가 넣은 요소를 탐색하는 요소로 사용된다. function에도 동일하게 내가 요소(구간)을 만들어 다음 로직의 요소(구간)을 실행할 수 있도록 function을 실행 구간을 블록킹할 수 있게 된다. function* goStop() { console.log("go"); yield "Stop"; console.log("go2"); yield "Stop2"; } function* generateName() { yield 'W'; yield 'O'; yie..

getDate 은 설정한 날짜를 가져온다. getDay 는 로컬날짜를 가져온다. 그렇기에 getDay()로 가져오면 값이 다르게 나올 수 있으므로 getDate()를 사용할 때가 있다.