React 4

[React] onKeyDown이 두 번 적용되는 현상을 분석해보자

팀원이 개발한 채팅 부분에 문제가 보고되었다. 윈도우 환경에서 테스트를 할 때는 분명 문제가 없었는데..조금 더 조사를 해 본 결과 문제를 제기한 사용자들이 모두 MacOS를 사용했고 한글에서만 문제가 발생한다는 공통적인 특성이 있었다. MacOs에서도 사파리 환경에서는 문제가 없는 걸로 보아 MacOS와 크롬 환경에서 발생하는 문제로 예상된다. 윈도우에서는 잘 되는 것으로 보아 아마 두 운영체제 간의 입력 방식에 차이가 있는 것 같은데, 맥북이 없어서 테스트를 할 방법이 없다.. 그래서.. 정말 어쩔 수 없이 테스트를 위해 맥북 Air M4 16인치 16GB를 구매했다.. keydown에 대해서 먼저 알아보자먼저, keydown이 어떻게 동작하는지 알기 위해 mdn 사이트에서 해당 함수에 대해 알..

React 2025.07.29

[React] firebase + github action CI/CD 파이프라인 구축

새로운 프로젝트를 시작하면서 디자인 팀의 합류가 예상보다 늦어져, 체계적인 일정 관리가 필요하게 되었다. 이에 따라, 프론트엔드 개발의 진행 상황을 디자인 팀이 직관적으로 파악할 수 있도록 해야 했고, 이를 자동 배포 시스템을 활용해 해결하고자 했다. 또한, 3명으로 구성된 프론트엔드 팀이 보다 효율적으로 협업할 수 있도록, 코드 오류를 최소화하고 배포 과정을 간소화하기 위해 CI/CD 파이프라인을 구축하기로 결정했다. 내가 생각한 파이프라인 구상도는 다음과 같다. PR -> GitHub Action -> 빌드 및 테스트 성공 -> firebase 배포1. 파이어베이스 프로젝트 생성  가장 먼저, 가장 간단하다고 생각하는 배포 플랫폼인 구글 파이어베이스의 프로젝트를 하나 생성하였다.우리의 목적은 배포이기..

React 2025.03.19

[React] JWT 어떻게 관리하는 게 좋을까?

지난 포스트에서 JWT가 무엇인지, 다른 인증 방식은 무엇인지, 각각의 장단점은 무엇인지 알아보았다. 이번 포스트에서는 토큰 관리를 위해 고려해야 하는 보안 이슈들을 공부해 보았다.XSS 공격아마 조금이라도 토큰관리에 대해서 관심을 가졌다면 가장 익숙한 단어일 것이다.보안에 대해서 문외한이지만 내가 조사한 내용을 적어보자면 다음과 같다. XSS 공격이란?XSS는 Cross Site Scripting의 약자로, 직역하면 사이트 간 스크립팅이다.  가장 기초적이고 단순하지만 그만큼 강력하고 계속해서 문제가 발생하는 보안 이슈라고 한다. 이 공격은 쉽게 말해서 해커가 보안이 취약한 사이트에 악의적인 스크립트를 심어 사용자가 이 스크립트를 읽도록 유도하여 사용자의 정보를 빼았는 공격 기법이다. 말로만 보면 무슨..

React 2025.03.19

[React] JWT 이해하기

리액트 스터디 과제로 JWT 이론 공부 및 실습 코드 구현에 관한 과제를 진행하였다.과제 내용은 다음과 같다.https://www.notion.so/week4-56b6baa3246d46cd9c4e38a224dc2d71 JWT의 뜻?Json Web Token의 약자 풀 네임에서 알 수 있듯이 "웹 상에서 Json 형태로 토큰을 주고받는 인증"을 뜻한다. 왜 사용하나요?JWT를 사용하는 이유를 설명하기에 앞서 다른 인증 시스템을 알아보자. 쿠키 인증 방식먼저 쿠키에 대해서 간단히 알아보자.쿠키는 Key와 Value로 구성된 작은 정보 파일이다. 이를 활용해서 서버에서 로그인에 성공한 클라이언트에게 인증을 위한 쿠키를 전송하고, 클라이언트는 해당 쿠키를 매 요청에 같이 보내는 방식으로 인증을 수행한다.단점?간..

React 2025.03.19