ngrok 사용법(localhost 무료 외부 호스팅하기)
·
개발메모/기타
📌 개요가끔 외부에서 내 로컬 서버에 접근해야 할 때가 있습니다.예를 들어, Slack, Kakao, Naver, OpenAI 같은 서비스에 Webhook을 등록할 때,내 컴퓨터에서 실행 중인 서버를 외부에서 접근 가능하도록 만들어야 합니다. 이럴 때 유용한 도구가 바로 ngrok입니다.이번 글에서는 ngrok의 설치부터 실행, 주의할 점까지 빠르게 정리해보겠습니다.⚙️ ngrok 사용법1. ngrok 설치공식 사이트 접속: https://dashboard.ngrok.com/get-started/setup/windowsOS에 맞는 ngrok 다운로드 및 압축 해제ngrok.exe 실행계정 생성 및 로그인 후 Dashboard > Your Authtoken으로 이동 및 복사 ngrok 기본 config ..
IntelliJ + Claude 연동하기(feat. MCP, node.js)
·
개발메모/기타
🧭 개요최근 다양한 AI 도구들이 개발자 워크플로우에 통합되며 개발 생산성을 크게 끌어올리고 있습니다. 특히 Anthropic의 Claude Desktop App은 강력한 코드 이해 및 수정 기능을 제공하며, JetBrains의 MCP(Model Context Protocol) 지원을 통해 IntelliJ와의 자연스러운 연동도 가능해졌습니다.이 글에서는 IntelliJ와 Claude Desktop App을 MCP로 연동하여, 실제 프로젝트를 분석하고 특정 메서드에 로깅을 추가하는 과정을 소개합니다. 간단한 설정만으로도 Claude에게 IntelliJ 내 코드에 대해 직접 명령을 내릴 수 있으니, 흥미로운 개발 도구 자동화에 관심 있는 분이라면 꼭 한번 시도해보시기 바랍니다. 준비물node.jsClaud..
Docker PHP7.4 + CodeIgniter4 개발환경 설정(Docker image 사용)
·
개발메모/기타
개요 Docker image를 사용한 PHP7.4 + CodeIgniter4 개발환경 설정 사전 준비 Docker 설치 필요 - https://hahahoho5915.tistory.com/48 * windows에서 개발환경 구성하는 경우 - WSL2 + docker 개발환경 구성 내용 1. CodeIgniter4 개발을 위한 Docker 이미지 빌드이미지 아래 구조를 만들기 // 1. 원하는 경로에 codeigniter 디렉토리 생성 //ex) c:\codeigniter // 2. https://github.com/atsanna/codeigniter4-docker //해당 github repository 소스 다운로드(zip) // 3. 압축파일 C:\codeigniter에 압축 해제 codeignite..
windows, WSL2 + docker 개발환경 구성
·
개발메모/기타
개요 windows os에서 WSL2 + docker를 이용한 개발환경 구성 내용 1. WSL2 설정 a. Mircrosoft Store에서 "ubuntu20.04.4 LTS" 설치 b. C:\Users\사용자명 경로에 '.wslconfig' 파일을 생성하고 아래 내용 작성 ※ 해당 파일을 추가하는 이유는 윈도우에서 WSL2를 사용한 docker를 사용할 경우 컴퓨터의 메모리를 한도없이 가져다 사용하기 때문에 아래 파일을 추가하여 사용량 제한 - C:\Users\사용자명\.wslconfig 파일 내용 [wsl2] memory=4GB swap=2GB 2. Windows Terminal 설치 - 윈도우 기본설치되어있는 PowerShell로도 wsl을 사용할 수 있지만, 편의성을 위해 Windows Termi..
웹 개발할 때 유용한 확장프로그램 추천
·
개발메모/기타
개요 개인적으로 웹 개발할 때 유용한 크롬(chrom) 브라우저 확장 프로그램 소개 메모 1. JsonVue json 형식의 데이터를 가독성있게 변환 2. EditThisCookie cookie 데이터 조회, 수정, 삭제 3. vParam 현재 페이지 파라미터 조회, 수정, 삭제 4. Google 번역 페이지 내 언어 번역 내용 1. JsonVue ★★★★★ - 링크 : json 형식의 데이터를 가독성있게 볼 수 있도록 해주는 크롬 확장 프로그램 예시) 특정 페이지 json 데이터 동일한 페이지 json 데이터 JsonVue 적용 모습 실무를 하다보면, 많은 API를 사용하게 되고 많은 API들이 response를 json 형식으로 제공하곤 합니다. JsonVue 확장프로그램을 통해 json 형식 데이터..
<메모> 크로스 브라우징(Cross Browsing)이 뭐야?
·
개발메모/기타
개요 > 첫 회사에 입사 후 쇼핑몰 웹사이트 개발 과제 진행 중, 크로스 브라우징 관련 문제 발생 내용 IE 하위버전에서 무너지는 웹사이트 웹개발을 하며, 크롬 브라우저에 너무 익숙해져있다... (개발자도구가 IE에 비해 쓰기 좋다) 이런 익숙함 때문인지, 학부시절 부터 항상 결과물의 테스트를 크롬에서 치우쳐 하는 경우가 많았고 이러한 습관으로 인한 큰 문제점을 입사하여 알게됐다. 입사 후 수습기간동안 진행했던 쇼핑몰 프로젝트 관련하여, 기능과 뷰가 어느 정도 꾸며졌을때쯤 당시 사수에게 프로젝트 중간점검(?)을 받았었다. 당시 사수는 어떤 툴을 이용하여 동일한 페이지에 대해 다양한 브라우저 선택 및 브라우저 버전별로 메인 페이지 부터 확인을 해줬다. 해당 중간점검은 내가 만든 기능을 확인할 틈도 없이 끝..