멋쟁이사자처럼 아이디어톤 참가 후기: ‘넌내꺼짐’ 프로젝트 이야기
·
🧭 Dev Journey
🏃 연휴도 반납하고, 밤을 지새운 팀플2025년 5월, 멋쟁이사자처럼 대학 연합 아이디어톤에 참가했다. 연휴를 반납하고 예선 전날까지 팀원 모두가 밤을 지새우며 완성한 프로젝트였기에, 그 애정은 말로 다 표현하기 어려웠다. 비록 본선 진출에는 실패했지만, 모든 팀원이 최우선 순위로 두고 진심으로 임했던 팀플이었기에 꼭 기록으로 남기고 싶었다. 주제 선정부터 시작된 치열한 고민이번 아이디어톤의 주제는 다음과 같았다.“AI 기술을 통해 획기적으로 해결할 수 있는 실생활 속 문제와 타겟을 정의하고, ‘OO의 순간’ 사용할 수 있는 서비스 아이디어를 기획하시오.” 아이디어톤이 처음이었던 우리 팀은 각자 주제를 고민해온 뒤, 첫 대면 팀플에서 2시간 넘게 토론을 거쳤다. 결국 팀원 중 한 명이 제안한 ‘헬스장..
Vite 프록시 설정과 API 경로 불일치, 그리고 오해했던 CORS 문제까지
·
📚 Dev Log
Cotato 프로젝트에서 날씨 API 기반 로그인 기능을 구현하며, 프론트와 백엔드가 실제로 연결되는 순간을 처음 경험하게 되었다.그 과정에서 단순한 경로 설정 문제 하나가 어떻게 예상치 못한 500 에러로까지 이어질 수 있는지를 온몸으로 겪었다.처음으로 백엔드와 협업하면서 내가 겪은 문제와 배움을 정리해보려 한다. 처음엔 단순한 구조라고 생각했다 프론트엔드에서 API 요청 경로를 /api/v1/...처럼 깔끔하게 관리하고 싶었다.그래서 Axios 요청을 다음과 같이 구성했고axios.post('/api/v1/users/login', data, { withCredentials: true});Vite의 개발 서버에서 이 요청이 백엔드로 잘 전달되도록 하기 위해 다음과 같이 프록시 설정을 추가했다.// v..
TypeScript와 Storybook: 프론트엔드 생산성을 높이는 두 가지 도구
·
📚 Dev Log
프론트엔드 개발을 하다 보면 점점 복잡해지는 UI와 유지보수 어려움 속에서, 더 안정적이고 효율적인 개발 방법이 필요해집니다. 이 글에서는 그 해답 중 두 가지인 TypeScript와 Storybook에 대해 정리해 보았습니다. TypeScript란?TypeScript는 JavaScript의 상위 확장(superset) 언어로, 정적 타입 기능을 추가해 코드의 안정성과 유지보수성을 높여주는 언어입니다. JavaScript로 작성된 코드를 실행 전에 컴파일하여 타입 오류를 미리 잡아줍니다. “The goal of TypeScript is to be a static typechecker for JavaScript programs.”– The TypeScript Handbook 정적 타입 vs 동적 타입항..
Tooto 브리핑 제작기: ‘내 것처럼’ 만든 과제가 나를 만든다
·
🎨 Creative Thinking
🧭 도입: 나와 아이디어 사이의 거리 Tooto는 처음부터 과제를 위해 만든 아이디어는 아니었다.3월 말부터 4월 초, 코테이토에서 프로젝트 주제를 정할 때 내가 낸 아이디어였다.나는 프론트엔드를 맡고 있었지만, 기획 파트와 함께 아이디어 디벨롭 회의에 참여하며 서비스의 구조와 기능을 구체화해 나갔다. 그렇게 MVP까지 스케치되면서, 처음엔 의무감에 제출했던 아이디어였는데 점점 애정이 생겼다.최종적으로는 다른 좋은 아이디어가 선정됐지만, 머릿속에서 Tooto가 계속 맴돌았다.“이거, 나 혼자라도 해보고 싶다”는 마음이 생긴 순간, 이건 더 이상 ‘그냥 낸 아이디어’가 아니었다. 그래서 기획과 디자인을 맡고 있는 멋쟁이사자처럼 과제에서 ‘아이디어 브리핑’을 주제로 정해야 했을 때,망설임 없이 Tooto를..
React Hook 정복하기: useState와 useEffect의 원리부터 실전까지
·
📚 Dev Log
1️⃣ React Hook의 내부 동작 원리 – 구조와 렌더링 사이클 Fiber와 Hook의 구조Fiber란?React의 내부 렌더링 엔진에서 사용하는 자료 구조로, 컴포넌트 트리를 표현함각 Fiber Node는 컴포넌트의 상태, props, Hook 정보 등을 담고 있음Hook 연결 구조각 컴포넌트는 고유한 Fiber에 대응되며, Hook은 해당 Fiber 내에서 연결 리스트(Linked List)로 관리됨interface Hook { memorizedState: any; // 현재 상태 값 baseState: any; // 기준 상태 baseQueue: Update; // 업데이트 큐 next: Hook | null; // 다음 H..
코드 리뷰를 처음 해보며, 그리고 그 중요성을 느끼기까지
·
🧭 Dev Journey
운영진이 되고, 코드 리뷰를 맡게 되다올해 나는 학회 운영진을 맡게 되면서 CSS 강의를 진행하고, 과제를 내고, 구성원들의 코드를 리뷰해야 하는 상황에 놓이게 되었다. 문제는, 내가 코드 리뷰를 한 번도 ‘제대로’ 해본 적이 없다는 것이었다. 리뷰가 필요하다는 건 알겠지만, 막상 내가 직접 하게 될 줄은 몰랐다. 그래서 처음에는 코드 리뷰에 대한 기초적인 조사부터 시작했다. 운영진의 올해 목표 중 하나는 팀 프로젝트를 더욱 활발하게 만드는 것이었다. 자연스럽게 ‘코드 리뷰 문화 정착’이라는 키워드가 떠올랐고, 나는 ‘코드 리뷰의 중요성과 하는 법’이라는 주제로 DevTalk 발표를 준비하게 되었다. “코드 리뷰는 잘하는 사람들만 하는 것?” 돌이켜보면, 작년의 나는 코드 리뷰라는 것에 전혀 익숙하..
어떠한 개발자가 될 것인가
·
🧭 Dev Journey
🧩 문제를 풀어가는 쾌감, 그리고 개발 어릴 때부터 나는 수학을 좋아했다. 바로 풀리지 않더라도, 풀릴 때까지 붙잡고 고민하는 그 과정 자체가 재미있었다. 풀리지 않으면 답답했지만, 결국엔 스스로 풀어냈을 때 느껴지는 뿌듯함과 짜릿한 쾌감은 다른 어떤 과목에서도 느낄 수 없는 것이었다. 영어 숙제가 있어도, 국어 숙제가 있어도 늘 수학부터 손에 잡았던 것도 그래서였을 것이다. 그런 애정을 준 만큼 수학 성적도 좋은 편이었고, 자연스럽게 수학과에 진학했다. 하지만 대학에서의 수학은 내가 좋아하던 방식의 ‘문제 푸는 수학’과는 조금 달랐다. 그럼에도 한 학기에 한 과목쯤은 내가 좋아하던 스타일의 수학 과목이 있어서, 혹시나 맞을지도 모른다는 희망으로 쉽게 발을 빼지 못했다. 그렇게 계속 미련을 두던 중, ..