서론 개발을 시작 할 때 쯤에는 DevOps라는 개념이 없었다. 요즘에는 협업, 어플리케이션의 안정성, 커뮤니케이션 코스트 감소, 빠른 개발 등 다양한 이유로 DevOps형태의 문화가 넓게 정착되었다. 그러면서 엔지니어들은 의외로 알아야 할 범주들이 또 넓어졌는데.. (업무 효율성이 올라가긴 하지만 공부해야 할 범위가 넓어진 것도 맞다) 개발과 커뮤니케이션 툴 이외에 추가적으로 알아야 할 개념들은 CI/CD , IaC , Monitoring , Test 등이 될 것 같다. 이중 IaC에 해당하는 Ansible과 CI/CD 쪽에 해당하는 Jenkins를 이용하여 EC2 자동배포 툴을 만들어 보려고 한다. Ansible쪽을 살펴보면서 여러 서버를 손쉽게 구축할 수 있도록 도와주기도 하고, 배포, 유지관리에도..
기존에 직장에서 일 할 때에는 한가지 인증 방식을 익혀두고, 빨리빨리 처리 해야 하니 솔직히 기존 것 가져다 쓰기 바빴다.. 예전에 포스팅 한 Passport 인증 처리 방식으로 주로 사용 했었다. 이것도 오늘 알게된 사실인데 sanctum이라는 인증 방식이 또 있더라.. 사실 라라벨을 5점대 부터 사용해서 그런지 추가 기능들이 이렇게 많을 줄 몰랐다 ㅎㅎ.. 둘의 차이점은 다음과 같다. 목적 Sanctum: SPA(Single Page Application)나 모바일 앱과 같은 클라이언트 측 JavaScript 애플리케이션을 위해 설계된 경량 패키지 Passport: 클라이언트와 서버 사이의 API를 보호하는 데 사용되는 OAuth2 서버 토큰 타입 Sanctum: 토큰 타입으로 쿠키 또는 API 토큰..
솔직히 그동안에는 같은 작업들만 반복해서 다른 기술들을 익힐 경험이 적었는데, 최근데 다양한 정보들을 받아들여 나한테 어떤게 부족한지 절실히 느끼고 있는 요즘이당.. octane이란거 자체를 오늘 처음 알았는데, Swoole를 이용하여 라라벨 프레임워크의 성능을 높히기 위해 개발된 최신 버전이라고 한다. https://laravel.com/docs/10.x/octane#main-content Laravel - The PHP Framework For Web Artisans Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to creat..
PHP 에서 대용량 데이터를 처리하는데에 있어서 푸시 메시지를 보낼때 큐를 사용한다던가 기존 쿼리가 너무 좋지 않아 쿼리 리팩토링을 한다던가.. 는 실제로 접해봐서 사용해 보긴 했는데 (푸시 메시지는 동시 접속자 수와 상관 없이 푸시를 허용한 모든 유저에게 보내야 하고 쿼리 리팩토링 해야 하는 경우는 직원들이 대용량 데이터 처리 할 때 속도가 너무 나오지 않아 자주 했었다.) 하지만 경험상 대용량 트래픽을 처리 해 본 적이 없어서 (ㅠ__ㅠ...뭔가 하나 쯤은 잘 되었으면 해 봤을 텐데..) 몇가지 해결 방안들을 알고는 있는데... 공부도 할 겸 자료 조사를 하다가, Chat GPT한테도 몇가지 물어 봤다. 1. PHP-FPM을 커스텀 하여 서버 자체의 성능을 올리는 방법은 뭐야? PHP 자체를 커스텀 ..
Next.js 는 client-side를 렌더링 하기 전에 SSR을 수행한는데, 이 때 window 전역객체가 로드 되지 않아서 localStorage is not defined 오류가 발생한다. 해결 방법들은 아래와 같다고 나오는데.. if (typeof window !== 'undefined') { // Perform localStorage action const item = localStorage.getItem('key'); } useEffect(() => { // Perform localStorage action const item = localStorage.getItem('key') }, []) axiosInstance를 설정 할 때에는 두가지 방법 다 사용하기 어렵다. 이 땐 아래와 같이 작성..
서론 간단하게 구현하려면 한없이 간단하게 구현 할 수 있지만.. 실제 서버 올라가서 비용문제도 생각해야 하고, 리소스 문제 등등 실제 프로젝트 처럼 짜려다 보니 react는 처음 해보는데 되게 생각해야 하는 기능들이 많이 있었다. 일단 구현 자체는 되었지만 삽질 시간이 5~6시간은 되는 것 같아 조금 힘들다 ㅠ_ㅠ 풀스크린샷으로 찍어서 그런지 아직 화면에 그려지지 않은 얘들은 이미지가 노출이 안된다. 굉장히 좋군.. 일단, 무한 스크롤로 화면 구현을 했고 검색창은 헤더에 달려있고 필터 목록은 검색 페이지 내에 달려있다. 실제로 디자이너들은 더 빡센 구조도 요청하는 경우가 많으니.. 또 다른 페이지에 갔다 왔을 때 현재 검색 내용을 초기화 해서는 안된다.. 무한 스크롤 특성상 상세 페이지 들어갔다가 뒤로 ..
개인 프로젝트 진행 중에, Infinite scroll을 구현하고 싶어서.. 디자인 열심히 짜고 퍼블리싱 열심히 하고 첫 페이지 로드를 한 다음에 중간에 깨달은게, 상세 페이지 갔다가 뒤로 가기 누르면 이전 데이터가 infinite scroll에 존재 해야 한다는 점 이었다. 프론트쪽이 너무 오랜만이라.. Vue쪽에서는 Store를 이용해서 처리했던 기억이 있어서, 찾아보니 Next.js 에서는 redux 라는 라이브러리를 사용하여 stroe를 구성한다는걸 알았다. 스토어 구성부터 차근차근 구현 해 보자..! install redux package npm install @reduxjs/toolkit npm install react-redux npm install next-redux-wrapper 설치 이..
도메인 연결, SSL 인증서 및 LB 처리 일단 기존에 Route53과 ACM, EC2 LB를 이용해서 SSL을 구축, 도메인 연동을 진행했다. 정상적으로 인증서 연동이 되었고, https로 접속, http->https redirect도 처리 되었다. 방식은 기존에 작성해둔 아래 포스트를 참조. https://jjong-factory.tistory.com/92 [AWS] ACM + Route53을 이용한 SSL(Https) 인증서 발급 서론 서비스를 진행하다 보면 SSL 인증서를 발급받아서 실 서버에 적용해야 되는 경우들이 많이 있습니다. 실 서비스라면 무조건 적용 해야 겠죠? 무료 인증서 발급으로는 letsencrypt 같은 친구들 jjong-factory.tistory.com 서버 세팅 클라이언트용 ..
Mysql Setting + 보안세팅 + passport 세팅 일단 Mysql 설치부터 진행한다. apt-get install mysql-server 외부 접속을 위해 포트를 열어줘야 하는데, EC2 내부에 설치를 진행했고 API 서버 이외에는 접근할 필요가 없다. terminal에 접속하기 위해 SSH 포트인 22번 포트를 개인 PC에만 열어 두었으니, 이를 통해서 외부 접근을 이용하면 된다. 내부 접속은 허용 되어 있어서 바로 되어야 하지만 접근시 오류가 발생한다. 실제로 터미널에서 접속해보면 정상적으로 접근 할 수 있는데, 접근 후 아래와 같은 쿼리를 이용하여 내용을 확인해 보았다. mysql -uroot use mysql; select user, host, plugin from user; root..
EC2 세팅 가장 먼저 프리티어로 EC2를 개설했다. 데이터 베이스 들도 따로 구축 해 주고 싶긴 한데... 비용 문제상 EC2 내부에 구축 하기로 했다. 일단 SSH로 접속 후, apt를 update, upgrade 진행을 먼저 했다. 이후 nginx를 먼저 설치해 주었다. apt-get install nginx 정상적으로 설치된 걸 확인 후, 개발 환경과 맞추어 PHP를 설치! 로컬에서 8.2 버전을 사용 중이라 해당 PHP 버전으로 설치 해 주었다. add-apt-repository ppa:ondrej/php apt-get install php8.2 이후 서버 코드를 clone 해 주고 .env를 세팅, 이 때 .env의 APP_DEBUG는 false값으로 지정 해 주어야 한다. composer를 ..
