본문 바로가기

전체 글139

아파치 리버스 프록시 설정 + 정규표현식 전에 있던 배포 문제 때문에 리버스 프록시 설정을 고려하게 되는데, 이 경우 중요한 제약사항이 있다. - 서버 전체의 수정을 할 수 없다.- 많은 서비스가 돌아가기 때문에 서버를 껐다 킬 수 없다.- 서버 전체의 설정을 건드리지 않고, 배포 단위 ( 폴더 ) 로만 설정하고 싶다. 그러면 어떻게 해야하는가? 서버의 메인설정파일인 httpd.conf를 직접 수정하는 대신에, .htaccess 파일을 사용하여 디렉토리 ( 폴더 ) 레벨에서 설정을 적용할 수 있다. .htaccess 파일의 내용은 서버를 재시작하지 않아도 즉시 반영된다.다만 ProxyPass 지시어는 보안상의 이유로 .htaccess 파일 내에서 사용하는 것이 기본적으로 허용되지 않는다. 따라서 다른 대안을 사용해야하는데, 아파치의 강력한 기.. 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.
MERGE 구문 MERGE dbo.e_uservideoprogress AS targetUSING (SELECT @employeeid AS employeeid, @videoid AS videoid) AS sourceON (target.employeeid = source.employeeid AND target.videoid = source.videoid) WHEN MATCHED THEN UPDATE SET watchedtime = @watchedtime, iscompleted = @iscompleted, lastwatchedat = @lastwatchedat WHEN NOT MATCHED THEN INSERT (employeei.. 2025. 6. 26.
실제 유즈케이스 hono 1. 먼저 DB 연결과 쿼리 실행 헬퍼 함수를 정의한다.import * as sql from "mssql";// Bun은 기본적으로 process.env를 지원합니다const config: sql.config = { user: process.env.USER || "your_username", password: process.env.PASSWORD || "your_password", server: process.env.SERVER || "localhost", database: process.env.DATABASE || "your_database", options: { encrypt: false, // Azure SQL Database의 경우 trustServerCertificate: f.. 2025. 6. 24.
실제 유즈케이스 1. 어떤 한 페이지 ( 단일 컴포넌트나 몇개의 컴포넌트 ) 에서 state로 사용할 것은위에 interface를 정의한다. 예를 들어서 이렇게interface Course { id: number; title: string; description: string; status: "completed" | "in-progress" | "not-started" | "required"; progress: number; duration: string; dueDate?: string;}const CourseLists: React.FC = () => { const navigate = useNavigate(); const [courses, setCourses] = useState(mockCourses);.. 2025. 6. 24.
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.

티스토리툴바