4전 4전

리액트로 코드를 작성하면서 모달창을 만드는 경우가 많습니다. 언듯 보면 간단해 보이지만, 실제로는 예상하지 못한 복잡성을 내포하고 있습니다. 최근 저는 모달창을 구현하면서 z-index 관련 문제가 발생하였고, 이를 해결하기 위해 createPortal을 이용한 내용을 작성해보고자 합니다. | 문제 상황 문제 상황을 보기 위해 리액트 프로젝트를 만들고 간단한 모달창 하나를 만들어 보겠습니다. 먼저 props로 상태를 받아서 화면에 보여주고 닫을 수 있는 Modal 컴포넌트 하나를 만들어 주겠습니다. // Modal import styles from "./index.module.css"; type Props = { open: boolean; onClose: VoidFunction; }; const Moda..

최근에 대한민국 철봉 지도라는 프로젝트를 진행하면서사용자가 지도에 철봉 위치를 등록하면서 주변 사진을 이미지로 업로드하고,업로드한 이미지를 다른 사용자들이 확인할 수 있는 기능을 구현하였습니다. 이때 저희 서비스 특성상 고화질 이미지를 제공할 필요성이 크지 않고,거리뷰를 통해 확인할 수 있는 기능을 제공함으로써 서버의 부담을 줄이고, 로딩 속도를 올리기 위해이미지를 리사이징 하여 용량을 줄이기로 결정하였습니다.| Canvas API를 통한 이미지 리사이징먼저 축소하고자 할 비율과 파일을 받아 Promse를 리턴하는 resizeFile함수를 만들어 줍니다.const resizeFile = async (file: File, scale: number): Promise => { return new Promis..

최근에 프론트엔드 사용자 경험 개선에 관해 공부를 하다가 낙관적 업데이트라는 개념을 알게 되었습니다. 이왕 공부해 본 김에 프로젝트에 한번 적용해 보면 좋을 거 같아서 TanStack Query를 사용하여 적용해보고자 합니다.| Optimistic Update(낙관적 업데이트)낙관적 업데이트는 프론트엔드 개발에서 사용되는 데이터 동기화 전략입니다.사용자가 데이터를 수정하거나 추가할 때 서버로부터 오는 응답을 기다리지 않고,UI를 즉시 업데이트 하는 방식입니다. 낙관적 업데이는 사용자가 서버의 응답을 기다리지 않고 지연 없이 즉시 피드백받게 되므로,사용자 경험 개선에 큰 도움이 될 수 있습니다. 다만 오류가 발생했을 때 이를 적절히 처리하고 원상 복구 시키는 로직을 잘 작성해야 하고,금전적인 정보, 사용자..

자바스크립트에서 이벤트 위임과 이벤트 버블링은 효율적인 이벤트 핸들링을 위해 사용되는 이벤트 핸들링 패턴입니다. 이번에 각각에 개념을 확인해 보고, 예시를 통해 어떤 식으로 활용되는지 살펴보려 합니다. | 이벤트 버블링(Event Bubbling) 이벤트 버블링은 DOM요소에서 이벤트가 발생했을 때, 해당 이벤트가 부모 요소로 전파되는 것을 말합니다. 아래 코드를 보면 버튼을 클릭하면 "자식 요소 클릭", "부모 요소 클릭"이 동시에 출력이 됩니다. 클릭 document.getElementById('parent').addEventListener('click', () => { console.log('부모 요소 클릭'); }); document.getElementById('child').addEventLis..

JWT는 인증에 필요한 정보를 암호화한 JSON 형식의 토큰으로, 웹 서비스의 인증 방식으로 사용할 수 있습니다. JWT 토큰을 HTTP 헤더에 실어 서버가 클라이언트를 실별할 수 있도록 합니다. JWT의 기본 구조 JWT는 크게 Header, Playload, Signature로 세 가지의 구성 요소로 이루어져 있습니다. 사용자가 인증을 수행하면, 서버는 다음의 정보를 가진 JWT 토큰을 발급합니다. - Header 사용할 해시 알고리즘과 토큰의 타입을 포함하는 메타 정보를 담습니다. - Payload 사용자의 클레임 등을 키-값 쌍으로 담은 정보입니다. 이 정보는 서버로 전달되어 인증에 사용됩니다. - Signature 헤더와 페이로드를 합친 후, 비밀키로 해싱하여 생성한 서명입니다. Client에게..

Oauth는 인터넷 사용자가 구글, 카카오, 네이버 같은 SNS 계정을 통해 다른 서비스에 로그인할 수 있도록 하는 개방형 표준입니다. 이를 통해 사용자는 자신의 계정 정보를 직접 공유하지 않고, 다른 서비스에 특정 권한을 부여할 수 있습니다. 예를 들어, 구글 로그인 기능을 사용할 때 사용자가 구글의 비밀번호를 제공하지 않고, 계정의 일부 접근 권한을 얻을 수 있습니다. | 안전하지 않은 인증 방식 만약 사용자가 서비스에 자신의 SNS 아이디와 비밀번호를 직접 입력하고, 서비스가 이를 통해 SNS에 직접 로그인하는 방식은 사용자의 계정 정보가 서비스 제공자에게 직접 노출되기 때문에 보안적인 측면에서 매우 위험합니다. 이는 사용자의 계정 정보가 유출될 위험이 있으며, 이는 심각한 개인정보 침해로 이어질 ..

HTTP는 HyperText Transfer Protocol의 약자로 웹상에서 데이터를 주고받는 기본적인 규칙을 정의합니다. 또한 웹 문서뿐만 아니라 모바일 게임 개발 등 다양한 분야에서 활용됩니다. | HTTP HTTP는 클라이언트와 서버 간의 데이터 교환을 가능하게 하는 프로토콜입니다. 클라이언트가 웹 서버에 페이지나 이미지를 요청할 때 사용되고, 서버는 이 요청에 응답하여 필요한 데이터를 제공합니다. | HTTP 메서드(Method) HTTP 프로토콜은 다양한 종류의 요청을 지원하기 위해 여러 메서드를 제공합니다. 각 메서드는 특정한 목적에 맞게 설계되었고, 주요 메서드는 다음과 같습니다. GET: 서버로부터 데이터 조회 요청 ex) 웹페이지 접속, 정보 검색 POST: 데이터 생성 요청 ex) 회..

웹 애플리케이션과 시스템들은 다양한 서비스와 데이터를 공유하며 상호작용합니다. 이러한 상호작용을 가능하게 하는 핵심 기술 중 하나가 바로 REST API입니다. REST API는 다양한 플랫폼과 언어에서 사용할 수 있는 유연성을 제공하며, 웹 기반 서비스의 개발을 간소화하고 표준화합니다. | REST(Representational State Transfer) 등장 배경 HTTP 프로토콜은 GET, POST, PUT, DELETE 같은 다양한 메스드를 지원합니다. 서버가 이런 HTTP 메서드를 기존 설명과 맞지 않게 사용하더라도 프로그램 개발은 가능합니다. 하지만 이러면 소통과 협업에 문제가 발생할 수 있어서 이를 해결하기 위해 REST라는 아키텍처 스타일이 제안되었습니다. | REST의 이해 REST는 ..