Finds & Notes

Finds & Notes

Claude Code의 메모리 관리

Claude Code는 세션 간 컨텍스트를 유지하고 사용자의 선호사항을 기억하기 위한 메모리 시스템을 제공합니다.메모리 종류Claude Code에는 두 가지 메모리 종류가 있습니다. 자동 메모리세션 간에 유지되는 개념으로, Claude가 답변하면서 프로젝트 패턴, 주요 명령어, 사용자 선호 내용 등 여러 컨텍스트를 자동으로 저장하고 참고합니다. CLAUDE.md 파일사용자가 직접 작성하는 마크다운 파일로, Claude가 따라야 할 규칙이나 선호사항을 작성합니다.자동 메모리 상세저장되는 내용자동 메모리에는 다음과 같은 내용이 자동으로 저장됩니다.프로젝트 패턴디버깅 인사이트아키텍처 노트사용자 선호사항저장 위치~/.claude/projects//memory/├── MEMORY.md # 간결한 ..

Finds & Notes

Claude가 Notion에 접근할 수 있도록 하기 (feat. MCP 서버)

Claude를 쓰다보니 노션 문서 내용을 Claude에게 입력시킬 경우가 생기는데요.일반적으로 3가지 방식을 떠올릴 수 있을 것 같아요.직접 복사/붙여넣기 하기노션 페이지를 게시(배포)한 후 링크를 Claude에게 입력하기comet 과 같이 웹페이지를 읽을 수 있는 어시스턴트가 탑재된 브라우저 사용하기위 방법들 모두 나름의 단점이 있습니다. 직접 복사/붙여넣기 하기 매번 수동으로 내용을 옮겨야하는 번거로움 노션 페이지를 게시(배포)한 후 링크를 Claude에게 입력하기 민감한 정보를 포함한 문서여서 게시/배포하기 망설여질 수 있음 comet 과 같이 웹페이지를 읽을 수 있는 어시스턴트가 탑재된 브라우저 사용하기 별도의 도구를 설치해야 함 그래서..

Finds & Notes

Brower MCP, 내 브라우저를 자동화 할 수 있도록

만약 Claude 가 내가 보고있는 웹 페이지를 탐색하고, 데이터를 추출할 수 있도록 하고싶다면 어떻게 해야할까요?방법을 알아보겠습니다. Brower MCP 브라우저 확장 프로그램을 설치https://chromewebstore.google.com/detail/browser-mcp-automate-your/bjfgambnhccakkhmkepdoekmckoijdlc?pli=1 Browser MCP - Automate your browser using VS Code, Cursor, Claude, and more - Chrome 웹 스토어The MCP to control your browser. Browser MCP is a Model Context Protocol (MCP) server that allows ..

Finds & Notes

Claude에 로컬 폴더 연결하기: MCP 서버 설정 방법

저는 Claude pro 를 매달 구독해서 사용중인데요.다른 AI 들도 있지만, Claude 에는 프로젝트 기능이 있는데, 프롬프트를 미리 모두 세팅해두고 그때 그때 필요한 프로젝트로 들어가 채팅을 하면 편리해서 자주 사용하게 되더라구요.그리고, Claude 에서 MCP 연결 기능도 제공해주는 것을 확인했습니다. 이번에는 MCP 서버를 연결해서, 제 로컬에 있는 코드를 읽을 수 있는 권한을 설정해서 Claude를 좀 더 용이하게 사용해볼까합니다!어려울 줄 알았는데 파일 하나만 생성하면 되는 일이더라구요.아래에서 설명드리겠습니다.MCP 서버 연결방법준비해야할 것은 Claude 데스크탑 앱과 Node.js 입니다.Node 설치 여부는 아래 명령어로 확인할 수 있습니다.node --version설치 방법에 대..

Finds & Notes

오픈소스 문서 번역 기여 해보기(feat. MDN Web Docs)

오픈소스 기여를 한번도 해본 경험이 없는데 번역하는 것으로 시작해보고 싶어졌다.무엇을 할까 고민하다가 평소에 자주 들어가는 MDN Web Docs 를 목표로 잡았다.파파고와 GPT 그리고 구글링과 함께라면 번역은 두렵지 않으니까..!당장 도전! 참고) 기초적인 Git 을 다룰 줄 안다는 가정하에 작성했다.방법일단 두 개의 레포지터리를 다룰 것이다.https://github.com/mdn/translated-content https://github.com/mdn/content 1. 두 개의 레포지터리를 fork 해온다. Fork 버튼을 누르면 된다. 2. [본인 깃허브 ID]/translated-content 레포지터리와 [본인 깃허브 ID]/content 레포지터리를 둘 다 로컬에 clone 한다.초록..

Finds & Notes

티스토리에 글 작성하면 자동 Github 커밋되게 하기(feat. GitActions)

블로그에 글을 쓰면 자동으로 커밋되는 걸 설정해보고 싶어서 도전하는 포스팅!이러면 좀 더 쓰고 싶은 마음이 들지 않을까 하는.. ;) 사실 원래 쓰던 tistory-readme-stats 서비스 가 있었는데 이제 티스토리에서 open api 서비스를 종료해서 사라져버렸다.아무튼 GitAction 을 활용하는 방법이 있길래 이걸로 해볼까 한다. 차근차근 해보자! RSS 설정먼저 티스토리 블로그 관리 > 블로그로 들어간다 위 처럼 설정해주고 변경사항을 저장한다그리고 [본인 블로그 주소]/rss 주소로 접속해서 잘 나오는지 한번 확인해보기ex: https://dawonny.tistory.com/rss GitAction최신 글 목록 5개를 보여주는 부분을 README에 추가하려고 한다.깃허브에 처음 들어가면 보..

Finds & Notes

Github README 기술 스택 쉽고 예쁘게 꾸미기

오랜만에 깃허브 리드미 꾸미기를 하다가 기술스택 부분을 작성해보고져서 서치를 하던 중 괜찮은 것을 발견해서 공유합니다! 결과물은 위와 같아요. 8가지 정도 추가해봤는데, 예쁜 것 같아요. 위 이미지처럼 기술 스택을 뱃지형태로 만드는 방법이 제일 많이 쓰는 방법인 것 같은데요. 저는 이것 말고, 좀 더 둥글둥글하고 로고가 더 돋보이는 디자인을 원했어요! 마침 편리하게 추가할 수 있는 기능을 제공하는, 레포지터리를 찾을 수 있었는데요. 바로 skill-icons 입니다. 사용법 사용법은 간단합니다. [![My Skills](https://skillicons.dev/icons?i=js,html,css,wasm)](https://skillicons.dev) 위 코드를 Github README 에 복붙하기만 하면..

Finds & Notes

README 작성 꿀팁 / 프로젝트 구조도 트리 만들기(feat. file-tree-generator)

README를 작성하다보면 Architecture 소개 부분에 아래와 같이 폴더 구조도를 넣고싶은 경우가 있다. 구글링 해보니까 쉽게 할 수 있는 VSCode 확장 프로그램이 있길래 소개한다. VSCode Extension 에서 file-tree-generator 를 설치한다 원하는 폴더에서 오른쪽 클릭을 하고 [Generate to Tree] 를 클릭한다 그럼 이렇게 프로젝트 구조도가 보기좋게 만들어져서 나온다. 아이콘은 [icon on] [icon off] 버튼을 통해서 만들수도, 지울수도 있다. 내용을 복사해서 README 작성 란에 추가할 때 위 아래에 백틱을 3개씩 추가하면 완성! ``` (복사한 내용 붙여넣기) ``` 자주 쓸 것 같다!

Finds & Notes

아이폰(모바일)에서 localhost 개발 서버 열기

Vite 으로 생성한 React 프로젝트를 개발 서버에서 실행시킬 때 보통 터미널에서 npm run dev 로 실행하는데 모바일 기기로도 확인할 수 있으면 좋을 것 같아서 방법을 찾아봤다. 맥북과 아이폰을 사용한다는 전제하에 설명해보겠다. 방법 1. 먼저 아이폰과 맥북은 동일한 와이파이에 접속해야한다. 2. 맥북 터미널에서 다음과 같은 명령어를 입력한다 ipconfig getifaddr en0 그러면 IP 주소가 뜨는데, https:// 로 모바일에서 사파리로 접속하면 된다. 하지만 나는 제대로 연결되지 않아서 추가적인 과정을 하나 더 해줘야했다. ref:https://dev.to/bhendi/how-to-open-your-vite-dev-server-on-your-mobile-k1k 3. React 프..

Finds & Notes

ai 로 Flow Chart, 시스템 구조도 그리기 (feat. mermaid.live)

한 프로젝트를 기획하면서, 시스템 설계에 대한 플로우차트(flow chart)나 시스템 구조도를 그릴 일이 많을 것이다. 이 때 ai 를 사용해서 그리는 방법을 소개해보려고한다. 두 가지만 있으면 되는데, chatGPT와 mermaid live 사이트이다. Flow Chart 그리기 먼저, chatGPT에 다음과 같이 프롬프트를 작성한다. 나는 예시로 한 프로젝트의 플로우차트를 그려보려한다. 이 ~~~ 프로젝트에서 학생이 강의실을 대여하고 대여를 취소하며 대여 여부를 확인할 수 있는 시스템을 mermaid.live에서 사용가능한 flowchart 코드로 작성해줘 나는 이 코드를 복사해서 mermaid live 라는 사이트에 들어가 왼쪽 코드를 작성할 수 있는 공간에 붙여넣기를 했다. https://mer..

Finds & Notes

구글서치콘솔 다양한 문제들 해결법

저는 이 티스토리 블로그를 구글 서치 콘솔에 등록해놓았는데요. 각종 관련된 문제들을 해결하면서 어떻게 해결했는지 공유하고자 포스팅을 작성해보려고해요! 적절한 표준 태그가 포함된 대체 페이지 문제 페이지 색인 생성 부분에서 '적절한 표준 태그가 포함된 대체 페이지 - 이러한 페이지는 색인이 생성되지 않거나 Google에 게시되지 않습니다' 라는 문구가 뜨더라구요. 왜 중복된 페이지가 만들어지는건가- 하고 영향을 받은 페이지를 확인해봤어요. 봤더니 다 /m/ 이 붙은 주소더라구요. 티스보리 블로그에 글을 하나 작성하면 '웹' 과 '모바일' 버전이 만들어지게 됩니다. 따라서 링크 주소도 2개가 만들어져요. 구글 서치콘솔은 별도의 설정이 없으면 웹 링크와 모바일 링크 둘중에 하나를 표준으로 설정하고, 하나는 중..

Finds & Notes

무료로 아바타 일러스트 만들기

디자인 관련 포스팅들을 둘러보던 중 재미난 사이트를 발견했다. 링크는 아래와 같다. https://blush.design/collections/0bopA8Y5vn29mdFBU2Br/wavy-buddies-illustrations/character-avatar/nldaiXHq7BWq8PE5?c=Hair_0%7Efecb51-0.0.2.0%7E040226_Skin_0%7Edcad7f-0.0.2.0%7Edcad7f Wavy Buddies - Illustration by Susana Salas Check out this illustration on Blush. blush.design 배경색, 머리색, 피부색, 표정, 머리, 포즈 등을 선택해서 아바타 일러스트를 만들 수 있다. 보니까 아바타 말고도 sitting,..

Finds & Notes

Postman 환경변수 설정하기

개발을 하다보면 매번 주소를 바꿔야해서 귀찮은 경우가 많다. 그래서 환경변수를 만들어보기로 했다. 사용법 오른쪽 위에 눈모양 버튼을 클릭한다. variable 에는 환경변수의 이름, Initial value 와 Current value 에는 환경변수의 값을 써주면된다. 나는 dev 라는 이름의 변수를 만들어 local 에서 개발하기 편하도록 만들고 bookmark 라는 변수에는 실제 서비스 url 을 넣어줬다. 실제로 사용할 때에는 {{변수명}} 처럼 작성하여 사용할 수 있다. ref: https://velog.io/@kkl4846/postman-%ED%8F%AC%EC%8A%A4%ED%8A%B8%EB%A7%A8-%EA%BF%80%ED%8C%81team-workspace-%ED%99%98%EA%B2%BD%..

Finds & Notes

Github README에 이미지/gif 올리기

README에 이미지/gif(움짤)을 올려보자 만약 영상 -> gif 변환을 원하는 사람은 아래 사이트에서 gif 변환을 하고 오면된다. https://cloudconvert.com/mov-to-gif MOV to GIF | CloudConvert Compress Merge Capture Website Create Archive Extract Archive Convert MOV Converter MOV MOV is a video format that is commonly associated with QuickTime. This video extension is developed by Apple. It uses an algorithm to compress video and audio. Although cl..

Finds & Notes

(MacOS) homebrew 로 OpenSesame 설치하기

이번에 언어학과 심리실험이라는 교양을 듣게 되었는데요. 수업에서 쓰는 프로그램인 OpenSesame 를 설치해야 실습을 진행할 수 있더라구요! MacOS에서 OpenSesame 앱을 설치하고, 여는 법에 대해서 포스팅해보려합니다. OpenSesame 란? "OpenSesame"는 실험실 연구자를 위한 무료 오픈 소스 실험 설계 및 데이터 수집 소프트웨어입니다. 이 소프트웨어는 행동 실험, 뇌 영상 실험 및 통제 실험 등 다양한 실험 유형을 지원하며, 실험 설계, 시각적 자극 제시, 반응 및 데이터 수집을위한 사용자 정의 스크립트를 만들 수 있습니다. OpenSesame는 Python 기반으로 작성되었으며, 그래픽 사용자 인터페이스를 통해 쉽게 사용할 수 있습니다. 설치 저는 homebrew 를 이용해서 ..

Finds & Notes

hELLO, highlight.js 적용 및 커스텀(feat. 글쓰기/구독 버튼, 코드블럭 다크모드 등)

안녕하세요!오늘은 티스토리 스킨을 새로 바꿔보고, 바꾸면서 헤맸던 부분을 공유해드리려고해요. hELLO 스킨일단 저는 hELLO 라고 하는 스킨을 적용했습니다.개발자들에게 아주 인기 있는 스킨이라고 하더라구요!정상우 개발자 님이 제작하셨으며, 아래 포스팅에서 다운로드 받을 수 있습니다.https://pronist.tistory.com/5?category=844785 hELLO 티스토리 스킨을 소개합니다.hELLO 스킨은 본래 기능의 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 기pronist.dev 스킨 적용하기관리자 페이지에 들어가서 스킨 변경 > 스킨 등록 을 눌러줍니다.추가..

Finds & Notes

(맥북)선택폴더 위치에서 터미널 바로 열기

맥북으로 바꾸면서 설정할 것들이 이것저것 많아졌는데, 그 중에서도 폴더 현재위치에서 바로 터미널을 여는 단축키가 있으면 좋을 것 같아 설정해보았는데요. 방법을 공유합니다! 설정 방법 먼저 Finder를 열고 상단에 Finder > 서비스 설정을 들어가줍니다. 앱 단축키 메뉴에 들어가서 새로운 단축키를 추가해주기위해 + 를 눌러줍니다. (저는 이미 추가해둬서 이미 만들어져있지만 무시해주세요!) 응용 프로그램은 Finder 로, 메뉴 제목을 작성하고 (저는 '폴더에서 새로운 터미널 열기' 라고 했습니다) 키보드 단축키도 원하는대로 설정해줍니다. (저는 command + O 로 했어요) 작성해준다음 완료 버튼을 누릅니다. 이렇게 추가되어져있으면 일단 완료! 다음 단계로 넘어갑시다. 이번에는 '앱 단축키' 메뉴..

Finds & Notes

노션 복붙시 User cannot read source 오류해결

A계정에 있던 내용을 복사해서 B계정의 페이지에 붙여넣기를 하려고 보니 이런 오류가 떴다. 해결법! 웹에서 공유를 켜주고 '템플릿 복제 허용'을 켜준다. 그리고 아까처럼 다시 A페이지에서 복사, B 계정 페이지에 가서 붙여넣기를 해주면 오류 없이 잘 되는 것을 확인할 수 있다! 저처럼 헤매는 분이 없기를 바라며...😏

Finds & Notes

깃허브 프로필 꾸미기(Feat. Daily Commit)

가끔 다른 사람들 깃허브에 들어가보면 프로필에 저렇게 자기가 커밋을 보통 언제하는지 통계표를 볼 수 있게 되어있다. 이쁘길래 나도 도전! 시험기간에는 뭐든 재밌어 일단 아래 링크에 들어가서 fork 를 한다. https://github.com/techinpark/productive-box GitHub - techinpark/productive-box: Are you an early 🐤 or a night 🦉? Let's check out in gist Are you an early 🐤 or a night 🦉? Let's check out in gist - GitHub - techinpark/productive-box: Are you an early 🐤 or a night 🦉? Let's check out..

Finds & Notes

백준 자동으로 깃허브에 커밋하기(Feat. BaekjoonHub)

구글링하다가 알게된 좋은 익스텐션이 있어서 공유한다. 사실 많은 사람들이 이미 알고 있을 것 같긴하지만... 백준 문제를 풀고 정리하면서 깃허브에 올리는 사람들이 많은 것 같다! 당장 알고리즘 고수 지인들을 보면 백준 문제에 대한 오답노트와 유형/개념들을 깃허브에 정리하는 사람도 있고... 무엇보다 깃허브에 올리면 커밋기록🌱이 남으니까 그걸 보고 뿌듯함을 느낄 수도 있어서 좋은 것같다. 나도 슬슬 백준을 시작해야하지 않을까... 하는 욕심이 들던 와중에 신기하고 좋은 익스텐션을 발견했다. 백준 문제를 풀고 제출하면 자동으로 깃허브에 커밋해주는 크롬 확장 프로그램!! 이름은 BaekjoonHub 이다. 한번 소개해볼까 한다. 이 익스텐션은 아래 링크에서 설치가 가능하다 https://chrome.googl..

Finds & Notes

스터디 약속 잡을 때 쓰면 좋은 사이트 모음

1. 보통 많이 쓰는 When2meet 모바일에서는 조금 불편하지만, pc 에서 쓸 때 제일 많이 쓰는 사이트 https://www.when2meet.com/ When2meet www.when2meet.com 2. 그리고 모바일에서 좀 더 쓰기 편한 lettucemeet 다른 분 소개로 봤는데 뭔가 편해보인다. 아직 써보지 않았지만 다음에는 이걸로 도전해볼예정. https://lettucemeet.com/ LettuceMeet - Easy Group Scheduling The easiest way to schedule group meetings. lettucemeet.com 이 후에 좋은 거 알게 되면 업데이트 하겠음!

wonny_dev
'Finds & Notes' 카테고리의 글 목록

...