- [ 내가 만든 패키지 ][react-add-event-listener] 리액트용 addEventListener 훅2023-10-16 21:48:23리액트에서 특정 요소에 직접 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에 콜백함수로 넘긴 함수를 갱신시켜주지 않으면..
- [ IT 기타 ]안드로이드 기기 브라우저(or 웹뷰)의 console log 를 PC 에서 확인하는 방법2023-10-16 20:48:45안드로이드 기기에 있는 브라우저 또는 웹뷰에 띄워놓은 웹사이트의 console log 를 확인해야 할 때 이를 PC 에서 확인할 수 있는 방법이 있습니다. 본 포스팅 글에서는 이 방법을 Mac OS 기준으로 설명하겠습니다. adb 설치 먼저 pc 에 adb 를 설치해야 합니다. (이미 설치가 되어 있으신 분들은 본 과정은 생략하시면 됩니다.) 아래 명령어를 이용해 설치를 진행합니다. brew install cask brew install android-platform-tools --cask 그리고 아래 명령어를 통해 설치 여부를 확인합니다. adb version 안드로이드 기기 개발자 옵션 활성화 안드로이드 기기의 개발자 옵션을 활성화해야 합니다. (이미 개발자 옵션이 활성화 되어 있는 분들은 본 과정은..
- [ 내가 만든 패키지 ][torytis] 티스토리 스킨 개발 프레임워크2023-10-06 00:00:15torytis 란? torytis 는 티스토리 블로그 스킨을 개발할 때 여러가지 기능을 제공해주는 프레임워크 입니다. 처음에는 Next.js 만을 사용해서 티스토리 스킨을 위한 파일들을 빌드하는 것을 시도해보았으나 여러가지 이슈로 인해 직접 티스토리 스킨 개발용 프레임워크를 개발하게 되었습니다. Next.js 를 이용해 티스토리 스킨 개발을 시도 했을 때 여러가지 문제점 next.js 동작을 위한 여러개의 script 파일 필요 next.js 로 개발한 내용들을 static 으로 빌드하게 되면 next.js 동작에 필요한 여러가지 script 파일 들이 생성됩니다. 티스토리 스킨은 어차피 하나의 html 파일을 모든 페이지에서 동일하게 사용하기 때문에 굳이 script 가 분리 될 필요는 없었습니다. 그..
- [ 티스토리 스킨 개발 ]티스토리 Stroke 스킨 v1.0.0 출시2023-10-03 22:31:12stroke v1 출시지난번에 공개했던 Stroke 스킨의 v1 을 출시하였습니다.v0 에서 v1 으로 업그레이드 될 때 아래와 같은 점들이 변경 및 개선되었습니다.torytis 라는 자체 개발 툴을 사용하여 티스토리 스킨 개발을 위한 프로젝트에 모듈화를 적용하여 유지보수가 더 수월해졌습니다. (해당 툴도 별도로 소개하는 글을 작성할 예정입니다.)스타일에 Tailwindcss 를 적용하였습니다.html 을 작성하는 데에 React 를 사용하였습니다.다크모드 기능을 추가하였습니다. 스킨 다운로드 및 적용 방법1. 스킨 파일 다운로드아래 github 링크에 접속하신 후, Assets 부분에 있는 stroke_v{버전명}.zip 파일을 다운로드 받으세요.https://github.com/wisdomstar94..
- [ 내가 만든 CSS ][ CSS loading icon ] Windows 로딩 아이콘2023-09-20 22:05:36Windows 에서 종종 봐왔던 로딩 애니메이션을 css 로 한번 비슷하게 만들어보았습니다. 위 GIF 이미지는 속도가 좀 느려 보이는데, 실제 적용하면 저것 보단 빠르게 동작합니다. ㅎㅎ; 아래 html 과 css 코드를 공유합니다. html css .loading-icon { /* variables */ --main-size: 40px; --item-color: #000000; width: var(--main-size); height: var(--main-size); display: inline-block; position: relative; } .loading-icon > div { width: 100%; height: 100%; position: relative; display: flex; jus..
- [ IT 기타 ]npm 에 내가 만든 패키지 배포하기 (feat. github action 으로 배포 자동화)2023-09-15 20:26:23개발을 하다 보면 자주 사용되는 것들은 패키지화 하여 필요할 때 불러와 사용하곤 합니다. 저번 포스팅에선 github 에 패키지를 배포하는 과정에 대해 공유드렸었는데, 이번에는 github action 을 이용하여 npm 에 배포하는 방법에 대해 공유드리고자 합니다. ✻ 필요 패키지 설치 배포하고자 하는 패키지의 레포지토리의 루트 경로에서 아래 명령어를 통해 빌드시 필요한 패키지들을 설치합니다. npm i -D esbuild esbuild-css-modules-plugin 이 외에도 레포지토리에서 필요로 하는 패키지들은 모두 devDependencies 로 설치하거나 옮기실 것을 권장합니다. 나중에 esbuild 로 번들링 할 때 필요 패키지들은 같이 묶여서 번들링 될 것이기 때문입니다. ✻ packag..
- [ Node.js & Javascript & Typescript ]nvm 으로 node.js 버전 관리하기2023-09-14 23:09:10◼️ nvm 이란? nvm 은 node version manager 의 약자로 다양한 버전의 node.js 를 설치하고 관리하는 기능을 제공합니다. ◼️ nvm 을 사용하는 이유 하나의 pc 에서 각기 다른 node.js 버전을 사용하는 프로젝트들을 관리해야 할 때 node.js 버전을 간편히 바꾸기 위해 nvm을 사용합니다. ◼️ 설치 방법 ﹆ M1 Mac 1) 아래 명령어로 ~/.nvm 폴더를 생성합니다. mkdir ~/.nvm 2) ~/.zshrc 파일을 열고, 아래 내용을 작성후 저장합니다. export NVM_DIR="$HOME/.nvm" [ -s "$HOMEBREW_PREFIX/opt/nvm/nvm.sh" ] && \. "$HOMEBREW_PREFIX/opt/nvm/nvm.sh" # This ..
- [ 내가 만든 패키지 ][react-calendar] DatePicker 찾으시나요?2023-09-09 21:43:37✪ 설치 방법 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" 명령어 입..