bkdragon's log

팀프로젝트에서 atomic design pattern을 적용해 진행하고 있다. CSS 프레임워크를 사용하여 atomic design pattern을 적용한 경험을 공유하려고 한다. css 프레임워크는 Chakra ui를 사용했다. https://chakra-ui.com/ CRA로 앱을 설치할 때 Charka ui도 함께 설치할 수 있다. npx create-react-app my-app --template @chakra-ui/typescript atomic pattern atomic pattern은 화학적 관점에서 영감을 얻은 디자인 시스템이다. 출처 : https://atomicdesign.bradfrost.com/chapter-2/#the-part-and-the-whole 각 단계를 간략하게 설명하면..

Redux-toolkit 을 사용해 비동기 처리를 해보자. React-query를 사용해도 좋다. Redux-toolkit에는 thunk 미들웨어가 내장되어 있어서 따로 설치할 필요가 없다. Thunk thunk는 특정 작업을 나중으로 미루기 위해 함수형태로 감싼것을 말한다. thunk는 Redux 스토어의 dispatch 및 getState 메서드를 사용하는 함수이다. 비동기 로직이 들어갈 수 있다. const getItems = () => (dispatch, getState) => { // 현재 상태 조회 const id = getState().item // 비동기 통신의 성공과 실패에 따라 다른 action을 dispatch api .getComments(id) .then(comments => di..

flex-item에 사용하는 속성들이 헷갈려서 정리 좀 해두려고 한다. flex-basis flex 아이템의 기본 크기를 설정한다. flex-direction에 따라 width(row)와 height(column)를 설정한다. 다만 단순히 width, height가 아닌 min-width, min-height 처럼 동작한다. .item { flex-basis: 100px; } 만약 이렇게 설정했다면 원래 100px가 안되던 아이템은 100px로 늘어나고 100px 넘는 아이템은 컨텐츠의 길이만큼 설정된다. .item { flex-basis: 100px; word-break: break-word; } 100px 넘어가던 item이 100px이 넘어가지 않게 하고 싶으면 word-break를 통해 컨텐츠를 ..

Button은 아주 많이 사용되는 UI이다. 그냥 button 태그를 사용해도 되고 스타일 같은 것들을 지정해서 변경하면서 재사용 할 수 있게 컴포넌트를 만들어서 사용할 수도 있다. 조만간 Chakra UI를 사용할 일이 있어서 미리 공부할 겸 간단하게 컴포넌트를 작성해보았다. CustomButton.tsx import React, { PropsWithChildren } from 'react'; import { Button, ButtonProps } from '@chakra-ui/react'; type Props = ButtonProps; const CustomButton = (props: PropsWithChildren) => { const { children, ...rest } = props; ret..

React 18 부터 적용되는 렌더링 방식이다. 동시성 렌더링을 통해 React는 렌더링 자체에 개입하여 이를 중단하거나 재개하거나 폐기할 수 있다. React 18 이전에는 synchronous rendering (동기적 렌더링) 방식이였기 때문에 한번 렌더링 작업이 시작되면 중단할 수 없었고 이로 인해 우선순위가 높은 (빠른 응답이 필요한) 작업의 처리가 늦어지는 문제가 있었다. 동시성은 여러 작업을 작은 단위로 나눈 뒤, 우선순위를 정하고 그에 따라 작업을 번갈아 수행하는 방법이다. 실제로 동시에 이루어지는 것은 아니다. 다만 작업 간의 전환이 매우 빠르게 이루어지며 동시에 수행되는 것처럼 보인다. React의 git discussion에서 좋은 이미지를 찾았다. https://github.com/..

제출 폼은 UI 요소라고 라기 보단 개발용어(?)의 느낌이다. 물론 아주 개인적인 의견이다. 재사용성 있게 만들어보고 싶어서 만들어보았다! 검증을 편하게 하기 위해 react-hook-form을 사용해서 만들었다. react-hook-form의 간단한 예제 코드로 역할도 할 수 있는 글이 되지 않을까싶다. 우선 전체를 담당하는 Form form.tsx interface Props { title: string; onSubmit: (data: TFormData) => void; list: InputList; } const Form = ({ title, onSubmit, list, }: Props) => { const { control, handleSubmit } = useForm({ criteriaMode:..

React 18의 새로운 아키텍쳐 기존 SSR의 동작방식 페이지의 모든 데이터를 서버에서 가져온다. (server) 서버에서 HTML 문서를 사전 렌더링 한다. (server) 사전 렌더링된 HTML 문서와 JavaScript, CSS가 클라이언트로 전송된다. (client) 브라우저 화면에 사용자 상호작용이 추가된다. hydrate (client) 기존 SSR의 문제 SSR의 동작은 순차적이고 차단적이다. (blocking) 모든 데이터를 가져온 후에만 HTML이 렌더링되고 모든 JavaScript가 다운로드 되어야 hydrate가 시작된다. 위와 같은 마크업을 가진 페이지가 있다. Comments의 데이터를 가져오는데 많은 시간이 든다고 하면 Sidebar나 Post가 먼저 준비되더라도 Comment..

출처 : https://fourwingsy.medium.com/dropdown-컴포넌트-5d53820e3f4f 아래로 리스트가 나열되는 메뉴이다. 장점 공간을 절약 할 수 있다. 사용이 쉽다. 표준이다. select와 option 태그를 사용해서 아주 쉽게 기능을 만들 수 있다. 입력값이 정해져 있기 때문에 예외처리가 편하다. 단점 선택지가 많아지면 피로도가 생길 수 있다. (예를 들어 생일을 선택하는 경우 12월 31일 생이면 귀찮을 것이다.) 작다(?) 작아서 못 볼 수도 있을 것 같다. 그렇다고 크게 하자니 그것도 이상한 느낌을 준다. 선택지가 두개 뿐이면 toggle 형식의 버튼을 사용하는 것이 좋을 것 같고 너무 많은 옵션을 가진다면 직접 입력하게 하고 예외처리를 추가하는 것이 사용자 경험에 좋..

React Sever Component (이하 RSC)는 React 18부터 도입된 개념이다. 서버에서 동작하는 컴포넌트를 말한다. Next 13의 app directory에서 작성하는 Component는 기본적으로 Server Component이다. RSC의 동작 방식 이제 React tree에는 RSC, RCC 가 적절하게 분배되어 사용될 것이다. (출처 : https://www.plasmic.app/blog/how-react-server-components-work#what-are-react-server-components ) 브라우저에서 해당 페이지에 대한 요청을 하면 React Tree의 root부터 실행하며 직렬화된 JSON 형태로 재구성한다. 모든 Component에 대해서 이 작업이 이뤄지..

햄버거 버튼과 비슷하게 토글 형태로 컨텐츠를 보여준다. 다만 아코디언처럼 컨텐츠가 아래로 나오고 여러개가 붙어있다. 출처 : WEBCLUM Blog (https://webclub.tistory.com/288) 장단점 장단점은 햄버거 버튼과 비슷한 것 같다. 정보에 대한 타이틀을 보이게 해두고 사용자로 하여금 그 정보가 필요할 때 열어보게 하는 식으로 사용하기 좋을 것 같다. 채용사이트에서 그런 형태를 많이 보았다. Q. 중복 지원은 불가능 한가요? ⇒ 이런 타이틀을 가진 버튼을 누르면 A. 가능합니다. 다만… ⇒ 설명이 나온다. 구현 accordianMenu.tsx import React, { useState } from 'react'; import styles from './index.module.sc..