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한 컴포넌트(이하 다형성 컴포넌트)라는 개념을 발견했다...
이제 진짜 개발 뿐이야! (아님) 지금까지 아토믹 디자인을 통해 디자인에서 디자인 요소들을 분리하고, 이를 Token - Atom - Molecule - Organism으로 나누었다. 이후, 개발 단계에서의 혼란스러움을 없애기 위해 잘못되어있던 컬러 체계를 깔끔하게 재정비했다. 이제 드디어 모든 환경 설정이 끝나고 개발에 들어갈 수 있는 환경이 마련된 것이다....라고 하기 전에 진짜 마지막으로 디자인 토큰들을 실제 개발 단계에 사용할 수 있도록 Tailwind CSS 설정으로 옮겨보자. rem 단위 설정 /* global.css */ @layer base { html { font-size: 6.25%; } } rem 단위는 루트 글꼴 크기에 비례하여 상대적으로 바뀌는 단위이다. 보통 웹 개발을 하면서 ..
Next 13 + Tailwind + Storybook 치스톡 프로젝트를 Next 13 기반으로 결정한 뒤로 다른 기술 스택들로 Tailwind, Storybook을 골랐다. 그래서 오늘은 Next13 + Tailwind + Storybook 기반으로 공식 문서 설명 따라서 개발 환경을 구축해보려한다. Next.js + Tailwind npx create-next-app@latest 먼저 Next.js 기반으로 설정하기 위해서 create-next-app을 해준다. React에서 CRA처럼 Next.js 보일러 플레이트를 제공해주는건데, 위는 npm 기반 명령어이고 나는 yarn 기반으로 진행했기 때문에 아래 명령어를 입력해주었다. yarn create next-app //create 다음 -가 없다. ..
프로젝트를 시작할 때 가장 기본! (포맷까지 했지만) 널뛰기 하는 것 같아서 차마 적지 못하고 따로 뺀 프론트엔드 개발환경 설정 2편! 오늘은 VS Code에서 ESLint와 Prettier를 설정해보자. 항상 Reference는 마지막에 표시하는데 다들 읽어보면 좋을 것 같아서 이번에는 최상단에 표시한다. 나는 이 블로그의 글을 직접 적용해보며 작성한 것이라 정확한 내용은 아래 블로그를 참고하는 것이 좋다. ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자. ESLint, Prettier 관련해서 환경 세팅을 하면 항상 어쩔 땐 잘되고, 어쩔 땐 안되고... 구글링하면 그렇게 많이 나오는 방식들을 전부 해봐도 계속 안돼서 시간을 그렇게 버릴 때가 많았던 것 같다. 그 he..
이 글을 적기 위해서 컴퓨터를 포맷했다. (아님) 한 번 쯤은 정리하고 넘어가야하는 프론트엔드 개발환경 기초 설정! 1. VS Code 설치 VS Code는 마이크로소프트에서 개발한 에디터이다. 프론트엔드를 개발하려면 코드를 작성하고 편집하는 툴이 필요할텐데 VS Code가 그 대표적인 예시이다. MS는 에디터라고 주장하지만 사실상 IDE 취급을 받고 있다. 즉, VS Code는 프론트엔드 개발에서 코드를 편집하고 작성할 수 있는 가장 대중적인 프로그램이다. 다양한 확장자와 플러그인을 지원하기 때문에 프론트엔드 개발 이외에도 많이 사용된다. 이를 쓰고 싶지 않다면 자신이 편한 IDE를 다운로드해서 사용해도 된다. 2. Git 설치 Git은 변형을 추적할 수 있는 형상 관리 도구이다. 말이 굉장히 어려운데..
* 본 글은 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 모드를 통해 저장될 떄마다 자동으로 실행해서 확인 // ..
컴퓨터 포맷 후 다시 개발환경을 설정하는 와중에 PowerShell에서 yarn 명령어가 실행되지 않는 버그가 발생했다. yarn : 이 시스템에서 스크립트를 실행할 수 없으므로 어쩌고 저쩌고 하는 말이었는데 이 김에 해결방법을 작성해두려고한다. 1. PowerShell을 관리자 권환으로 열어 아래를 입력한다. Set-ExecutionPolicy RemoteSigned 2. 입력하라는 메세지가 뜨면 y를 누른다. 3. 잘 동작 한다.
깃허브를 사용하면서 기능별로 feature 브랜치를 파고 PR을 올리고 머지한 적은 있지만, 브랜치 명칭별로 어떤 역할을 하는지, 어떻게 관리되어야하는지에 대해서는 깊게 생각해본 적이 없었다. 오늘 인턴쉽을 진행하며 배웠던 깃 플로우 전략을 아주아주 간단하게 정리해두려고 한다. 브랜치의 종류는 5가지가 있다. develop 개발이 진행 중인 branch feature 특정 기능의 개발이 진행되는 branch release 기능 개발이 끝나고, 제품 출시 전 테스팅용 DB와 서버에서 빌드되어 QA 과정에 놓이는 branch master 빌드 되어 실제 배포되는 branch hotfix 배포된 결과물에서 발생한 문제를 빠르게 해결하기 위한 branch 실제 개발과정에서는 위 브랜치를 다음과 같이 적용한다. ..
Online WebSocket & Socket.io Tester - PieSocket Realtime Recent use cases, blogs, tutorials and stories. www.piesocket.com REST API는 그냥 링크를 타고 들어가면 json 형태의 응답을 바로 볼 수 있어 어떤 응답이 들어오는지 확인할 수 있지만, 웹소켓의 경우는 여의치 않습니다. 이를 위해 웹소켓을 테스트해볼 수 있는 사이트를 소개하려 합니다. 위에 있는 사이트인데 홈페이지는 다음과 같습니다. 로그인이 별도로 필요하진 않으며 Enter your websocket url and connect 부분에 웹소켓 url을 넣고 Connect 버튼을 누르면 정상적으로 연결 시 아래와 같은 화면이 뜹니다. 이 화면에..
function hello(arg: any): any { return arg; } 인수에 관계 없이 그 값을 returng하는 함수 hello를 만든다고 하자. JS에서는 타입 구분이 크지 않기에 상관 없지만, TS에서는 타입을 구분되어 있기 때문에 인수에 관계 없이 값을 가져오기 위해서는 인수에 들어올 수 있는 모든 타입을 지정해주어야한다. 이는 몹시 귀찮고 힘들다. 다른 방법으로는 any 타입을 이용해 인수를 받을 수 있지만 인수가 any 타입으로 불러와지기 때문에 인수가 원래 어떤 자료형이었는지 대한 정보를 잃어버린다. 귀찮지도 않고 원본 자료형에 대한 정보를 둘 다 처리할 수 있는 방법이 제너릭(Generic)이다. function hello(arg: T): T { return arg; } 제너릭..
