본문 바로가기

Frontend31

Ref - 컴포넌트 데이터 페칭 후 해당 컴포넌트 정보 로드 리액트에서 ref를 사용해서 리스트 로딩이 완료된 후 컴포넌트의 높이를 가져오는 방법> 데이터 로딩이 완료되어 컴포넌트가 다시 렌더링된 시점에 높이를 측정한다. 이를 위해서 useEffect 훅을 데이터 (state)와 연결하여 사용한다. # 원리 : 데이터 로딩 -> state 변경 -> 컴포넌트 리렌더링 -> useEffect 실행 -> ref.current로 DOM 요소에 접근해 높이 측정1. useRef 높이를 측정하고 싶은 DOM 요소에 연결할 ref 객체를 생성한다. 2. useState리스트 데이터와 로딩 상태를 관리한다. 3. useEffect데이터가 변경되어 리렌더링이 완료된 후에 특정 작업을 수행한다.이 useEffect의 의존성 배열에 데이터 state를 넣어주는 것이 핵심이다. i.. 2025. 7. 30.
왜 api 베이스에 서버 IP주소를 그대로 넣으면 안되는가 왜 리액트에서 서버 연결 정보 넣을 때 ip 주소를 바로 넣으면 안될까? [ 보안의 측면에서 ]가장 큰 문제는 내부 시스템 정보노출이다.1. 누구나 볼 수 있다. - React 코드는 최종적으로 사용자의 웹 브라우저에서 실행된다. 악의적인 사용자를 포함한 그 누구라도 브라우저의 개발자 도구를 열어서 네트워크 요청이나, js 소스코드를 살펴보는 것만으로 서버 b의 내부 ip주소와 포트주소를 알아낼 수 있다. 2. 공격자에게 지도를 주는 셈이다.- 공격자는 이제 우리 시스템이 최소한 서버 a( 웹서버 ) 서버b ( api 서버 ) 라는 두개의 서버로 구성되어 있다는 내부 구조를 알게 된다.- 더 중요한 것은, 공격 대상이 될 수 있는 서버 b의 정확한 주소를 확보하게 된다.- 만약 다른 경로 ( 피싱, 내부.. 2025. 6. 27.
서비스 배포 케이스1 서버 A ( 사내에만, 다만 VPN 통해서 접속가능 ), 프론트엔드 여기에 올림서버 B ( 사내에만 ), API 여기에 올림 가장 중요한 포인트는 리액트 프론트엔드 코드는 사용자의 웹 브라우저에서 실행된다는 것이다. 1. VPN 사용자의 접속 흐름- VPN 사용자가 서버A의 주소로 접속한다.- 서버A의 아파치 서버는 리액트로 빌드된 정적파일을 사용자에게 전송한다.- 사용자의 웹 브라우저가 이 파일들을 다운로드하여 실행한다. 2. API 통신시도- 이제 사용자의 브라우저에서 실행된 리액트 앱이 데이터를 가져오기 위해서 API를 호출한다.- 이 API의 주소는 서버 B의 IP와 포트로 설정되어있다.- 여기서 문제가 발생한다. API를 호출하는 주체는 서버A가 아니라 VPN에 접속한 사용자의 PC ( 웹 브라.. 2025. 6. 27.
페이지 단위로 스크롤 끊기 import "./styles.css";import styled from "@emotion/styled";export default function App() { return ( page1 page2 page3 page4 );}const Container = styled.div` height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-behavior: smooth;`;const Page = styled.div` height: 100vh; // background-col.. 2025. 4. 24.
글 올라가는 효과 특징이 위로 슬라이드 되는 애니메이션은 크게 세 부분으로 나눠볼 수 있어: 1. 상태 관리 (currentFeatureIndex) 2. 순환 타이머 설정 (useEffect) 3. CSS로 실제 슬라이드 & 가시성 처리 1. 상태관리하기const [currentFeatureIndex, setCurrentFeatureIndex] = useState(0);const features = [ "100% 신선한 농산물", "농장 직배송으로 더 신선하게", "합리적인 가격", "친환경 농법으로 재배",]; • currentFeatureIndex는 현재 보여줘야 할 features 배열의 인덱스야. • 초기값은 0이니까 첫 번째 문구(“100% 신선한 농산물”)가 먼저 보이는 거야. 2. 순환타이머 설정 .. 2025. 4. 24.
새로운 라우팅 라이브러리, wouter - 아주 가벼운 라우터 라이브러리- react-router가 너무 무겁다 싶을 때, 혹은 번들 사이즈를 작게 유지하고 싶을 때 사용하면 좋음. ## 특징- 번들사이즈 약 1kb- 훅 기반 : useLocation, useRoute등으로만 라우팅을 처리- jsx 컴포넌트 없이도 ok : Route, Switch 컴포넌트가 있지만, 사실 훅만으로 충분- SSR 지원- 프레임워크 독립적 : React외 Preact, Inferno 등에도 쓸 수 있고- 의존성 제로 : 리액트 외에 추가 의존 패키지 없음. npm install wouter ### 기본 사용법 1. 라우터 감싸기// App.tsximport { Router } from 'wouter';function App() { return ( .. 2025. 4. 21.
Axios Interceptor, Lodash.debounce 어제 개발을 하다가 다음과 같은 문제가 일어났었다. 플로우는 다음과 같다.처음에 로그인을 한다.로그인을 하면 패스워드를 해싱한다. ( DB에는 원문이 들어가 있지 않고, 단방향 해싱으로 진행한다. )해싱값을 입력값 ( pw )와 비교한다. 맞으면 서버에 저장된 SECRET_KEY로 생성한 jwt 토큰을 발급한다.그리고 이 토큰을 클라이언트측 브라우저의 세션 스토리지에 넣는다. 이후에, Axios 인스턴스의 헤더에 Authorization : Bearer [토큰] 을 추가해서 API를 날린다.( 리프레시나 토큰 만료는 아직 고려하지 않았다. ) 문제는 다음에서 발생했다.토큰을 브라우저의 세션 스토리지에 분명 넣었는데, 토큰 검증이 되지 않아서 자꾸 401 ( Unauthorized ) 에러가 나는 것이었.. 2025. 4. 15.
css -> tailwind css padding padding : 1rem;p-4 padding-top : 0.5rem;pt-2 padding-bottom : 2rem;pb-8 padding-left/right : 0.75rem;px-3 ( 좌.우) padding-top/bottom : 1.5rem;py-6 ( 위.아래 )  margin똑같음1rem이 4왼쪽은 l, 위는 t, 아래는 b, 오른쪽은 r, 위아래는 y, 왼우는 x  flexbox display:flex;flex display:inline-flex;inline-flex flex-direction : column;flex-col flex-wrap : wrap;flex-wrap align-items : center;items-center align-self : start;self.. 2025. 3. 28.
Recoil-Persist Recoil-Persist는 Recoil atom (전역상태)을 브라우저(또는 리액트 네이티브)의 영구저장소(LocalStorage, SessionStorage, AsyncStorage등)에 자동으로 저장 Persist 하고 페이지 리로드 시 저장된 값을 복원 rehydrate 해주는 가벼운 라이브러리이다. - 선택적 Persistence : 특정 atom만 골라서 저장가능- 만료 설정 가능 : 저장 데이터의 TTL ( time to live ) 지정- 타입스크립트 지원 : 제네릭 타입 정의 가능 * 예시 * import React from 'react';import { RecoilRoot, atom, useRecoilState } from 'recoil';import { recoilPersist } f.. 2025. 3. 24.
Concurrent Mode(Concurrent Rendering)와 Suspense를 활용해 비동기 UI를 구성하는 방법과, 이 패턴의 장단점은 무엇인가요? Concurrent Mode(Concurrent Rendering)와 Suspense를 활용해 비동기 UI를 구성하는 방법과, 이 패턴의 장단점은 무엇인가요?** Concurrent Mode & Suspense* Concurrent Mode : 리액트 18이상에서 활성화 가능하고, 렌더링을 비동기로 수행하여 UI 차단 없이 업데이트를 처리한다.* Suspense : 비동기 컴포넌트 ( ex : lazy import, data fetch ) 로딩 시 fallback UI를 자동표시import {Suspense, lazy} from 'react';const Profiles = lazy(()=> import ('./Profile'));function App(){ return( Loading Profil.. 2025. 3. 21.

티스토리툴바