본문 바로가기

전체 글

내일 배움 캠프 23_08_07 TIL 오늘은 팀원들과의 새로운 프로젝트를 진행하기에 앞서 SA 작성과 스코프를 회의끝에 작성해 두었고 이번에는 파일 관리를 Yarn Berry를 통해서 기존의 node_modules로 사용해오던 라이브러리들을 Yarn berry를 통해서 (1) 패키지 버전 관리를 위해 팀원들마다 node-modules가 다 다르기 때문에 이를 통일시키기 위해서 이는 또 기존에서는 패키지를 찾지 못하면 상위 디렉토리의 node-modules 폴더를 계속 검색하는데 이 때 상위 디렉토리가 어떤 node-modules를 포함하고 있는지에 따라 의존성을 불러올 수 있기도 하고, 없기도 하며 다른 버전의 의존성을 잘못 불러올 수 있다. (2) 비효율적인 의존성 검색 만일 제일 하위의 디렉토리에서 패키지를 불러오는 상황이라면 계속 상위.. 더보기
내일 배움 캠프 23_08_04 TIL 오늘은 어제 완성하지못한 PG사 결제연동 기능을 더 공부해봤는데 우선 어제는 카카오페이 하나만 결제페이지가 나오도록 구현했었는데 오늘은 handlePayment(product, "kakaopay")}> 카카오페이 결제 handlePayment(product, "inicis")}> 이니시스 결제 handlePayment(product, "tosspay")}> 토스페이 결제 이렇게 버튼에다가 product 값을 줘서 해당하는 결제사의 결제창이 뜨도록 구현해보았다 이렇게 추가하는 것 이외에 반드시 포트원 결제 연동 페이지에서 결제사를 생성해주어야한다. 그 후 실행을 해보면 기능만 있기에 이쁘지는 않지만 버튼 별 결제창이 잘 뜨는것을 확인 할 수 있다 이 기능을 언젠가 사용할지 모르겠지만 프로젝트에서 사용하기에.. 더보기
내일 배움 캠프 23_08_03 TIL 오늘은 Iamport 를 이용한 간단한 결제창을 띄우는 연습을 해보았는데 사용법은 의외로 간단했는데 우선 Iamport 사이트에 가입을해서 요 결제 연동 탭에 들어가서 테스트 모드로 원하는 결제사의 api키를 발급을 받은후에 코드상에서는 우선 index.html에 이 코드를 추가해주고 그 다음 나는 테스트중이라 따로 컴포넌트화를 안시켰기에 App.tsx파일에 yarn add -D iamport-typings 명령어로 설치후 import { RequestPayParams, RequestPayResponse } from "iamport-typings"; 이렇게 라이브러리를 임포트 해준 후 useEffect(() => { // Iamport 모듈 초기화 const IMP = window.IMP; IMP?.in.. 더보기
내일 배움 캠프 23_08_02 TIL React - Quill 에디터로 저번 프로젝트 때 사용을 했었는데 기본 에디터 기능은 다 동작을 했었지만 이미지를 올렸을 때 리사이저로 이미지 크기를 조절했었는데 그 때 이미지가 2개가 되버리면 리사이저가 제대로 동작을 안하는 일이 있었고 또한 에디터상에서 이미지를 바로 올려버리면 base64로 처리가돼 아주 긴 문자열로 DB에 저장되게 된다. 그러한 이유때문에 직전 프로젝트에서 이미지기능과 동영상기능을 둘 다 사용하지않고 끝냈었던 기억이있는데 너무 아쉬웠고 또 앞으로 에디터를 계속 사용할터이기에 이번 기회에 해결하려고 해보았다 그래서 간단한 에디터 연습용 코드를 짜보았는데 우선 들어가기에 앞서 yarn add react-quill 로 react-quill 에디터 라이브러리를 설치해주었고 이미지를 조절.. 더보기
내일 배움 캠프 23_08_01 TIL RDS에 관해서 RDS는 SQL을 쿼리언어로 사용하는 관계형 DB를 위한 서비스 -MySQL, MariaDB, Oracle, Microsoft SQL 등이 있다 EC2 상에 DB만들기보다 RDS가 나은점 -RDS는 DB를 위한 인프라를 자동으로 구축(provisioning), 업데이트 -지속적인 백업과 복구 기능 지원 -모니터 대시보드 지원 -성능향상을 위한 read replcas 지원 -Disaster Recovery를 위한 multi AZ 지원 -수평/수직 확장성 지원 -EBS 백업 지원 하지만 SSH로 접속이 불가능 Storage Auto Scaling -DB 용량의 한계치까지 왔을 때 자동으로 용량을 늘려준다 -사용을 위해 Maximum Storage Threshold를 지정해줘야 한다. -예측불.. 더보기
내일 배움 캠프 23_07_31 TIL AWS Root Account는 공유하지않기 User와 Group를 만들어서 사용하고 Group는개발자/ 운영자를 그룹으로 관리하고 User는 실제 로그인하는 사람이고 Group에 속하지 않을수도있고 여러 Group에 속할 수 있다. 이렇게 만들어진 Group과 User들은 Policy를 통해서 권한을 조정한다 권한 1.최소한의 권한 원칙 (least privilege principle) 그룹을 만들어서 권한을 정해주고 생성하면 된다 USB로 꽂아서 하는 보안도 있지만 Virual Authenticator라고 핸드폰 앱인데 이 어플을 통해서 인증번호를 입력해서 보안을 강화 현재 예산 알람 1달러로 설정해두었는데 그냥 85% 넘어서 메일오면 꼭 체크해서 중지시키도록 하자! EC2 란 Elastic Comp.. 더보기
내일 배움 캠프 23_07_28 TIL TypeScript에서는 GlobalStyle을 정의할 때도 타입을 넣어줘야 한다는것을 알게되었다 import { createGlobalStyle,DefaultTheme } from "styled-components"; 팀원분이 하시다가 오류나는 부분을 공유해주셔서 알게 될 수 있었습니다. 이렇게 DefaultTheme라는 타입을 가져와서 타입을 지정해주면 된다 더보기
내일 배움 캠프 23_07_27 TIL TypeScript에서 라이브러리를 설치할 떄는 앞에 @type/을 붙여서 설치를하면 어제처럼 uuid.d.ts 처럼 따로 정의를 안해주어도 괜찮다 앞으론 꼭 @type/를 붙여서 설치를 하도록 해야겠다 더보기