코디로그

About this offer

코디로그 — 로그인 전에는 데이터 자체를 보내지 않는 미션 체크 도구 화면에서 안 보이게 가리는 것과, 서버가 애초에 안 보내는 것은 다릅니다. 기준: 2026-10 프로젝트 개요 코디로그는 코디세이 AI 올인원 과정의 미션 13개(이후 Term Project 2개 추가로 15개)를 체크리스트 형태로 관리하는 개인 웹 도구입니다. 공식 플랫폼이 해주지 않는 딱 한 가지, "지금 내가 어디까지 했는지 한눈에 보기"만 잘하는 도구로 범위를 좁혀서 만들었습니다. 저장소가 비공개라 이 글에서 기능을 README보다 조금 더 자세히 적습니다. 링크 배포: https://cody-log-iota.vercel.app 저장소: 비공개 (미션 원문이 포함돼 있어 공개하지 않습니다) 설계 철학 — "로그인 안 해도 되는 건, 정말 로그인 안 해도 되는 선까지만" 처음엔 로그인 없이도 전체 기능을 쓸 수 있게 만들었는데, 이후 보안서약 문제로 구조를 바꿨습니다. 미션 체크리스트 항목 텍스트는 코디세이 원문을 요약·재구성한 것이라, 보안서약상 로그인 없이 노출되면 안 됩니다. 그래서 지금은 디스코드 로그인(코디세이 서버 소속 확인)을 거쳐야 미션 내용을 볼 수 있습니다. 대신 기초개념 공부 페이지(코디세이 원문이 아니라 제가 직접 정리한 내용)는 로그인 없이 그대로 열어뒀습니다. 지금까지 한 것 (2026-10 기준) 미션 체크리스트 : 15개 미션의 기능요구사항·제약사항·제출물을 세부 항목 단위로 체크. 다 체크하면 상위 항목 자동 체크. 전체 진행률은 미션 개수 기준으로 동일 비중 계산(항목 수가 많은 미션이 과하게 반영되지 않도록) 필터·정렬 : 필수/선택, 개인/팀, 미션 그룹, 즐겨찾기 기준 필터링. 카드 드래그로 순서 변경, 한 줄에 보이는 카드 개수 조절 기초개념 공부 : 미션별 핵심 개념 사전, 플래시카드, 퀴즈 모드. 퀴즈 결과는 로그인 시 기록으로 남아 마이페이지에서 조회 가능 사이렌 기간 · 장학금 계산 : 기수별 D-day 표시, 동료평가·출입시간 입력 시 월별 장학금 기준 충족 여부 자동 계산 GitHub 연동 · 메모 · MD 내보내기 : 미션별 저장소 링크(공개 API로 커밋 정보 조회) 등록, 자유 메모, 체크리스트를 마크다운으로 내보내 AI 피드백에 활용 모바일 전용 화면 + PWA : 반응형 대신 별도 레이아웃, 홈 화면에 앱처럼 설치 가능 디스코드 로그인 : 코디세이 디스코드 서버 소속 여부를 OAuth 스코프로 확인, 서버 멤버만 미션 내용 열람 트러블슈팅 CSS로 가렸는데 원문이 그대로 보인다는 피드백 화면에서 안 보인다고, 데이터가 안 보내진 건 아니었습니다. 상황: 퍼실리테이터분이 "블러 처리는 잘 보이는데, 개발자 도구로 보면 미션 원문이 그대로 보인다"고 알려주셨습니다. 원인: 미션 원문 페이지를 빌드 시점에 미리 만들어두는 방식(정적 생성)을 쓰고 있었는데, 빌드할 때는 로그인 여부를 알 수 없어서 "로딩 중" 상태로 간주되고, 제가 짠 차단 조건( 로딩이 끝났는데 미인증이면 막기 )을 그냥 지나쳐서 원문이 그대로 정적 HTML에 구워졌습니다. 브라우저에서 열면 그 다음에 다시 로그인 여부를 확인해 화면만 가렸을 뿐, 서버가 처음 내려준 HTML 자체엔 원문이 이미 들어있었습니다. 해결: 해당 페이지를 "요청이 올 때마다 서버가 그 자리에서 만드는" 방식으로 바꾸고, 로그인 세션을 쿠키 기반으로 전환( @supabase/ssr )해서 서버가 매 요청마다 로그인 상태를 먼저 확인하게 했습니다. 미인증이면 원문 데이터 자체를 컴포넌트에 넘기지 않아서, 서버가 만드는 HTML에 원문이 아예 안 들어갑니다. View Page Source로 직접 확인해서 검증했습니다. 메인 체크리스트 화면도 같은 문제였습니다 원문 페이지 하나만 고치고 끝난 게 아니라, 같은 구조의 문제가 다른 화면에도 있었습니다. 상황: 원문 페이지를 고친 뒤, 메인 미션 체크 화면(카드 그리드)도 같은 방식으로 점검했습니다. 원인: 체크박스를 실시간으로 누르고 드래그로 순서를 바꾸는 화면이라, 미션 데이터 전체를 클라이언트 컴포넌트에서 직접 불러오고 있었습니다. 로그인 여부와 상관없이 체크리스트 텍스트가 브라우저로 내려가는 JS 파일 자체에 평문으로 포함돼 있었습니다. CSS 블러는 그 데이터를 화면에서 가릴 뿐, 개발자 도구의 Sources 탭에서 번들 파일을 열면 그대로 보이는 구조였습니다. 해결: 로그인 상태에 따라 데이터를 다르게 구성해서 내려주는 서버 컴포넌트를 두고, 체크리스트를 그리는 쪽은 그 결과를 props로만 받게 바꿨습니다. 미인증 사용자에게는 체크리스트 항목 배열 자체를 빈 값으로 보내서, 빈 공간 대신 자리만 보여주는 더미 줄을 그리도록 했습니다. 검증하다가 제가 만든 버그를 하나 더 찾았습니다 빌드 결과물을 직접 열어서 확인하는 과정 자체가 버그를 하나 더 잡아줬습니다. 상황: 위 작업을 하면서 "로그인 없이도 봐도 되는 필드(제목, 카테고리 등)"만 따로 뽑은 파일을 만들었는데, 처음엔 정규식으로 텍스트를 추출했습니다. 원인: 정규식이 미션 블록 경계를 정확히 못 잡아서, 일부 미션의 제약사항 텍스트가 "로그인 없이 공개해도 되는 데이터"에 섞여 들어갔습니다. 빌드된 JS 파일을 직접 열어서 "보호해야 할 문장이 실제로 번들에 있는지" 하나하나 대조하다가 발견했습니다. 해결: 정규식 대신 원본 데이터 파일을 실제로 파싱해서(타입 선언부만 제거하고 require 로 읽는 방식) 공개용 파일을 다시 만들고, 미션 15개 전체·보호 대상 문장 약 460개를 원본과 하나하나 대조하는 검증 스크립트를 돌렸습니다. OAuth 콜백에서 겪은 두 가지 문제 브라우저 전용 코드가 서버에서 실행되는 문제, 그리고 쿼리스트링이 리다이렉트 허용 목록 매칭을 깨뜨리는 문제. 상황 1: 로그인 후 같은 페이지로 돌아오게 하려고 서버 쪽 유틸 파일을 만들었는데, 로그인은 되지만 인증 확인이 들쭉날쭉했습니다. 원인 1: 서버 전용 파일이 설정값 하나를 가져오려고 클라이언트 전용 모듈을 그대로 불러오고 있었고, 그 모듈 최상단에서 브라우저 전용 함수가 모듈을 불러오는 순간 바로 실행되고 있었습니다. 브라우저 환경이 없는 서버에서 이 함수가 실행되면서 동작이 불안정해졌습니다. 해결 1: 환경변수 값만 담은 순수 모듈을 따로 분리해서, 서버 쪽 코드가 클라이언트 전용 모듈을 아예 거치지 않게 했습니다. 상황 2: 로컬에서 로그인하면 분명 로컬 주소에서 시작했는데, 승인하고 나면 배포 주소로 돌아갔습니다. 원인 2: "로그인 후 원래 페이지로 돌아가기" 기능을 넣으면서 리다이렉트 주소에 쿼리스트링을 붙였는데, Supabase의 리다이렉트 허용 목록은 쿼리스트링까지 정확히 같아야 통과시켜주는 방식이었습니다. 등록해둔 주소와 실제 요청 주소가 쿼리스트링 때문에 달라서 매칭에 실패했고, 매칭 실패 시의 기본 주소(배포 주소)로 대신 보내지고 있었습니다. 해결 2: 허용 목록에 와일드카드( ** )를 추가해서 쿼리스트링이 붙어도 매칭되게 했습니다. 퀴즈에서 선택지가 매번 바뀌어 보인다는 제보 정답을 고르는 순간마다, 화면 뒤에서 문제 자체가 다시 계산되고 있었습니다. 상황: 사용자분이 "정답을 고른 뒤 선택지가 다시 섞이고, 이전 선택지 일부가 안 사라지고 남아있다"고 알려주셨습니다. 원인: 오답 3개를 뽑는 함수를 리렌더될 때마다 다시 호출하고 있었습니다. 정답을 고르면 상태가 바뀌면서 리렌더가 일어나는데, 그 순간 오답이 또 랜덤으로 다시 뽑히면서 화면에 보이는 선택지 자체가 바뀌었습니다. 해결: 문제 번호가 바뀔 때만 선택지를 다시 계산하도록 캐싱( useMemo )했습니다. 겸사겸사 데스크톱·모바일이 각자 따로 갖고 있던 퀴즈 코드를 하나로 합쳐서, 같은 버그가 한쪽에만 남는 일이 없게 했습니다. 다음 계획 당장 추가 기능 계획은 없습니다. 심화 과정 자료가 나오면 그때 미션 데이터를 추가할 예정입니다. 정리 CSS로 가리는 것과 서버가 안 보내는 것은 다르다는 걸, 실제로 데이터가 새는 걸 보고 나서야 체감했습니다. 피드백 하나를 고치고 끝내지 않고, 같은 구조의 문제가 다른 화면에도 있는지 점검하는 과정에서 제가 만든 버그를 하나 더 찾았습니다. 빌드 결과물을 직접 열어서 "실제로 안 보내지는지" 대조하는 과정 자체가, 눈으로 보는 테스트보다 더 믿을 만한 검증이었습니다.