치트키다..!

정말 솔직히 말해서 프로그래머스 데브코스를 지원하기 전에는 국비지원에 대한 약간의 안좋은 감정과 불신이 있었다.

내가 국비지원에서 코치로 일했음에도 이러한 생각이 들었던 것은 수강생들의 이해도와는 별개로 너무 방대한 양을 빠르게 알려주기 때문에 제대로 이해하고 넘어가는 학생이 반도 안된다고 생각을 했기 때문이다.

'프로그래머스 데브코스는 이해도를 체크하고 넘어가냐?' 라고 묻는다면 그건 아니다. 라고 답할 것이다. 다른 국비 지원과 마찬가지로 내가 제대로 이해했는지 아닌지는 온전히 수강생들의 몫이다.

하지만 타 국비지원과의 차이점은 방향이라고 생각한다. 다양한 여러분야를 얕게 알려주기보단 트랙을 정해서 딱 그길에 필요한 정보를 더 딥하게 알려준다고 생각한다.

데브코스를 지원한 가장 큰 이유는 실무에 계신 훌륭하신 멘토님들과의 커피챗이었다. 데브코스에서 제공해주는 강의에 대한 기대치가 그리 높지는 않았었다. 수업을 듣으며 점점 생각이 바뀌었다.
강의를 찍으신 강사님도 실무에서 많은 경험이 있으신 분들로써 간간히 실무에서 사용하는 팁, 어떤 코드가 좋은 코드이고 어떤 코드가 안좋은 코드인지에 대한 논리적인 생각 등 아주 주옥같은 팁들을 들을 수 있었다.

한 달이라는 짧은 기간 동안 배운 내용들이 혼자서 독학 할 때 스스로 고민하며 결론 짓지 못하던 문제들에 답을 찾게 해주었고, 어느 방향으로 가야 답을 찾을 수 있는지 이정표를 제공해주었다.

강의에서 새로 배운 내용

의존성 낮추기

에를들어 버튼을 클릭했을 때 발생하는 행동을 컴포넌트 내부에서 정의하는것이 아닌 외부로부터 주입받아 사용하는 것이다.
이렇게 되면 컴포넌트는 버튼이 클릭되었을때 이벤트를 트리거 역할만 할 뿐 안에서 어떤일이 발생하는지는 알지 못하며 발생하는일은 이 컴포넌트를 호출한 곳에서 정의해준다
이렇게 의존성을 줄인다.

프론트엔드에서 사용하는 DI로 볼 수 있지 않을까..?

이벤트 델리게이션

이벤트 버블링, 캡처링 개념은 알았지만 딱히 써먹어본적은 없었다. 토스 Next23에서 과제문제를 풀면서 이벤트 캡처링은 이용해야하는 구현을 마주쳤을때의 당혹감이란...
이벤트 델리게이션이란 상위 태그에 이벤트를 걸고 이벤트 버블링을 이용해서 클릭이벤트에 대한 분기처리를 하는 방식이다.
이를 통해 각 태그에 이벤트를 걸어줄 필요없이 한 곳에서 이벤트를 처리 할 수 있다는 장점고 미래에 생길 자식 태그까지 처리 할 수 있다는 장점이 있다.

커스텀 이벤트

이런게 있다는 것도 몰랐다.... 우왕,,,내가 필요한 이벤트를 직접 만들어서 등록해줄 수 있다니... 오호,,,

이를 사용하는 방법은 커스텀 이벤트를 만들어주고 이벤트가 실행됬으면 곳에서 dispatchEvent에서 new CustomEvent을 통해 커스텀 이벤트를 호출하는 식으로 사용할 수 있다.

export const initRouter = (onRoute) => {
  window.addEventListener(ROUTE_CHANGE_EVENT_NAME, (e) => {
    const { nextUrl } = e.detail;
    if (!nextUrl) return;
    history.pushState(null, null, nextUrl);

    onRoute();
  });
};

export const push = (nextUrl) => {
  window.dispatchEvent(
    new CustomEvent(ROUTE_CHANGE_EVENT_NAME, { detail: { nextUrl } })
  );
};

이렇게 하면 의존성을 외부로 부터 주입받는 경우 여러depth를 통하면 props drill이 생기는 것을 막고 상단에 커스텀 이벤트를 만들고 자식들이 사용시 dispatchEvent를 이용해서 호출할 수 있다. (동작을 전역 상태로 관리하는 느낌..!)

단반향 데이터 흐름

단방향 데이터 흐름인 Flux패턴을 기반으로 한 redux, recoil, contextAPI 모두 사용해 보았지만 바닐라JS로 이를 단방향 데이터 흐름을 생각해본적은 없었다.
정말 단순하게 생각하면 데이터를 다르는 상위 컴포넌트를 정하고 하위 컴포넌트에서는 트리거 역할만 하며
데이터를 처리하는 로직은 상위 컴포넌트가 담고있다.
이를 통해 하위 컴포넌트에서는 상위의 데이터를 변경하지 않도록 하여
상위에서 변경된 데이터를 하위로 내려주는 형태인 단방향 데이터 흐름을 만들 수 있다.

커피챗으로 삼행시 조지겠습니다.

정말 기대 이상 이었다...!!! 내가 공부하며 이해가 안되는 것들, 고민이 되는 것들을 현업에서는 어떻게 풀어나가고 있는지를 들을 수 있었으며
가장 소오오오름이 돋았던 것은 지난 학기 소프트웨어 공학 수업에서 프로젝트의 FE팀장 역할을 맡으며 구조를 잡을 때 아주 애먹으며 가장 많이 참고했던 카카오페이지 기술블로그의 아토믹 디자인 패턴 글을 쓰신 분이 나의 멘토님이셨다...!!!!!!!!

멘토님께 질문을 하며 멘토님과 멘토님의 팀원분들도 나와 같은 고민들을 하셨었구나, 그리고 이런식으로 해결을 했구나 등을 배울 수 있는 시간이었다. 빨리 프로젝트를 하며 실제로 마주치는 문제들로 멘토님께 더 많이 물어보고 더 많이 배우고 싶다ㅎㅎ

커 : 커피 한 잔의 여유...❤️
피 : 피가 되고 살이 되는 나의 멘토...❤️
챗 : 챗지피티.

장난입니다.

멘토님 너무 감사해요ㅜㅜ 하나라도 더 알려주시려고 하시는 멘토님의 열정에 학구열이 불타며 멘토님같은 사수를 만날 수 있도록 더욱 노력해야겠다는 생각이 들었습니다ㅎㅎ