고마워써 프로젝트에서는 왼쪽 상단 햄버거 메뉴에서 여러 경로에 접근 가능하다.햄버거 메뉴는 react-burger-menu 라이브러리를 이용했다.import { slide as Menu } from "react-burger-menu";//...// jsx} customCrossIcon={} width={"250px"} isOpen={isMenuOpen} onStateChange={({ isOpen }) => setIsMenuOpen(isOpen)} styles={MenuStyles} > 회원정보 수정 나의 편지함 ..

새로 회원가입한 유저일 경우 전화번호를 등록해야 하기에 자동으로 회원정보 수정 경로로 이동한다.여기서 전화번호를 꼭 입력해야 하기 때문에 useForm을 사용한 required 를 넣어 주었다. const onInvalid = (errors: any) => { if (errors.tel) { toast.error(errors.tel.message); // 전화번호 오류 메시지를 toast로 출력 } };// ...// jsx  required의 오류 메시지는 toast 알림으로 출력되게 했다. toast 알림 보러 가기 https://dazz6study.tistory.com/97 React 06 - react-toastify 사용해 보기토스트 알림(간단한 팝업 알림)을 react-t..

고마워써 홈 화면은 사실 비로그인인 상태에서 접근할 일이 잘 없다.특정 사용자가 공유한 고유 링크를 통해 접근하고,그 경로에서 신청을 완료한 뒤 원하는 사용자만 추가적으로 로그인 / 회원가입을 하게끔 구현했기 때문이다.그래서 간단하게 카카오 로그인을 할 수 있는 버튼을 추가하고,session을 확인하여 userId 값이 존재할 경우 로그인한 상태로 간주하여연하장 설문을 생성하는 경로로 이동하는 버튼을 출력되게 했다.const userId = parseInt(sessionStorage.getItem("userId") || "0");// ...// jsx{userId ? ( nav.push(`/create-form`)}> 연하장 신청받기 ) : ( )}간단하게 삼항연산자를 사용한 출력을 사용..

고마워써 프로젝트의 데이터베이스 설계!이전 프로젝트에서 비효율적이라고 생각했던 점이 있었는데,(user_id 하나 가지고 오려고 테이블 타고타고 user 테이블에 접근해야 하다니 ㅜ게다가 페이지마다, 기능별로 자주 접근하는데?)그걸 보완하기 위해 정규화에 너무 집착하지 않고 굳이 컬럼을 추가해 주는 방식을 사용했다 추가적으로 연하장은 매년 새로 작성 / 관리되어야 하기 때문에year 컬럼을 적극적으로 사용했다!테이블 설명 user (사용자)id (고유번호)kakao_id (카카오 아이디)name (이름)tel (전화번호)is_sms_allowed (문자메시지 수신 동의) inquiry (설문)id (고유번호)user_id (사용자 고유번호)year (연도)nickname (닉네임) inquiry_item..

프로젝트 주제모바일 연하장으로, 특정 유저가 고유 링크를 배포하면 연하장을 받고 싶은 불특정다수가 링크에 접속하여 신청한다.이후 유저가 신청받은 연하장을 작성하면, 1월 1일에 조회할 수 있다. 프로젝트 기간2024년 11월 15일 ~ 12월 17일 프로젝트 인원 및 역할3인 (총괄 1명, 백엔드 1명, 프론트엔드 1명) 사용 기술BACKJAVA, SpringBoot, SpringDataJPA, SpringSecurity, JWT, Swagger, Postman FRONTReact, TypeScript, axios DatabaseMariaDB DevOps & CloudDocker, AWS (EC2, ECS, S3 etc) ToolsGitHub, NOTION, slack, Illustrator, Figma..

react-copy-to-clipboard로 특정 텍스트를 클립보드에 복사하는 기능을 제공! 나는 특정 버튼을 클릭하면 특정 텍스트가 복사되어, 다른 곳에 자유롭게 붙여넣기 할 수 있는 코드를 구현해 보았다. CopyEtc(true)}> { e.preventDefault(); }} > 복사하기 npm i react-copy-to-clipboard Props 설명1. text- 클립보드에 복사할 텍스트2. onCopy- 텍스트가 성공적으로 복사되었을 때 호출되는 콜백 함수3. children- 클릭 가능한 React 요소.- 버튼, 텍스트, 이미지 등 자유롭게 사용 가능 이 라이브러리를 사용하면 복사 구현이 너무 간단하기 때문에 너무 좋지만...보안 설정이 엄격하거나 구형 브라우저일 경우 지원하지 않을..

AWS 리소스와 애플리케이션의 모니터링 및 관찰을 제공하는 서비스로, 애플리케이션 성능, 시스템 로그, 메트릭 데이터 등을 수집 및 분석하여 운영 상태를 실시간으로 추적할 수 있다.  주요 기능1. *메트릭 모니터링*메트릭 : 시스템이나 애플리케이션의 성능을 측정하고 모니터링하기 위해 수집되는 데이터- CPU 사용량, 메모리 사용량 등 리소스 상태를 수집.- EC2 같은 AWS 서비스의 메트릭을 기본 지원.2. 로그 관리 (CloudWatch Logs)- 애플리케이션 로그, 시스템 로그를 수집하고 분석.- 로그 필터링 및 경고 설정.3. 알람 (CloudWatch Alarms)- 설정된 임계값을 초과하거나 조건이 충족되면 경고를 트리거.4. 대시보드- 여러 AWS 서비스의 메트릭을 한 화면에 시각화. 나..

.yml 과 .Properties 모두 애플리케이션의 설정을 정의하는 데 사용되는 구성 파일 형식이다. 1. YAML 이란?- YAML Ain't Markup Language의 약자로, 데이터를 간결하고 사람이 읽기 쉽게 표현할 수 있는 구조적 데이터 포맷이다.- 구성 파일이나 데이터 교환에 사용되며, 들여쓰기로 구조를 표현한다. SpringBoot 설정 파일 (application.yml), CI/CD 워크플로우(GitHub Actions)에 주로 사용한다.server: port: 8080 context-path: /apidatabase: host: localhost port: 3306 username: root password: passwordfeatures: - login - sign..

여기저기 많이 들리는 단어... 대충 계속 코드 합쳐 보자는 거 아냐? 정도로 이해하고 있다가, Github Actions을 공부하면서 제대로 된 이해가 필요하겠다는 생각이 들었다.  CI/CD는 소프트웨어 개발에서 Continuous Integration(지속적 통합)과 Continuous Deployment/Delivery(지속적 배포/전달)를 결합한 자동화된 프로세스를 의미하는데, 코드 작성부터 테스트 및 배포까지의 과정을 자동화하여 효율성과 품질을 향상시키는 데 중점을 둔다. 1. Continuous Integration(CI, 지속적 통합)- 코드를 작은 단위로 자주 병합(Merge)하며, 병합된 코드에 대해 자동으로 빌드 및 테스트가 실행되도록 설정.- 병합 시 발생할 수 있는 오류를 조기에 ..

CI/CD 플랫폼으로, 코드를 자동으로 빌드 및 테스트, 배포할 수 있도록 돕는 워크플로우 자동화 도구이다.코드 저장소와 깊이 통합되어 있어, Github에 Push, PR, 태그 생성 같은 이벤트를 트리거로 설정하여 자동화된 작업을 수행할 수 있다. 주요 개념1. 워크플로우(Workflow)- 자동화된 작업의 정의 파일로, .github/workflows 디렉토리 내에 YAML 파일로 작성.- 워크플로우는 특정 이벤트(ex. push)에서 시작되어, 여러 작업(step)을 포함.2. 이벤트(Event)- 워크플로우를 트리거하는 조건.3. 잡(Job)- 워크플로우에서 실행되는 개별 작업 단위.- 병렬로 실행되거나, 특정 순서 설정 가능.4. 스텝(Step)- Job 내에서 실행되는 세부 작업5. 액션(A..