프로그래밍/DevOps

1. CI/CD 기본개념 및 흐름

CI/CD란?간단하게 말하자면 테스트, 통합, 배포 의 과정을 자동화 하는것을 말함 배우는이유?실제 운영서버에 기능을 추가 해야한다면 아래와 같이 로직을 수행한다.개발 -> comit -> 테스트 -> 빌드 -> 운영서버 jar 배포 이게 가끔 한번씩이면 괜찮을거같은데, 만약 급하게 수정해야하거나 여러건의 수정을 나눠서 해야하면이런작업이 엄청 번거로울거같다.나또한 이전 회사에서 깃허브 없이 바로 운영서버에서 소스 수정한일이 많았다.그리고 우린 사람이기 때문에 무조건 급하게 하다보면 한번쯤은 실수 할것이라 생각된다. 그래서 이런 반복적인 과정을 자동화 하기위해 CI/CD를 배운다고 생각하면 된다. 개발 완료 후 commit 하면 빌드되도록 설정할수 있다.한마디로 우린 commit만 제대로 관리하면 될거같다..

2024. 12. 29. 19:22

프로그래밍/개인프로젝트

[프로젝트] 7. 오류페이지(일반) - 프론트화면(react)

이번에는 쉬어 갈겸 url잘못입력했을시 오류 페이지로 이동되는 페이지를 디자인 작업하였다.이쁘진않음.. 현재 라우터는 아래와같다. 만약 "/login22222" 으로 요청시 NotFound NotFound.jsximport "./NotFound.css";import { Link } from "react-router-dom";const NotFound = () => { return ( 404 페이지를 찾을수 없습니다. 죄송합니다. 더 이상 존재하지 않는 페이지입니다. 홈으로 );};export default NotFound; NotFound.css.notfound_wrap { heig..

2024. 9. 4. 10:40

프로그래밍/개인프로젝트

[프로젝트] 6. 로그인(일반) - 프론트화면(react)

저번에 spring boot에서 로그인후 JWT토큰 생성하고 응답 Header에 토큰 전송하는것까지 완료하였다.이번에는 react(처음써봄) 이용해서 비동기 통신 이용하여 로그인 기능 작성해볼려고한다. 우선 react에서 router-dom 설치해두었고,페이지이동을위한 router설정을 진행하였다.vite.config.jsimport { defineConfig } from "vite";import react from "@vitejs/plugin-react";// https://vitejs.dev/config/export default defineConfig({ plugins: [react()], server: { proxy: { // "/api" 요청시 -> "http://localhost..

2024. 9. 3. 21:02

프로그래밍/개인프로젝트

[프로젝트] 5. 로그인(일반)

우선 회원가입보다 로그인기능을 먼저 작업할 생각이다.. 전체 구조1. Frontend - React - 로그인페이지 : 일반로그인 및 소셜 로그인 버튼을 제공함 - API 요청 : 사용자가 로그인 할 때, 서버에 요청을 보냄 - JWT 관리 : 서버에서 발급받은 JWT를 localStorage또는 sessionStorage에 저장함 2. Backend - Spring Boot - 일반 로그인 처리 : 사용자로부터 받은 비밀번호를 암호화(BCrypt)로 해싱하여 DB에 저장하고, 로그인시 해당 해시와 사용자가 입력한                                  비밀번호 비교함 - 소셜 로그인 : OAuth2를 통해 카카오와 네이버 로그인 기능 처리하고 로그인후 JWT발급 ㄴ 일단 소셜로그인은..

2024. 8. 29. 17:59

프로그래밍/개인프로젝트

[프로젝트] 4. 프로젝트 Entity

JPA 사용을 위한 Entity 작성을 하였다..JPA 처음사용하다보니 강의들었을때랑 실제 응용하는 부분에서 많이 어려웠다..어디 확인받을곳도없고 우선 ERD처럼 나오긴했는데아직 NOTNULL부분은 제대로 설정하진않았고 추후에 설정할예정그리고 언제든지 수정될수있음 .. 작성한 Entity 및 ENUM 파일 목록입니다. 1. ENUM 파일 목록Provider(소셜로그인시 소셜 업체)package dev.momory.moneymindbackend.entity;public enum Provider { KAKAO, NAVER, GOOGLE;} AuthProvider(회원가입 일반계정인지, 소셜계정 여부)package dev.momory.moneymindbackend.entity;public en..

2024. 8. 29. 11:18

프로그래밍/개인프로젝트

[프로젝트] 3. 프로젝트 폴더 구조

FRONT - REACTBACK - SPRINGBOOT Spring Boot 폴더 구조config/ : 애플리케이션 설정과 관련된 클래스들 포함합니다.controller/ : REST API 를 정의하는 컨트롤러 클래스들을 포함합니다.dto/ : 데이터 전송 객체(Data Transfer Objects) 클래스들을 포함합니다.exception/ : 사용자 정의 예외 예외 처리 클래스 포함entity: 데이터베이스 엔티티 모델 클래스 포함repository/ : JPA 레포지토리 인터페이스 포함service/ : 비즈니스 로직을 처리하는 서비스 클래스 들을 포함util/ : 유틸리티 클래스 포함 React  폴더 구조components/ : 재사용 가능한 React 컴포넌트 포함pages/ : 각 페이지에..

2024. 8. 28. 14:07