230718(화)

🚤 성장일지 6.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!
🥊 (5.0)학습 키워드는 한줄의 핵심으로만 정리, 성공/실패 일지 작성하기! 이 때, 실패의 경험은 자세히 적기!
🍉 (6.0)<완전 개편!!!> 매일 습관적으로 핵심만 적을 수 있게 프레임 변경. 성공보단 실패에 초점을 맞추기.

• 🍉 (6.1)<수정> 매번 성공, 실패를 따로 적는 것보단 경험으로 표현하자

🌈 오늘의 감정

오늘은 너무 잠이 와서 낮잠을 좀 길게 잤다. 예전에는 계획대로 되지 않고 잠을 자면 스트레스를 많이 받았는데, 이제는 잠이 온다는 것 자체가 나에게 필요했다는 걸 알기에 스트레스받지 않는 것 같다. 그래도 잠을 자고 나니 개운하게 공부할 수 있어서 나름대로 계획을 전부 완료했다.(헬스를 안갔지만 🤪)

🫧 오늘의 고민

리덕스를 어디까지 배우는 게 나은가?

지금 듣고 있는 강의는 리덕스의 초기 모습부터 리덕스 thunk, saga까지 다루고 toolkit으로 넘어간다. 확실히 redux를 배우고 조금 사용해보니 왜 toolkit이 나왔는지 알 것 같다. 라이브러리치곤 너무 많은 정형화된 코드가 필요한 느낌..? 좀더 자유롭고 유여하게 사용하기 좋은 게 라이브러리라고 생각하는데, 이건 뭐 말이 라이브러리지 초기 설정을 하는 과정은 프레임워크나 다름이 없다. 물론 이런 흐름을 거쳐서 점점 정형화되고 하나의 프레임워크나 도구로 자리잡는 것이겠지 싶다. 그래서 나온 게 redux-toolkit과 같은 리덕스 도구 모음이겠지..?! 아직 프로젝트에 제대로 적용해본 적은 없지만, 첫 인상과는 다르게 배울수록 재미있는 느낌이다!

앞으로 프론트 과제 전형은 바닐라 JS로 하는 게 좋을까, React로 하는 게 좋을까?

기존에는 바닐라 JS로 된 과제가 정말 많았는데, 저번에 봤던 토스 과제도 그렇고 다른 과제들도 React로 구현하는 경우가 많아 진 거 같다. 너무 고민하지말고 둘다 기본기를 탄탄히 갖추는 게 중요한 것 같다. 너무 효율성만 따지다보면 사람이 얄팍해지는 경향이 있는 것 같아서… 그냥 전부 나에게 도움이 되는 경험, 시간일테니 둘다 잘 준비해보자!

☀️ 오늘의 경험

Redux의 container 개념

Redux를 사용하면서 container라는 개념을 처음 접했다. Redux를 사용하면서 container를 사용하는 이유는 무엇일까? 먼저 container는 Redux와 연결된 컴포넌트를 의미한다. Redux를 사용하면서 컴포넌트를 분리하다보면, 컴포넌트가 많아지고 컴포넌트 간의 관계가 복잡해지는 경우가 생긴다. 이런 경우에 컴포넌트를 분리하고, 분리된 컴포넌트를 연결해주는 역할을 하는 게 container이다. 이렇게 하면 컴포넌트 간의 관계가 복잡해지는 것을 방지할 수 있고, 재사용성도 높일 수 있다.

Redux를 사용하면 좋을 이유

Redux는 상태를 단방향으로 다뤄 좀더 직관적이고 명확하게 상태를 다루기 위한 Flux 아키텍처에 대한 구현체이다. Redux를 통해 한 곳에서 상태를 관리할 수 있고 그에 따라 상태에 대한 추적이 쉬워진다. 그리고 이런 추적을 더 보기 편하고 다루기 쉽게 제공해주는 게 Redux DevTools이다. Redux DevTools를 사용하면 상태 변화를 한눈에 볼 수 있고, 상태를 직접 변경할 수도 있다. Redux Devtools도 결국엔 Redux의 middleware로 제공이 되는데, 이 middleware의 힘이 너무 막강해서 조금 사용해보고선 Redux를 사용하면 좋은 가장 강력한 이유 중 하나가 아닐까 생각하게 됐다. Redux Devtools가 적용된 여러 사이트를 돌아다니면서 상태 변화를 확인해보니 코드를 모르고 보는 건데도 굉장히 직관적이고 추적하기 쉬웠다. 해서 가능하면 다음에 진행하는 프로젝트에는 Redux를 적용해보고싶다.(물론 Toolkit으로 ㅎㅎㅎㅎㅎㅎ)

시니어 개발자의 JS 활용

요즘 듣고 있는 시나브로 JS 강의에서 은재님의 JS 활용은 확실히 뭔가 다르다. 코드의 로직도 로직이지만, 사용하시는 api나 구현해서 사용하시는 함수가 뭔가 넘나 깔끔하고 잘 읽힌다고 해야하나..? 2가지의 예시를 들어보면

1. matches() api 활용하기

• 정말 별건 아니지만, matches라는 api가 코드를 읽을 때 너무 직관적이라서 보기 좋았다.

document.querySelector('.btn').addEventListener('click', (e) => {
  if (e.target.matches('.btn')) {
    // do something
  }
})

2. 재귀를 통해 특정 부모태그 찾기

function findElement(startingElement, selector) {
  let currentElement = startingElement;
  while (currentElement) {
    if (currentElement.matches(selector)) {
      return currentElement;
    }
    currentElement = currentElement.parentElement;
  }
  return null;
}

구현하려면 충분히 구현할 수 있고 활용하려면 알아서 활용할 수 있겠지만, 시니어 개발자의 코드나 그 흐름을 보는 건 정말 넓은 시야를 얻게 해준다. 이걸 그냥 머리에만 갖고 있는 게 아니라 내 코드에도 녹여내서 읽기 쉬운, 효율적인 코드를 작성할 수 있도록 노력할 것이다!!!

🐾 오늘의 교훈

좋은 코드를 자주 접하고 읽어보자. 그리고 그 코드를 직접 활용해보자. 거기서 얻는 배움이 정말 큰 것 같다.

🪵 참고

• 없음