전체 글120 페이지 간 전환 효과 부여 ## 작동 순서1. 초기 렌더링- 앱이 시작될 때 HashRouter -> PageTransition -> Routes -> Home 순으로 컴포넌트가 마운트 된다.- TransitionContainer ( == PageTransition 내부의 styled.div ) 는 마운트 되면서 animation : slideIn 0.5s가 자동으로 실행된다.- 화면에 Home 페이지가 오른쪽 바깥에서 왼쪽으로 슬라이드 인 되면서 나타남 2. 페이지 이동 ( 언마운트 트리거 )- 사용자가 #/today 링크를 클릭하면 useLocation()이 새 경로를 감지한다.- location.pathname 이 바뀌면 React는 key={location.pathname} 이 달린 TransitionContainer를 .. 2025. 4. 25. 페이지 단위로 스크롤 끊기 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. 상태 관리 (typedText)const [typedText, setTypedText] = useState("");const fullText = "신선한 농산물을 만나보세요"; • typedText: 화면에 지금까지 “찍힌” 글자들을 저장하는 상태야. • fullText: 최종에 보여주고 싶은 전체 문구. 초기엔 typedText가 빈 문자열(””)이라서 아무것도 안 보이는 상태야. 2. useEffect로 하나씩 글자 추가하기useEffect(() => { if (typedText.length { setTypedText(fullText.slice(0, typedText.length + 1)); }, 100); return ().. 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. Passport 인증 미들웨어 ## Passport 는 Node.js에서 사용되는 인증 미들웨어 인증 : 사용자의 신원을 확인함 ## Passport의 역할- 웹 어플리케이션에서 로그인 기능을 구현하려면 보통 사용자 정보를 저장하고, 사용자가 입력한 정보 ( 이름이나 비밀번호 예를 들어 )가 맞는지 확인해야 한다. 이 과정을 인증이라고 하고, Passport는 그 과정을 쉽게 만들어준다. - Passport를 사용하면 소셜 로그인도 쉽게 구현할 수 있음. - 여러가지 전략이 있는데 로컬 로그인이 가장 기본이 된다. - 크게 3가지 전략이 있는데1. LocalStrategy : 사용자 이름/비밀번호2. GoogleStrategy : 구글계정3. JWTStrategy : jwt 토큰 각 전략은 인증하는 방식만 다르고, Passport의 .. 2025. 4. 22. 새로운 라우팅 라이브러리, 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. PM2, 커넥션 풀링 ** 상황가정 **- PM2로 node api를 돌리고, 이를 IIS로 역방향 프록시를 걸어서 api에 전달한다. - PM2가 index.js를 실행하는 순간에 Node.js 프로세스가 메모리에 로드되고 실행된다.- 이 때 index.js의 모든 초기화 코드가 실행되고, 그 중 커넥션 풀 생성코드 poolPromise도 실행된다.- 즉 IIS 서버에 대한 어떠한 클라이언트 측 요청과 상관없이 PM2가 프로세스를 시작할 때, 이미 각 프로세스는 독립적으로 구동되고, 커넥션 풀도 생성되서 대기 상태가 된다. ** 역방향 프록시와의 관계- IIS가 역방향 프록시 역할을 하여 리액트 앱에서 오는 요청을 Node 어플리케이션, 즉 pm2로 실행중인 프로세스로 전달한다. - 이 때 이미 실행된 Node.js 프로.. 2025. 4. 10. 자주 사용하는 HTTP 헤더 ** 요청헤더1. Accept- 클라이언트가 이해하거나 처리할 수 있는 응답 데이터 타입을 지정- ex) Accept : application/json 2. Accept-Encoding- 클라이언트가 지원하는 콘텐츠 압축방식을 명시- Accept-Encoding : gzip, deflate 3. Accept-Language- 클라이언트가 선호하는 언어를 나타냄- Accept-Language : en-US, ko 4. Content-Type- 요청 본문의 데이터 타입 명시- Content-Type : application/json 5. Authorization- 인증 토큰이나 자격증명 포함- Authorization : Bearer 6. User-Agent- 클라이언트 어플리케이션 ( 브라우저 등 )의 .. 2025. 4. 10. 자주 사용하는 MIME TYPE * MIME 타입- MIME 타입은 클라이언트와 서버가 전송하는 콘텐츠의 종류를 명시하여, 데이터 처리를 어떻게 할지 결정하는데 도움을 준다. 1. text/html- html 문서를 나타냄- ex) 웹페이지 2. text/plain- 일반 텍스트 데이터- ex) 단순 텍스트 파일이나 디버깅용 응답 3. application/json- JSON 데이터- ex) API의 요청 및 응답데이터 4. application/xml- xml 포맷의 데이터- ex) xml 기반의 api응답 혹은 문서 5. multipart/form-data- 파일 업로드와 같이 여러 파트로 구성된 데이터를 표현- ex) 파일 전송 6. text/css- css 스타일 시트- ex) 스타일링 파일 2025. 4. 10. 이전 1 2 3 4 ··· 12 다음