20개의 글
서론Hello, GSM에는 로그인 안내, 결과 발표, 서류 제출 여부 변경, 이미지 용량 제한 안내처럼 사용자에게 확인을 요청하거나 상황을 알리는 모달이 많습니다. 사용자용 페이지와 관리자 페이지를 합치면 18개에 달했습니다.기존에는 모달이 필요한 컴포넌트마다 열림 상태와 마크업을 직접 가지고 있었습니다. 모달 수가 적을 때는 문제가 없었지만, 기능이 늘어
DataGSM은 사실 MSA다..?MSA는 기능을 하나의 서버 애플리케이션에 모으지 않고, 도메인 경계별로 서비스를 나눠 각각을 별도의 애플리케이션으로 띄운 뒤 하나의 클러스터로 묶는 아키텍처입니다. 교내 프로젝트에서는 굳이 이렇게까지 나눌 이유도 별로 없고 기술적으로도 부담이 커서, 한번 해보고 싶더라도 실제로 시도하는 경우는 드물었습니다. 그런데 Dat
1. Figma MCP란Figma MCP는 Claude Code 같은 AI 에이전트가 Figma 파일을 읽고 수정할 수 있게 해주는 Figma 공식 MCP 서버입니다. 스크린샷 대신 레이어 구조, 변수, 컴포넌트 정보를 에이전트에게 넘겨줍니다.쓰는 방향은 세 가지입니다.| 방향 | 내용 | 주로 쓰는 도구 | | --- | --- | --- | | 디자인
웹 서비스를 개발하고 배포했다고 해서 사용자가 알아서 찾아오는 것은 아닙니다. 서비스가 아무리 잘 만들어져 있어도 검색엔진에서 발견하기 어렵다면, 필요한 정보를 찾고 있는 사용자에게 도달하기 어렵습니다. 특히 특정 학교의 학과 체험이나 입학 설명회처럼 사용자가 검색을 통해 정보를 찾는 서비스라면 검색엔진 최적화(SEO)가 중요합니다.저도 광주소프트웨어마이스
1. CORS란 무엇일까?프론트엔드나 백엔드 개발을 하다 보면 API 요청을 보냈을 때 브라우저 콘솔에 CORS 관련 에러가 발생하는 경우가 있습니다. 요청 URL이 올바르고 서버가 정상적으로 실행되고 있는데도 응답을 읽지 못하는 상황입니다.CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유를 의미합니다. 브라우저에서
1. 문제의 출발점 — HTTP는 무상태(Stateless) 프로토콜HTTP는 요청과 응답이 끝나면 연결 정보를 유지하지 않는다. 즉 서버 입장에서는 매 요청이 완전히 새로운 클라이언트의 요청처럼 보인다. 하지만 로그인 상태 유지, 장바구니 정보 유지처럼 "사용자를 기억해야 하는" 기능이 반드시 필요하다. 이 문제를 해결하기 위해 등장한 것이 쿠키, 세션,
프론트엔드 프로젝트를 여러 개 운영하다 보면 비슷한 문제를 한 번쯤 만나게 됩니다.여러 서비스에서 사용하는 컴포넌트가 조금씩 달라지고, API 타입이나 유틸 함수도 중복해서 관리하게 됩니다. ESLint나 TypeScript 설정을 변경하려고 해도 프로젝트마다 따로 수정해야 합니다.처음에는 각각의 프로젝트를 별도의 Git Repository로 관리하는 방식
들어가며프로그래밍 언어를 여러 개 배우다 보면 아래와 같은 생각을 해보셨을거에요."파이썬에서는 list, 자바에서는 ArrayList, C++의 vector 이렇게 문법이 다른데 자료구조 공부를 굳이 해야할까?"그러나, 파이썬의 dict와 자바의 HashMap 등 모두 문법은 언어마다 제각각이지만, 그 바탕이 되는 자료구조는 거의 공통입니다.자료구조란, 데
동적 배열 원본 동적 배열 2026.09.16 동적 배열에 대해서 알아봅시다. 배열을 크기 변경 가능성을 기준으로 나누어 보면, 크기가 고정된 정적 배열과, 크기 변경이 자유로운 동적 배열로 나눌 수 있습니다. 동적 배열은 더 유연한 데이터 관리를 가능하게 하며, 정적 배열은 크기가 고정된 대신 구현이 쉽고 메모리 사용량이 예측 가능하다는 장점이 있습니다.
1. 들어가며OAuth 2.0으로 소셜 로그인을 구현하다 보면 state라는 파라미터를 자연스럽게 마주하게 됩니다. 스펙 문서에는 "CSRF 공격 방어용"이라고만 짧게 설명되어 있는 경우가 많은데, 정작 "OAuth 흐름 안에서 CSRF 공격이 정확히 어떻게 일어나는지", 그리고 "state가 그중 어느 지점을 막는지"는 명확히 그려지지 않을 때가 많습니다
Hello, GSM은 광주소프트웨어마이스터고등학교 입학지원 서비스입니다.기존에는 지원자가 입학원서를 작성할 때 생활기록부에 있는 정보를 직접 확인하고 비교하며 입력해야 했습니다. 생활기록부 PDF를 열어 필요한 정보를 찾고, 다시 지원서로 돌아와 하나씩 입력하는 과정이 반복되다 보니 작성에 시간이 오래 걸렸습니다.특히 성적처럼 입력해야 하는 정보가 많은 경
서론Hello, GSM 프론트엔드는 사용자용 페이지와 관리자 페이지, 그리고 공통 패키지를 하나의 저장소에서 관리하고 있습니다. 기존 pnpm workspace 기반 모노레포 구조는 코드와 의존성을 함께 관리하기에 적합했지만, 프로젝트가 커지며 빌드와 CI를 실행하는 경험에는 개선할 지점이 생겼습니다.이번 글에서는 Turborepo를 도입한 이유, 마이그레
DataGSM OAuth는 무엇인가?OAuth는 사용자가 비밀번호를 직접 노출하지 않고도, 다른 웹사이트나 앱에 자신의 정보를 안전하게 제공하기 위한 개방형 표준 인증/인가 프레임워크입니다.보통 구글 로그인 그리고 카카오톡 로그인이 대표적인 OAuth의 예시입니다.그런데 교내 프로젝트들의 입장으로 본다면, 기존 외부 OAuth를 이용한다면 학번, 기숙사 호
interfaceinterface란?interface란 TypeScript에서 객체가 어떤 형태를 가져야 하는지 정의하는 방법입니다. 각 개체마다 어떤 타입의 값을 받아올지 정할 수 있는 기능으로, 짧게 예시 코드를 짜보았습니다.interface User { name: string; age: number; isFrontend: boolean }위와 같이 작
성적 계산식이란Hello, GSM에는 성적 계산 로직이 있습니다. 고교 입학지원시스템이므로 당연합니다. 중학교 생활기록부에 기재된 정보로 성적을 계산하고, 본교 입학 지원에 사용하는 환산점으로 바꿔야 하기 때문입니다. 매년 새 입학 요강이 나올 때마다 이 로직을 수정해 왔습니다.계산식의 사용처Hello, GSM의 핵심 도메인인 만큼 여러 기능에서 사용합니다
사용자 경험을 향한 여정2025년, Hello, GSM(광주소프트웨어마이스터고 입학지원시스템)의 2026학년도 신입생 모집을 준비하며 개발을 진행했습니다. 변경된 입학 요강을 반영하는 작업이 큰 축이었지만, 더 나은 사용자 경험도 목표로 삼았습니다. 서버 애플리케이션을 개발하던 중 오래전 등록된 GitHub Issue를 발견했습니다.Issue #48: 사용
들어가며효과적인 협업은 단순한 기술적 역량을 넘어, 팀 전체가 공유하는 언어와 구조에서 비롯됩니다. 컨벤션은 바로 그 공유된 언어입니다. 일관된 코드 스타일은 가독성을 높이고, 유지보수 비용을 낮추며, 새로운 팀원이 컨텍스트를 빠르게 흡수할 수 있는 환경을 만들어줍니다. 결국 컨벤션은 커뮤니케이션 오버헤드를 줄이고, 팀이 본질적인 문제 해결에 집중할 수 있
들어가며더모먼트팀은 2022년 창설 이후 현재까지 5년간 활발한 개발 활동을 이어오고 있습니다. 교내 팀 특성상 인수인계가 단절되거나 팀 자체가 소멸하는 일이 빈번한 환경에서, 더모먼트팀이 지속될 수 있었던 핵심 원인은 자체적으로 구축한 팀 문화와 협업 방식에 있습니다.더모먼트팀은 강력한 조직 문화, 내부적인 기술 혁신, 그리고 체계적인 의사소통 구조를 기
