본문 바로가기

FE

 (21)
biome , left-hook 설정 썸네일 biome , left-hook 설정 1. 배경 및 목적케어나는 건강검진 수치 등 민감한 의료 성격의 데이터를 다루는 서비스입니다. 따라서 기능 개발 속도만큼이나 코드 품질이 일정하게 유지되는 기본 장치가 필요합니다. 자동화 없을 때 생기는 문제사람마다 코드 스타일 다름린트 규칙 기억 못함PR 리뷰가 코드 스타일 지적 위주가 됨버그가 아니라 코드 품질에 시간 낭비구조 흐름도개발자가 코드 작성 ↓git commit ↓Lefthook 실행 ├── Biome (린트 + 포맷) ├── commitlint (메시지 검사) ↓git push ↓type-check ↓CI 문제가 생기면 PR 올리기 전에 로컬에서 1차 차단 가능!! 왜 CI만으로는 부족한가?CI만 사용할 때로컬 Hoo..
올바른 HTTP 클라이언트 선택하기 - fetch, Axios, Ky 썸네일 올바른 HTTP 클라이언트 선택하기 - fetch, Axios, Ky 웹 개발에서 외부 리소스와의 상호 작용을 하기 위한 다양한 HTTP 클라이언트가 존재합니다.이 글에서는 가장 널리 사용되는 Fetch, Axios, 그리고 Ky를 비교하고, 각 라이브러리의 특징, 장단점, 그리고 적합한 사용 사례를 정리해보았습니다.1. FetchFetch는 브라우저에 기본 내장된 API로, 별도의 라이브러리 설치 없이 바로 사용할 수 있다는 가장 큰 장점을 가지고 있습니다. Promise 기반으로 작동하며, 간결한 문법으로 비동기 통신을 처리할 수 있습니다. 장점:설치 불필요: 브라우저 내장 API이므로 추가적인 패키지 설치가 필요 없어 번들 크기를 줄이는 데 효과적입니다.표준 API: 웹 표준을 따르므로 브라우저 환경에서 높은 호환성을 보장합니다.React Query, SWR 연동:..
의료 서비스 - 보안 강화 방법 썸네일 의료 서비스 - 보안 강화 방법 이번에 개발하는 케어나는 사용자의 건강검진 결과를 분석하고 관리해 주는 서비스다. 이 서비스는 오늘 할 일이나 점심 메뉴와 같은 가벼운 데이터가가 아니라, 누군가의 혈압, 당뇨 수치 등의 건강정보를 다룬다. 만약 실수로 이 정보가 유출된다면? 단순한 버그 수정으로는 되돌릴 수 없는 사고가 된다😢 프론트엔드는 본질적으로 누구나 코드를 뜯어볼 수 있는 환경이다. 그리고 브라우저는 확장 프로그램이나 악성 스크립트 등 공격자가 개입할 여지가 너무 많다. 그래서 본격적인 개발에 앞서, 우리 팀만의 프론트엔드 보안 대책을 생각해보기로 했다.목표는 완벽한 방어가 아니라, (1) 유출 가능성을 줄이고, (2) 정보가 유출되더라도 피해를 최소화하며, (3) 재발을 어렵게 만드는 것이다.1. 보호해야할 데이터와 주요 위..
React Suspense + Error Boundary로 안정적인 로딩/에러 핸들링 썸네일 React Suspense + Error Boundary로 안정적인 로딩/에러 핸들링 웹페이지에서는 데이터 요청 상태에 따라 UI 는 다른상태를 보여줘야한다 데이터가 패칭중일 때 로딩UI, 에러가 났을 때 에러 UI 가 있다. 이 상황을 처리하기 위해 다양한 방법을 사용할 수 있는데, 그 중 Suspense 와 Error Boundary 를 활용한 선언전 데이터 패칭 처리 방법을 알아보고자 한다. 전통적인 데이터 패칭 처리 전통적으으로 데이터 패칭은 컴포넌트 내부에서 data loading, error 의 상태를 사용하여 반환되는 컴포넌트에 대한 분기 처리로 이루어져있다. 비동기 함수 queryFn 가 데이터 요청 동안 isLoading,error 상태에 따라 로딩 중일 땐 를 반환하고 에러가 발생했을 땐 를 분기 처리하여 반환하고 사용자에게 정확한 정보를 전달한다. const S..
건강검진 결과 시각화 : 차트 라이브러리 선정 및 구현 전략 썸네일 건강검진 결과 시각화 : 차트 라이브러리 선정 및 구현 전략 건강검진 결과 스파이더 그래프1. 스파이더 그래프(Radar Chart) 배경 건강검진 데이터는 혈압, 혈당, 간수치, BMI 등 여러 지표를 동시에 확인해야 전반적인 건강 상태를 파악할 수 있다. 이를 위해 레이더 차트(Radar Chart)를 도입한다. 레이더 차트는 여러 항목을 한 화면에 묶어 보여주므로 다음과 같은 이점이 있다. 사용자가 자신의 취약 항목을 한눈에 파악할 수 있다.과거 데이터와 현재 데이터를 겹쳐서 비교하기 용이하다. 1-1. 라이브러리 선택 기준 우리 서비스는 모바일 웹 환경이며, 의료/민감 정보를 다루고, 초기 진입 시 데이터 로딩이 많다는 특징이 있어서 다음 기준을 고려했다. 기능 지원: 레이더 차트를 기본으로 제공하는가? 축 라벨, 툴팁, 영역 채우기 등 커스터마이징이..
PDF 업로드가 느린 이유와 런칭을 위한 성능 최적화 썸네일 PDF 업로드가 느린 이유와 런칭을 위한 성능 최적화 0. Boini 소개Boini는 실시간 프레젠테이션 상호작용 플랫폼이다. 발표자와 청중이 발표 중 실시간으로 소통하고(이모지/질문), 발표 종료 후에는 AI 기반 리포트로 슬라이드 반응과 질문을 분석할 수 있다.서비스 특성상 발표 자료가 바로 떠야 실시간 상호작용이 가능하므로, 발표 자료 업로드 속도는 UX의 핵심이다.1. MVP에서 구현한 PDF 업로드 흐름MVP에서는 발표자가 PDF를 올리면 프론트에서 PDF를 이미지로 변환한 뒤 S3에 저장하고, 서버는 이미지 URL만 DB에 저장하는 구조로 구현했다. MVP 흐름발표자: PDF 업로드프론트: PDF → 이미지(N장) 변환브라우저: 변환된 이미지 N장을 S3 업로드서버: 업로드된 이미지 URL을 DB에 저장청중: 클라이언트가 요청하면 서버가 DB의..
TanStack Query 낙관적 업데이트: onMutate + Rollback을 찜 해제에 적용 썸네일 TanStack Query 낙관적 업데이트: onMutate + Rollback을 찜 해제에 적용 최근에 프론트엔드 사용자 경험 개선에 관해 공부를 하다가 낙관적 업데이트라는 개념을 알게 되었습니다. 이전에 진행했던 재고 판매 서비스에 한번 적용해 보면 좋을 거 같아서 TanStack Query를 사용하여 적용해보고자 합니다. 1. 낙관적 업데이트란?| Optimistic Update(낙관적 업데이트)낙관적 업데이트는 mutation 이 성공적으로 반영될 것이라 낙관적으로 판단을 하고서버로 부터 응답이 오기 전에 UI 업데이트를 먼저 하는 것을 말합니다. 2. 왜 필요할까일반적인 흐름은:버튼 클릭서버 요청응답 기다림성공 후 UI 변화이 구조는 네트워크가 느리거나 서버가 바쁠 때 사용자 입장에서는 눌렀는데 반응이 없는 느낌이 생기고, 이것이 UX를 나쁘게 만듭니다. 낙관적 업데이트는 이 문제를 해결하..
[멋사] 2025 4호선톤 회고 썸네일 [멋사] 2025 4호선톤 회고 멋사의 마지막 활동인 4호선톤에서 만든 서비스 Boini 이다. 회고를 시작해볼게요 먼저 기획자께서 멋쟁이사자처럼 세션을 진행하시면서, 실시간으로 청중이 어느부분에 집중을 하고있는 지, 어느 부분이 이해가 안가는 지 등등 어떠한 반응을 보이는 지 알 수가 없다는 불편함을 겪고 있으셨다. 청중의 반응을 파악하지 못할 뿐더러, 피드백이 이루어지지 않으니, 다음 발표에도 더 나아지지 않고 똑같은 형태로 발표하여 악순환이 반복될 수 있다는 점을 심각하게 받아들였습니다. 기존의 발표 서비스들은, 실시간 스트리밍 서비스는 제공하지만, 단방향으로 전달만 할 수 있고 양방향 소통이 안된다는 단점이 있었습니다. 그리고 발표 이후에만 피드백을 받아볼 수 있는 구조였습니다. 온라인 환경에서도 청중과의 상호작용..
전역 상태 라이브러리 썸네일 전역 상태 라이브러리 0) IntroReact에서 상태가 늘어날수록 생기는 문제:여기저기서 필요한 로그인 정보, 모달 open 여부, 알림 개수…props drilling, 중복 상태, 관리 지옥.목표:“전역 상태에만 의존하지말고, 필요한 곳에만, 맞는 도구를 쓰자” 1) 상태의 종류 정리 Local State (지역 상태) input 값, 모달 열림 여부 등 컴포넌트 내부에서만 쓰는 것Global(Client) State (전역 클라이언트 상태) 로그인 유저, 테마, 다크모드, 장바구니 처럼 여러 페이지/컴포넌트에서 같이 쓰는 값Server State (서버 상태) API에서 가져오는 데이터 (상품 리스트, 댓글 등)캐싱/동기화는 TanStack Query 가 담당하는 게 좋음 2) 전역 상태 라이브러리가 필요한 순간같은..
[Javascript] 웹 애니메이션 , requestAnimationFrame 썸네일 [Javascript] 웹 애니메이션 , requestAnimationFrame setInterval은 애니메이션에 실패하고, requestAnimationFrame이 정답인 이유 웹에서 부드러운 애니메이션을 구현하려 할 때, setInterval은 가장 먼저 떠오르는 손쉬운 방법입니다. 하지만 곧 한계에 부딪힙니다. 애니메이션이 뚝뚝 끊기거나, 다른 탭에 다녀오면 시간이 엉망이 될 수 있습니다. 이 글에서는 setInterval이 본질적으로 가진 문제점과, 왜 requestAnimationFrame (rAF)이 현대 웹 애니메이션의 표준이 되었는지 브라우저의 렌더링 원리와 함께 자세히 알아보겠습니다. 1. 오래된 방식: setInterval 애니메이션의 한계setInterval(callback, 16)은 "16ms마다 callback을 실행하라"는 명령입니다. 하지만 이 방식은..
레이아웃 스래싱(Layout Thrashing) 썸네일 레이아웃 스래싱(Layout Thrashing) 다들 자바스크립트로 DOM 조작하면서왜 이렇게 버벅이지 하고 느껴본 적 있으시죠 저는 개발중에 수많은 리스트를 동적으로 추가하는 기능을 만들다가 페이지가 거의 멈추듯이 버벅거리는 경험을 했습니다.원인을 찾아보니 원인은 바로 레이아웃 스래싱(Layout Thrashing) 이었습니다. 오늘은 제가 공부하면서 알게 된, 이 레이아웃 스래싱을 피하고 DOM 성능을 확 끌어올리는 몇 가지 꿀팁을 공유해 보려고 합니다! 1. 레이아웃 스래싱 이란? 우리가 DOM의 스타일이나 구조를 바꾸면 브라우저는 화면을 새로 그리기 위해 꽤 복잡한 과정을 거칩니다.(DOM → CSSOM → 렌더 트리 → 레이아웃 → 페인트 → 합성) 여기서 중요한 게 레이아웃 단계입니다. (브라우저가 각 요소의 크기와 위치를 계산하는 과정)..
자바스크립트 기초: 객체, DOM, 이벤트 핸들링 썸네일 자바스크립트 기초: 객체, DOM, 이벤트 핸들링 객체에 대한 이해 JS 객체는 여러 데이터를 key-value 쌍으로 구성된 형태로 묶을 수 있는 자료형을 말합니다.객체는 데이터를 구조화하고, 이를 활용하는 과정에서 유용합니다.const person = { name: "Hong Gil Dong", // string age: 17, // number isMale: true, // boolean sayHello: function () { // method (함수도 객체의 value다!) console.log("Hi! My name is " + this.name); }}; DOM (Document Object Model)HTML 문서를 브라우저가 이해하고 “조작”할 수 있도..
웹 소켓 (Web Socket) 제대로 이해하기 썸네일 웹 소켓 (Web Socket) 제대로 이해하기 최근 진행하는 프로젝트에서, 발표자와 청중 사이에 pdf 페이지 동기화 및 청중 반응 전송을 구현하기 위해 웹소켓을 사용하고있습니다. 웹소켓 개념만 아는 상태였는데 더 깊게 알아보고자 글을 작성합니다1) 웹소켓이란?웹소켓은 브라우저와 서버가 한 번 연결(Handshake)하면 그 연결을 계속 유지하면서, 양쪽 모두가 자유롭게 메시지를 주고받을 수 있게 해주는 프로토콜입니다.HTTP처럼 “요청-응답” 한 번 하고 끝나는 게 아니라, 전화 통화처럼 계속 이어집니다.URL 스킴: http:// 대신 ws:// 또는 보안 연결인 wss://를 사용합니다.ws:// 와 wss://: 의 차이 ws://: 암호화되지 않은 일반적인 웹소켓 연결입니다. (http://와 비슷!!)wss://: 데이터가 암호화되어 전송..
CSS 심화 썸네일 CSS 심화 CSS 심화1 : Media Query 웹 페이지가 다양한 화면 크기나 디바이스에 맞춰 적절한 스타일을 적용할 수 있게 해주는 CSS 기능 media type:screenprintspeechall화면에 보여질 때출력될 때 음성 출력할 때모든 미디어 타입에 대하여/*화면에서만 적용될 스타일*/@media screen { body { background-color :#lightblue; }}/*인쇄할 때만 적용될 스타일*/@media print { body { background-color:white; color :black; } header ,footer { display:none; /*인쇄할 때 헤더와 푸터를 숨김*/ } } ..
HTML, CSS 심화 썸네일 HTML, CSS 심화 HTML : Hyper Text Markup LanguageHyper Text : 텍스트(text) 를 넘어선다(hyper) -> 다른 문서나 정보를 연결한다Mark up : 표시를 한다 즉, 글을 구조화하고 서로 연결시키고 브라우저가 이해할 수 있도록 의미를 부여하는 언어! 태그와 요소요소 : HTML 페이지를 구성하는 각 부품제목, 본문, 이미지 등등 태그 : 요소를 만들 때 사용하는 작성 방법흔히 요소와 태그를 구분하지 않고 사용한다ex) ->시작태그 || -> 종료태그 || 안녕하세요 -> 내용(content) -> 이 전체를 묶어 하나의 요소 요소는 생성 방법에 따라 구분속성태그에 추가 정보를 부여 ex) Hello HTML 주석프로그램 실행에 영향을 미치지 않으면서 설명하는..

티스토리툴바