> [!date] published: 2025-05-17 깔끔히 정리하기가 좀 어려워서... 이번 주차 정리는 메모 정도로만 남긴다. ## 📌 오늘의 주제 - 지식, 설계, 기술 공부법 - React와 관련된 이야기 ## 💡 배운 것 ### 신기술에 대해서 버전 업그레이드가 짧은 주기로 된다. 업그레이드된 버전을 무조건 따르기보다는 지금 어떤 문제가 있고, 이 문제를 버전 업그레이드를 통해서 해결할 수 있는지를 먼저 이해하고 도입하는 것이 좋다. ### 영어 공식문서에 대해서... 번역본 보다는 원문을 읽는 것을 추천한다. 그래야 정보 왜곡이 없다. (이건 개인적으로도 공감하는게, mdn 같은 경우에도 한글 문서의 내용과 영문 문서의 내용이 다른 것들이 몇개 있다. 의미가 다르진 않지만 영문 문서의 내용이 좀 더 설명이 친절하고 깊다.) 최대한 영어로 보자! 그리고 영어랑 친해지자! 개발자로 성장하기 위해서는 영어랑 친해지는 것이 좋다. ### 설계 능력에 대해서 > 최근 마이크로소프트에서 AI 도입으로 인해 코더 대규모 해고가 있었더라고요. 이에 따라 점점 설계와 같은 분야의 중요성이 부각되는 것 같은데, 설계능력을 키우려면 어떤 방향으로 학습을 해야할까요?? 여기서 설계란 : (개발팀 차원에서) 애플리케이션 전체 골격, (서비스 차원에서) 앞단의 UI/UX 같은 것들 애플리케이션 전체 골격을 짜는 능력을 키우려면, 많이 해보는게 가장 좋지 않을까. 경험이 쌓이면 기능이나 디자인을 봤을 때 '어떻게 짜야겠다.' 하는 것들이 보인다. 특별히 이론적으로 공부한다기 보다는 많이 해보고 여러 방법으로 해보면 경험이 쌓이면서 설계 능력이 향상되는 것 같다. ### 공식문서를 꼭 독파해야 하나요. 이건 취향에 따라 다르다. (여기서 취향이란 어떻게 공부했을 때 자기 머리에 잘 남느냐) 어떤 기술을 사용하기 전에 공식문서를 싹 훑어야 머리에 잘 남는 사람이 있는가 하면, 어떤 사람은 문제가 닥쳤을 때 공식문서를 읽고 해결하는 과정에서 잘 기억하는 사람이 있다. 멘토님 개인적으로는 새로운 라이브러리를 공부하거나 사용할 때 1. 공식문서에서 why 부분을 본다. => 지금 이 기술을 사용했을 때 진짜 내가 필요한 목적을 잘 달성할 수 있는지를 확인. 이 기술이 어떤 목적을 위함인지 알아야 기술을 이해하기 좋다. 2. 라이브러리를 설치한다... 3. Quick start를 돌려본다... 흐름으로 공부한다고 하심. ### 이벤트 핸들러에 대해서 `handle~~` 보다는 **그 실제 이벤트에 역할을 의미하도록 이벤트 핸들러의 이름을 지어주는 것이 좋다**고 생각한다. return 부분을 봤을 때 handler 코드를 따라가서 읽지 않아도 바로 함수의 이름으로 어떤 역할을 하는 버튼인지를 알 수 있기 때문... (완전 공감됨) 이벤트 핸들러는 간단하더라도 표현부에서 분리하는것이 좋다. 모킹할 때 편하다. ### React Compiler [React Compiler – React](https://react.dev/learn/react-compiler) : 알아두면 좋다. React Compiler에 대한 멘토님의 코멘트 : useMemo, useCallback 같은 것들의 성능적인 영향이 그렇게 크지 않다. (이 내용 관련해서는 [[#useMemo, useCallback, React.memo에 대해서|여기]]에 좀 더 이어서...) 이런 api들을 제거하는 방향으로 가는 것이 React Compiler ### useMemo, useCallback, React.memo에 대해서 React 자체의 성능 개선이 실제 프로젝트에 주는 영향보다는 오히려 그 외부 요인들(lighthouse에 등장하는 요소들...)을 해결하는 것이 좀 더 성능 개선에 유의미하다. 오히려 메모이제이션에 드는 비용들이 성능 개선보다 더 많이 들기 때문에 득보다는 실이 많아서 별로 좋아하지 않는다. 여기서 메모이제이션에 드는 비용이라는 것은 단순 메모리 측면 뿐 아니라 팀의 인지 비용을 포함한다. (useMemo, useCallback으로 감싸진 코드는 오히려 읽기 어렵다.) ### React를 얼마나 공부해야 하는가. 멘토님 개인적으로는 - 랜더링은 언제 되고 - useEffect는 언제 쓰면 되는지 정도만 알면 충분하다고 생각하심 (하지만 이걸 잘 알아야겠죠...) React 자체를 굉장히 깊게 아는 것 보다는 기본적으로 웹의 동작 방식을 알고 있는 것이 더 중요하다. ## 📝 생각과 메모 경험을 통해서 프로젝트의 **견적**이 나온다는 것에는 진짜 공감했다. 예전에는 정말 아무것도 몰라서 누가 '개발 하는데 얼마나 걸리냐', '어떻게 구현할 수 있을까' 이런 것들을 물었을 때 그냥 느낌으로만 대답을 했었는데, 요즘은 그래도 경험을 토대로 대답을 하는 것 같다. 설계 같은 경우에도 완전하진 않지만 어떻게 하면 되겠다... 하는 것들이 떠오르고...? 하지만 설계를 갈아엎는 (ㅋㅋㅜ) 경우도 종종 있기도 해서 계속 꾸준히 경험치를 쌓는 것이 중요한 것 같다. 기술의 **why**를 먼저 공부해야 한다는 것도 되게 인상깊었다. 최근에 [[FSD 둘러보기|FSD]]를 공부하면서 why를 좀 꼼꼼히 살펴봤는데, 단순히 호기심에 읽어 본 것이긴 했지만... FSD가 왜 생겨났는지, 어떤 문제를 해결하기 위한 것인지를 이해하니까 확실히 왜 이런 구조를 사용하고 왜 이런 특징이 있는지 같은 것들을 잘 이해할 수 있었다. 라이브러리나 기술들을 공부할 때도 비슷한 효과를 볼 수 있지 않을까... why를 잘 읽어봐야겠다. 메모이제이션의 비효율성에 대해서도 좀 공감했다... 나는 경험이 많지 않지만, useMemo나 useCallback을 사용해서 가시적인 효과(?)를 본 적은 거의 없다. 그냥 나름대로의 기준(다른 훅의 의존성으로 전달하는 것이나, props로 전달하는 것, 그리고 그냥 연산이 좀 복잡한 것?)을 가지고 '이 연산은 좀 메모이제이션 할 필요가 있을 것 같다'는 생각에 하곤 했었는데 생각해보면 좀 불필요한 것들을 했던 것 같기도 하다... 오히려 훅으로 감싸진 코드들을 보면서 한번 더 생각하게 되고, 이러면서 "인지 비용"이 좀 더 드는 문제가 있었던 것 같기도 함... 요건 좀 더 생각해 볼 필요가 있을 것 같다...!