✅ 본 글은 TailwindCSS, Tailwind Variants 라이브러리를 사용하여 작성되었습니다. Tailwind Variants를 통해 재사용할 수 있는 상호작용 상태를 만들어보자 디자인 시스템을 만들면서 여러 가지를 시도해보고 있는데 그 중 하나로 컴포넌트의 상호작용 상태를 어떻게 쉽게 재사용할 수 있을까? 라는 부분이 있었다. 컴포넌트를 만들 때마다 일일이 hover, press에 대한 상태를 정의해주는 것도 힘들었고, 개발 과정에서 수정될 경우 각 컴포넌트에서 이를 일일이 처리해줘야하는 등 문제가 있었기 때문이다.물론 어느 정도 토큰화해서 이러한 점을 개선할 수 있지만, 결국 각 컴포넌트에서 개별로 정의해야하는 점이 불편하다고 생각했다. 이를 해결하기 위한 방법을 처음 본 곳은 구글의 Ma..
🔯 다형성 컴포넌트 시리즈 태그에 따라 바뀌는 React 컴포넌트 만들기(with TypeScript) 태그에 따라 바뀌는 React 컴포넌트 만들기 2 - As 속성 제한하기 태그에 따라 바뀌는 React 컴포넌트 만들기 3 - 컴포넌트 별칭 정하기 ✅ as 속성을 위한 컴포넌트 문자열 별칭을 정해보자 이번 글은 프로젝트에 적용된 내용도 아니고 그냥 `이런 것도 가능할까?` 라는 생각으로 시도해 본거라 굳이 다형성 컴포넌트를 구성하는데 필요한 내용은 아니다. 아이디어도 심플하고... 가볍게 봐주면 좋겠다. 만약 다형성 컴포넌트를 만들어보고 싶다면 1편을, as 속성을 특정 태그로 제한을 두고 싶다면 2편을 참고하자. 그래서 주제가 뭐냐면, 컴포넌트에 문자열(string) 형태의 별칭을 정해서 as 속성..
🔯 다형성 컴포넌트 시리즈 태그에 따라 바뀌는 React 컴포넌트 만들기(with TypeScript) 태그에 따라 바뀌는 React 컴포넌트 만들기 2 - As 속성 제한하기 ✅ 태그에 따라 바뀌는 React 컴포넌트 만들기 3 - 컴포넌트 별칭 정하기 ⚠️ 본 게시글은 이론적으로 검증된 방법이 아닌 시행착오 끝에 구현되는 방법을 찾아 기술한 글로 잘못되거나 정확하지 않은 내용을 포함할 수 있습니다. 다형성 컴포넌트에서 As 속성을 제한해보자 지난 글에서는 as 속성에 따라 다르게 렌더링되는 다형성 컴포넌트를 어떻게 만드는지 살펴봤었다. 그런데 새로운 요구사항이 등장했다. 음...그런데 Button 컴포넌트가 button 태그나 a 태그로만 렌더링 되게 할 수는 없나요? 물론 타입을 2개를 만든다던가 ..
다양한 아이콘을 불러와주는 Icon 컴포넌트를 만들어보자 아이콘 컴포넌트의 요구사항은 아래와 같다. 1. svg 파일을 불러와 제공 2. 아이콘 이름을 props로 주면, 해당 아이콘을 렌더링 3. 색상이 props에 따라 변경 4. 크기가 props에 따라 변경 Next.js에서 svg 이미지를 다루는 방법으로 크게 2가지를 들 수가 있는데, 하나는 next/images를 이용하여 img 태그에 src 형태로 넣어주는 방법이고 다른 하나는 리액트 컴포넌트 형태로 가져오는 방법이다. 두 방법 중 src 속성에 svg 파일의 path를 넣어주는 방식으로 2번을 쉽게 구현할 수 있었기 때문에 우선적으로 고려하고 있었다. 그러나 Tailwind를 사용하고 있던터라 svg 파일의 크기와 속성을 변경하기 위해서는..
Tailwind에서 재사용 가능한 컴포넌트로 지금까지 아토믹 디자인을 적용해 UI의 시각적인 요소들을 토큰이라는 계층으로 분류하고, 이 토큰들을 Tailwind에서 사용할 수 있도록 class로 옮겼다. 드디어 Tailwind를 통해서 컴포넌트를 만들 수 있는 준비가 끝난 것이다. 그렇다면 Tailwind를 사용해서 무작정 컴포넌트를 만들기만 하면 되는걸까? 아토믹 디자인에서부터 느꼈겠지만, 치스톡 프로젝트는 하나의 컴포넌트 디자인 시스템을 기반으로 구성되어있다. 이런 디자인 시스템의 컴포넌트의 핵심은 "디자인 선택지를 받아서 정해진 디자인을 출력"한다는 것이다. 예를 들어, 버튼 컴포넌트의 요구사항이 위와 같다고 하자. css-in-js를 사용하면 가장 좋겠지만, 우리는 Next 13에 Tailwind..
🔯 다형성 컴포넌트 시리즈 태그에 따라 바뀌는 React 컴포넌트 만들기(with TypeScript) ✅ 태그에 따라 바뀌는 React 컴포넌트 만들기 2 - As 속성 제한하기 태그에 따라 바뀌는 React 컴포넌트 만들기 3 - 컴포넌트 별칭 정하기 Polymorphic한 React 컴포넌트 디자인 시스템을 구성하면서, 다음과 같은 요구사항에 마주쳤다. 렌더링 될 태그를 정할 수 있는 Text 컴포넌트를 만들고 싶어요. 즉, h1이라는 props를 넘겨준다면 h1이라는 태그가 렌더링되고, span이라는 props를 넘겨준다면, span 태그가 렌더링되는 Text 태그를 만들어야했다. 이를 어떻게 구현할 수 있을지 찾아보다가 Polymorphic한 컴포넌트(이하 다형성 컴포넌트)라는 개념을 발견했다...
* 본 글은 2022.06.21에 작성한 글을 업데이트한 글입니다. 목록을 표시하는 방법에는 여러가지 방법이 있습니다만 모바일 환경에서 주로 구현되는 방법은 무한 스크롤입니다. 오늘은 이 무한스크롤을 구현하고 독립적인 컴포넌트 형태로 꺼내 쓸 수 있도록 만들어보려합니다. - 무한스크롤 구현 무한 스크롤을 만들 때 생각해야할 부분은 다음과 같습니다. 1. 사용자가 목록의 끝에 도달했다는 것을 어떻게 인지할 것인가? 2. 목록의 갱신은 어떻게 할 것 인가? 2번의 경우 우리는 자바스크립트의 비구조화 할당(... 문법)과 State를 통하여 쉽게 갱신할 수 있습니다. 갱신된 목록 역시 map 함수를 통하여 손쉽게 렌더링 할 수 있습니다. 그렇다면 문제가 되는 부분은 바로 1번, 사용자가 목록의 끝에 도달했다는..
본 글은 FEConf Korea에서 최수형님의 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다 발표를 보고 정리한 글입니다. TDD의 궁극적인 목적 Clean Code that works : 작동하는 깔끔한 코드 왜 어려운가? 코드 자체가 Testable 하지 않아서 그렇다. 어떻게? 관심사 분리 → 개개의 요소가 자신이 관심 갖고 있는 요소에만 집중해야 TDD를 쉽게 할 수 있다. 이를 지키지 않으면 거대한 진흙 덩어리가 된다. 일단 테스트를 통과하기 위한 코드를 짜라! → 그 후에 수정하자. 라이브코딩 React의 컴포넌트 테스팅 React에서 testing하기 위해서 testing-library/react를 사용 jest의 watchAll 모드를 통해 저장될 떄마다 자동으로 실행해서 확인 // ..
본 글은 노마더 코더의 실전형 리액트 Hooks 10개 강의를 들으며 작성한 글입니다. useAxios 이번에 주식 시세 프로젝트를 하면서 axios로 API를 호출해야 할 일이 생겼는데, 어떻게 API 호출을 좀 더 깔끔하게 할 수 없을까? 고민하다가 노마드코더에서 Hooks 강의를 들을 때 보았던 useAxios를 사용해볼 수 없을까 싶어서 정리할 겸 작성한다. import React from "react"; import ReactDOM from "react-dom"; import useAxios from "./useAxios"; const App = () => { const { refetch, loading, data, error } = useAxios({ url: "API 호출 주소" }); re..
본 글은 노마더 코더의 실전형 리액트 Hooks 10개 강의를 들으며 작성한 글입니다. React Hook이란? Functional Component에서 State를 가질 수 있게 해주는 기능. 기존의 React에서는 class로 component를 선언하고 그 안에서만 state를 사용할 수 있었다. 더보기 리액트에는 2가지 component가 있는데 바로 Function Component와 Class Component이다. (2021년 강의 버전에 따르면 useState, useEffect와 같은 Hook을 통해 Function Component로 통합할 수 있다.) Function Component import React from "react"; function App() { return ( I m..
본 게시글은 노마더코더의 ReactJS로 영화 웹서비스 만들기 코스를 수강하며 정리한 글입니다. React Router React에서 페이지 이동시 사용하는 라이브러리 Route "스크린" 단위로 생각 = "route" 별로 생각 화면에 표시되는 하나의 Screen을 하나의 Route라 본다. Router router는 URL을 보고있는 component Browser Router : URL이 평소 보는 URL이랑 똑같다. Hash Router : localhost.com/#/movie붙인다. Swtich Route를 찾는 역할, 현재는 사용되지 않고 Routes로 대체되었다. 한번에 하나의 Route만을 렌더링하기 위해 사용 (원래 Router에서는 한번에 2개의 Route를 렌더링도 가능) 여기서 R..
본 게시글은 노마더코더의 ReactJS로 영화 웹서비스 만들기 코스를 수강하며 정리한 글입니다. prev current처럼 state를 가져오는 함수 import {useState, useEffect} from "react" useState 등 사용할 때 import useEffect(effect, dependency) 특정 코드가 실행 시기를 설정하고 싶다. ex ) API 로딩 - Component의 첫 로딩 시만 코드 실행 이 경우에는 useEffect를 사용한다. React는 State가 변할 때 마다 리렌더링한다. 이는 UI관점에서는 좋을 수 있지만 특정 시점에만 실행하고 싶은 코드가 있을 수 있다. 특정 시점에만 코드를 리렌더링(실행)하고 싶을 때 사용한다. dependency = []안에 k..
