dolog

목차AWS 계정 생성과 IAM 사용자 생성EC2 인스턴스 생성AWS 계정 생성하기단순히 AWS 계정을 만드는 것에서 그치는 것이 아닌 IAM을 이용하여 보안까지 신경써봅시다.IAM을 사용한 이유는 아래 블로그를 참고했습니다.https://velog.io/@amphi/AWS-IAM-%EC%96%B8%EC%A0%9C-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C AWS IAM, 언제 어떻게 사용할까?시리즈의 첫번째는 AWS IAM 서비스이다. 아마 AWS에 처음 가입 후 가장 먼저 만져야할 서비스가 아닐까싶다. AWS에서도 권장하는 기본 원칙은, root 계정 사용을 자제하고 IAM user를 생성하여 최소한의velog.io AWS의 IA..

AWS EC2가 무엇인가?Elastic Compute Cloud의 약자로 아마존 웹 서비스(AWS)의 클라우드 컴퓨팅 플랫폼에서 가상의 컴퓨터를 빌려주는 거라고 생각하시면 됩니다. C가 두 개라 EC2 입니다. 😁 여기서 클라우드 컴퓨팅(cloud computing)이란 IT 자원을 인터넷을 통해 소비자에게 바로 제공하는 온디멘드(on-demand) 방식으로 진행되며 사용한 만큼만 비용을 지불하면 되는 서비스를 말합니다.클라우드 컴퓨팅은 리소스를 빠르게 구동하고, 배포하는 등 민첩성이 뛰어나고, 성능 및 용량을 원하는대로 조절할 수 있는 탄력성을 가지고 있으며 사용한 만큼만 지불할 수 있는 특징과 몇 분만에 전 세계에 배포할 수 있는 등 큰 이점들이 존재합니다. EC2를 언제 사용하는가?EC2를 사용하..

서두로그인과 회원가입을 구현할 때 React Hook Form을 사용해서 구현했다.그 중 watch 메서드를 사용해서 입력값을 받았는데 그 이유는 유효성 검사를 통과하지 못한 input에 실시간으로 에러 메시지를 띄워주기 위해서였다.특히 비밀번호를 확인하는 부분에서 이미 적은 비밀번호와 비교하기 위해 watch의 역할이 필요했는데 결과적으로 잘 구현했지만 watch는 리렌더링을 일으키기 때문에 성능 문제가 생길 수 있다는 점을 놓쳤었다.물론 현재 서비스에서 해당 부분에 눈에 띄게 안좋은 성능 이슈가 보이지는 않지만 리렌더를 자주 발생시키는 것은 안좋다고 생각하므로 고쳐보도록 하겠다. watch vs useWatchReact Hook Form의 watch 공식문서를 보면 아래와 같이 나와있다...

소프트웨어 버전은 왜 관리해야할까? 1. 소프트웨어 개발 단계에서 모든 변화를 추적할 수 있음 2. 소프트웨어에서 발생할 수 있는 가능한 업데이트와 변화의 유형에 대해 개발자들에게 설명할 수 있음 3. 의미있고, 깔끔하게 유지할 수 있음 4. 사용자에게 버전에 대한 정보 제공 1. 최초 출시 이전 개발 단계 버그 수정이 이루어지지 않은 첫 번째 버전은 0.1.0으로 시작 2. 최초 출시 첫 번째 안정적인 버전은 1.0.0으로 시작 3. 이후 버전 관리(major.minor.patch) major 이전 버전과 호환 X + 변경 첫 번째 숫자를 1 증가시키고, 두 번째(minor), 세 번째(patch) 숫자를 0으로 만든다. minor 이전 버전과 호환 O + 새로운 기능 추가 두 번째(minor) 숫자를..

1. intersection observer를 사용한 부분에 any 타입 고치기 let observer: IntersectionObserver; // 기존 코드 // const intersector = ([entry]: any) => { // console.log(typeof [entry]); // object // entry.isIntersecting && fetchNextPage(); // }; const intersector: IntersectionObserverCallback = ( entries: IntersectionObserverEntry[], ) => { const [entry] = entries; entry.isInterse..

먼저 관리자 페이지는 기간이 늘어짐에따라 기능 추가를 중단한 녀석이기 때문에... 미처 고려하지 못했던 페이지 접근 권한을 이제야 설정했다. 역시 기획은 아무리 꼼꼼하게 해도 어딘가 놓친 부분이 있다는 걸 다시 한번 느꼈다... 관리자 페이지 접근 권한 설정은 Cookie와 Next.js의 middlware로 해결했다.https://nextjs.org/docs/app/building-your-application/routing/middleware Routing: Middleware | Next.jsLearn how to use Middleware to run code before a request is completed.nextjs.org 폴더구조에 따라 middleware.ts..

메인 페이지 하단에 구글 로그인 추가하기메인 페이지 하단에 가입하는 버튼만 존재하니 소셜 로그인을 할 수 있는지 로그인 페이지를 들어가서 알게되었다라는 피드백이 많아서 지금 바로 가입하기 뿐만 아니라 구글로 가입하기도 추가하기로 했다.   사실 이 피드백에 관련한 디자인이 따로 없기 때문에 기존에 있던 지금 바로 가입하기 버튼과 디자인을 맞추었다.

1. Next.js의 Modal 이슈 해결 - SSR로 인한 portal을 인식하지 못하는 문제 ➡️ useEffect를 사용하여 클라이언트 렌더링이 진행한 후 portal을 설정해줌으로써 해결'use client';import { createPortal } from 'react-dom';import useModalStore, { ModalType } from '@/stores/modalStore';import useUpdateChatAnsweredMutation from '@/hooks/mutation/useUpdateChatAnsweredMutation';import useModal from '@/hooks/useModal';import { ChatModal, InquiryListF..