솔미는 성장중

https://www.timegambit.com/blog/solve/svg-usage-fix-bug [Next JS / React] SVG 사용법(svgr이 최선일까요?)React, Next JS에서 svgr을 이용하여 svg를 렌더링 하는 방법과 블로그를 개발하면서 겪은 svg 관련 버그 및 해결방법을 소개합니다.www.timegambit.com svg 이미지를 갖고와서 써야하는 걸 조금 더 효율적으로 할 수는 없을까?에 대한 고민에 대한 글입니다. :) svg란?Scalable Vector Graphic벡터 기반 이미지 (= 크기를 조정해도 품질이 저하되지 않는다.)반응형 웹사이트를 만드는 데에 적합하다보통 아이콘, 로고 등에 많이 사용하는 포맷이다. svg 이미지를 사용하는 다양한 방법들이 존재합니..

WHY? (문제점 / Layout 공통 컴포넌트 리팩토링을 결심한 계기) 믹스패널 트래킹 이벤트를 달기 위해 모달/바텀시트 컴포넌트를 정리하던 중 여러 방법으로 관리되고 있는 것을 발견열고 닫는 방식 (useState vs useRecoilState)띄우는 위치 (페이지 내 vs 전역(_app))FullPageModal & BottomSheet ➝ 상위에서 하나로 묶어주는 공통 컴포넌트 부재Portal 사용 여부사용하지 않는 모달/바텀시트가 관리되지 않고 있음현재 Modal을 사용하는 코드를 JSX에 넣어놓고 함수를 이용하여 open, close를 관리하고 있음.➝ JSX의 가독성도 떨어지고 Modal이 언제 open이 되는지 신경 써서 코드를 읽어야 함. ➝ state 관리도 신경 써야함.➝ 언제 Mo..

UI를 요청하고 제공하는 3단계 1. 렌더링 촉발 - 렌더링이 일어나는 이유 : 1. 컴포넌트의 첫 렌더링일 때 : 2. 컴포넌트의 state가 업데이트된 경우 2. 컴포넌트 렌더링 - React에서 컴포넌트를 호출한다 : 1. 컴포넌트의 첫 렌더링일 때 ▶ 루트 컴포넌트 호출 : 2. 컴포넌트의 state가 업데이트된 경우 ▶ state 업데이트에 의해 렌더링이 발동된 함수 컴포넌트 호출 ▶ 함수가 새로운 JSX스냅샷 반환 ▶ 반환된 스냅샷과 일치하도록 화면을 업데이트 - 중첩된 컴포넌트가 더 이상 없고 React가 화면에 표시되어야 하는 내용을 정확히 알 때까지 재귀적으로 과정 반복 - 렌더링 시 주의사항 : 동일한 입력에는 동일한 출력이! : 이전 state를 변경하면 안된다! 3. DOM에 커밋 ..

문제 상황 오히려 컴포넌트를 나눴더니 성능이 떨어진다? 이것은 렌더링이 최적화되어있지 않기 때문이다. props가 변화하는 곳만 렌더링 해주면 되는데 전부 다 렌더링하고 있는 경우 이런 현상이 발생한다. 해결법 React.memo 컴포넌트를 React.memo()로 둘러싸면 컴포넌트를 메모이징한다. props가 바뀌지 않은 컴포넌트는 새롭게 렌더링되지 않고 메모이징 된 내용을 재사용한다. 언제 사용하면 좋을까? - 새로 업데이트를 잘 시키지 않아도 되는 컴포넌트 예시 const List = React.memo(({ posts, testFunction }) => { console.log("List Component"); return ( {posts.map((post) => ( ))} ); }); useCa..

📌 프레임워크 vs 라이브러리 프레임워크 : 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것 (Vue.js와 Angular는 프레임워크.) 라이브러리 : 어떠한 특정 기능을 모듈화 해놓은 것 프레임워크 ⊃ 라이브러리 여러개 📌 React : 사용자 인터페이스(UI)를 만들기 위한 JS 라이브러리 (라우팅(페이지 이동), 상태 관리, 테스트 등은 다른 라이브러리를 사용해서 react에서 가능하게 하는 것이다!) 장점 1. 상대적으로 배우기 쉬운 라이브러리 2. 여러 기능들을 위해 만들어져 있는 라이브러리 환경 3. 많은 기업들의 사용으로 검증됨 📌 React 컴포넌트 리액트로 이루어진 앱을 이루는 최소 단위. 여러 컴포넌트가 모여 웹 앱이 만들어진다. ex) 검색 컴포넌트, 포스트 컴포넌트,..