요약

• 기간 : 11/23(토) ~ 11/29(금)
• 한일:
  • OT
  • Inner Circle 1기 수료생 세션
  • Vanila JS 프로젝트
  • 코드리뷰

OT

프로그램 첫날, 기대 반 설렘 반으로 OT에 참여했다. 프로그램 소개 이후에는 네트워킹 시간이 이어졌는데, 오프라인으로 진행된 행사가 많아 아쉬움도 조금 남았다.

오프라인 참석 인원이 꽤 많았던 것 같았다. 지방에서 OT를 듣기위해 오셨다는 분도 있을 정도니, 다른 참가자들의 열정이 느껴졌다. 온라인으로 참석한 나는 아무래도 소통이 쉽지 않았고, 현장 참석자들 간의 대화가 이어질 때 약간 소외감을 느끼기도 했다. 다음번에는 꼭 현장에서 직접 경험해봐야겠다고 다짐했다.

각 파트별로 . 각자 자신의 회사와 팀 구성, 그리고 이번 프로그램에서 기대하는 바를 공유했다.

우리 회사는 나를 포함해 3명의 풀스택 개발자로 이루어져 있다. 팀원 모두가 프로젝트 수 대비 인원이 적어서 프론트와 백엔드를 나누기보다는 풀스택으로 개발을 맡고 있다. 이런 환경에서 2년 넘게 개발하다 보니, 점점 정체성에 혼란이 왔다. 이번 프로그램에서는 프론트엔드에 조금 더 집중하고, 깊이 있는 학습을 통해 T자형 개발자로 나아가는 첫걸음을 떼고 싶다고 소개했다.

생각보다 나와 비슷한 환경에서 개발하고 계신 분들이 많았다. 사수가 없는 상황에서 스스로 길을 찾아가며 일하는 경험을 공유해 주셨는데, 아직 깊은 대화를 나누지는 못했지만, 그 이야기를 듣는 것만으로도 "나만 그런 게 아니구나" 하는 위로를 받았다. 앞으로 비슷한 고민을 가진 분들과 공감대를 형성하며 이야기 나눌 수 있을 것 같아 기대된다.

Vanila JS 프로젝트

대학교 졸업 이후, 주로 프레임워크를 활용해 개발해왔다. 프론트엔드에서는 React, 백엔드에서는 Django를 사용하며 작업했는데, 이번 프로젝트는 프레임워크 없이 진행해야 했다. 프로젝트 주제는 자판기 만들기였다.

오랜만에 순수 자바스크립트로 작업하다 보니, 시작부터 고민이 많았다. 먼저 폴더 구조를 어떻게 잡아야 할지 막혔다. React를 사용할 때는 거의 클래스 기반이 아닌 함수형 컴포넌트를 사용했기 때문에, 이번에는 클래스 생성자 정의부터 헷갈려 찾아보며 진행했다.

또한, 이벤트 리스너를 등록하거나 DOM을 직접 조작해 동적으로 요소를 추가하는 과정도 낯설게 느껴졌다. DOM 조작과 순수 비즈니스 로직을 분리하고 싶었지만, 모듈화를 구현하는 것이 생각보다 만만치 않았다.

https://github.com/yeonhee7935/fe-onboarding-project/tree/5725e93e003bf3b6da5bfee1a43b9ccba8d2400f

Inner Circle 1기 수료생 세션

작성중...

코드리뷰

이너써클 과정에서 개인적으로 가장 기대했던 부분이 코드리뷰였다.
코드를 제출하면서 나름대로 잘 작성했다고 생각했지만, 리뷰를 받고 나니 아직 부족한 점이 많다는 것을 알게 되었다.

우선 감사하게도, 프로젝트 크기에 알맞는 구조로 설계한 점을 리더님께서 칭찬해 주셨다. 하지만 기본적인 자바스크립트와 HTML 명세에 대한 이해가 부족하다는 지적도 받았다.

다른 교육생들의 PR에 달린 피드백도 참고하며, 배운 내용을 정리해보았다.

리뷰에서 배운 점

1. 이벤트 버블링(위임)

• 이벤트 버블링이란 이벤트가 발생했을 때, DOM 트리의 하위 요소에서 상위 요소로 이벤트가 전파되는 현상이다.
• 왜 사용하는가?
  • 성능 향상: 비슷한 이벤트를 여러 요소에 개별적으로 추가하는 대신, 공통된 상위 요소에 한 번만 등록할 수 있다.
  • 동적으로 추가된 요소도 자동으로 처리할 수 있어 코드가 깔끔해진다.
  • 구현 시 유의사항: 이벤트가 특정 요소에만 작동하도록 필터링 조건을 잘 설정해야 한다.

2. 관심사 분리

• 관련된 로직은 한곳에서 관리하는 것이 중요하다.
• 예를 들어, DOM 조작과 비즈니스 로직을 한 클래스에 섞어두면 코드가 복잡하고 유지보수가 어려워진다. 이를 명확히 분리해야 코드가 직관적이고 재사용 가능해진다.

3. <template> 태그

• HTML 내에서 미리 정의된 구조를 저장해두고, JavaScript를 통해 이를 복제(clone)하여 사용할 수 있는 태그이다.
• 왜 사용하나?
  • 코드의 가독성을 높이고, DOM을 효율적으로 조작할 수 있다.
• 사용 방법:
  • HTML에 <template>로 기본 구조를 작성해두고, JavaScript에서 content를 클론하여 필요한 위치에 삽입한다.

4. 프론트엔드에서의 생산성과 성능

• 프론트엔드는 사용자 경험(UX)과 개발 생산성을 동시에 고려해야 한다.
• 성능 최적화는 중요하지만, 프로젝트 상황에 따라 개발 생산성이 더 중요하게 여겨질 때도 있다.
• "완벽한 성능"보다 적절한 타협과 개발 속도를 우선시해야 할 때가 많다.

5. 테스트를 고려한 코드 작성

• 테스트를 염두에 두고 코드를 작성하거나, 테스트 주도 개발(TDD) 방식을 적용해볼 것.
• 테스트는 코드의 안정성을 높이고, 리팩토링 시에도 신뢰할 수 있는 기반이 된다.

느낀 점

이번 리뷰를 통해 기본에 충실하는 것의 중요성을 절실히 느꼈다. 특히, 프로젝트를 진행하며 겉핥기 식으로 지나쳤던 부분들을 다시 돌아볼 계기가 되었다.