본문 바로가기

전체 글134

PM2 ( node, bun ) ## PM2는 Node 어플리케이션을 위한 프로세스 관리자이다. Node.js 어플리케이션을 항상 살아있게 Keep Alive 만들어주는 역할을 한다. 개발 중에 우리는 node app.js와 같이 직접 파일을 실행하지만, 실제 서비스를 운영할 때 이렇게는 부족하다.서버에 에러가 발생하면 프로그램이 그대로 종료되어 버리기 때문이다. ## PM2는 이러한 문제를 해결하기 위해서 다음과 같은 기능을 제공한다. 무중단 서비스- 앱에 오류가 발생하여 종료되더라도 PM2가 즉시 자동으로 재시작해준다. 클러스터 모드- 단일서버에서도 여러개의 프로세스를 동시에 실행하여 성능을 극대화한다. 모니터링 - 터미널에서 PM2 monit 명령어로 cpu, 메모리 사용량 등 앱의 상태를 실시간으로 확인한다. 로그관리- 앱에서.. 2025. 6. 19.
passport + jwt + refresh npm install express passport passport-local passport-jwt jsonwebtoken express-session bcrypt passport: 메인 인증 모듈passport-local: 아이디/비번 인증passport-jwt: JWT 인증jsonwebtoken: JWT 생성/검증bcrypt: 비번 암호화express-session: 세션 미들웨어#### bcrypt.comparebcrypt.compare(입력한 비번, db에 저장된 해시, 콜백함수)- 입력한 비번을 내부적으로 같은 알고리즘으로 해시해서- db에 저장된 해시랑 같은지 비교함. 맞으면 true, 다르면 false #### strategy에서 done을 하면- done은 passport에서 제공하는 콜.. 2025. 5. 7.
PASSPORT 인증모듈 ## 개요- 회원가입과 로그인을 직접 구현할 수 있지만, 허점이 있을 수 있고 세션이나 쿠키 처리 등의 이유로 복잡하기에 미리 만들어진 검증된 모듈을 사용하는 것이 권장된다. - Passport는 이에 적합한 미들웨어 모듈이다. 말 그대로 여권이라는 의미인데, 여권 소지자가 입출국 자격에 대해서 인증하듯이, 우리가 요청/응답을 받을 때도 이 모듈을 사용하여 인증을 받을 수 있다. - 로컬 계정 ( 이메일/비밀번호 )부터 구글, 카카오, 네이버, 깃허브 같은 소셜 로그인까지 모두 지원된다. - 이런 인증방식 하나하나를 전략 strategy라고 한다.- 공식문서 : https://www.passportjs.org/ Passport.jsSimple, unobtrusive authentication for .. 2025. 5. 7.
Putty ##Putty는 윈도우에서 SSH, Telnet, rlogin, serial 포트 접속 등을 지원하는 무료 터미널 에뮬레이터 프로그램이다.쉽게 말해서 다른 컴퓨터 ( 특히 리눅스 서버 )에 원격으로 접속할 수 있게 도와주는 도구다. ## 주요용도- SSH 클라이언트 : 보안접속으로 리눅스 서버에 접속. 가장 많이 쓰인다.- Telnet 클라이언트 : 오래된 방식이지만, 일부 장비에서 여전히 사용된다. - rlogin / Raw / Serial 접속 : 특정 장비 ( 예, 라우터, 스위치 ) 설정용- 키 페어 관리 ( Pageant, puTTYgen ) : SSH 키 생성 및 관리 ## 사용 예시1. 리눅스 서버에 접속하기- 서버 주소 입력- 포트 지정 ( 보통 22 )- 접속 버튼 클릭 -> 로그인 2.. 2025. 4. 30.
페이지 간 전환 효과 부여 ## 작동 순서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.

티스토리툴바