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

프론트엔드 지식에 대한 인사이트를 해보고 기록해보는 학습을 시작해보기로 했다. 죽은 내 블로그를 살려보고자...!! 🤡 그럼 지금부터 스탓뚜! (시작이 반이니까 반 했다 ㅎㅎ) 리액트의 Best Practices 살펴보기 1. 파일 유형별로 디렉토리를 구성하지 말고 기능별로 그룹화 하라. 위 이미지처럼 구성 요소의 js 파일이나 css 파일을 더 간단하게 찾을 수 있다고 한다. 이 것에 대해선 전적으로 동의한다. css를 잔뜩 묶어 놓은 프로젝트를 만난 적이 있는데 찾는게 꽤나 힘들었다! 2. 컴포넌트를 작은 단위로 쪼개어 유지, 이해, 테스트가 쉽게 만들자. 예를 들어 UserProfile 컴포넌트가 작업 중에 커진다고 생각했을 때 ProfilePicture.tsx, UserName.tsx 과 같은 식..

❗️ 이미지의 크기를 줄이고 용량을 낮추면 이미지를 좀 더 빠르게 로드할 수 있을텐데… ➡️ 큰 사이즈의 이미지를 더 낮은 용량의 이미지로 변환해보자! 🧐 JPG, PNG보다 WEBP, AVIF?! ❓WEBP WEBP는 구글에서 개발한 이미지 포맷이다. WebP를 사용하면 JPG는 기존 대비 25~34%, PNG는 비손실의 경우 평균 26%(손실 방식의 경우 60~70%) 정도 기존 파일 대비 작아진다고 한다. ❓AVIF WEBP와 마찬가지로 GIF, JPG, PNG등의 전통적인 이미지 포맷을 대체하기 위해 출시되었고 뛰어난 압축 효율을 보이고 있다. WEBP보다 무려 9년이나 뒤에 나온 포맷이기 때문에 성능은 더 좋지만 범용성 측면에서는 문제가 있을 수 있다. 🧐 이미지를 변환해보자! ➡️ Squoos..

🧐 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..