# image
parcel 기초 세팅
오늘은 웹 어플리케이션 번들러 3대장webpack, rollup, parcel중 하나인 parcel의 세팅 방법에 대해 알아보겠습니다. 물론 알아볼 것도 없이 parcel 홈페이지가 워낙 번역이 잘되어 있긴 합니다 ㅎㅎ;; 그래도 세팅이 어려운 분들을 위해 작성해봅니다. 시작하기 먼저 parcel을 실행하려면 parcel을 설치해야겠죠? Yarn:...
깔끔하고 예쁜 lightbox 플러그인, chocolat.js
학부시절 졸업프로젝트로 웹사이트를 만들게 되었다.당시의 나는 굉장히 우유부단한 학생이어서, 아이디어를 정말 많이 변경했다. 게다가 디자인 학과 플젝이므로 디자인이 예뻐야만 했다. 고민 끝에 여러가지 오픈소스 라이브러리를 찾아다녔는데, 그 중 너무 맘에 쏙 들었지만 쓰지 못했던 jquery plugin을 소개하고자 한다. 우선 내가 소개하려고 하는 lig...
image 높이 값 불러올 때 주의점[JS]
만약 프론트엔드 개발자라면 이미지를 불러와 높이 값에 따라 레이아웃을 변경할 때가 있을 것이다. 예를 들어 이런 코드가 있다고 가정해보자 결론만 말하자면 위의 코드는 작동하지 않는다. 왜 그럴까? 그 이유는 test.png가 로딩되기 전 clientHeight를 구했기 때문이다. 위 코드가 작동되게 하려면 이렇게 해야한다. 결론 이미지는 로드되고...
[Docker] 스프링 부트 사이트 가이드의 Dockerfile과 이미지 빌드 명령어 이해하기
스프링 부트의 공식 사이트 가이드에서 스프링 부트와 Docker 를 연동하기 위해 다음과 같은 Dockerfile 포맷을 올려놓았습니다. https://spring.io/guides/gs/spring-boot-docker/ 위의 Dockerfile을 스프링 부트의 기본 디렉토리에 저장한 후 Maven 의 경우 명령어를 입력하고, Gradle의 경우 ...
blog - AWS S3에 이미지 업로드하기
blog 프로젝트에서는 사용자가 게시글에 첨부할 사진을 저장해 놓을 공간이 따로 필요했다. 이를 위한 클라우드 스토리지 서비스를 찾아본 결과 AWS S3와 cloudinary 등의 서비스를 알게 되었다. 사용하기에는 cloudinary가 더 가볍고 편해보였지만 이 프로젝트를 결과적으로 AWS EC2에 deploy할 예정이었기 때문에 인프라 서비스 간 호환성...
반응형 이미지 제대로 사용해보자!
서론 이미지가 많이 들어가는 페이지를 제작하기에 앞서 페이지에 2.3M짜리 이미지가 들어간 것을 보고 이대론 안되겠다 싶어 효과적인 UX를 위해 https://images.guide/를 읽고서 반응형 사이트에서 이미지 최적화를 제대로 하기위해 공유하기 위해 작성합니다. 반응형 이미지를 사용시 고려해야할 사항 이미지 크기(size)와 관련한 성능/속도 및...
🚫 안티 패턴으로서의 CSS background-image 속성
CSS background-image 속성은 여러가지 놀라운 일들을 할 수 있었지만, 대부분의 경우에는 더 이상 사용하지 않는 것이 좋습니다.