들어가며이 글에서는 커밋 정보를 DAG(유향 비순환 그래프) 형태로 시각화하기 위해 Mermaid.js, GitGraph.js 두 가지 도구를 활용한 구현 과정을 공유합니다.브라우저 기반 Git 구조 표현을 통해 커밋 흐름을 직관적으로 확인할 수 있도록 구성했습니다. 흐름 요약DB → 커밋 + 브랜치 조인 쿼리 실행Java Builder → Mermaid 문자열 or GitGraph JSON 생성Spring Controller → 요청 처리 및 응답 반환JavaScript → AJAX 호출 및 콜백 연결mermaid.js / gitgraph.js → 브라우저 렌더링 DAG 구조 설계 기반커밋 테이블(`tb_commit`)에는 `parentCommitSeq`, `mergeFromCommitSeq` 를 통해..

들어가며이 글에서는 GitHub 클론 프로젝트에서 구현한 커밋 등록, 브랜치 병합 (Merge), 리베이스 (Rebase) 기능의 핵심 구조와 처리 흐름을 정리합니다.DAG 기반의 브랜치-커밋 구조를 바탕으로, Git 의 동작을 단순화해 웹 애플리케이션에서 표현했습니다. 커밋 도메인 구조커밋 테이블과 브랜치 테이블 간 관계`tb_branch` : `tb_commit` = 1:N브랜치는 커밋이 없을 수도 있고, 하나 이상의 커밋을 가질 수 있다커밋 도메인 주요 컬럼 설명`BRANCH_SEQ` : 해당 커밋이 속한 브랜치의 ID`PARENT_COMMIT_SEQ` : 이전 커밋의 ID. 일반적인 커밋 흐름 연결을 위한 필드`MERGE_FROM_COMMIT_SEQ` : 병합(Merge) 시 사용된 다른 부모 커..

들어가며이 글에서는 GitHub 클론의 핵심 데이터 구조인 그룹(Group) - 프로젝트(Project) - 브랜치(Branch) 도메인 설계와 CRUD 구현 과정을 정리합니다.각 도메인의 관계를 먼저 ERD로 확인하고, 기능별 CRUD 흐름을 간단히 소개하겠습니다. 도메인 구조 개요회원 테이블과 그룹 관련 테이블 간 관계`tb_member` : `tb_group` = 1:N회원은 그룹을 소유하지 않을 수도 있고, 하나 이상의 그룹을 소유할 수 있다`tb_group` : `tb_group_member` = 1:N하나의 그룹은 최소 1명 또는 여러 명(N) 의 관계를 가질 수 있다`tb_member` : ` tb_group_member ` = 1:1각 `tb_group_member` 는 정확히 하나의 회원..

들어가며GitHub 클론 프로젝트에서는 복잡한 OAuth 나 소셜 로그인 없이, 기본적인 회원 관리 + 로그인/로그아웃 흐름만을 구현했습니다.최초에는 세션 기반 로그인을 적용하고, 이후 구조 확장을 고려해 Spring Security 기반 처리로 전환했습니다. 간단한 흐름 요약사용자 회원가입`Member` 엔티티를 DB에 저장비밀번호는 `BCrypt` 를 사용해 해시 처리 후 저장로그인 시 사용자 정보 조회`BCrypt` 의 `matches()` 활용하여 비밀번호 일치 여부 확인Session 기반 로그인사용자 정보 세션 저장Spring Security 적용세션 직접 조작 대신 로그아웃 처리만 유지 회원 기능 구현DB ERD Diagram회원 기능 패키지/클래스 생성src└── main ├── jav..

들어가며이 글에서는 GitHub 클론 프로젝트의 전체 폴더 구조, 주요 설정 파일 (Spring, MyBatis, Security 등)을 소개하고, 각 구성 요소가 어떤 역할을 하는지 정리하겠습니다. 기술 스택 구분 기술 설명 백엔드Spring Boot프로젝트 기반 프레임워크ORMMyBatisSQL 중심 ORM보안Spring Security인증/인가 구현DBMariaDB데이터 저장프론트JS, jQuery, Ajax클라이언트 요청 처리시각화GitGraph.js, Mermaid.js커밋 그래프 구현 전체 패키지 구조간략한 전체 패키지 구성src└── main ├── java │ └── com.example │ ├── core │ └── javastudy ..

프로젝트 개요이 프로젝트는 GitHub의 주요 기능을 Spring Boot 기반으로 클론하며 Git 저장소 구조, 브랜치/커밋 처리 로직, 커밋 그래프 시각화 등을 학습하는 데 목적이 있습니다. 기능 범위로그인 / 회원가입 : Spring Security 를 이용한 기본 로그인Repository / Branch / Commit 관리 : 실제 Git처럼 레포지토리 생성, 브랜치 관리, 커밋 등록 기능 제공Git DAG 구조 설계 : 커밋 간의 부모-자식 관계를 방향성 있는 비순환 그래프(DAG)로 모델링GitGraph.js / Mermaid.js를 통한 커밋 그래프 시각화 : 커밋 흐름을 시각적으로 표현하여 Git 구조를 직관적으로 표Git Contribution (깃 잔디) 시각화 : 날짜별 커밋 수 데..

.env 파일로 환경변수 관리dotenv 설치npm install dotenv.env 파일 생성프로젝트 루트 디렉토리에 `.env` 파일 생성해당 `.env` 파일은 Git 등에 올라가지 않도록 `.gitignore` 에 추가해야함## .env 파일 예시 ##PORT=3000COOKIE_SECRET=mySecretKey123!DB_HOST=localhostDB_USER=rootDB_PASSWORD=1234app.js 에서 dotenv 설정`app.js` 파일의 가장 상단에 추가require("dotenv").config();.env 에 작성한 내용 사용const port = process.env.PORT || 8080;const dbUser = process.env.DB_USER;const cookieS..

`` 태그나 `` 태그에 `selected` 또는 `checked` 속성을 자동으로 추가기존 Java Spring 프로젝트 개발 시 자주 사용하던 프론트 렌더링 관련 Util 함수를 Node.js + Nunjucks 환경에서도 유사하게 구현해보았습니다. 기존 Java 프로젝트 방식Java 단public static String selected(String v1, String v2) { return (StringUtils.isNotBlank(v1) && v1.equals(v2)) ? "selected" : "";}public static String checked(String v1, String v2) { return (StringUtils.isNotBlank(v1) && v1.equals(v2..

passport 를 이용한 사용자 인증 기능  [Node.js] Passport 를 이용한 사용자 인증 및 bcrypt 암호화비밀번호 암호화bcryptbcrypt : 사용자의 비밀번호를 안전하게 저장하기 위해 단방향 해시 암호화를 제공하는 라이브러리비밀번호를 직접 저장하면 보안 위험이 있기 때문에 항상 암호화해서 저장jackinquantico.tistory.com Nunjucks 설치 및 기본 설정설치npm install nunjucksapp.js 설정const nunjucks = require("nunjucks"); // 외부 모듈 불러오기app.set("view engine", "html"); // 사용할 템플릿 확장자nunjucks.configure("views", { // views/ 폴더를 템플..

비밀번호 암호화bcryptbcrypt : 사용자의 비밀번호를 안전하게 저장하기 위해 단방향 해시 암호화를 제공하는 라이브러리비밀번호를 직접 저장하면 보안 위험이 있기 때문에 항상 암호화해서 저장해야 함bcrypt 설치 명렁어npm install bcrypt비밀번호 암호화 적용const { Model, DataTypes } = require("sequelize");const bcrypt = require("bcrypt");module.exports = (sequelize) => { class Member extends Model {} Member.init( { // ... }, { sequelize, // ... hooks: {..