Jaeilit

AWS S3를 활용한 프로필 이미지 업로드 구현하기배경프로필 사진 업로드 관련해서 이미지를 저장할 S3 버킷을 생성하고 업로드하려고 합니다. 처음에는 S3 버킷도 무료가 아니기 때문에 도입을 망설였습니다. 요금이 크진 않겠지만 전송량, 저장용량, 조회, 업로드 등 버킷에 대한 요금이 발생할 수 있기 때문입니다. 하지만 Next.js에서 next/image를 활용하려면 외부 이미지에 대한 remotePattern이나 domains를 next.config.js에서 설정해주어야 합니다. 외부 도메인에 대한 URL이 랜덤하다면 도메인을 특정할 수 없으니 설정할 수 없고, 이미지 최적화 기능을 사용할 수 없게 됩니다. 다른 방법으로 next/image를 사용하지 않고 일반 HTML img 태그로 렌더링해도 됩니다..

도입배경서버개발을 시작하면서 API를 처음 설계하다보니 설계방식에 문제가 있었습니다. RESTfull 하게 작성하려고 더 나은 방식을 찾을 때마다 설계를 수정하게 되었고 도화지 위에서 그림을 그렸다 지웠다하는 식의 일이 반복적으로 발생했고 그로인해 개발의 속도가 나지않고 계속 제자리 걸음을 하는 듯한 느낌이 들었습니다. 느리지만 단단하게.. 가려고 했습니다. 누구나 처음에는 서툴지만, 잘해보이기 위해 능숙한척 하는 것보다 포인트를 정확히 짚고 넘어가면서 익숙해지면 자연스레 능숙함은 따라온다는 내 삶의 철학이 녹아있었기 때문이었습니다. 하지만 이런 서버의 API의 잦은 변경의 부하들은 클라이언트에서 다 받게 되었습니다.API 엔드포인트 변경요청/응답 body, parameter 구조 변경타입 불일치로 인한..

막상 사이트를 배포하고 나니 비정상적인 트래픽으로 인한 과금이 걱정되기 시작했습니다. 특히 디도스(DDoS) 공격처럼 악의적인 사용자가 서버에 수많은 요청을 동시에 보내거나, 봇이 API를 과도하게 호출하는 경우 AWS 요금이 예상치 못하게 과금될 수 있습니다. 아직은 걱정할 단계가 아닐지 모르지만, 과금이 발생한 후에 대책을 세우는 것보다 미리 예산을 방어하는 것이 현명하다고 판단했습니다. 현재 사이트의 아키텍처로는 가비아에서 구입한 도메인의 DNS 설정을 AWS Route53에서 관리하고 루트 도메인은 Next.js로 작성된 프론트엔드를 배포한 Vercel과 연결했고, 백엔드 서버는 'api'라는 서브도메인을 만들어 EC2와 연결해두었습니다.Next.js는 보안상 기본적으로 HTTPS로 통신하도록 설..

문제사이트 배포 할 때 메타 데이터들을 작성하고 SEO를 위해서 robots와 sitemap을 작성하고 네이버 서치어드바이저와 구글 서치콘솔에 사이트를 등록해주었지만 생각보다 유입이 없고 검색에 대한 노출이 없고 노출이 없다보니 당연히 CTR 클릭수도 없었다.무엇이 문제일까?첫번째로는 트래픽적인 요소도 무시못할테니 일정시간이 지나면 자연스레 노출되고 유입이 생기면서 어느정도는 해결 될 줄 알았지만 지금 한달이 훨씬 지난 시점인데도 나아지지 않았다. 마케팅적인 활동이 부족했다면 인정하는 부분이다. 하지만 사이트는 아직 개발중인 단계이기 때문에 홍보를 생각하지 않았다. 근데 무슨 트래픽을 원하냐고 생각 할 수 있지만 하루에 100명 1000명을 바란 것이 아니라 유입경로라던지 노출 횟수 등 SEO 적용이 잘..

개인 프로젝트를 하던 중 전에 Vercel 배포할때는 까지 본적 없는 에러를 발견했고 이를 해결해 나간 과정을 설명하려고 합니다.먼저 히스토리를 위해서 도메인 구입과 연결한 것부터 이야기를 하려고 합니다. # 도메인 연결 부터프로젝트 코드보다 인프라에 더 집중을 할 때이다. 도메인 연결부터 이야기를 할 필요는 없지만 전체적인 과정을 설명을 하기 위해 먼저 이야기를 하려고한다. 도메인을 구입을 했는데 .co.kr .com 등 같은 최상위 도메인이 .shop 이나 가비아에서 500원에 파는 것들이 있기한데 지속적으로 운영을 할 목적으로 시작한 프로젝트라 나중에 혹시나 도메인을 이전해야한다거나 할 때 또 귀찮은 일을 해야하는게 2번 일하는 것 같아서 싫었고 또 다른 이유는 도메인을 이전하면 SEO에도 영향이 ..

git action 으로 cicd 를 하는 방법에 대해서 기술하려고 합니다. 본 내용은 nestjs 서버 배포의 내용을 하기 때문에 ec2에 배포를 하려고했고 프론트 배포는 spa 같은 경우엔 s3 에 정적으로 배포를 해도 되니 ec2 인스턴스를 사용할 일은 없을 것 같고, nextjs 를 사용한다면 버셀에서 워낙 잘되있기에 해당사항이 없을 수도 있습니다. 깃 액션에서 수행할 테스크는 로컬에서 하는 방식과 동일합니다.2. aws 로그인을 하고2. 도커 이미지를 빌드와 ecr에 푸쉬하고3. ec2 원격으로 접속한 뒤에4. 이미지를 불러와서 docker copose 해당 서비스를 해주시면 됩니다. 깃 액션에서도 동일하게 수행하면 됩니다. 1. aws 인증- name: Configure AWS credenti..

유저분들에게 관련 안내 이메일을 보내야하는 업무가 발생했다.발송과 발송 과정에서 발생한 문제와 해결 방법을 기록하려고 한다. 이 업무는 단발성으로 다시 사용한다거나 유지보수를 할 코드는 아니기에 작업속도에 집중하려고 했고 코드를 이쁘게한다거나 하려고 하지는 않았다. 보내는 과정은1. csv 형식의 파일로 유저 이메일이 포함 된 리스트를 받아서 json 으로 파싱해서 코드로써 이메일을 추려내서 보내려고 했다.2. 이메일을 발송하고 나서는 sendgird 에도 로그가 남겠지만 노드 자체에서도 발송 후에 로그를 파일로 남기려고 했는데3. nodejs fs 내장모듈을 사용해서 txt 파일생성해서 간단히 유저 별로 sendmail 에 대한 결과만 남기려고 했다. node 의 express 로 서버를 띄우고 간단히..

UI 라이브러리 초기 세팅 (모노레포 -v) 1. 미리보는 폴더 구조  모노레포 구조로 세팅하기- 실제 ui가 담길 packages/**- react + vite 가 담긴 app/docs 구조 1. 프로젝트 생성패키지 매니저는 pnpm 을 사용했다.패키지 매니저 init 명령어를 입력하고 pacakge.json 이 생성 된 것을 확인 후에 packages 폴더와 app/docs 디렉토리를 만들어준다. package.json 생성 이후 필요없는 부분은 지워주고 name 에 패키지의 이름을 지어준다.패키지를 npm에 배포할 목적이라면 npm 에 가입하고 Organization 을 생성해주고 사용하는게 좋은데 배포 목적이 아니라면 딱히 이름을 어떻게 짓던 상관없을 것 같다.pnpm init// pagckage..

이 토글 버튼 UI는 처음엔 a,b 두개로만 동작을 해서 정말 토글버튼이였습니다만 리스트 갯수를 2개에서 더 많은 갯수로 늘려 다양하게 활용처에 사용하고싶은 마음에 코드를 수정한 결과 이런 결과물이 나왔습니다. 사실 토글버튼 보다 nav 버튼에 가깝지 않을까 싶지만 적당한 명칭을 정하지 못하여 최초의 이름인 토글로 지정하였습니다.구조컴포넌트마다 독립적인 구조를 위해서 폴더마다 tsx, hooks, provider, css, types 파일을 가지도록 했습니다.📦components ┗ 📂toggle ┃ ┣ 📜hooks.ts ┃ ┣ 📜index.tsx ┃ ┣ 📜provider.tsx ┃ ┣ 📜styles.module.css ┃ ┗ 📜type.ts - tsx: view 담당- hooks: 로직 담..

렌더링과 리렌더링 최적화(Feat. 메모이제이션) 리액트에서 렌더링이란props와 state를 기반으로 컴포넌트를 구성하는데 이를 요청하고 제공하는 프로세스를 의미한다.브라우저에서도 렌더링이라는 단어를 사용하기 때문에 리액트 렌더링도 흔히 비슷하게 화면에 그리는 페인팅 과정이라고 오해할 수 있는데 리액트에서의 렌더링은 컴포넌트를 호출하는 것이다. 리액트는 렌더링을 먼저 완료하고 DOM을 업데이트한 후 브라우저가 리페인팅한다. 렌더링 프로세스렌더링 프로세스 자체는 트리거, 렌더, 커밋 총 3단계로 구성된다. 먼저 렌더링을 하기 위해서는 아무때나 시도때도 없이 렌더링을 할 수 없으니 이때는 꼭 렌더링 해주세요! 라는 트리거 장치가 필요하다. 그리고 당연히 이 트리거가 되는 조건이 있다. 렌더링을 시키는 트리..