본문 바로가기

웹38

[웹 지식] 그놈의 CORS(Cross-Origin Resource Sharing) - 교차 출처 리소스 공유 웹 개발을 하다 보면 진짜 질리도록 듣는 말이 있다CORS 에러가 났어요!CORS 해결해야 해요!오늘은 이 악명높은 CORS에 대해 알아보려 한다..! 먼저 동일 출처 정책(Same-Origin Policy)이란?브라우저는 기본적으로 동일 출처(Same-Origin) 간의 요청만을 허용한다!출처(origin)란 아래 세 요소로 정의된다Origin = 프로토콜 + 도메인 + 포트브라우저는 이 조건을 만족하지 않는 출처 간의 요청을 보안상 차단하며, 이를 우회하거나 허용하려면 서버가 명시적으로 CORS를 허용해야 한다. CORS 사용 상황 예시프론트엔드(Vue/React): http://localhost:3000백엔드(Spring Boot API): http://localhost:8080위 두 출처는.. 2025. 6. 18.
[웹 지식] WebSocket 개념과 실제 프로젝트 명세서 예시 채팅 시스템은 거의 WebSocket으로 구현한다. 오늘은 Unix프로그래밍 수업에서 배웠던 소켓과 같은 부류인 웹소켓에 대하 알아보자!ㅁWebSocket: 하나의 TCP 연결을 통해 클라이언트와 서버 간에 실시간, 양방향 통신을 가능하게 해주는 프로토콜 2011년 IETF에 의해 RFC 6455로 표준화되었으며, HTML5의 일부로 웹 브라우저에서 기본적으로 지원된다 1. WebSocket 특징Full-duplex 통신HTTP는 요청-응답 기반의 Half-duplex 구조이나, WebSocket은 요청 없이도 서버가 클라이언트에게 자유롭게 데이터를 보낼 수 있는 구조이다. 이를 통해 실시간 알림, 채팅, 게임 등에서 즉각적인 반응을 구현할 수 있다.연결 유지(Persistent Connection)W.. 2025. 6. 11.
[웹 개발] 홈텍스 정산시스템 만들기 (바로빌 API 연동 후기) 1. 정산시스템 만들기 프로젝트 개요, 그 첫걸음!“자동으로 홈택스 데이터를 긁어오고, 정산 시스템에서 바로 확인 및 저장, 보고까지 가능하면 얼마나 좋을까?”이 생각이 바로 정산시스템 만들기 프로젝트의 출발이었다. 하지만 문제는 기능 구현이었다.홈택스는 공공기관이다 보니 직접적으로 API를 제공하지 않으며, 정산시스템을 만들기 위해서 전자세금계산서 발행 기능을 구현해야 하는데 생각보다 공동인증서 등록 기능 구현, 수정세금계산서 발급 기능 등 사용자 계정 제약 등 고려해야 할 게 많았다. 이런 연동을 직접 구현하는 건 기술적 허들도 크고, 보안상 리스크도 있었기에 외부 API 연동 솔루션을 활용하는 방향으로 결정했다. 이때 검색으로 찾은 바로빌 개발자센터가 눈에 들어왔다. 솔직히 처음에는 생소한 이름이.. 2025. 6. 4.
[웹 지식] Blob 개념 + 실제 프로젝트 적용 예시 [Blob 개념 두 줄 요약] 브라우저에서 녹음하면 처음부터 파일이 Blob 형태로 존재한다. 그리고 이 Blob 형태를 통해서 안전하게 서버로 전송하고 서버는 이 Blob 형태를 받으면 mp3, wav 등 원하는 파일 포맷으로 저장하거나 변환이 가능하다! 웹에서 대용량 데이터를 다룰 때 자주 등장하는 개념이 바로 Blob(블롭)이다. 특히 오디오, 비디오, 이미지와 같은 비정형 대용량 파일을 다룰 때 필수적인 개념이다. 본 글에서는 Blob의 개념을 설명하고, 실제로 Blob이 어떻게 활용되는지를 AI 면접관 프로젝트 사례를 중심으로 설명하고자 한다!(SK AXIS 프로젝트) ㅁBlob(Binary Large Object): 큰 이진 객체 데이터이는 텍스트가 아닌 다양한 멀티미디어 데이터를 저장하거.. 2025. 5. 23.
[웹 개발] WebRTC와 MediaRecorder API, 그리고 외부 장치 사용까지 최근 브라우저만으로도 영상 통화, 음성 녹음, 실시간 스트리밍이 가능한 시대가 되었다. 별도의 네이티브 애플리케이션 없이도 이런 기능을 구현할 수 있게 된 데에는 WebRTC와 MediaRecorder API라는 두 가지 기술이 핵심 역할을 한다. 본 글에서는 이 두 기술의 기본 원리와 차이점, 그리고 내가 실제로 개발한 SK AX AI 면접관 도우미 "SK AXIS" 프로젝트에서 외부 카메라와 외부 마이크를 사용하는 과정에서 느낀 점을 정리해보고자 한다! 1. WebRTC(Web Real-Time Communication): 웹 브라우저 간의 실시간 영상/음성/데이터 통신을 가능하게 하는 기술 대표적인 사용 사례로는 Google Meet, Discord, Zoom Web 버전 등이 있다.\WebRT.. 2025. 5. 22.
[웹 개발] DB 모니터링 Slack 알림 전송 시스템 구축(w/웹훅) DB 쿼리 성능을 실시간으로 모니터링하고, 슬로우 쿼리를 Slack으로 알림 전송하는 자동화 시스템을 만들었다 (깃허브 레포) https://github.com/imclaremont/slack-DB-monitor GitHub - imclaremont/slack-DB-monitor: DB 쿼리 성능을 실시간으로 모니터링하고, 슬로우 쿼리를 Slack으로DB 쿼리 성능을 실시간으로 모니터링하고, 슬로우 쿼리를 Slack으로 알림 전송하는 자동화 시스템 - imclaremont/slack-DB-monitorgithub.com※ 사용법은 README.md 에 적어두었습니다 웹훅(Webhook)이란?서버 간의 자동 알림 시스템이다. 특정 이벤트가 발생했을 때, 정해진 URL로 HTTP 요청을 자동으로 보내주는 .. 2025. 4. 18.
[웹 지식] 액세스 토큰 + 리프레시 토큰 협동 과정 https://claremont.tistory.com/entry/%EC%9B%B9-%EC%A7%80%EC%8B%9D-%ED%86%A0%ED%81%B0token-vs-API-%ED%82%A4 [웹 지식] 토큰(token) vs API 키토큰하면 어떤 것이 먼저 떠오르는가? 필자는 유희왕의 토큰 카드가 가장 먼저 떠오른다..ㅋㅋ실제로 토큰의 쓰임새는 크게 다르지 않다ㅎ 오늘은 토큰에 대해 알아보는 시간을 갖고, API 키와claremont.tistory.com 이전의 포스팅에서 API 키 vs 토큰에 대해서 다뤄보았다오늘은 토큰에서 액세스 토큰과 리프레시 토큰을 같이 사용하는 이유와, 그 협동 과정에 대해 설명하려 한다! 현대 웹 서비스에서 로그인 기능은 단순한 사용자 인증을 넘어서, 보안과 편의성을 동시.. 2025. 4. 3.
[웹 지식] OpenAPI vs Open API 제목만 봐서는 뭔 소리인지 싶을 것이다...근데 진짜 저 띄어쓰기 하나로 의미가 아예 달라진다 ㅁOpenAPI: API 명세 표준(OpenAPI Specification)OpenAPI는 RESTful API를 기술하기 위한 표준 포맷(Specification)이다.예전에는 Swagger Specification이라고 불렸고, 현재는 OpenAPI Initiative라는 비영리 단체에서 관리한다. 주요 특징JSON or YAML 형식으로 API의 경로, 요청/응답, 인증 방식 등을 정의할 수 있다사람이 읽기 쉽고, 동시에 기계가 이해할 수 있도록 설계되어 있다문서화 자동화, API 테스트 자동화, 클라이언트/서버 코드 생성 등 다양한 도구와 연계된다 대표 도구Swagger UISwagger Editor.. 2025. 4. 2.
[웹 개발] AI 코딩 보조 도구 선택 가이드(GitHub Copilot, Cursor) 최근 개발 도구로 GitHub Copilot을 자주 활용하고 있는데, 한 가지 고민이 생겼다.“코파일럿은 전체 프로젝트 맥락을 제대로 이해하고 있을까?”“프로젝트 전체 구조를 고려해서 도와주는 AI 도구는 없을까?” 이런 고민을 하다가 자연스럽게 GitHub Copilot과 함께, Cursor라는 새로운 도구를 사용해 보게 되었고, 두 도구를 비교해 보며 느낀 점들을 정리해 보았다. 일단 먼저 GitHub CopilotCopilot은 IntelliJ나 VSCode 플러그인으로 설치해 사용할 수 있으며, 코드 작성 중 자동으로 적절한 다음 줄을 추천해 준다. 마치 옆에서 함께 코딩하는 파트너처럼, 함수의 이름이나 주석만 잘 써주면 똑똑하게 예측해서 완성해 준다. 하지만 사용하면서 느낀 한계도 분명했다.지금.. 2025. 4. 2.

티스토리툴바