likeornament 님의 블로그

📌 문제 상황 PR 학습 페이지는 사용자가 직접 텍스트를 입력하고, 단계별로 이동하며, AI 피드백을 확인하는 과정을 반복하는 상호작용 중심의 화면이다.눈에 띄는 버벅임은 없었지만, DevTools로 렌더링을 확인해보니textarea에 값이 입력될 때마다 페이지 전체가 리렌더링되고 있었다. 특히 우측의 “변경된 파일”(ChangedFiles) 컴포넌트에 그려지는 파일은 2개뿐이지만,코드 줄 수만큼 과 가 생성되기 때문에 코드가 길어질수록 DOM 노드가 기하급수적으로 늘어나는 구조였다.그런데 입력이나 버튼 클릭 같은 사소한 상태 변화에도 이 컴포넌트가 매번 리렌더되고 있어, 성능 부담이 누적될 가능성이 있었다. 현재 데이터 크기에서는 체감 성능 저하가 없지만,학습 데이터가 누적되고 코드 길이가 늘어날 ..

9월의 중반이 되어서야 쓰는 회고록...사실 일부러 미룬 건 아니고, 정보처리기사 발표일이 12일이라 어쩔 수 없이 늦춰졌다. 원래 계획은 정보처리기사를 합격한 뒤 이력서에 기재하고,10월부터 본격적으로 이력서를 돌리려 했기 때문이다.그래서 이번 시험에 떨어지면 12월로 미뤄져 아주 큰일 날 상황이었다. 🎊 정보처리기사 결과 결과는 합격! 주위에서는 한 번에 붙은 사람이 거의 없어서 걱정이 많았는데,확실히 시간을 많이 투자한 보람이 있었다. 커트라인은 60점인데, 65점으로 턱걸이 통과.진짜 두 문제만 더 틀렸으면 아찔했을 상황이었다. ✅ 7월에 세운 8월 목표 점검 7월 회고록에서 적어둔 8월 할 일은 다음과 같았다.devly 프로젝트MSW로 배포랜딩 페이지 개선데스크탑 화면 대응README 작..

본인은 2025년 3월부터 7월까지 중학생들을 대상으로 스크래치와 아두이노를 활용한 코딩 수업을 진행했다.그 과정에서 학생들이 프로그램의 UI를 헷갈려 하거나 불편해하는 모습을 자주 볼 수 있었다.이 경험을 통해 ‘내 프로젝트에 이런 인사이트를 적용하면 사용자들이 더 좋은 경험을 할 수 있겠다’는 생각이 들었고,그에 따라 점검하거나 개선하게 된 UI 사례들을 정리해보려 한다. ✨ 사례 1 – 한 페이지에 너무 많은 요소가 있을 때의 직관성 문제 스크래치 프로그램을 보면 하나의 화면 안에 너무 많은 요소가 빽빽하게 배치되어 있다. 그래서 학생들에게 “이 버튼을 눌러봐”라고 알려줘도, 다음 번에는 같은 기능을 쉽게 찾지 못하는 경우가 많았다. 즉, 한눈에 기능이 들어오지 않는, 직관성이 떨어지는 구조였다...

예전에 prefetch 없이 클라이언트에서 useQuery만으로 데이터를 불러왔을 때도 충분히 빠르다고 아래의 글을 쓴 적이 있다.https://likeornament.tistory.com/17 하지만 실제 배포 환경에서 확인해보니, 페이지 전환 시 민감한 사용자라면 거슬릴 정도의 로딩 지연이 존재했다.Prefetch 적용 전 좌측의 첫 번째 페이지(word/page.tsx)에서 버튼을 클릭 후우측의 두 번째 페이지(word/learn/page.tsx)로 이동할 때, useQuery로 데이터를 불러오는 동안 로딩 스피너가 나타난다. 즉, 페이지 전환은 되었지만 실제 콘텐츠는 늦게 표시된다.→ 예민한 사용자라면 충분히 거슬릴 수 있는 지점이다. 이를 개선하기 위해 prefetch를 적용하기로 했다. 위 ..

개발자 AI 교육 서비스를 개발하면서, 학습 페이지와 복습 페이지에서 같은 컴포넌트를 어떻게 재사용할지 고민한 경험이 있다.이번 글에서는 내가 겪었던 문제와 해결 과정을 공유하며, 폴더 구조 정리, 컨테이너 패턴, props 분기 활용 방법을 정리하겠다.1. 프로젝트 구조와 문제 상황프로젝트에는 총 4가지 학습 기능과, 이 기능들을 복습할 수 있는 복습(review) 기능이 있다.학습 기능: word(개발 용어) / knowledge(개발/CS 지식) / pr(모의 PR) / interview(모의 면접)복습 기능: review 각 학습 기능은 /app/(afterLogin) 하위 경로로 구성되어 있으며,word와 knowledge는 안내 화면을,pr과 interview는 추천 PR/주제 선택 화면을 ..

7월 회고록에 적었던 것처럼 MSW를 사용해 배포를 완료하고,프로젝트 마무리를 하던 중 PR 작성 페이지에서 한 가지 UI 고민이 생겼다. 상단의 step(진행 단계) 표시를 가운데 정렬할 때, 수학적으로 정확한 가운데 정렬을 해야 할지, 아니면 시각적 착시를 고려해 살짝 조정해야 할지 고민이었다. 다른 기능(단어, 지식, 면접)에서는 좌측 상단에 페이지를 나갈 수 있는 X 버튼이 있다.그러나 PR 작성 페이지에서는 처음 들어갔을 때 나갈 버튼이 없어, step을 가운데로 옮기고 좌측에 X 버튼을 추가했다. 문제는 여기서 발생했다.step을 정확히 가운데 정렬했지만, 좌측 X 버튼과 우측 ‘변경된 파일’ 버튼의 길이가 달라 step이 오른쪽으로 치우쳐 보이는 착시가 생긴 것이다.수학적으로는 정확한 가운데..

조금 늦었지만, 매달 회고록을 작성하기로 한 만큼 7월 회고를 남겨본다.한 학기가 끝났고, 중학교 코딩 강사 활동도 마무리되면서 이제 정말 취업을 준비해야 할 시기가 왔다.올해도 어느덧 절반이 지났다.그동안 해온 프로젝트, 중학교 코딩 강사 활동, 정보처리기사 준비에 대해 정리하려고 한다. 💻 1. 프로젝트(개발자 교육 서비스)올해 초부터 백엔드 개발자 한 명과 함께 개발자 교육 서비스 프로젝트를 진행했다.프론트엔드는 4월쯤 대부분 완성했다.백엔드에서 아직 구현되지 않은 기능들은 msw를 활용해 API를 미리 가상으로 만들어 테스트했고,실제 API가 완성되면 주소만 교체하면 되는 수준으로 프론트엔드를 구현해놓았다. 하지만 백엔드 개발자가 이직하면서 프로젝트 진행이 중단되었다.여기서 문제가 생겼다.나는..

// ToastProvider.tsx"use client"import { Toaster } from "react-hot-toast";export default function ToastProvider() { return ( )}react-hot-toast를 사용하기 위해 먼저 Toaster를 감싼 ToastProvider.tsx를 만든다. // layout.tsxtype Props = { children: ReactNode;} export default function AfterLoginLayout({ children }: Props) { return ( {children} )}그리고 이렇게 Toaster를 띄울 페이지들의 최상단 layou..

// word/learn/page.tsximport { Suspense } from "react";import WordLearningContainer from "../_component/WordLearningContainer";import LoadingSpinner from "@/app/_component/LoadingSpinner";export default function WordLearnPage() { return ( )}프로젝트 작업 중 문득 궁금한 게 생겼다. 위의 page.tsx를 보면, 서버 컴포넌트인 WordLearnPage가 단순히 WordLearningContainer라는 클라이언트 컴포넌트만 반환하고 있다.(이렇게 구성한 이유는 내부 코드를 컴포넌트로 분리하여 다른 page..

토큰 만료 대응 작업을 하던 중 문제가 발생했다.// axios.tsimport axios from 'axios';// 인증이 필요한 요청을 위한 인스턴스const authApi = axios.create({ baseURL: process.env.NEXT_PUBLIC_BACKEND_URL});// 인증 인스턴스 추가authApi.interceptors.request.use((config) => { const token = localStorage.getItem('accessToken'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config;});export { authApi };// 응답 인터셉터 추가 ..