안녕하세요. 이번에는 원형으로 휠을 하며 항목을 선택할 수 있는 컴포넌트를 개발해 보았습니다. 패키지 설치 방법 npm i @wisdomstar94/react-circle-wheel-select-box 테스트 영상 및 사용 예제 확인 https://github.com/wisdomstar94/react-circle-wheel-select-box 의 README.md 파일을 참고해주세요. 개발 시 참고 UI 아래와 같이 네이버에서 사용중인 원형 UI 를 참고하여 비슷하게 직접 구현해보았습니다. 고려 사항 포인터가 시작된 지점과 휠 컨테이너 중앙 지점에 대한 좌표와 역탄젠트 함수를 이용하여 각도를 계산하고 그 각도만큼 항목들을 회전 시켜주어 휠을 구현하였습니다.

React 18 버전이 출시 된 후 Next.js 에서는 app dir 기능이 도입되어 React 의 RSC, RCC 기능을 사용할 수 있게 되었습니다. 이번 포스트에서는 최근 화두인 RSC, RCC 에 대해 한번 정리해보고자 합니다. RSC 란? RSC 란, React Server Component 의 줄임말로 서버에서 렌더링 되는 컴포넌트를 의미합니다. 서버 컴포넌트는 async 함수로 선언하고 내부에서 await 를 사용하여 비동기 데이터를 가져와 이를 렌더링 하는 것이 가능합니다. 즉, 비동기 컴포넌트가 되는 것이죠. 기존 Next.js 에서는 서버에서 데이터를 fetch 해오고 이를 컴포넌트에 전달하기 위해서는 페이지 단위로 페이지의 최상단에서 getServerSideProps 함수를 사용하여 ..

리액트에서 특정 요소에 직접 event listener 를 할당해야 하는 경우에 사용될 수 있는 useAddEventListener 훅을 제공하는 @wisdomstar94/react-add-event-listener 패키지를 소개합니다. 설치 방법 npm i @wisdomstar94/react-add-event-listener https://www.npmjs.com/package/@wisdomstar94/react-add-event-listener @wisdomstar94/react-add-event-listener 본 레포지토리는 js 의 addEventListener 와 관련된 기능을 제공해주는 리액트 훅의 레포지토리 입니다. addEventListener에 콜백함수로 넘긴 함수를 갱신시켜주지 않으면..

✪ 설치 방법 npm i @wisdomstar94/react-calendar https://www.npmjs.com/package/@wisdomstar94/react-calendar ✪ 예제 코드 https://github.com/wisdomstar94/react-calendar/blob/main/src/app/test-date-picker/page.tsx https://github.com/wisdomstar94/react-calendar/blob/main/src/app/test-date-picker-wrapper/page.tsx https://github.com/wisdomstar94/react-calendar 을 로컬에 pull 받아 프로젝트 루트 경로에서 터미널에 "npm run dev" 명령어 입..

electron 으로 앱을 개발해야 할 때, typescript 와 react 를 사용해야 한다면 매번 일일이 환경 설정을 해주는 것이 불편할 것입니다. 그래서 electron + typescript + react 조합으로 이미 셋팅을 해놓은 제 개인 레포지토리를 공유드립니다. 레포지토리 주소 https://github.com/wisdomstar94/electron-sample GitHub - wisdomstar94/electron-sample: 본 레포지토리는 일렉트론 샘플 프로젝트 입니다. 프론트는 리액트 본 레포지토리는 일렉트론 샘플 프로젝트 입니다. 프론트는 리액트를 사용합니다. Contribute to wisdomstar94/electron-sample development by creating..

이번 글에서는 현재 많이 사용되고 있는 리액트(React)의 역사에 대해 알아보고자 합니다. 리액트를 만든 곳 리액트는 메타(구. 페이스북)에서 만들어졌습니다. 리액트가 탄생하게 된 계기 메타(구. 페이스북)의 개발자들은 2010년 이후부터 페이스북 앱의 기능이 점점 더 많아짐에 따라 코드의 복잡도가 높아진 상태였고 어느 시점부터는 너무 높은 코드 복잡도 때문에 도저히 앱을 유지보수 하거나 신규 기능을 반영하기 어려운 수준까지 도달했습니다. 그래서 코드를 보다 더 효율적으로 관리할 수 있도록 해주는 무언가가 필요하였고, 이는 리액트가 탄생하는 계기가 되었습니다. 2010년 : 리액트의 프리퀄인 XHP 등장 리액트의 첫 시작은 2010년 xhp 로 시작되었습니다. https://github.com/face..

안녕하세요. 루루개발자입니다. 이번에는 리액트에서 기본으로 제공해주는 훅 함수 중 하나인 "useEffect" 에 대해 알아보고자 합니다. 아래 예시 코드들은 리액트의 프레임워크인 Next.js 를 기준으로 작성되었으므로 이 점 참고해주세요. useEffect 란? 리액트(react) 공식 문서에 의하면, useEffect 는 외부 시스템과 컴포넌트를 동기화 할 수 있게 해주는 리액트 훅(hook) 이라고 정의 되어 있습니다. 여기서 말하는 외부 시스템이란, 리액트에 의해 제어 되지 않는 것들을 말합니다. 리액트에 의해 제어 되지 않는 예시는 다음과 같습니다. API 통신 ref 를 이용한 dom 제어 window 전역 객체에 이벤트 리스너 할당 또는 해제 이 밖에도 여러가지가 있겠지만, 대체로 이런 상..

안녕하세요. 루루개발자 입니다. 리액트로 프론트엔드 개발을 하다보면 자주 접하는 훅 함수가 있습니다. 바로 "useState" 입니다. useState 란 무엇인가? useState 는 리액트에서 기본으로 제공해주는 훅 함수들 중 하나로, 컴포넌트에 상태 변수를 추가할 수 있도록 해주는 훅 함수입니다. 해당 함수는 2개의 원소를 갖는 배열이 반환되며, 첫번째 원소에는 상태 값이 반환되며 두번째 원소에는 상태 값을 변경할 때 사용되는 setter 함수가 반환되게 됩니다. 그렇기 때문에 보통 아래와 같이 구조 분해 할당을 이용하여 선언하게 됩니다. const [state, setState] = useState(initialState); 상태값 변경시 리렌더링 발생 useState 에서 반환된 배열의 두번째 ..