솔미는 성장중

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 이미지를 사용하는 다양한 방법들이 존재합니..

1. JSX 페이스북에서 만든 내장형 구문 트랜스파일러를 필수적으로 거쳐야 자바스크립트 런타임이 이해할 수 있는 JS코드로 변환됨 설계 목적 : 다양한 트랜스파일러에서 다양한 속성을 가지 ㄴ트리 구조를 토큰화해 ECMAScript로 변환하는 데 초점 = JSX 내부에 트리 구조로 표현하고 싶은 것을 작성해두고, 트랜스파일 과정을 거쳐 JS(ECMAScript)로 변경하는 것이 목표 JSX 컴포넌트 JSXElement - 가장 기본 요소 - 역할 : HTML element와 유사 - JSXElement의 요소 이름으로 쓸 수 있는 것 (JSXElementName) - 도 가능 (JSXIdentifier) - : 를 이용해 서로 다른 식별자를 이어준 것 ex) (JSXNamespacedName) , (JSX..

Reducer 함수를 사용하는 이유 컴포넌트가 복잡해지면 컴포넌트의 state가 업데이트되는 상황을 한눈에 파악하기 어려울 수 있다. 따라서 Reducer를 이용해 state를 관리하면 state 로직의 양을 줄이고, 복잡성을 줄일 수 있다. (접근하기 쉽게 한 곳으로 모아주는 역할) useState에서 useReducer로 마이그레이션 하는 방법 1. state 설정을 action들의 전달로 바꾸기 2. reducer 함수 작성하기 3. 컴포넌트에서 reducer 사용하기 1. state 설정을 action들의 전달로 바꾸기 dispatch 함수에 넣어준 객체를 “action”이라고 한다. 일반적으로 무슨 일이 일어났는지 에 대한 최소한의 정보를 포함한다. (type에 string으로 작성) 예시) f..