[WIL] 항해플러스 프론트엔드 6기 1주차 회고

수박 겉핥기식 개발 지식을 가진 퍼블리셔로서, 항해 플러스 프론트엔드 과정 1주차를 마치고 첫 회고글을 남깁니다.

그동안 혼자 프론트엔드 개발을 공부하며 '이 정도면 괜찮을까?', '실무는 어떻게 다를까?' 하는 고민이 늘 마음 한편에 있었어요. 결국 직접 경험하고 배우기 위해 이 '항해 99'라는 배에 승선하게 되었습니다. 단순 기술 습득을 넘어, 실제 현업에서 요구하는 개발 역량과 사고방식을 배우고 싶다는 갈증이 컸기 때문이죠.

평일 온라인으로 팀원들을 만났는데, 처음에는 '비즈니스 로직' 같은 모르는 단어들이 많아 힘들기도 했습니다. "이게 뭔 소리지?" 싶을 때도 있었죠. 하지만 점차 익숙해지면서 개발자들의 '언어'와 '사고방식'을 조금씩 이해하게 되는 것 같아요. 단순히 코드를 넘어, 문제에 접근하고 해결하며 소통하는 방식까지 배울 수 있었던 값진 시간이었습니다.

솔직히 이번 과제를 시작하기 전까지는 "내가 정말 이걸 다 할 수 있을까?"라는 불안감이 컸어요. React나 Vue 같은 프레임워크 없이 Vanilla JavaScript로 SPA를 만드는 것이 말로는 쉬워 보였지만, 막상 시작해보니 만만치 않았습니다. 상상 이상으로 방대한 과제의 양과 깊이에 때로는 빠른 '하선'까지 고민하기도 했습니다.

하지만, 한 주간 접하게 된 조언과 인사이트를 통해 지금 겪고 있는 어려움들이 이 '항해' 과정의 자연스러운 일부이며, 이를 통해 더 크게 성장할 수 있다는 생각을 하게 되었습니다. 이제는 이런 어려움들을 배우고 성장하는 기회로 삼아 더 열심히 나아가야겠다고 다짐했습니다. 결국 최소 기준만 아슬아슬하게 통과했지만, '해냈다'는 것에 큰 의의를 두기로 했습니다.

---

과제를 통해 얻은 것들

이번 과제를 통해 웹 개발의 중요한 흐름을 깨달을 수 있었습니다. 하드코딩이나 퍼블리싱만 하던 것에서 벗어나, 웹 애플리케이션을 처음부터 구현하며 개발의 전체 과정을 이해하게 되었습니다.

특히 클래스 기반 컴포넌트 설계, 상태 관리, 라우팅 시스템 등 개념적으로만 알던 것들을 직접 구현하며 기능 구현 방법을 익혔습니다. AI와 구글링의 도움으로 어려운 기능들을 해결하며 문제 해결 능력도 향상되었습니다.

가장 자랑하고 싶은 코드들

장바구니 상태 관리 부분이 가장 만족스러웠어요. cartStore에서 옵저버 패턴을 활용해서 장바구니에 상품을 추가하거나 삭제할 때마다 헤더의 숫자가 실시간으로 바뀌고, localStorage에 저장해서 새로고침해도 데이터가 유지되도록 만든 부분입니다. 이 옵저버 패턴은 다른 프로젝트에서도 재사용 가능하고, Vue나 React가 내부적으로 어떻게 동작하는지 이해하게 해주었습니다.

// cartStore.js - 옵저버 패턴 구현
class CartStore {
  constructor() {
    this.items = [];
    this.subscribers = [];
  }

  subscribe(callback) {
    this.subscribers.push(callback);
  }

  notify() {
    this.subscribers.forEach(callback => callback(this.items));
  }

  addItem(product) {
    this.items.push(product);
    this.notify();
    localStorage.setItem('cart', JSON.stringify(this.items));
  }
}

클래스 기반 컴포넌트 설계도 뿌듯했습니다. class Header, class Cart처럼 각 기능을 독립적인 클래스로 분리해서 코드를 정리하는 방법을 배웠습니다. 특히 constructor, render() 같은 메서드들을 사용하면서 객체지향 프로그래밍의 기본 개념을 이해하게 되었습니다.

// Header.js - 클래스 기반 컴포넌트
class Header {
  constructor() {
    this.cartCount = 0;
    this.init();
  }

  init() {
    this.render();
    this.bindEvents();
  }

  render() {
    // 헤더 렌더링 로직
  }

  updateCartCount(count) {
    this.cartCount = count;
    this.render();
  }
}

무한 스크롤 구현도 신기했어요. Home.js에서 스크롤이 페이지 하단에 도달하면 자동으로 더 많은 상품을 불러오는 기능을 구현했습니다. debounce 함수를 사용해서 성능을 최적화하고, 로딩 상태를 표시해서 사용자 경험을 개선한 것이 좋았습니다.

다른 사람들의 코드를 보며 잠시 자신감이 떨어지기도 했지만, 이는 개발에 "정답은 하나가 아니다"라는 것을 깨닫고 나의 장단점을 객관적으로 파악하는 계기가 되었습니다. 아쉬운 점은 테스트 통과에 급급해 클린코드 구현과 성능 최적화를 소홀히 했다는 것입니다.

그래도 어려운 부분이 있을 때마다 동료들과 실시간으로 소통할 수 있었던 점이 정말 좋았습니다. 다른 사람들이 개발 관련 대화를 나누는 것을 보면서 다양한 접근 방법과 사고방식을 배울 수 있었어요. 특히 테스트 코드가 내 코드를 검증하는 과정을 직접 경험하며 그 중요성을 체감할 수 있었습니다. 비록 모든 테스트 통과는 못했지만, 개발에 대한 이해와 문제 해결 능력을 크게 키울 수 있었던 소중한 경험입니다.

---

KPT 회고

이번 1주차를 돌아보며 Keep(유지할 점), Problem(개선할 점), Try(시도할 점)으로 정리해 보았습니다.

Keep (계속 유지하고 싶은 점)

• AI 활용의 긍정적 경험: AI를 문제 해결의 실마리 탐색과 방법 연구에 적극 활용하며 과제를 완수했습니다.
• 협력 학습의 가치: 동료 및 멘토와의 실시간 소통과 코드 공유를 통해 문제를 해결하고 배우는 과정이 매우 유익했습니다.
• 핵심 기술 구현 경험: 클래스 기반 컴포넌트, 상태 관리, SPA 라우팅 등 웹 개발 핵심 기술을 직접 구현하며 전체 흐름을 이해했습니다.

Problem (개선이 필요한 문제점)

• 과도한 AI 의존성: 일부 기능 구현에 급급해 AI의 도움을 많이 받다 보니, 스스로 깊이 고민하고 문제를 해결하는 과정이 상대적으로 부족했습니다.
• 시간 및 자료 관리 미흡: 과제에 집중하느라 다른 일들을 놓쳤고, 중요한 발제 자료나 추가 자료들을 꼼꼼히 확인하지 못했습니다.
• 클린코드 및 이론 적용 부족: 테스트 통과에만 집중해 클린코드, 성능 최적화 등 이론적 원칙을 실제 코드에 충분히 적용하지 못했습니다.

Try (앞으로 시도해 볼 점)

• AI 활용 방식 개선: AI를 보조 도구로 삼되, 스스로 더 많이 고민하고 해결하는 방향으로 활용하며 의존성을 줄이겠습니다.
• 체계적인 학습 습관 형성: 시간 관리, 자료 꼼꼼히 확인, 모르는 개발 용어 적극적으로 찾아보기 등 기본적인 학습 습관을 개선할 것입니다.
• 클린코드 및 설계 원칙 적용: 기능 구현을 넘어, 어떤 과제가 오더라도 클린코드 원칙과 디자인 패턴, 성능 최적화 등 이론적 부분을 적극적으로 적용하고 리팩토링하는 연습을 꾸준히 할 것입니다.

---

1주차는 저에게 많은 생각할 거리를 던져주었고, '수박 겉핥기'를 넘어 개발의 깊이로 한 걸음 내딛는 중요한 시작점이 되었습니다. 비록 아슬아슬하게 최소 기준만 통과했지만, 이번 경험을 통해 배운 것들이 앞으로의 성장에 큰 밑거름이 될 것이라고 믿습니다. 앞으로의 항해가 순탄치만은 않을 것이라는 걸 알지만, 그만큼 더 큰 성장이 기다릴 것이라는 기대감으로 나아가려 합니다.

이 회고록은 티스토리(https://soa-memo.tistory.com/62)에 먼저 올렸습니다. 다만, 참여자분들이 벨로그를 많이 사용하시는 것을 보고, 이 기회에 저도 벨로그를 만들어서 같은 내용을 공유해봤습니다.