Frontend/웹 개발 꿀팁

서버에서 받은 이미지 파일 file 객체로 변환하기

What to do? 서버에서 이미지를 불러와서 img 태그 안에 넣어서 보여주는 것과 별개로 서버에서 이미지의 blob 데이터를 가져와서 자바스크립트의 file 객체로 변환하고 싶은 경우가 있을 것이다. 아래와 같은 엔티티와 api가 있고 이미지가 하나 등록되어 있다고 가정하자. 엔티티에서 data는 이미지를 blob 형식으로 변환해서 저장한 값이다. import {Column, Entity, ManyToOne, PrimaryGeneratedColumn} from "typeorm"; import {Question} from "./Question"; @Entity() export class Image { @PrimaryGeneratedColumn() id: number; @Column({length: 1..

keyframes

keyframes? 웹에서 애니메이션을 구현할 때 trasition과 animation이라는 스타일 속성을 많이 사용한다. transition은 단순한 엘리먼트의 상태변화에 사용하기 좋고, animation은 다이나믹한 효과를 주는데 쓰기 좋다. Keyframes는 animation에서 사용하는 속성 중 하나이다! animation 속성 animation은 8가지 속성을가지고 있다. css에서 animation의 예시는 아래와 같다. div { animation-name: example; animation-duration: 2s; animation-delay: 1s; animation-iteration-count: infinite; animation-timing-function: ease-out; ani..