어제의 나보다 성장한 오늘의 나

개발자들은 데이터를 사용자들에게 더 빠르게 전달하기 위해 캐싱을 이용한다. 캐싱이란 사용자에게 데이터에 더 빠르게 도달할 수 있도록 접근성이 더 좋은 임시 저장 위치에 데이터 복사본을 미리 저장해 두는 것이다. 그렇다면 사용자에게 프론트엔드의 화면 단을 사용자에게 더 빠르게 보여주려면 어떤 방법이 있을까?? 바로 AWS의 Cloud Front 서비스를 이용하는 방법이 있다. AWS Cloud Front 서비스는 사용자가 화면 단을 더 빠르게 제공 받을 수 있도록 엣지 로케이션(Edge Location) 이라는 임시 저장 위치에 오리진 서버(Origin)의 원본 데이터인 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠 복사본을 미리 저장해 둔다. 여기서 잠깐 용어 정리... ..

아파치 웹 서버에 배포한 Next.JS 프로젝트를 위해서 웹서버에 리버스 프록시를 설정하였습니다. 저의 Next.JS 프로젝트를 서버에서 실행 시키면 포트는 3031 이고 경로는 루트(/)로 열리게 됩니다. 그럼 {도메인}:3031/ 로 접속하면 Next.JS 프로젝트에 접속할 수 있었습니다. 근데 이 서버에는 여러 가지 프로젝트들이 많이 있었습니다. 그래서 웹 서버 관리자가 루트 경로가 아닌 {도메인}/sw-mileage-admin 으로 접속 할 수 있기를 원했습니다. 포트는 80 이고 경로는 /sw-mileage-admin 임을 알 수 있습니다. Why 리버스 프록시?? 포워드 프록시 : 클라이언트 → 인터넷 으로 나가는 요청을 중개한다. 리다이렉션이 가능 하지만 나가는 요청을 리다이렉트하는 것이기에..

Next JS 프로젝트에서 인증 되지 않은 사용자가 페이지를 사용할 때는 로그인 페이지로 리다이렉션 시키는 로직을 추가하고자 했다. 플로우는 다음과 같다 getServerSideProps를 사용하여 서버 사이드에서 인증 토큰을 헤더에 넣어 GET 요청을 보낸다. 백앤드에서 토큰이 유효 하지 않음을 파악하고 403 에러를 반환한다. 403 에러를 캐치하여 페이지 렌더링 시 리다이렉션 시키는 로직을 추가한다. getServerSideProps // 서버 사이드 요청 const getServerSidePropsFunction: GetServerSideProps = async (context) => { setServerSideCookie(context); // 요청에 토큰 추가 const res = await ..

Next.js에서는 클라이언트에서 API 요청을 보내는 방법이 있고 GetServerSideProps 함수 처럼 서버 사이드에서 API 요청을 보내는 방법이 있다. 클라이언트 사이드에서 요청 시 클라이언트 사이드에서는 보통 브라우저의 JavaScript를 통해 API 요청을 보낸다. JWT 엑세스 토큰과 같은 인증 정보를 로컬 스토리지, 세션 스토리지, 쿠키 등에 저장할 수 있다. 서버 사이드에서 요청 시 서버 사이드에서는 Next.js의 렌더링 과정 중에 API 요청을 처리한다. 서버 사이드에서는 클라이언트 사이드의 로컬 스토리지나 세션 스토리지에 접근할 수 없기 때문에, 대신 HTTP 요청의 쿠키를 통해 인증 정보를 관리한다. 우리 개발 팀에서는 인가를 위해 Jwt 엑세스 토큰 사용하였기에 브라우저 ..

교수님의 서버에 배포한 서비스를 자동화 시키고 싶은데 깃허브 액션과 젠킨스 사용이 방화벽 이슈로 어려웠다. 그래서 생각한 방안이 배포 자동화 쉘 스크립트이다. 미리 작성한 쉘 스크립트를 실행 시키기만 하면 배포를 자동으로 해주는.. 서버에 필요한 것 1. Node.js 2. pm2 (백 그라운드 실행) 이것만 있으면 됩니다. 쉘 스크립트 내용 중간 중간 ~/log/front-manager-deploy.log 파일에 로그를 찍습니다. #!/bin/bash # 마일리지 관리자 페이지 프론트앤드 pull -> build -> execute (pm2) 자동화 logFile="$HOME/log/front-manager-deploy.log" SourceDir="SW-Milege-Front" # 현재 날짜와 시간을 ..

오늘은 파이썬 데이터 분석 라이브러리인 Pandas의 "Data Frame" 에서 많이 사용되는 함수에 대해 알아보겠습니다. 0. Import import pandas as pd 1. DataFrame 생성 1) Dictionary로 Data Frame 생성 d = {'col1': [1, 2], 'col2': [3, 4]} df = pd.DataFrame(data=d) 2) Array로 Data Frame 생성 d = [['Hayoon', 165, 53], ['Orim', 182, 64], ['Minsu', 172, 82]] people_info = pd.DataFrame(data=d, columns = ['name', 'cm', 'kg']) 3) numpy 의 array로 Data Frame 생성 df..