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

Next.js를 사용하여 프로젝트를 진행하기로 하였다. 현재 상황과 Next.js의 호환성을 고려하여 css Framework를 선정하고 있다. 1. 현재 상황 디자이너가 없다. 능력 있는 디자이너와 함께 협업을 했더라면 tailwind css 하나만 사용해도 괜찮았을 것 같다. 하지만 모달, 사이드 바 등등 컴포넌트들을 직접 만들어야 하는 상황이 있어서 컴포넌트를 제공해주는 무언가가 필요하다. 2. Next.js 의 호환성 이번 프로젝트에서는 UI가 큰 비중을 차지 하지는 않아서 최대한 Next.js의 장점을 살려서 서버 사이드를 최대한 활용 하려고 한다. 일단 클라이언트 사이드에서 많이들 사용하는 CSS-In-JS..! 예쁜 UI 컴포넌트들을 많이 제공해주지만... Next.js의 서버 컴포넌트는 C..

Next.js로 프로젝트를 하면서 드는 의문이 있다. 왜 MUI 같은 라이브러리들은 자꾸 호환이 안된다고 하는 걸까?? tailwind는 왜 되는걸까?? 공식 문서를 보면 다음과 같이 나와 있다. Next.js와 호환이 잘되는 것들 1. CSS Modules 2. tailwind CSS 3. Sass Next.js와 호환이 잘 안되는 것 CSS-in-JS chakra-ui kuma-ui @mui/material @mui/joy pandacss styled-jsx styled-components stylex tamagui tss-react vanilla-extract 근데 또 emotion은 이제 지원한다고 한다. CSS-in-JS가 지원이 안되는 이유는?? 이유는 다음과 같이 나타나 있다. Warning..

아파치 웹 서버에 배포한 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" # 현재 날짜와 시간을 ..