JS Ecosystem (44) 썸네일형 리스트형 (트러블 슈팅) Next.js 14 에서 TailwindCSS와 Storybook 호환성 이슈 Next.js 14에서 Tailwind와 Storybook을 함께 사용하기 위한 호환성 문제 및 해결 방법(최신 내용으로 업데이트 2024. 8.15)Storybook 최신 버전 8을 tailiwdCSS와 연동하여 사용하는 경우 tailwind가 적용이 안되는 이슈가 있습니다. Storybook 깃 레포의 이슈탭에는 아직도 여전히 처리가 되지 않고 있다. stable release가 3월에 되었지만 최초 버그가 제기된 이후로 여전히 해결이 되지 않고 있어 최신 Storybook에서 사용이 안되고 있습니다. 최근 프로젝트에서 Next.js 14, Tailwind CSS와 Storybook을 결합하여 디자인 시스템을 구축하려는 시도를 했습니다. 그러나 Storybook의 최신 버전(8.x)을 사용했을 때 T.. [React] 전역 상태 공유 : React Context API 심층 분석 (핵심 요약) React Context API 종합 평가SPA(Single Page Application) 개발에서 props drilling을 피하고 전역 상태를 관리하는 것은 중요한 과제입니다. 다양한 상태 관리 라이브러리들이 존재하는 가운데, 저는 Redux Toolkit, Zustand, Recoil, Reactive Variable 등 여러 상태 관리 도구들을 사용해본 경험을 토대로 Context API가 특히 단순하고 직관적인 상태 공유가 필요한 경우 매우 효과적임을 확인했습니다. Context API는 복잡한 store 기반 상태 관리에서 벗어나, 모듈화된 컴포넌트들 간에 상태를 쉽게 공유할 수 있는 점에서 큰 장점이 있습니다. 특히, 특정 기능을 수행하는 컴포넌트 그룹을 하나의 Contex.. (component) React 타이머 시작, 일시정지/재개, 초기화 자바스크립트 내장함수 setInterval과 clearInterval 그리고 react 의 useState와 useRef로 Timer 를 구현해보았습니다. 전체 코드 보기 http://bit.ly/3Q7to69 요구사항 1. seconds를 입력할 때 60초를 넘겨서 입력하면 초과한 초를 제외한 나머지는 분(minutes)으로 합산된 상태로 타이머가 작동되어야 합니다. 2. 일시정지(PAUSE)와 재개(RESUME) 동작 기능이 있습니다. 배경지식 1. setInterval과 clearInterval 활용방법 특정함수를 1초 간격(1000m/s, milliseconds, 밀리세컨즈)으로 반복해서 실행시킬 때 seInterval 함수를 이용합니다. setInterval 함수는 'interval ID'를 리.. (JS) ECMA 262 - TC39 new feature 2022.6 version ECMAScript 2022, the 13th edition, introduced top-level await, allowing the keyword to be used at the top level of modules; new class elements: public and private instance fields, public and private static fields, private instance methods and accessors, and private static methods and accessors; static blocks inside classes, to perform per-class evaluation initialization; the #x in obj syntax, to.. (React) Next.js 에서 리액트 포털로 모달 만들기 * 문제점 모달 컴포넌트를 만들 때 우리는 흔히 useState을 잔뜩 사용해서 모달에 입력 받아야 하는 상태값들을 나열해준다. 그리고 모달을 띄울 boolean 값과 모달 엘리먼트의 position을 fixed로 설정하고 표시를 한다. 만일 가입이나 확인 버튼이 있다면 모달의 boolean 값을 true로 하고 background을 클릭할 경우 false로 하는 방법을 흔히 이용한다. 위의 방법은 간단한 방법으로 모달 컴포넌트를 구현하고 작동시켜 준다. 하지만 재사용성의 관점에서는 재활용할 께 딱히 없어 코드 복붙 외에는 좋은 코드라고 할 수 가 없다. * 해결방법 - 리액트 포털 ReactDOM.createPortal(child, container) 포털은 '부모 컴포넌트 DOM 계층 외부에 있는 D.. (Next.js) Next/Image Do not use <img> * 문제점 Next.js에서는 이미지 최적화를 위해 img 태그의 사용을 권장하지 않고 Next/Image 컴포넌트를 사용하도록 하고 있다. Next/Image는 built-in 성능을 최적화하기 위해 태그를 확장한 것으로 크롬 웹 스토어의 'Lighthoust'와 같은 확장 프로그램으로 측정하는 core-web-vitals에서 좋은 점수를 받을 수 있게 해주는 컴포넌트이다. 하지만 컴포넌트는 width와 height 값을 px 단위로 지정을 해야 하는 불편함이 있고, width와 height 값을 생략하기 위해 layout="fil' 속성을 설정하면 position: relative 속성을 가지는 부모 태그로 감싸주어야 하는 번거로움도 있다. NEXT.js core-web-vitals 링크 그런데 위와.. (TS) 부모와 자식 컴포넌트 / styled-component props 전달 부모 컴포넌트 Header.tsx 상담 신청하기 자식 컴포넌트 RequestConsultringButton.tsxinterface invertedProps { inverted: boolean}const RequestConsultingButton = ({ props, children,}: { props: invertedProps children: string}) => { return ( {children} )}일반적인 방법으로 코드 작성.interface (혹은 타입 지정) 지정하여 처리 부모 컴포넌트에서 IntrinsicAttributes 오류 발생오류 발생 원인을 정확하게 모르겠다. 이리 저리 찾아 봤으나 이유는 모르나 다른 형태로 코드를 작성하여서 해결하였다. .. (Typescript) 함수 표현식과 일등 함수 개념 자바스크립트는 함수형 언어 '스킴'과 프로토타입 기반 객체지향 언어 '셀프'를 모델로 만들었다. 타입스크립트도 또한 자바스크립트의 이러한 특징을 모두 가지고 있다. 함수 표현식은 함수형 언어의 핵심 기능이다. 프로그래밍 언어가 일등 함수 기능을 제공하면 '함수형 프로그래밍 언어'라고 한다. 일등함수 일등함수란, 함수와 변수를 구분하지 않는다는 의미이다. let f = function(a, b) {return a + b} f = function(a, b) {return a -b} 심벌 f가 변수인지 함수인지 사실상 구분할 수 없다. 이것이 변수와 함수를 구분하지 않는다 의미이다. 표현식 프로그래밍 언어에서 '표현식'이라는 용어는 리터럴, 연산자, 변수, 함수 호출 등이 복합적으로 구성된 코드 형태를 의미한.. 이전 1 2 3 4 ··· 6 다음
