뉴발자의 성장통

전체 글233

[React] 웹 사이트에서 메일 전달받기 (feat. EmailJS) 개요프로젝트 진행 중 사용자의 문의를 개인 메일로 전달받는 기능 구현이 필요했다. javascriptAPI를 사용해 바로 메일을 전송하는 EmailJS를 채택하게 되면서 구현 방법을 정리해보았다. 요금EmailJS는 월 200건의 무료 메일 서비스를 제공한다. 만약 월 200건 이상의 메일 전송 서비스가 필요하다면 월 또는 연 결제로 더 많은 양의 서비스를 이용할 수 있다. 회원 가입https://dashboard.emailjs.com/sign-up Send email from Javascript - no server code required | EmailJSSend email directly from your client-side Javascript code – no server side code .. 🖥️ Frontend/React 2026. 7. 28.

[React] Electron 사용하기 (feat. Vite) Electron 이란? 웹 기술(HTML, CSS, JS)을 사용해서 데스크톱 애플리케이션을 만들 수 있게 해주는 오픈소스 프레임워크이다. Electron은 Chromium(크롬 브라우저의 오픈소스 버전, 화면 렌더링 시 사용)과 Node.js(OS 레벨의 작업 수행)를 결합하여 동작한다. Electron을 사용하면 모든 OS(Windows, macOS, Linux)에서 실행 가능한 Cross-Platform 앱을 만들 수 있다. 또한 기존 웹 프레임워크(React, Vue, Angular)를 그대로 사용할 수 있고 라이브러리(npm)도 활용이 가능하다. 하지만 일반적인 네이티브 앱보다 메모리 및 리소스를 많이 차지하고 기본 엔진때문에 설치 파일 용량이 크다는 단점이 있다. Electron을 사용하여 만.. 🖥️ Frontend/React 2026. 3. 20.

[MSSQL] 테이블을 다시 만들어야 하는 변경 내용 저장 사용 안 함 개요 테이블의 키값에 auto increment 옵션을 추가하려고 했지만 테이블에 삽입된 데이터가 있어서 변경되지 않았다. 오류변경 내용을 저장할 수 없습니다. 변경 내용을 적용하려면 다음 테이블을 삭제하고 다시 만들어야 합니다. 다시 만들 수 없는 테이블을 변경했거나 [테이블을 다시 만들어야 하는 변경 내용 저장 사용 안 함] 옵션을 설정했습니다. 해결위 경고 메시지에 적혀있는 것처럼 [테이블을 다시 만들어야 하는 변경 내용 저장 사용 안 함] 옵션을 해지해주면 된다. 상단 메뉴의 [도구 👉🏻 옵션 👉🏻 디자이너 👉🏻 테이블 및 데이터베이스 디자이너] 탭으로 들어가 해당 옵션을 해지해준다. 🛢️ DataBase/RDBMS 2026. 3. 13.

[Claude Code] Subagent 사용하기 Subagent란?특정 유형의 작업을 처리하는 특화된 AI 어시스턴트이다. 각 Subagent는 자체 컨텍스트 윈도우에서 실행되며 사용자 정의 시스템 프롬프트, 특정 도구 액세스 및 독립적인 권한을 가진다. Subagent의 설명과 일치하는 작업을 만나면 해당 Subagent에 위임하고 Subagent는 독립적으로 작동하여 결과를 반환한다. Claude의 SubagentClaude는 각 Subagent의 설명을 사용하여 작업을 위임할 시기를 결정한다. 따라서 Subagent를 생성할 때 Claude가 Subagent를 언제 사용할지 알 수 있도록 명확한 설명을 작성해야 한다. Claude Code에는 Explore, Plan, general-purpose 같은 여러 내장 Subagent가 포함되어 있다.. 🤖 AI/Claude Code 2026. 2. 11.

[Claude Code] 토큰 사용량 체크하기 (feat. mac) 개요Claude Code의 컨텍스트 사용량을 확인하기 위해 설정을 추가해본다. statusline.sh 파일 추가Claude Code가 설치된 폴더 경로 안에 statusline.sh 파일을 추가해준다. 폴더 경로는 ~/.claude 이고 터미널을 실행해 다음 명령어로 파일을 열어준다.# .claude 폴더 내의 statusline.sh 파일을 열어줌# statusline.sh 파일이 없어도 내용 입력 후 저장 시 자동으로 파일이 생성됨vi ~/.claude/statusline.sh 해당 파일이 없다면 빈 화면이 나올텐데 키보드의 i 키를 눌러주면 파일에 내용을 추가할 수 있다. 아래의 내용을 복사해서 넣어주고 esc 키를 누른 후 :wq 를 입력해서 빠져나오면 된다.#!/bin/bash# stdin에.. 🤖 AI/Claude Code 2026. 2. 9.

[Claude Code] SuperClaude 사용하기 SuperClaude란?Claude Code를 위한 설정 프레임워크이다. 별도의 코드나 외부 도구 없이 순수 설정 파일만으로 Claude Code를 전문적인 개발 어시스턴트로 변신시킨다. 커스텀 커맨드, 페르소나, 자동 트리거 기능 등을 제공하여 복잡한 프롬프트 없이 고품질의 결과물을 얻을 수 있도록 도와준다. 설치하기pipx 설치하기python으로 작성된 CLI를 시스템 환경과 격리된 독립적인 가상 환경에 안전하게 설치하고 실행할 수 있게 해주는 도구이다.brew install pipx SuperClaudea 설치하기pipx로 설치하기 (공식 문서 추천)# superclaude 설치pipx install superclaude github로 설치하기# git clone 받기git clone https:.. 🤖 AI/Claude Code 2026. 2. 9.

[iOS] 푸시 알림 서비스 사용하기 1편 (feat. Firebase & Xcode) APN 인증키 생성 (feat. Apple Developer Center)Apple 개발자 센터로 접속한 후 상단의 계정(Account) 탭으로 들어간다. 프로그램 리소스 > 인증서, ID 및 프로파일 > 식별자(영문) 메뉴를 클릭한다. 좌측 메뉴의 Keys 탭에서 APN 인증키를 생성해준다. Key Name과 Description을 입력해주고 아래의 Apple Push Notification service 옵션을 체크해준다. Environment 옵션 (SandBox, Production, SandBox&Production)을 개발 의도에 맞게 선택해준다.SandBox : 테스트용, Xcode에서 직접 실행, 개발용 프로비지닝Production : 운영용, TestFlight, Ad Hoc, App S.. 📱 Mobile/iOS 2026. 2. 2.

[Next] Recharts 사용하기 Recharts란?리액트 컴포넌트를 기반으로 데이터를 차트로 시각화해주는 라이브러리이다.https://recharts.github.io/en-US/ Recharts recharts.github.io 설치하기npm install recharts 사용하기Recharts를 nextjs에서 사용하려면 클라이언트 컴포넌트에 작성해야만 한다. Recharts 내부적으로 D3.js 라이브러리에 기반을 두고 있고 차트를 그릴 때 화면의 너비나 높이를 계산하거나 특정 요소의 위치를 파악하기 위해 브라우저의 window 객체나 document 같은 DOM API를 빈번하게 호출하기 때문이다. 학습은 공식 문서와 유튜브 [Build Charts in React With Recharts in 7 Minutes] 강의를 .. 🖥️ Frontend/Next 2026. 1. 30.

[Windows] 정적 라우팅(Static Route) 추가하기 (feat. tracert) 개요현장에 서버 프로그램을 설치한 후 통신하는 과정에서 문제가 생겼다. A업체 네트워크 망을 통해서 B업체로 데이터를 전달하는 과정에서 데이터가 전달되지 않았고 통신조차 되지 않았다.현장PC (10.100.1.111) A업체 (10.100.0.1) B업체 (172.22.200.200) 통신O 통신X 원인B업체에 문의해보니 네트워크 팀에서 우리 현장PC의 IP와 통신할 수 있게 네트워크 설정을 마쳤다고 했다. 하지만 B업체 IP로 ping을 전송해봤지만 실패했고 telnet 또한 붙지 않았다. 여러 사이트를 둘러보며 찾아낸 tracert 명령어를 사용해 네트워크 통신 경로를 추적해보기로 했다.tracert (windows), trace.. ⚙️ OS/Windows 2026. 1. 30.

[OpenCode] 설치 및 환경 설정 OpenCode란?SST(Serverless Stack)팀이 개발하고 있는 오픈소스 AI 코딩 에이전트이다. 월 650,000명 이상의 개발자가 사용하고 있고 500명 이상의 기여자가 참여하는 활발한 오픈소스 프로젝트이다. 터미널 인터페이스, 데스크톱 앱, IDE 확장 프로그램의 세 가지 형태로 제공되고 있다. 공식 문서에 따르면 코드를 저장하거나 외부로 전송하지 않아 프라이버시에 민감한 환경에서도 사용할 수 있다고 한다. OpenCode가 주목받은 점은 한국인 개발자가 만든 플러그인 Oh-My-Opencode(OMO)이다. OMO를 간단히 설명하면 실전에서 필요한 구성요소를 패키징해서 바로 쓸 수 있도록 제공하는 플러그인이다. OMO에 대한 자세한 내용은 추후에 별도로 다뤄보려고 한다. OpenCod.. 🤖 AI/OpenCode 2026. 1. 28.

[GIT] GIT 명령어 정리 git commitgit에 commit하기 위한 명령어이다. -m 명령어 뒤에 커밋 메시지를 작성해서 파일을 커밋한다.git commit -m "commit message" git resetgit의 commit을 취소하기 위한 명령어이다. git에 push 되기 이전의 commit을 취소할 때 많이 사용하지만 push된 상태에서도 사용 가능하다. 하지만 reset을 사용한 취소의 경우 --force 명령어를 사용해 강제 push를 실행해줘야 한다. HEAD^ 사용 시 바로 이전 commit으로 되돌리고 HEAD~n(숫자) 명령어 사용 시 n번째 commit으로 되돌린다. reset 명령어 뒤에 --soft, --mixed, --hard 명령어를 사용할 수 있고 기본 값으로 --mixed 명령어가 적용된.. 📚 개발지식/GIT 2026. 1. 25.

[Windows] Windows 시스템에 인증서 등록하기 개요Windows PC에서 미디어 서버로 영상을 전송하려고 하니 호출하는 로컬 PC에 인증서가 없어 서버에서 인증서 오류가 발생했다. 신뢰할 수 있는 인증서 등록하기먼저 pem 파일을 Windows에서 인식할 수 있도록 crt 확장자로 변경해준다. 그리고 아래의 순서대로 진행해주면 된다. 1. 인증서 파일 우클릭 > [속성] > [인증서 설치]2. [저장소 위치] > [로컬 컴퓨터] > [다음]3. [모든 인증서를 다음 장소에 저장] > [찾아보기] > [신뢰할 수 있는 루트 인증 기관] > [다음]4. 내용 확인 후 [마침] ⚙️ OS/Windows 2026. 1. 21.

이전 1 2 3 4 ··· 20 다음

티스토리툴바