분류 전체보기 (121) 썸네일형 리스트형 [Next] React와 Next.js에서 원격 코드 실행이 가능한 취약점 CVE-2025-55182(React2Shell) 렌딩 페이지와 Next 프로젝트가 공격받아 여러번 서버가 내려갔던 이슈가 발생했다.해당 취약점은 인증되지 않은 공격자가 서버에 임의의 명령어 ( 또는 스크립트 ) 를 실행할 수 있는 취약점으로 위험도(CVSS 10/10 - 최고 위험 등급) 을 받은 취약점이다.서버 로그를 확인해본 결과 공격자는 임의의 script 파일을 다운로드 받아 실행 권한을 부여한 후 실행하려다 실패한 로그로 보였다. 로그 자체로 서버에 접속해 임의의 명령어 실행까지 성공한 상황이며 우연히 script 다운로드에 실패해 실제 공격까지는 진행되지는 않았다.개요와 공격은 아래와 같다.주요 취약점 개요12월 3일 React Server Components에서 인증 없이 임의 코드 실행이 가능한 취약점이 발견되어 CVE-2025-5518.. [RN] React-Native 안전하게 인증 처리하기 웹에서 인증처리를 할 때는 accessToken을 외부에서 접근할수 없는 프로젝트 내부 전역변수, refreshToken을 httpOnly Cookie로 저장하여 안전한 인증 처리를 진행했다. accessToken이 만료되기 전 refreshToken을 가지고 재로그인을 시도해 매번 로그인을 하지 않도록 처리하였고, refreshToken이 cookie에 저장되어 있어 브라우저를 껐다가 다시 접속해도 로그인이 유지되었다.React-Native에서는 어떻게 하면 안전하게 인증 처리를 할 수 있는지 고민해봤다.우선 SecureStore를 사용해서 토큰을 저장해야 안전하다는것을 알 수 있었다. 나는 Expo 54버전 환경이였기에 expo-secure-store를 사용해서 처리했다.secureStore를 사용하.. [RN] Navigator 구조 설계 RN 프로젝트를 진행하며 현재 앱 기획에 맞게 Navigator, Screen 구조를 어떤식으로 잡으면 좋을지 고민해보았다.우선 유저이탈률을 줄이기 위해 로그인은 앱 진입 시점이 아닌, 로그인이 필요할 때 로그인 스크린이 Stack에 쌓인다. 또한 앱 진입 시 메인에는 TabNavigator가 존재하고 하단에는 여러개의 Tab이 존재하는 구조였다.export type AuthStackParamList = { Login: { redirectTo?: string } | undefined; Signup: undefined;};export type RootStackParamList = { Main: undefined; Auth: { redirectTo?: string } | undefined; // 로그.. [RN] Expo 54버전, 안드로이드에서 GoogleMaps API Key 인식 못 하던 이슈 Expo 54버전에서 앱에 지도를 띄워야 하는 상황, import { theme } from "app/styles/theme";import { useCallback } from "react";import { Alert, Linking, Platform } from "react-native";import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";// TODO: API에서 받아올 위치 정보// 임시 하드코딩 데이터 (장충체육관)const locationData = { latitude: 37.5502, longitude: 127.0058, placeName: "장충체육관 (Jangchung Arena)", address: "서울.. [React] BATCH를 사용한 리스트 최적화 전략 이미지를 포함한 선수카드 컴포넌트가 무수히 많은(1000장 이상) 리스트가 있을 경우 스크롤을 진행하며 각 선수카드들이 빠르게 리렌더 되는 상황에서 어떤 식으로 최적화를 진행할 수 있을지 고민해보았다.유저가 보유한 모든 선수카드는 앱 진입 초기에 한번에 불러온 뒤 자체적으로 캐싱을 해서 앱 전체에서 사용하고 있다.이미지의 용량이 작지 않아, 동시에 렌더할경우 메모리 초과로 웹앱이 다운되어 virtual grid를 사용해 동적으로 렌더해주고 있었다.이 때 새로 획득한 선수카드의 경우 N태그가 붙는데 확인 후 해당 선수카드가 뷰포트에서 사라질경우 N태그는 제거되어야하는게 기획의 요구사항이였다.관심사 분리, 선수카드 캡슐화를 위해 선수카드를 랩핑하는 HOC를 하나 만들고 interSectionObserver를.. [AWS] 커스텀 도메인 구입 후 CloudFront에 연결하기 먼저 연결할 도메인을 구매한다. 나는 가비아에서 원하는 도메인을 간단하게 구매했다.AWS S3에 올려놓은 빌드에 도메인을 연결하기 위해 우선 CloudFront 배포를 생성해주어야 한다.빌드가 있는 S3버킷을 원본으로 새 CloudFront 배포를 생성한다.S3 origin에 연결할 버킷의 주소를 입력하면 된다.배포가 생성된 이후 github action을 위한 리액트 프로젝트의 deploy.yml를 수정해주었다.기존에는 master에 병합 시 빌드 후 S3버킷에 올리는것까지의 스크립트가 있었는데, CloudFront의 캐시 정책으로 인해 명시적으로 무효화를 해줘야지 CloudFront에 반영된다.CloudFront 배포를 생성했으면 배포ID를 레포지토리의 Secrets에 추가해준다. 이후 - n.. [React] Next Image를 사용하지 않을 경우 React 이미지 최적화 전략 이미지 최적화에는 여러가지 방법이 있다.기본적으로 Next Image를 사용하면 자동으로 압축 및 최적화가 적용된다.디자이너 포트폴리오 사이트를 개발해 주면서 SSR을 할 이유가 거의 없어, 간단하게 React로 프로젝트를 진행했다.받은 이미지 자체들이 워낙 크고 고화질이라 이미지 하나당 상당한 용량을 차지했다. 이미지 요청을 보내고 받은 이미지를 확인해 본 결과 대부분 15MB가 넘어갔다.초기 이미지 로드 속도는 당연히 느렸고 접속한 뒤 3초가 지나야 이미지가 로드되는 최악의 UX를 확인했다.최대한 자연스러운 UX를 유지하기 위해 framer-motion의 연출과 섞어서 몇 가지 최적화를 진행해주었다.우선 full-page를 적용했고, 메인에서는 대표작들이 스와이핑 가능하게 나오도록 했다. 일단 기본적.. [React] Test Code 배포 자동화, CI/CD 기존에 진행했던 프로젝트들은 모두 CI/CD환경이 구축되어있었다.gitlab, github, 카카오워크, slack 등 web hook을 이용하여 이벤트 트리거시 배포, 빌드 PR생성 등 메시지 생성 자동화가 구축된 환경에서 작업을 했지만 처음부터 끝까지 CI/CD 환경을 구축해 본 경험은 따로 없어 간단하게 테스트를 진행했다. 우선 Test용 레포를 하나 파주었다.git remote 후 npm create vite@latest . -- --template react로 react 프로젝트로 초기화시켜주었다.npm i -> npm run dev로 잘 열리는지 확인한 뒤 git checkout -b dev Dev로 체크아웃, 메인페이지에 있는 내용을 모두 제거해준 뒤 dev에 푸시했다.이제 dev에서 mai.. 이전 1 2 3 4 ··· 16 다음
