#Frontend

서론Hello, GSM에는 로그인 안내, 결과 발표, 서류 제출 여부 변경, 이미지 용량 제한 안내처럼 사용자에게 확인을 요청하거나 상황을 알리는 모달이 많습니다. 사용자용 페이지와 관리자 페이지를 합치면 18개에 달했습니다.기존에는 모달이 필요한 컴포넌트마다 열림 상태와 마크업을 직접 가지고 있었습니다. 모달 수가 적을 때는 문제가 없었지만, 기능이 늘어

1. Figma MCP란Figma MCP는 Claude Code 같은 AI 에이전트가 Figma 파일을 읽고 수정할 수 있게 해주는 Figma 공식 MCP 서버입니다. 스크린샷 대신 레이어 구조, 변수, 컴포넌트 정보를 에이전트에게 넘겨줍니다.쓰는 방향은 세 가지입니다.| 방향 | 내용 | 주로 쓰는 도구 | | --- | --- | --- | | 디자인

왜 정리했지?UI를 만들다 보면 이런 말을 자주 합니다.“이게 더 깔끔한 것 같은데?”“이쪽이 더 보기 좋습니다.”“버튼이 조금 이상한 것 같습니다.”저도 이런 말을 합니다. 디자인을 보자마자 이상하다는 느낌은 드는데, 막상 뭐가 이상한지 설명하려고 하면 말이 길어집니다. 버튼이 큰 건지, 색이 강한 건지, 위치가 이상한 건지. 일단 마음에는 안 드는데 이

웹 서비스를 개발하고 배포했다고 해서 사용자가 알아서 찾아오는 것은 아닙니다. 서비스가 아무리 잘 만들어져 있어도 검색엔진에서 발견하기 어렵다면, 필요한 정보를 찾고 있는 사용자에게 도달하기 어렵습니다. 특히 특정 학교의 학과 체험이나 입학 설명회처럼 사용자가 검색을 통해 정보를 찾는 서비스라면 검색엔진 최적화(SEO)가 중요합니다.저도 광주소프트웨어마이스

1. CORS란 무엇일까?프론트엔드나 백엔드 개발을 하다 보면 API 요청을 보냈을 때 브라우저 콘솔에 CORS 관련 에러가 발생하는 경우가 있습니다. 요청 URL이 올바르고 서버가 정상적으로 실행되고 있는데도 응답을 읽지 못하는 상황입니다.CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유를 의미합니다. 브라우저에서

프론트엔드 프로젝트를 여러 개 운영하다 보면 비슷한 문제를 한 번쯤 만나게 됩니다.여러 서비스에서 사용하는 컴포넌트가 조금씩 달라지고, API 타입이나 유틸 함수도 중복해서 관리하게 됩니다. ESLint나 TypeScript 설정을 변경하려고 해도 프로젝트마다 따로 수정해야 합니다.처음에는 각각의 프로젝트를 별도의 Git Repository로 관리하는 방식

Promise란?Promise는 비동기 작업을 처리할 때 사용되는 자바스크립트의 객체입니다.Promise를 이해하기 위해서는 먼저 비동기 작업이 무엇인지 알아야 합니다.비동기 작업?비동기 프로그래밍을 설명하기 전에 먼저 동기 프로그래밍부터 알아보겠습니다. 동기 프로그래밍은 작업을 한 번에 하나씩, 순서대로 실행하는 방식입니다.예를 들어 다음과 같은 코드가

Hello, GSM은 광주소프트웨어마이스터고등학교 입학지원 서비스입니다.기존에는 지원자가 입학원서를 작성할 때 생활기록부에 있는 정보를 직접 확인하고 비교하며 입력해야 했습니다. 생활기록부 PDF를 열어 필요한 정보를 찾고, 다시 지원서로 돌아와 하나씩 입력하는 과정이 반복되다 보니 작성에 시간이 오래 걸렸습니다.특히 성적처럼 입력해야 하는 정보가 많은 경

서론Hello, GSM 프론트엔드는 사용자용 페이지와 관리자 페이지, 그리고 공통 패키지를 하나의 저장소에서 관리하고 있습니다. 기존 pnpm workspace 기반 모노레포 구조는 코드와 의존성을 함께 관리하기에 적합했지만, 프로젝트가 커지며 빌드와 CI를 실행하는 경험에는 개선할 지점이 생겼습니다.이번 글에서는 Turborepo를 도입한 이유, 마이그레

DataGSM OAuth는 무엇인가?OAuth는 사용자가 비밀번호를 직접 노출하지 않고도, 다른 웹사이트나 앱에 자신의 정보를 안전하게 제공하기 위한 개방형 표준 인증/인가 프레임워크입니다.보통 구글 로그인 그리고 카카오톡 로그인이 대표적인 OAuth의 예시입니다.그런데 교내 프로젝트들의 입장으로 본다면, 기존 외부 OAuth를 이용한다면 학번, 기숙사 호