분류 전체보기 125

[React/리액트] 프로젝트에 Sentry 도입하기 / 모니터링 시스템 구축하기

평소 프론트엔드 모니터링에 관심이 많았는데, 운영 중인 서비스에서 발생하는 에러를 실시간으로 파악하지 못하는 불편함을 겪고 있었다. 이를 해결하고자 Sentry를 도입한 경험을 공유하고자 한다.Vite + React 프로젝트에서 Sentry를 설정하고 활용하는 방법을 상세히 다룰 예정이다.Sentry란?Sentry는 실시간으로 애플리케이션의 에러를 감지하고 모니터링할 수 있는 플랫폼이다Sentry를 선택한 이유프론트엔드 모니터링 도구로 Google Analytics나 Microsoft Clarity 같은 대안들도 있었다. 하지만 이 도구들은 사용자 행동 분석이나 일반적인 웹 분석에 초점이 맞춰져 있다는 한계가 있었다. GA, Clarity와 Sentry의 차이점Google Analytics: 사용자 행동..

React 2025.01.08

API 게이트웨이란?

해당 글은 OSSCA - Git 활용 및 표준프레임워크 MSA 활동을 진행하며 작성한 글입니다.https://github.com/kenu/egovmsa2024 해당 글은 노션 기준으로 작성되었습니다.https://smoggy-client-47f.notion.site/API-10e5cbc9c488801bb93ed0af08eeca02?pvs=41. MicroService Architecture (MSA)MicroService Architecture는 크게 Inner Architecture와 Outer Architecture로 구분할 수 있다.MicroService Architecture는 크게 Inner Architecture와 Outer Architecture로 구분할 수 있다. 위 그림에서 남색 부분은 ..

공부 기록 2025.01.07

React에서 WebSocket 채팅 구현하기 / SockJS 사용하기

Bookmark 프로젝트에서 채팅 기능을 구현하게 되었다.이런 느낌의 댕근 채팅 스타일... 을 구현해야 했당React와 WebSocket을 사용해서 실시간 채팅을 구현해봤고 그 과정에서 얻은 경험과 삽질 일대기를 ㅜㅜ 공유하려고 한다. 1. 서버와의 사전 논의사항먼저 알아둘 점! 채팅 기능은 일반적인 REST API와는 달리 Swagger에서 확인할 수 없다. 실시간 양방향 통신이 필요한 채팅의 특성상 WebSocket을 사용하기 때문이다. 그래서 백엔드 개발자와 미리 논의해야 할 사항들이 꽤 있다. 스웨거만 보고 api 연결을 할 수 없기 때문에 소통이 진짜 중요한 기술 구현이었다. 백엔드 개발자분도 나도 둘 다 웹소켓 채팅 기능 구현이 처음이라 무슨 정보와 내용을 서로 주고받아야 할지 몰랐고 이 때..

React 2025.01.07

React에서 웹과 앱 환경에 따라 하단바 다르게 표시하기

문제 상황웹과 앱 환경에서 하단바를 다르게 표시해야 했다const BottomNav = () => { return 하단 내비게이션;}; 이걸 어떻게 웹/앱 환경에 따라 다르게 보여줄까?  1. 환경 감지 방법1.1 User-Agent 활용 User-Agent 문자열을 분석하여 앱 환경인지 확인하는 방법이다.iOS나 Android 앱의 웹뷰에서 접속 시 특정 문자열(MyCustomApp)을 추가하도록 설정해 감지한다.const useCheckEnvironment = () => { const [isApp, setIsApp] = useState(false); useEffect(() => { // User-Agent 문자열 가져오기 const userAgent = navigator.userAge..

React 2025.01.07

TanStack Router v7로 타입 안전한 라우팅 구현하기

최근에 루키톤을 하고있다! 같이 하는 제롬이 리액트 라우터 돔을 많이 싫어해서... TanStack Router를 도입했다.React Router를 사용하다가 TanStack Router를 사용해보면서 겪은 경험과 장점들을 정리해봤다. TanStack Router이란? 🤔TanStack Router는 React Router v7이라고도 불린다.파일 시스템 기반 라우팅과 타입 안전성이 특징인 라우터 라이브러리이다. Next의 파일 기반 라우터를 좋아했던 사람들이라면 이것 역시 좋아할 듯주요 특징1. 파일 시스템 기반 라우팅2. 완벽한 타입스크립트 지원3. 자동 코드 분할4. 성능 최적화시작하기 👶먼저 필요한 패키지를 설치해준다.pnpm add @tanstack/react-router 설치 후에 vite..

React 2024.11.17

[React/리액트] 스크롤 감지 버튼 구현하기 / 스크롤 이벤트와 버튼 스타일 동적 변경

문제 상황 및 구현해야 할 것이런 느낌의 스크롤을 감지해서 상황마다 버튼이 달라지는 컴포넌트를 만들어야 했다. 스타일은 전부 비슷할 듯 하니 맨 처음에 두겠음import styled, { css } from 'styled-components';export const StyledButton = styled.button` display: flex; align-items: center; justify-content: center; border: none; border-radius: 1000px; color: white; background-color: #2f774d; transition: all 0.3s ease; font-weight: ${({ theme }) => theme.fonts.se..

React 2024.10.13

[OS/운영체제] Mac M1/M2/M3 M시리즈에서 x86 아키텍처 Docker 환경 구축하기 / XV6 운영체제 설치하기

XV6를 설치하는 운영체제 과제를 하기 위해 인텔의 x86 아키텍쳐를 구성해야 했다.여기서 잠깐 차이를 짚고 넘어가자면x86은 하드웨어 아키텍처이고, XV6는 소프트웨어(운영체제)이다. x86 아키텍처에서 XV6 운영체제가 실행된다고 이해하면 된다.보통의 Mac 유저라면 UTM이나 Parallels를 사용해 가상환경을 구성한 후 ubuntu 환경을 만들곤 하는데그렇게 구성한 ubuntu도 사실은 ARM 기반 아키텍처이기 때문에 일반적인 윈도우 환경, 즉 AMD64와는 차이가 있다.사진은 내가 utm에 ubuntu를 설치해 사용하는 모습이다.얘도 어차피 arm 기반이라 인텔의 x86과는 완전히 똑같지 않다.웬만하면 이걸로 쓰면 전부 되지만 이번 운영체제 과제 환경 구성은,,,, 안된다 ;;; Packag..

공부 기록 2024.09.25

[Spring] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 #5

본 글은 해당 강의를 보고 작성한 글입니다.https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8 [지금 무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 강의 | 김영한 - 인프김영한 | 스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., 스프링 학습 첫 길잡이! 개발 공부의 길을 잃지 않도록 도와드립니다. 📣 확www.inflearn.com#5 회원 관리 예제 - 웹 MVC 개발1. 멤버 컨트롤러를 만들고 의존관계 설정까지 완료 + 멤버 컨트롤러로 회원을..

Spring 2024.09.06

[Spring] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 #4

본 글은 해당 강의를 보고 작성한 글입니다.https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8 [지금 무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 강의 | 김영한 - 인프김영한 | 스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., 스프링 학습 첫 길잡이! 개발 공부의 길을 잃지 않도록 도와드립니다. 📣 확www.inflearn.com#4 스프링 빈과 의존관계1. 스프링 빈을 등록하고, 의존관계를 어떻게 설정하는지 알아보기 회원 컨트롤러에 의존관계 ..

Spring 2024.09.06
728x90