반응형
- 계기판 차트 만들어보기루루개발자d3 라이브러리를 활용해서 계기판 차트를 한번 만들어보았습니다. 계기판 차트 시연 영상 개발 코드 https://github.com/wisdomstar94/d3-custom-librarys/blob/main/src/app/instrument-panel/page.tsx 계기판 차트 구현 코드는 위 URL 에서 확인해보실 수 있습니다. 완성 이미지 value : 현재 값 minimum : 최소 값 maximum : 최대 값 unitCount : 계기판을 이루는 요소들의 총 갯수 unitAngle : 계기판을 이루는 요소들이 차지하는 원주율 값 strokeWidthAngle : 계기판을 이루는 요소들의 총 길이가 차지하는 원주율 값 strokeWeight : 계기판을 이루는 요소들의 두께 값 cornerRad..
- 2023-12-17 14:53:17
- React 의 RSC, RCC 에 대하여 (with Next.js)루루개발자React 18 버전이 출시 된 후 Next.js 에서는 app dir 기능이 도입되어 React 의 RSC, RCC 기능을 사용할 수 있게 되었습니다. 이번 포스트에서는 최근 화두인 RSC, RCC 에 대해 한번 정리해보고자 합니다. RSC 란? RSC 란, React Server Component 의 줄임말로 서버에서 렌더링 되는 컴포넌트를 의미합니다. 서버 컴포넌트는 async 함수로 선언하고 내부에서 await 를 사용하여 비동기 데이터를 가져와 이를 렌더링 하는 것이 가능합니다. 즉, 비동기 컴포넌트가 되는 것이죠. 기존 Next.js 에서는 서버에서 데이터를 fetch 해오고 이를 컴포넌트에 전달하기 위해서는 페이지 단위로 페이지의 최상단에서 getServerSideProps 함수를 사용하여 ..
- 2023-10-18 23:25:36
- Next.js 에서 종속성 패키지에 browserslist 적용하는 방법루루개발자프론트 개발을 하다보면 일부 예전 버전의 브라우저들을 지원해야 하는 경우가 있습니다. Next.js 에서도 이와 관련된 기능을 제공하고 있습니다. package.json 에 browserslist 작성 package.json 에 아래와 같이 browserslist 를 작성합니다. { ... "browserslist": [ "chrome 64" ] ... } chrome 64 는 예시이며 지원하고 싶은 브라우저 범위에 맞게 수정하시면 됩니다. browserslist 에 대한 자세한 내용은 여기를 참고해주세요. 위와 같이 작성하면 Next.js 에서는 빌드 시 해당 브라우저 버전의 범위에 맞춰 코드를 트랜스파일링 합니다. 하지만 여기까지만 작성하면 next.js 자체는 package.json 의 browse..
- 2023-10-18 00:14:54
- Next.js 가 실행될 때 한번만 특정 로직을 실행하는 방법루루개발자Next.js 를 실행할 때 마다 최초 한번 특정 로직을 실행해야 하는 경우가 있었습니다. 구동할 때 마다 최초 한번이라는 말은 즉, 코드가 수정되어 git merge 된 이유를 포함한 여러가지 이유로 인해 애플리케이션을 재기동 할 때를 말합니다. 해당 부분을 Next.js 에서 처리하는게 가능할까? 라는 생각과 함께 Next.js 문서를 읽어보던 도중에 Next.js 에서 제공하는 기능 중 하나인 Instrumentation 을 발견하였습니다. Instrumentation 이 무엇인가? Next.js 레포지토리의 루트 경로 또는 src 폴더 사용시에는 src 경로에 instrumentation.ts 라는 파일을 생성 후 이 파일 안에서 register 라는 함수를 export 해놓으면 Next.js 가..
- 2023-10-17 21:02:11
- [react-add-event-listener] 리액트용 addEventListener 훅루루개발자리액트에서 특정 요소에 직접 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에 콜백함수로 넘긴 함수를 갱신시켜주지 않으면..
- 2023-10-16 21:48:23
- 안드로이드 기기 브라우저(or 웹뷰)의 console log 를 PC 에서 확인하는 방법루루개발자안드로이드 기기에 있는 브라우저 또는 웹뷰에 띄워놓은 웹사이트의 console log 를 확인해야 할 때 이를 PC 에서 확인할 수 있는 방법이 있습니다. 본 포스팅 글에서는 이 방법을 Mac OS 기준으로 설명하겠습니다. adb 설치 먼저 pc 에 adb 를 설치해야 합니다. (이미 설치가 되어 있으신 분들은 본 과정은 생략하시면 됩니다.) 아래 명령어를 이용해 설치를 진행합니다. brew install cask brew install android-platform-tools --cask 그리고 아래 명령어를 통해 설치 여부를 확인합니다. adb version 안드로이드 기기 개발자 옵션 활성화 안드로이드 기기의 개발자 옵션을 활성화해야 합니다. (이미 개발자 옵션이 활성화 되어 있는 분들은 본 과정은..
- 2023-10-16 20:48:45
- [torytis] 티스토리 스킨 개발 프레임워크루루개발자torytis 란?torytis 는 티스토리 블로그 스킨을 개발할 때 여러가지 기능을 제공해주는 프레임워크 입니다. 처음에는 Next.js 만을 사용해서 티스토리 스킨을 위한 파일들을 빌드하는 것을 시도해보았으나 여러가지 이슈로 인해 직접 티스토리 스킨 개발용 프레임워크를 개발하게 되었습니다. Next.js 를 이용해 티스토리 스킨 개발을 시도 했을 때 여러가지 문제점next.js 동작을 위한 여러개의 script 파일 필요next.js 로 개발한 내용들을 static 으로 빌드하게 되면 next.js 동작에 필요한 여러가지 script 파일 들이 생성됩니다. 티스토리 스킨은 어차피 하나의 html 파일을 모든 페이지에서 동일하게 사용하기 때문에 굳이 script 가 분리 될 필요는 없었습니다. 그래서 ..
- 2023-10-06 00:00:15
- 티스토리 Stroke 스킨 v1.0.0 출시루루개발자stroke v1 출시지난번에 공개했던 Stroke 스킨의 v1 을 출시하였습니다.v0 에서 v1 으로 업그레이드 될 때 아래와 같은 점들이 변경 및 개선되었습니다.torytis 라는 자체 개발 툴을 사용하여 티스토리 스킨 개발을 위한 프로젝트에 모듈화를 적용하여 유지보수가 더 수월해졌습니다. (해당 툴도 별도로 소개하는 글을 작성할 예정입니다.)스타일에 Tailwindcss 를 적용하였습니다.html 을 작성하는 데에 React 를 사용하였습니다.다크모드 기능을 추가하였습니다. 스킨 다운로드 및 적용 방법1. 스킨 파일 다운로드아래 github 링크에 접속하신 후, Assets 부분에 있는 stroke_v{버전명}.zip 파일을 다운로드 받으세요.https://github.com/wisdomstar94..
- 2023-10-03 22:31:12
반응형
스킨 업데이트 안내
현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)