이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://www.youtube.com/watch?v=J-g9ZJha8FE useRef 를 사용하여 디펜던시 문제 해결하기 위와 같은 코드는 리액트 코드를 작성하면서 심심치 않게 볼 수 있습니다. useEffect 안에서 사용하는 함수가 외부 함수라서 이를 useEffect 에 넣어버리고 의존성에 등록해두지 않으면 linter 가 이를 지적할 것입니다. 해당 함수가 업데이트 될 필요가 있다고 합시다. 이때 useEffect 안에서 상태를 바꾸는 로직이 있다면 리렌더링이 수행될 것이고, 해당 외부함수가 useCallback 처리 되어 있지 않으면 매번 아예 새로 생성될 것이기 때문에 무한 렌더링의 수렁에 빠지게 됩니다. 하지만 그렇다고 useCall..

이 글은 아래의 링크의 내용을 바탕으로 작성되었습니다. https://www.youtube.com/watch?v=Z_28syzkv-0 최근엔 초월적인 압축률을 자랑하는 webp 이미지 형식이 등장하면서 웹에서 이 형식의 이미지를 활용하는 경우가 많아졌습니다. 하지만 무작정 webp 이미지를 사용해도 괜찮은 걸까요? 그러고보니 이미지 형식은 png 도 있고, jpg 도 있고 정말 많은 형식들이 있는데 이들의 차이점은 무엇이고 어떤 이미지가 어떤 경우에 적합하다고 볼 수 있는 것일까요? JPG, JPEG 높은 압축률 (손실이 생길 수 있음) 투명 배경 사용 불가 단조로운 컬러 팔레트 이미지 퀼리티가 크게 중요하지 않고 용량을 줄이는데 집중하고 싶을 때 사용합니다. PNG 낮은 압축률 투명 배경을 사용 가능 ..

자바스크립트로만 개발을 해왔다면 갑작스레 타입스크립트를 사용하는 것에 주저함이 있을 것입니다. 특히 리액트와 같은 프레임워크와 각종 라이브러리들을 함께 사용해서 개발을 해왔다면 그 심적 부담은 더하겠죠. 이제 나름 자바스크립트와 프레임워크를 활용한 개발에 자신감이 생겨서 다음 단계의 스킬 셋을 쓰고 싶지만, 정확히 어디서부터 공부를 시작해야 할지가 막막한 사람들도 있을 것입니다. 그래서, 각자의 필요에 따라 준비해보았습니다. 딱히 제가 작성한 글을 소개해드리는게 아니라 유용한 레퍼런스들을 각자의 필요에 맞게 추천해드리고자 합니다. 1. 일단 해봐 : 타입스크립트를 이전에 조금이라도 맛본 적이 있기 때문에, 초 단기 속성으로 리액트 + 타입스크립트를 시도해보고 싶다. 진짜 말 그대로 '일단' 처음부터 끝까..

이 글은 JEST 공식 문서의 내용을 바탕으로 작성되었습니다. (참조: https://jestjs.io/docs/tutorial-react) 또한 아래의 영상의 내용을 참고하였습니다. (참조: https://www.youtube.com/watch?v=g4rMWtPNOr8) 스냅샷 테스트? 단순히 사용자가 무언가를 클릭하면 어떤 요소가 어떻게 보여야 한다는 식의 E2E 테스트만 하는 것 보다는 이전 렌더링 결과물과 신규 렌더링 결과물(HTML)이 조금이라도 차이가 있는지를 파악하는 것이 더 명확하고 안전한 테스트라고 볼 수 있습니다. 그리고 그것을 가능하게 해주는 것이 스냅샷 테스트입니다. 스냅샷 테스트를 하면 기존에 저장되어 있는 이전 렌더링 결과와 테스트 시점에 새로 생성되는 렌더링 결과를 비교해서 조..

이 글은 아래의 영상의 내용을 기반으로 작성되었습니다. www.youtube.com/watch?v=KWrGRZaBdgs 방법에는 총 두가지가 있습니다. 1. Break Point Mixin 생성 이 방법은 사용하는 것이 더 간단하지만 성능은 더 좋지 않습니다. // mixin 생성 @mixin breakpoint($size) { @if $size == mobile { @media screen and (min-width: 360px) { @content; } } @else if $size == tablet { @media screen and (min-width: 768px) { @content; } } @else if $size == laptop { @media screen and (min-width: 1..

이 글은 아래 링크의 내용을 바탕으로 작성되었습니다. https://ui.toast.com/fe-guide/ko_CODING-CONVENTION 코딩컨벤션 코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약이다. 특히 자바스크립트는 다른 언어에 비해 유연한 문법구조(동적 타입, this 바인딩, 네이티브 객체 조작 가 ui.toast.com 저번 코딩 컨벤션 글에 이어서 이번에는 TOAST UI 에서 알려주는 코딩컨벤션을 추가로 정리해보고자 합니다. 전의 내용과 겹치는 부분은 자동으로 뺐습니다. 숫자, 문자 단수형 이름을 사용합니다. 배열 복수형 이름을 사용합니다. 반드시 리터럴로 선언합니다. 배열을 복사할 시에 전개 연산자(...)를 최대한 활용해서 가독성을 높이도록 합니..