수면 속으로

다크홀드

아파트~ 아파트~

입장이오

티스토리 스킨 개발 편의를 제공하는 torytis 의 dev server 에 핫리로드 기능이 업데이트 되어 이를 소개 드리기 위해 이렇게 글을 작성하게 되었습니다. 업데이트 전torytis 를 사용해 만든 개발 결과물을 확인해보려면 아래 명령어를 실행해야 합니다.npm run dev 만약 소스코드 내용에 변경이 생겼을 경우 dev server 를 종료하고 다시 위 명령어를 입력해야 했습니다. 수정이 빈번하게 일어나고 결과를 매번 확인해야 하는 상황에선 이 과정이 불편하게 느껴질 수 있던 부분 이었습니다. 업데이트 후torytis 최신 버전에서는 이러한 부분을 개선하였습니다. npm run dev 를 이용해 dev server 를 실행하면 이제는 소스코드 내용에 변경이 생겼다면 자동으로 빌드가 다시 진행되..

마음의 힘

torytis 프레임워크를 개발한지 약 1년이 지나서야 torytis 가이드 문서 웹사이트를 배포하게 되었네요. 기존 torytis 레포지토리의 README.md 에 작성했던 내용들의 대부분은 가이드 문서 웹 사이트로 옮겼고, 가이드 문서 웹 사이트는 github pages 로 배포한 상태입니다. 아래는 torytis 가이드 문서 주소 입니다. https://wisdomstar94.github.io/torytis torytis - hometorytis torytis 는 티스토리 스킨 개발의 편의성을 높여주는 rust 로 만들어진 프레임워크 입니다.wisdomstar94.github.io torytis 를 사용함에 있어서 궁금하신 분들이 있으시다면 본 글의 댓글이나 torytis 레포지토리의 issues ..

정적 웹사이트 호스팅을 무료로 할 수 있는 방법에 대해 알아보다가 github pages 라는 서비스를 알게 되어 이를 알아보고 적용한 과정을 정리해서 공유드립니다. branch 를 대상으로 설정하는 방법도 있지만, 본 글에서는 github action 과 tag 를 이용한 방법으로 공유 드리고자 합니다. github action yml 파일 작성.github/workflows/github-page-ci-cd.yml 파일을 생성 후 내용을 아래와 같이 작성해줍니다.name: github-page-ci-cdon: push: tags: # 레포지토리에 아래 패턴과 일치하는 태그가 생성될 때 아래 jobs 들이 진행됩니다. # 아래 예시같은 경우 레포지토리에 github-page-..

Tistory Cyworld Minihompi UI Skin 개발예전 싸이월드 미니홈피의 UI 를 비슷하게 구현해본 스킨입니다. 이번이 3번째 스킨 개발이네요. 싸이월드 미니홈피를 스킨 개발 대상으로 고른 이유는?다들 예전에 싸이월드 미니홈피를 많이 이용하셨을 거라 생각됩니다. 하지만 예전에 기억하고 있던 그 미니홈피의 모습으로는 이제 운영되지 않는 걸로 알고 있어서, 예전 미니홈피의 모습대로 유사하게 티스토리 블로그 스킨을 만들면 이것 역시 재밌을 것 같아 스킨 개발을 진행해보게 되었습니다. 스킨 특징자체 개발한 [@wisdomstar94/torytis](https://github.com/wisdomstar94/torytis) 프레임워크를 사용하여 개발되었습니다.개발시 scss 와 [TailwindCS..

Tistory Discord UI Skin 개발Discord 느낌을 최대한 살리면서 개발한 티스토리 스킨입니다. Stroke 스킨에 이어 이번이 두번째로 만든 티스토리 스킨이네요. 왜 스킨 개발 대상으로 디스코드를 골랐나?제가 예전에 세븐나이츠 라는 모바일 게임을 엄청 즐겨 했었는데, 아쉽게도 최근에 서비스 종료를 하게되었습니다. 그런데 세븐나이츠가 세븐나이츠:리버스 라는 이름으로 리메이크 되고 있다는 소식을 접했고 해당 커뮤니티가 디스코드로 운영되고 있었습니다. 디스코드 UI 를 보고 나니 이걸 티스토리 스킨으로 만들면 재밌을 것 같단 생각에 스킨 개발을 시작하게 되었습니다. 스킨 특징이전에 공개했던 Stroke 스킨의 특징과 크게 유사합니다. 한가지 차이점이라고 한다면 Stroke 는 현재 화면 사이..

회사 내에서 운영되는 여러 프로젝트에서 공통으로 사용되는 패키지 같은 경우는 별도 저장소에 배포하여 각각의 프로젝트들이 해당 저장소에서 패키지를 내려 받아 사용하게 하는 것이 좋을 수가 있습니다. 직접 저장소를 구축할 때 여러 방법이 있겠지만, 여기서는 Nexus 를 이용하여 저장소를 구축 및 환경 설정 하는 방법에 대해 공유 드리고자 합니다. Nexus 도커 이미지 빌드 및 컨테이너 실행Nexus 를 직접 서버에 설치하고 환경 설정을 해주는 방법도 있겠지만, 여기서는 도커 이미지를 활용하는 방법을 공유드리겠습니다. 1) https://github.com/sonatype/docker-nexus3/blob/main/Dockerfile위 Dockerfile 을 다운로드 받습니다.2) 터미널을 실행 후, 위 ..

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