Dev Record

🛎 보러가기 🛒 🐱 Github 🐱 live example 🛎 들어가며 프로젝트에서 사용할 모양새로 변경하기 위해 다듬던 중, 정말 저렇게 스타일과 관련된 옵션을 바리바리 내려주는게 좋을까? 하는 의문이 들었다. 로직이 딱 필요한 거면 UI 없이 훅을 리턴하는 식으로 작성할 수도 있을 것이고, 혹은 코어 로직을 따로 분리하여 Headless UI로 독립적인 모듈로 관리하게 할 수도 있을 것 같았다. 로직이 담긴 코어 라이브러리는 추후에 분리하는 작업을 가지기로 하고, 일단은 디자인된 모양새로 사용할 수 있게 불필요해보이는 Props를 제거하고 + 같은 역할이지만 이리저리 분산된 코드들을 좀 더 정돈해보는 건 어떨까 생각했다. 🛎 주요 변경사항 🧹 1. 관심사 분리하기 셀렉터에서는 선택 모드가 day (요..

들어가며 기존에는 styled-components로 스타일링을 작성했었고, 이를 가져와 사용했습니다. import styled from 'styled-components'; export const Wrapper = styled.div` display: flex; justify-content: center; width: 100%; height: 70px; background: #fff; box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15); `; export const ContentWrapper = styled.div` display: flex; justify-content: space-between; align-items: center; width: 100%; height: 1..

업데이트 사항 (w. 2023/08/24) https://lerryroad.tistory.com/136 컴포넌트 props 인터페이스를 대폭 수정, 구현 구조를 변경하여 버전 2.X.X로 업데이트했습니다. outdated된 내용 또한 아래 본문에 표시해뒀는데 오래된 버전에 대한 내용은 🚫, 업데이트된 버전에 대한 내용은 그 옆에 ✅로 작성했으니 참고하시면 좋을 것 같습니다. npm & github 🐱 Github 🐱 live example 현재 Vite + React + Typescript 환경에서 진행했기 때문에 이에 맞춰서 세팅을 진행했습니다. Vite Vue.js 개발을 위한 빠른 개발 도구로 Vue.js 애플리케이션 개발에 최적화되어 있지만, 다른 프레임워크나 라이브러리에서도 호환하여 사용될 수 ..

업데이트 사항 (w. 2023/08/24) https://lerryroad.tistory.com/136 컴포넌트 props 인터페이스를 대폭 수정, 구현 구조를 변경하여 버전 2.X.X로 업데이트했습니다. outdated된 내용 또한 아래 본문에 표시해뒀는데 오래된 버전에 대한 내용은 🚫, 업데이트된 버전에 대한 내용은 그 옆에 ✅로 작성했으니 참고하면 좋을 것 같습니다. npm & github 🐱 Github 🐱 live example 이번 글에서는 간단하게 코드 구조를 살펴보고자 합니다. 0. 디렉토리 구조 🚫 Outdated version 더보기 ./src ├── components │ └── DraggableSelector │ ├── ColumnLabel │ │ ├── index.tsx │ │ └..

업데이트 사항 (w. 2023/08/24) https://lerryroad.tistory.com/136 컴포넌트 props 인터페이스를 대폭 수정, 구현 구조를 변경하여 버전 2.X.X로 업데이트했습니다. outdated된 내용 또한 아래 본문에 표시해뒀는데 오래된 버전에 대한 내용은 🚫, 업데이트된 버전에 대한 내용은 그 옆에 ✅로 작성했으니 참고하면 좋을 것 같습니다. npm & github 🐱 Github 🐱 live example 들어가며 현재 진행중인 프로젝트에서 드래그가 가능한 시간 선택기를 만들 필요가 있었는데, 기존의 라이브러리들은 스타일링 커스텀 + 요일별 선택이 구현되어 있지 않아 직접 구현했었습니다. Draggable-time-selector 구현기 (with REACT, TS) ⏰ ..

⏰ Issue 현재 참여 중인 프로젝트에서 드래그로 슬롯들을 선택해야하는 부분이 있었습니다. 일반적으로 선택하고 싶은 영역을 클릭으로 선택하는 간단한 경우와 다르게 드래그 행동을 통해 원하는 영역을 선택하는 것이기 때문에 선택과 관련된 여러 이벤트(click, mouseUp, mouseDown 등) 처리를 잘 해줘야하는 컴포넌트라고 느꼈는데요, 특히 마우스 up이 되었을 때만 실제 데이터가 저장되어야 하는데 드래그 하는 와중에는 이리저리 왔다갔다 할 수도 있기 때문에.. 선택 가능성이 있는 슬롯들(mouse up이 되기 이전에 임시로 선택된 슬롯들)을 어떻게 관리하면 좋을지 고민해봤습니다! 📑 Brief specification & Basic actions 사용자가 기본적으로 할 수 있는 행위는 무엇일까..

문제상황 및 프리뷰 🧨 프론트엔드에서 성능을 향상시킬 수 있는 두 가지는 크게 로딩 개선과 렌더링 개선이 있을 것입니다. 이번 포스트에서는 로딩 기준으로 와플마켓의 랜딩 페이지를 개선해봅시다. 🧐 사이트에 접속 했을 때 요소들이 보이기(First Painting)까지 오래 걸리는데, 이는 사용자의 이탈로 이어질 가능성이 높다. 🧐 네트워크의 페이로드가 크다. 🧐 코드 분할을 하면 필요한 모듈을 또 로드해야하고, 이를 기다려야한다. [Expected solution] 🔮 현재 서비스는 SPA CSR로 되어있어서, 초기에 큰 크기의 번들 파일을 가져온다. 코드 분할 및 지연 로딩으로 초기 번들 파일 크기를 줄여보는 건 어떨까? 🔮 이미지 확장자 변환을 통해 용량을 감소시켜보는 건 어떨까? 🔮 사전 로딩을 통..

🥕 What is Dotting? Dotting Flexible Pixel Art Editor for React Dotting은 '누구나 사용하기 편한 Pixel 아트'를 기조로 제작 중인 react용 라이브러리인데, 라이브러리인만큼 자유도가 높고 이를 기반으로 다양한 서비스를 만들 수도 있습니다. (아래는 활용 예시, Primer 주최 생성AI 해커톤 나갔던 'Dotting gen-ai'이다. 오른쪽 bar에서 키워드를 통해 픽셀 이미지를 불러와 edit할 수도 있고, 기존의 이미지를 import해 픽셀화하여 마찬가지로 edit할 수 있습니다.) https://dotting-genai.vercel.app/ Dotting gen-ai dotting-genai.vercel.app 더 자세한 내용은 레포지토..

공부한 내용을 기록합니다. 잘못된 부분은 댓글로 알려주시면 감사하겠습니다! 🙇 (react-router-dom v6 환경에서 구현된 코드입니다.) Custom Private route 작성의 계기 보통 웹사이트를 돌아다니다 보면 유저의 인증 및 권한 등급에 따라 접근이 가능한 페이지가 있고, 그렇지 않은 페이지가 있습니다. 예를 들어 카페의 경우 준회원, 정회원, 우수회원... 등급에 따라 접근 가능한 카테고리가 있고 특정 등급 미만이면 접근할 수 없는 부분이 있죠. 또한 로그인이 되어 있는 상황에서는 보통 로그인이나 회원가입 페이지로 이동할 수 있는 버튼이 보이지 않게 되는데, 유저 정보가 있는 경우에 로그인 페이지나 회원가입 페이지에 접근하는게 흐름 상 자연스럽지 않습니다. 이렇게 유저의 상황에 맞게..

들어가며 진행하고 있는 토이 프로젝트에서 웹소켓을 이용해 실시간 채팅 기능을 구현해 보았습니다. 사실 클라이언트에서 polling을 통해 계속해서 서버에게 요청을 보내고 실시간(인 척하는) 정보를 받아올 수도 있겠으나, 서버에서 바뀐 정보가 없다면 불필요한 요청을 계속해서 보내게 되는 것이어서 HTTP 프로토콜이 아닌 웹소켓 프로토콜을 이용해 구현해보기로 결정, 관련 내용을 찾아보게 되었습니다. 참고로 이 글에서는 React + stompJS 을 사용한 클라이언트 단 내용만 다루는 포스팅이고, 같은 프로젝트의 웹소켓 + STOMP 을 사용한 스프링 예제는 아래 블로그에서 확인하실 수 있습니다! [Spring & Dev] 웹소켓에 대하여. 0. 들어가며🏃🏻‍♂️ 진행 중인 팀 프로젝트에서 실시간 채팅 기능..