전체 글88 웹) 서브컬처 게임 명조에 대한 사이트를 만들다. 목차 왜 만들게 되었나?요즘 즐겨하는 게임인 명조라는 게임에서 특정한 불편함이 발견되었는데 그 불편함을 해결할 수 있을꺼 같아서 개발하게되었다.바이브코딩과 내 개인 개발지식을 합쳐서 만들었고 프론트엔드 개발자이지만 백엔드도 공부하는 경험과 실제 사이트 운영의 기회를 둘다 잡을 수 있는 좋은 기회라고 생각하여 개발을 진행해보려고한다. 하면서 시간이난다면 간간히 해당 프로젝트에대한 내용도 적지 않을까싶다 사이트 링크https://www.wuwa-helper.com/ WuWa Helper - 워더링 웨이브 프로필 카드 메이커내 캐릭터/무기 보유 현황을 이미지로 만들어 어디서나 공유하세요.www.wuwa-helper.com 2026. 3. 3. (기록용)바이브코딩 동일한 결과를 내기위한 연구(cursor, claude) 목차 시작하게 된 계기내가 지금 다니고 있는 회사는 SI로써 다양한 도메인을 이용한 프로젝트를 만들게된다 그러다보니 유틸들도 많이 만들게되는데 이게 각 프로젝트마다 다르다보니 같은 질문을하더라도 다른 결과를 내는 경우가 있는데 cursor와 claude를 번갈아가면서 쓰다보니 서로 다른 결과를 뽑는 경우도 있엇다. 그 부분을 해결하고자 하였다. .claude, .cursor를 활용하자https://code.claude.com/docs/en/memory#organize-rules-with-claude%2Frules%2F How Claude remembers your project - Claude Code DocsGive Claude persistent instructions with CLAUDE.md .. 2026. 3. 2. (기록용) 크롬 익스텐션에서 각 무슨역할들을 할수 있을까? - 1 - (background, content, popup) 목차 익스텐션의 많은 기능들크롬 익스텐션은 우리가 아는 웹사이트와 개발이 조금 다르다. 익스텐션은 브라우저 자체에 기능을 추가하는 거다보니, 여러 상황에서 다르게 동작을해야하기 때문이다크롬 익스텐션의 주요 구성요소:├── Background # 브라우저 백그라운드에서 조용히 실행├── Content Script # 웹페이지 위에 내용을 추가├── Popup # 익스텐션 아이콘 클릭 시 나타나는 창├── Options # 설정 페이지├── Dashboard # 큰 화면에서 작업하는 페이지├── New Tab # 새 탭을 열 때 보이는 페이지└── DevTools # 개발자 도구에 추가하는 패널 Background Script (백그라운드 스크립트) 무슨 일을 하는가?**뇌**의 역할을 수행한다. .. 2026. 2. 26. (기록용)chrome 익스텐션 개발전 개발세팅하기(준비단계) 왜 익스텐션을 개발하려고 하는가?처음엔 프론트엔드 개발자로써 웹을 개발하려고 했었다. 근데 알아보던중에 익스텐션을통해서도 재밌고 다양한걸 만들어볼수 있을꺼같아서 익스텐션을 개발하는 과정들을 기록을 남기려고한다 라이브러리 선택익스텐션은 html, css, js 기반이기때문에 프론트엔드에서 접근하기는 좋았다. 하지만 바로 예제에 진입하는 코드들은 순수하게 html, css, js를 활용하기때문에 프레임워크 (vite, next)를 하는 사람으로써 일부 제약사항이 존재하였다. 그렇기에 github에서 라이브러리 서칭을 하였는데 아래와같이 star수가 무려 1천정도가 되는 보일러플레이트가 있는것을 발견하게 되었다. 그래서 해당 기반으로 개발하기로 하였다 https://github.com/JohnBra/vite.. 2026. 2. 24. [Next, vitest] Next.js에 vitest 적용해보기(기록용) 목차 개요next.js를 통해 개발을 하던 중 vitest를 사용해 테스팅을 해보고싶었다 그래서 처음부터 설정까지를 다시 복기하려고한다. 사용 버전nextjs : 15.0.3react : "^18" 설치https://nextjs.org/docs/app/building-your-application/testing/vitest Testing: Vitest | Next.jsLearn how to set up Vitest with Next.js for Unit Testing.nextjs.orgnext.js 15버전을 통해 개발할거기때문에 버전에맞는 공식문서에서 vitest를 어떻게 사용하라하는지 문서를 확인하였다. vitest.config.mts 파일 제작공식문서에선 해당 파일을 root에 만들라고한다.. 2024. 12. 4. [fork, nvm] fork와 환경변수충돌(?) 기록용 목차 개요개발을하면서 커밋을하고 fork앱에서 push를 할 때 생긴 일이 있는데 husky의 pre-push 를 할때 아래와 같이 파일을 세팅하였는데pnpm이 없다라고하는 일이 일어났었다.pnpm lintpnpm tsc husky 이슈를 찾아보기https://github.com/fork-dev/Tracker/issues/311 Pre-commit hook can't find node · Issue #311 · fork-dev/TrackerHey there, I'm using husky to run a pre-commit hook on my repo, and everything runs correctly in my terminal when I run git commit -m "some messa.. 2024. 12. 2. [npm] npm 회원가입 목차https://www.npmjs.com/ npm | HomeBring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Javawww.npmjs.com 회원가입 하기https://www.npmjs.com/signup npm | Sign Up www.npmjs.com회원가입 폼에서 등록한 이메일로 온 password입.. 2024. 12. 1. [turbo, tailwind] TurboRepo에 HeadlessUI를 사용해보기(기록용) 목차 서론여러 프로젝트를 개발하다보면 여러 디자인들이 필요한 경우가 많다. MUI나 Antd, BootStrap 등 그 디자인을 이쁘게 맞춰주는 프레임워크, 라이브러리 들이 있지만 한계치는 존재한다. 그래서 그 부분을 해결할 라이브러리를 찾던중 tailwindlabs에서 만든 headlessui라는 라이브러리를 찾게 되었다. HeadlessUI?https://github.com/tailwindlabs/headlessui GitHub - tailwindlabs/headlessui: Completely unstyled, fully accessible UI components, designed to integrate beautifully with TaCompletely unstyled, fully acce.. 2024. 12. 1. [TS]@types 목차 @types란타입스크립트 프로젝트에서 외부 라이브러리의 타입 정보를 제공하기 위해 사용되는 타입 정의 패키지의 표준 네임스페이스.타입스크립트는 타입 정보를 포함하지 않는 일반 자바스크립트 라이브러리로도 사용할 수 있는데, 이 때 타입 정보를 @types 패키지로 별도로 제공하여 타입 안정성을 유지할 수 있게 해준다. @types의 역할과 사용 방식 1. 타입 정의 제공@types 패키지는 DefinitelyTyped라는 오픈 소스 프로젝트를 통해 관리되며, 타입스크립트 커뮤니티가 유지 보수한다.@types 네임스페이스 하위에는 유명한 자바스크립트 라이브러리들의 타입 정의 파일들이 들어 있으며, 라이브러리명과 동일한 이름을 가진다.예를 들어, lodash라는 자바스크립트 라이브러리를 타입스크립트에서.. 2024. 11. 2. 엠비언트 타입(Ambient Type)(.d.ts) 목차 엠비언트 타입이란?코드 외부에서 정의된 객체, 라이브러리, 전역 변수 등의 타입을 명시하기 위해 사용주로 타입 정의 파일(.d.ts)로 제공되며, 외부 모듈이나 브라우저 API 같은 것을 사용할 때 타입을 명확히 하기 위해 사용함. 이 방식으로 타입스크립트 코드가 특정 환경의 정의를 알 수 있도록 돕고, 타입 안정성을 유지할 수 있게 한다..d.ts 확장자를 가진 파일에서는 타입 선언만 할 수 있으며 값을 표현할 수는 없다. 엠비언트 타입의 주요 사용 사례외부 라이브러리 정의 : @types 패키지를 통해 사용되는 외부 라이브러리의 타입을 정의한다.전역 객체 정의 : 프로젝트에서 정의한 전역 변수, 함수, 객체의 타입을 명시할 때 활용 한다.모듈 보강 : 외부 모듈에 새로 추가된 API나 보강할 .. 2024. 11. 2. 이전 1 2 3 4 ··· 9 다음
