Front-End
-
[React] useState : console.log에 이전 state가 출력되는 이유?Front-End/React 2024. 9. 14. 07:09
🍀목차글의 목적useState 문서 읽어보기state 업데이트 큐flushSyncuseEffect 글의 목적 React로 함수 컴포넌트를 만들다 보면 자연스럽게 React Hooks들을 사용하게 된다. 그중에서도 useState는 컴포넌트에 state 변수를 추가해서 상태 관리와 업데이트를 하게 해 주는 Hook이다. 그런데 state 업데이트 후 바로 console.log를 사용해 출력해 보면 이전 상태값이 출력된다.이유가 무엇일까? useState 작업이 비동기이기 때문에? 더 자세히 설명할 수는 없을까?많이 사용함에도 이처럼 설명을 못하는 부분이 있어 글을 작성하게 되었다. 이번 글은 useState를 사용하며 헷갈렸던 state 업데이트에 관해 알아보았다. useState 문서 읽어보기문서 c..
-
[WizSched] Drag & Drop 보드 컴포넌트 - (2) Task Object 배열로 만들기Front-End/Project 2024. 8. 17. 07:33
🍀목차먼저, 단순한 형태인 string 배열로 이해해 보자실제 데이터와 비슷하게 만들어보자어디를 고쳐야 할까? 먼저, 단순한 형태인 string 배열로 이해해 보자 참고한 코드는 해당 codesandbox이다! 공식 문서 Sortable도 같이 보면 좋다. 아래와 같은 형태, backlog에 있는 1이나 2를 드래그한다면 active.data.current.sortable안에서 데이터들을 확인할 수 있다. const [items, setItems] = useState({ backlog: ['1', '2'], weekly: ['4', '5', '6'], }); DndContext에 전달하는 이벤트 핸들러는 직접 구현한다. codesandbox에서는 아래와 같이 구현했다.o..
-
[WizSched] Drag & Drop 보드 컴포넌트 - (1) dnd-kit 적용Front-End/Project 2024. 7. 27. 07:06
🍀목차목표dnd-kit을 선택한 이유dnd-kit 목표 할 일을 관리하는 Drag & Drop 보드 컴포넌트를 만들기 위해 dnd-kit을 사용해 본다.dnd-kit을 선택한 이유 처음에는 HTML Drag and Drop API, useRef 훅 등을 사용해서 직접 만들어보려 했지만, 두 개의 보드 사이를 드래그 가능한 요소가 이동해야 함, 마우스-키보드-포인터 이벤트 리스너 설정, 웹 접근성 등... Drag & Drop은 필요한 기능이나 예상시간 이상이 소요될 것이라 판단되어 라이브러리를 사용하였다. 가장 유명한 라이브러리는 react-dnd와 react-beautiful-dnd였고, dnd-kit는 둘에 비해서는 신생 라이브러리였다. 셋의 비교를 해보았다. react-beautiful-dnd..
-
[2024-W28] 인풋과 인사이트 정리 : 유튜브Front-End/ETC 2024. 7. 13. 01:33
🍀목차일론 머스크의 1원칙 사고법논리적으로 삽시다. 논리의 기초 통합편사람들이 더 똑똑해질 수 있게(노션 창업자 인터뷰)Even More Secrets about Perfect Spacing성공한 부자의 자랑보다 노련한 선배의 실패가 도움되는 이유 | 최성운의 사고실험 [한기용] 2부 일론 머스크의 1원칙 사고법https://www.youtube.com/watch?v=Nt0lCENkiK0 인풋 1원칙 사고법(First Principles Thinking)은 "진짜?"를 끝까지 물어 근본적인 사실부터 하나하나 생각을 발전시키는 사고법이다. 엔지니어링 문제는 절대로 물리법칙을 어길 수 없는데, 물리법칙은 '진짜'이기 때문이다. 이렇게, 1원칙 사고법은 물리학에서 차용되었다. 일론은 사람들이 안 된다고 하..
-
[shadcn/ui] Select Component -> Multiple Select Component 커스텀Front-End/React 2024. 6. 4. 00:17
🍀 목차새로운 prop 만들기Select Component의 메서드 활용하기작성한 스토리회고 개요 단일 선택만 가능한 shadcn/ui의 Select를 다중 선택이 가능하도록 Multiple Select로 커스텀해보자.새로운 prop 만들기 Anatomyimport * as Select from '@radix-ui/react-select';export default () => ( ..
-
[shadcn/ui] Dialog, Alert Dialog Component 구현기Front-End/React 2024. 5. 14. 14:07
🍀 목차Shadcn/ui Dialog(+Alert Dialog) 뜯어보기 & 속성 설명UI 커스텀과 작성한 스토리회고 개요 Modal Component는 현재 제품에서 가장 많이 쓰이는 컴포넌트 중 하나다. Avatar Component처럼 처음부터 인터페이스 제작 -> UI 구현까지 하기에는 시간이 부족하여 shadcn/ui의 Dialog, Alert Dialog를 제품에 맞게 커스텀하기로 결정하였다.시작하기에 앞서 Modal, Confirm, Alert의 차이를 알아봤다.Modal : 주의가 필요하거나 추가 정보를 제공하는 팝업 콘텐츠. 텍스트, 양식 입력 같은 다른 대화형 요소를 포함할 수 있고 사용자가 Modal 외부를 클릭하거나 특정 버튼(닫기, 취소, 저장)을 클릭할 때까지 다른 인터페이..
-
[React] Avatar Component 구현기Front-End/React 2024. 5. 9. 19:52
🍀 목차 Avatar Component에는 어떤 속성이 필요할까? Interface 구현기 UI 구현기 회고 Avatar Component에는 어떤 속성이 필요할까? Avatar Component는 사용자 또는 개체를 대표하는 이미지를 표시하는 데 사용된다. 예를 들어 프로필 이미지, 쇼핑 사이트의 상점 프로필 등이 포함된다. 다른 디자인 라이브러리를 보며 컴포넌트에 어떤 속성들이 필요할지 참고해 보자. (필수) radius, size, imageUrl, altText 가장 익숙한 형태의 기본 Avatar를 구현하려면 Border Radius와 size, 그리고 img 태그의 src 속성에 전달할 image의 url과 alt 속성에 전달할 대체 텍스트인 altText가 필요할 것으로 예상할 수..
-
[2024-W16] 공부 정리Front-End/ETC 2024. 4. 18. 00:18
🍀 목차class-variance-authoritytailwind-mergestorybook용어 tailwind CSS의 단점으로 꼽히며 css-in-js의 장점으로 꼽히는 동적 스타일링 도움을 주는 것들cn, twMerge, clsx, cva class-variance-authority문서shadcn/ui 설치 시 install 되는 tailwind의 동적 스타일링에 도움을 주는 라이브러리cva는 매우 작은 라이브러리, variant를 편하게 줄 수 있다. tailwind-mergeshadcn/ui 설치 시 install 되는 tailwind class들을 merge 시킬 때 도움을 주는 라이브러리shadcn/ui에서는 cn = clsx(조건부 렌더링에 도움) + twMerge메서드를 utils로..
