j15u_k7.log

GSM 2학년 한 달 후기...

Thu, 02 Apr 2026 10:29:05 GMT

목적

벌써 2026년이 시작된 지도 3개월, 개학한 지도 한 달이 지났습니다.
저희 학교에서는 2학년 생활이 가장 중요하기 때문에, 이 시간을 헛되이 보내고 싶지 않아 회고를 작성하게 되었습니다.

1주차

사실 1주차까지는 다시 일상으로 돌아오는 데 집중했던 것 같습니다.
방학 동안 개발도 거의 하지 않고 새벽 거의 3시에 자던 생활에서, 갑자기 6시 30분에 일어나려니 쉽지 않았습니다.

또한 반과 선생님이 많이 바뀌어 새로운 환경에 적응하는 데 시간이 필요했습니다.

프론트 전공 설명

1학년 대상 전공 발표회에서 프론트엔드 발표를 맡게 되어 급하게 PPT를 준비하고 시청각실에서 발표를 진행했습니다.

많은 학생들이 들어주었지만, 프론트엔드에 관심 있는 학생이 예상보다 적어 아쉬움이 남았습니다.

전공동아리 개편

교감 선생님께서 전공동아리를 1학년 대상 멘토링 중심으로 개편하는 방향을 제안하셔서, 이를 반영하기 위해 여러 차례 회의를 진행했습니다.

또한 저는 VOID라는 전공동아리를 새롭게 개설하게 되었고, 팀원들과 함께 방향성과 운영 구조를 설계했습니다.

GIF 프로젝트

VOID 동아리 개설은 작년 12월부터 계획했던 내용입니다.
이후 프로젝트 기획을 시작하여, 학교 아이디어 페스티벌 전 과정을 통합 관리하는 플랫폼 GIF(GSM Idea Festival)를 개발하게 되었습니다.

방학 동안에는 디자인과 기초 구조를 중심으로 작업했고, 개학 이후부터 본격적인 개발을 진행하고 있습니다.

2주차

전공동아리/멘토링

전공동아리 방식이 멘토링 형식으로 바뀌면서 프론트엔드에 경우에는 1:1 형식으로 멘토링을 진행하였습니다.

첫 번째 활동이라서 개발환경 구축을 도와줬습니다. git bash에서 사용자 정보를 저장하는 과정에서 블로그에 나와있는데로 복붙을 하려고 했는데 git bash에 경우에는 Ctrl 사용이 안되어서 Insert를 사용해야 하는데 1학년은 저희와 다른 노트북인 그램을 사용하고 있는데 Insert 버튼이 없어서 하나하나 다 치던 중 오타가 나서 선배님께 도움을 요청하고 어려움이 있었습니다...

이 과정을 통해 개발 환경 구축 역시 직접 경험해보는 것이 중요하다는 것을 느꼈습니다.

V (디스코드 봇)

GIF 프로젝트에서는 매일 아침 디스코드 포럼을 통해 데일리 스크럼을 작성하고,
저녁에는 이모지로 완료 여부를 확인하는 방식을 사용했습니다.

하지만

포럼 생성 누락
작업 내용 확인 부족
참여율 저조

와 같은 문제가 발생했습니다.

이를 해결하기 위해 V(브이)라는 디스코드 봇을 개발했습니다.

V의 기능:

오전 8시: 자동 포럼 생성
오전 10시 30분: 미작성자 리마인드
오후 11시: 작업 마감 알림 및 완료 체크
다음날: 미완료자 기록

이를 통해 데일리 스크럼을 자동화하고 운영 효율을 개선할 수 있었습니다.

자격증

2주차 토요일에는

프로그래밍 기능사 실기
리눅스 마스터 2급 실기

시험을 응시했습니다.

프로그래밍 기능사는 이번이 3번째 도전입니다.
개편 이후 첫 시험이라 준비가 확실하지 않았고 결과에 대한 확신이 없는 상태입니다...

리눅스 마스터 2급은 비교적 더 열심히 준비한 만큼 좋은 결과를 기대하고 있습니다.

두 시험 모두 최선을 다했기 때문에 좋은 결과가 있었으면 좋겠습니다.

3주차

창체동아리

작년에 친구들과 함께 활동했던 댄스팀 오MG졸을 창체동아리로 확장하게 되었습니다.

처음에는 지원자가 적을까 걱정했지만 예상보다 많은 관심을 받아 정원 초과가 발생할 정도였습니다.

첫 활동에서는 팀원들과 친해지는 시간을 갖고 체육대회 무대를 기획했습니다.

이외에 3주차에는 멘토링과 GIF 개발에 집중하며 시간을 보냈습니다.

4주차

VOID

VOID 10기 팀원 모집을 준비했습니다.
일정 수립, 구글폼 및 노션 정리, 면접 질문 구성 등을 진행했습니다.

반장

올해도 반장 선거에 출마했고, 1표 차이로 당선되었습니다.

새로운 반이라 어색한 친구들도 많아서 기대를 크게 하지 않았지만 당선되어 기뻤고 앞으로 반장을 맡은 만큼 책임감을 가지고 봉사하려고 합니다.

2학년이 되고 나서 바뀐 점

후배

가장 크게 느낀 변화는 후배가 생겼다는 점입니다.
새로운 학생들이 학교에 들어오는 것도 신기했고 저에게 인사하는 모습 또한 신기했습니다.

처음에는 인사를 어떻게 받아야 할지 모르겠어 생각하다가 인사를 못받아줬던 적도 많습니다...ㅜㅜㅜㅜ 하지만 어느 정도 적응하여 괜찮아진 것 같습니다.

취업

이제 취업이 현실적으로 다가오고 있다는 점이 가장 크게 느껴집니다.
남은 시간이 약 1년이라는 것이 실감 나면서 포트폴리오와 자격증 준비의 필요성을 더 크게 느끼고 있습니다.

특히 이미 취업에 성공한 선배를 보며 더 빠르게 성장해야겠다는 생각이 들었습니다.

수업

학교 수업도 많이 바뀐 것 같습니다. 작년까지는 컴퓨터시스템, 자료구조, C언어, 자바 등 이론을 위주로 수업을 진행했다면 2학년이 되서는 데이터베이스, 응용프로그래밍, 네트워크프로그래밍 등 실습을 위주로 하는 수업들이 많이 생겼습니다. 아직까지 따라가기는 괜찮은데 한 번 안들었다가 못따라 가면 어쩌지 걱정이 있습니다...

FE STUDY 향후 계획

블로그

블로그는 2학기 말부터 자율적으로 작성하는 방식으로 변경했는데, 저는 이 방식을 유지하는 것이 좋다고 생각합니다.
매주 강제로 작성하게 되면 오히려 글의 품질이 떨어질 수 있고, 발표를 하더라도 얻는 것이 적을 수 있다고 느꼈습니다.
다만, 2주에 한 번 정도는 발표를 진행하는 것이 적절하다고 생각합니다.

코딩 테스트

코딩 테스트는 1일 1코테를 지향하고 있지만, 강제성이 없다 보니 오히려 잘 지켜지지 않는 것 같습니다.
따라서 요일을 정해 해당 날에는 반드시 코딩 테스트를 진행하는 방식이 더 효과적일 것이라고 생각합니다.

포트폴리오

선생님들도 많이 포트폴리오 작성을 강조하고 있으시기 때문에 지금부터 포트폴리오 틀을 잡아놓으면 좋을 것 같습니다. 한 달 정도 기간을 정해 각자 포트폴리오를 작성하고, 이후 공유하며 피드백을 주고받으면 좋을 것 같습니다.

10기

FE STUDY는 지금까지 6~7월에 다음 기수를 모집해왔지만, 아직은 저희가 더 성장할 필요가 있다고 생각합니다.
따라서 1학기 동안은 현재 인원끼리 충분히 성장한 뒤, 2학기에 모집을 진행하는 것이 좋을 것 같습니다.

마무리

이상으로 한 달 회고를 작성해 보았습니다.
이번 한 달은 여러 가지를 새롭게 시작한 시기였던 것 같습니다.

앞으로는 이러한 변화에 잘 적응하고, 시간을 더욱 효율적으로 활용해 나가도록 하겠습니다.
감사합니다.

Dark Mode FOUC/테마 종속 문제

Thu, 12 Mar 2026 09:32:44 GMT

목적

학교에서 진행하는 Flooding 프로젝트에서 다크모드 구현을 담당하여 진행 중 여러 문제가 발생하여 해결하는 과정을 작성해 보았습니다.

1. 페이지 새로고침 시 상태 초기화

"use client";

import Moon from "@/shared/asset/svg/Moon";
import Sun from "@/shared/asset/svg/Sun";
import { useState } from "react";

export function DarkModeToggle() {
  const [isDark, setIsDark] = useState(false);

  const toggle = () => {
    setIsDark((prev) => !prev);
    document.documentElement.classList.toggle("dark");
  };

  return (
    
  );
}

처음 다크모드 구현시에는 이렇게 useState로만 상태를 관리하여 다크 모드를 설정했더라도 페이지 이동이나 새로고침 시 라이트 모드로 돌아가는 문제가 발생했습니다.

그리하여 리팩토링을 통해 localStorage를 사용하여 사용자의 테마 설정을 저장하고, 컴포넌트가 마운트될 때 useEffect를 사용해 저장된 값을 불러오도록 수정하였습니다.

코드↓

import Moon from "@/shared/asset/svg/Moon";
import Sun from "@/shared/asset/svg/Sun";
import { useEffect, useState } from "react";

export function DarkModeToggle() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    const stored = localStorage.getItem("theme");
    const prefersDark = window.matchMedia(
      "(prefers-color-scheme: dark)",
    ).matches;
    const shouldBeDark = stored ? stored === "dark" : prefersDark;

    // eslint-disable-next-line react-hooks/set-state-in-effect
    setIsDark(shouldBeDark);
    document.documentElement.classList.toggle("dark", shouldBeDark);
  }, []);

  const toggle = () => {
    const next = !isDark;
    setIsDark(next);
    document.documentElement.classList.toggle("dark", next);
    localStorage.setItem("theme", next ? "dark" : "light");
  };

  return (
    
  );
}

2.FOUC/테마 종속 문제

2.1 FOUC 문제

useEffect는 클라이언트 hydration 이후에야 실행되므로, 그 전까지는 localStorage에 접근할 수 없어 테마가 적용되지 않은 상태로 먼저 렌더링됩니다. 이후 useEffect가 실행되며 테마가 전환되면서 화면이 깜빡이게 됩니다.

2.2 테마 종속 문제

테마 초기화 로직이 DarkModeToggle 컴포넌트 내부에 종속되어 이 컴포넌트를 사용하지 않는 페이지에서 테마를 불러올 수 없는 문제가 발생합니다. 로그인 페이지에는 헤더가 없으므로 테마를 적용하는 useEffect가 실행되지 않습니다. 결과적으로 localStorage에 저장된 사용자 설정을 읽지 못하고, layout.tsx에 하드코딩된 className="dark만 적용되게 됩니다.

해결 방법

FOUC 문제는 useEffect가 클라이언트에서 뒤늦게 실행되면서 localStorage를 읽고 classList.toggle을 호출할 때 이미 렌더링된 화면이 순간적으로 바뀌어 발생하였습니다. 이를 해결하기 위해 layout.tsx에 인라인 스크립트를 추가하였는데 인라인 스크립트는 HTML 파싱 시점에 즉시 실행되어 React hydration보다 먼저 dark 클래스를 적용하므로 깜빡임이 발생하지 않습니다. 따라서 useEffect에서는 localStorage를 다시 읽는 중복 로직을 제거하고 인라인 스크립트가 적용한 DOM 상태를 classList.contains("dark")로 읽어와 React state와 동기화하도록 수정하였습니다.

export default function RootLayout({
  children: React.ReactNode;
}) {
  return (