`프론트엔드 개발자` 개형이의 벽돌집

개발하다보면 이게 왜 안될까? 이걸 왜 몰랐지? 하는 순간이 있다. Next의 Image 컴포넌트를 사용하려고 하는데 여기에 별칭을 붙이고 싶었다. 근데 as로 단순하게 붙이려고 했더니 위처럼 syntax error가 잡혔다. 단순 export된 모듈은 import { ImageProps as NextImageProps } from 'next/image'로 사용 가능하지만 export default 모듈은 방식이 다르다. 정답은 아래와 같다. import { default as NextImage, ImageProps as NextImageProps } from 'next/image' 위처럼 default as {모듈} 로 사용하면 된다! 짧은 포스팅 끝.

🧐 API 호출 파라미터로 객체를 보내야 하는데… const params = { x: 'x', y: 'y' // 얘는 특정 조건이 만족했을 때만 포함이 되면 좋겠다. } api(params) ⇒ 특정 프로퍼티는 조건을 만족할 때만 추가가 되었으면 좋겠다. 🧐 조건이 안맞는다면 undefined를 보내도록 결심하는데… const params = { x: 'x', y: condition ? 'y' : undefined } api(params) // condition is false -> params: {x: 'x', y: undefined} ⇒ 이렇게 보내면 처리가 될 줄 알았지만 api에서 원하는 데이터를 출력하지 못했다. 🧐 조건이 성립되면 undefined로 보내지 않고 아예 프로퍼티 자체를 안넣는 문..

웹 최적화를 공부하다가 Intersection Observer API에 대해 알게되었다. 자바스크립트에 내장된 기능인데 나름 재밌어서 포스팅을 해두고자 한다. Intersection Observer는 어떤 기능을 제공할까? 간단하게 설명하자면 HTML 내부 Element 중 내가 관찰하고 싶은 Element에 Intersection Observer를 걸어두면, 화면 안에 해당 Element가 보여지는 순간 Observer에 내가 지정해둔 콜백 함수가 실행된다. 공식 문서 를 보면 해당 기능을 언제 사용하면 유용한지 친절하게 설명이 되어있다. 첫 번째 줄의 이미지 지연 로딩 (이미지를 한번에 로드하지 않고 필요할 때 로드하는 최적화 기술) 이 최적화를 공부하면서 알게된 기법인데, 해당 포스팅에서는 Inte..

async, await - 깔끔하게 promise를 사용하게 해주는 것. promise는 비동기적으로 실행하는 것을 지원한다. function fetchData() { const result = fetchData // 백엔드로부터 데이터를 불러오는데 5초의 시간이 걸림 return result } const data = fetchData() console.log(data) 위 코드에서는 비동기로 설정해주지 않았기 때문에 동기로 실행된다. 백엔드로부터 데이터를 가져오는 데 5초의 시간이 걸리기 때문에 그 다음을 실행하기까지 5초의 딜레이가 생기는 것이다. 이를 비동기로 설정해준다면, 백엔드로부터 데이터를 가져오는 동안 다음 코드를 비동기적으로 실행하기 때문에 이후 과정에 딜레이가 생기지 않을 것이다. 1...