오늘도 디벨롭✨ 오늘도 디벨롭✨

💬 포토샵에서도 크롬에서도 유용하게 사용하는 Color Picker는 어떻게 구현할 수 있을지 급 궁금해져서 이번 스터디 주제로 결정! 라이브러리를 사용하지 않고 어떻게 하면 Color Picker 기능을 구현할 수 있는지 알아보자. 📑 Color Picker를 구현할 수 있는 방법1) color" /> 스포이드 모드와 직접 팔레트에서 컬러를 선택할 수 있는 기능을 제공한다.기본값은 #000000으로 RGB Hex값을 반환한다.event.target.value로 값을 받아올 수 있다.컬러 선택 후에 esc 혹은 color picker의 외부 영역을 클릭해야 color picker 팝업이 닫힌다.Opera Mini와 IE를 제외한 모든 브라우저에서 사용이 가능하다. 2) Ey..

💬 오늘은 언젠가 한 번쯤은 사용할 차트 라이브러리에 대해 실습했다. 사용법만 제대로 익혀두면 사용하기 좋은 라이브러리라는 생각이 들었다. 실습하면서 차트의 항목 이름을 보여주고 싶어 삽질을 좀 했는데, 이 과정에 대한 기록을 남겨본다. 📑 Chart.js 라이브러리란?데이터를 시각화할 때 차트를 사용할 일이 많은데, 차트 라이브러리를 사용하여 이를 쉽게 구현할 수 있다. 오늘 우리는 많은 차트 라이브러리 중에서도 유명한 Chart.js의 리액트 버전인 react-chartjs-2 라이브러리를 사용해보고자 하였다. https://react-chartjs-2.js.org/ react-chartjs-2 | react-chartjs-2React components for Chart.j..

✅ 오늘의 작업 내역 1. single, multiple 버전 예제 준비하기(100%) 2. README 작성하기(100%) 🔍 먼저 짚고 넘어가는 오늘의 깨달음 동일한 UI인데 실행되는 로직만 다른 경우, prop 조건에 따라 컴포넌트 하나로 해결이 가능하다는 사실을 잊지 말자. 폼도 그렇고, 오늘 준비한 아코디언도 그렇고.. 컴포넌트를 재사용할 수 있는지 항상 먼저 생각해 보기! (single 버전과 multiple 버전을 각각 만들었다가 이거 정말 비효율적이다! 를 느끼고 난 자의 회고록..) 0. 아코디언 UI를 준비한 이유 요새는 모바일로 웹이나 앱 사용을 많이 하는데, FAQ만 보더라도 아코디언 UI로 이루어져 있는 곳들이 많다. 작은 화면 속에서 빠르게 내용을 확인할 수 있는 게 편리해서 잘..

🏔️ 티코드 스터디 소개 - 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디 - 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 👀 오늘은 스터디 진행 이래 처음으로 라이브러리를 사용하여 구현 연습을 진행했다. 공식 문서를 통해 처음 접하는 라이브러리의 사용법을 파악하고 적용하는 연습도 필요하다는 생각에 적절한 라이브러리가 있는 경우 이를 체험해보고자 하였다. 📚 (사이트) 가이드 투어/온보딩 투어란? 가이드 투어/온보딩 투어는 웹 사이트, 웹 애플리케이션 또는 소프트웨어 플랫폼의 신규 사용자에게 제공되는 체계적인 소개/안내를 뜻한다. 이를 통해 신규 사용자가 플랫폼의 기능 및 UI/UX에 익숙해지도록 도와준다. 오늘 알아볼 기..

🏔️ 티코드 스터디 소개 - 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디 - 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 이번 포스팅은 구현 과정보다 준비하면서 알게 된 wheel event에 대해 기록하고자 한다. 리액트에서 FullPage Scroll를 구현하기 위해서는 마우스 휠의 방향을 통해 페이지의 이동 방향을 알아낼 수 있는 wheel event값, 스크롤이 발생하는 DOM 요소의 스크롤 위치를 알아내는 useRef.current값, 뷰포트의 세로길이가 필요하다. 이 값들을 사용하여 위치를 계산한 후 scrollTo API를 활용하여 이동할 위치를 지정해준다. 📑 wheel event란? 사용자가 휠 버튼(일반적..

🏔️ 티코드 스터디 소개- 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디- 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 👾  문제상황이미지 데이터를 대량으로 받아오는 페이지에 접속한다고 가정해 보자.예시처럼 좋은 화질의 이미지를 제공할수록 데이터의 용량은 커지고, 이미지를 받아오는 시간 또한 증가하게 된다.이에 따라 사용자는 이미지가 모두 받아와질 때까지 하염없이 빈 화면을 보며 기다려야 하는 상황을 마주하게 될 것이다. 사용자가 보고있는 화면(뷰포트)에 보이는 이미지만 먼저 로드되어 보여진다면 사용자 경험을 더 향상시킬 수 있지 않을까? 이 때 사용할 수 있는 최적화 기법 중 하나로 이미지 지연 로딩(Image Lazy..

🏔️ 티코드 스터디 소개 - 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디 - 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 👾 문제상황 검색어를 입력하면 API 요청을 통해 검색 결과를 받아오고 있다고 가정해보자. 엔터없이 검색어를 적을 때마다 일치하는 결과 여부를 보여주려면 onChange 이벤트가 사용자의 입력을 실시간으로 체크하고 있어야한다. 이때 문제는 한글자씩 입력할 때마다 API 요청이 들어가는데에 있다. 만약 대규모 서비스에서 이런 불필요한 이벤트가 동시다발적으로 발생하게 되면 어떻게 될까? 서버에 쿼리를 요청하는 횟수가 증가하면서 서버 비용과 자원 소모가 크게 증가하게 될 것이다. 이러한 문제는 사용자의 요청 ..