`프론트엔드 개발자` 개형이의 벽돌집

지난 포스팅에 이어 SOLID 원칙 관련 포스팅을 보고 지난 프로젝트에 대해 회고하는 시간을 가져보고자 한다. 역시나 참고한 포스팅은 아래와 같다. https://fe-developers.kakaoent.com/2023/230330-frontend-solid/ ❗️이번에는 개방 폐쇄 원칙에 대해 기술해 볼 것이다. SRP : Single Responsibility Principle (단일 책임 원칙) OCP : Open/Closed Principle (개방 폐쇄 원칙) LSP : Liskov Substitution Principle (리스코브 치환 원칙) ISP : Interface Segregation Principle (인터페이스 분리 원칙) DIP : Dependency Inversion Princ..

🤔 프로젝트를 진행하다가 무분별하게 useEffect가 많이 사용된 곳을 본 적이 있다. 한 컴포넌트 안에 여러개의 useEffect가 있고 deps가 모두 달라 어떤 값의 변경에 따라 어떻게 동작이 수행되는지 추적하기 까다로웠던 경험도 있다. useEffect를 보통 언제 사용할까 고민해 봤다. - state 값이 변경될 때마다 특정 동작을 수행하고 싶을 때 - 초기 Mount시 data fetching 할 때 - 그 외 컴포넌트 mount시 단 한번 수행하고 싶은 동작을 넣을 때 문득 개발 중에 위처럼 쓰는 게 맞을까? 고민했고 서치를 통해 좋은 자료를 발견했다. https://www.youtube.com/watch?v=SrPebT4VBYc 위 자료의 예시를 직접 해보며 useEffect가 어떻게 동..

리액트 18 버전과 함께 등장한 동시성 적용에 대해 학습해보고자 한다. 아직 실무에서 적용해본 적은 없는 내용이라 배움에 상당한 기대가 된다. Day 2 스탓뚜! 리액트 동시성 (Concurrency) 살펴보기 1. 동시성이란? 리액트는 기본적으로 다음 뷰를 렌더링할 때 UI를 Blocking 했었다. UI를 블로킹.. 말 그대로 다음 뷰를 렌더링하는 동안 블로킹이 걸려 현재 뷰의 어떤 동작을 수행할 수 없는 것이다. 만약 어떤 컴포넌트 Rendering에 시간이 오래 소요된다면, 기다리는 동안 다른 것을 클릭할 수 없을 것이다. 오래 걸린다고 해서 중단하고 싶어도 중단할 수도 없을 것이다. 하지만 동시성이 적용된다면?! 다음 뷰를 렌더링하는 동안 현재 뷰의 반응성을 유지가 가능해진다. 이를 통해 오래걸..

프론트엔드 지식에 대한 인사이트를 해보고 기록해보는 학습을 시작해보기로 했다. 죽은 내 블로그를 살려보고자...!! 🤡 그럼 지금부터 스탓뚜! (시작이 반이니까 반 했다 ㅎㅎ) 리액트의 Best Practices 살펴보기 1. 파일 유형별로 디렉토리를 구성하지 말고 기능별로 그룹화 하라. 위 이미지처럼 구성 요소의 js 파일이나 css 파일을 더 간단하게 찾을 수 있다고 한다. 이 것에 대해선 전적으로 동의한다. css를 잔뜩 묶어 놓은 프로젝트를 만난 적이 있는데 찾는게 꽤나 힘들었다! 2. 컴포넌트를 작은 단위로 쪼개어 유지, 이해, 테스트가 쉽게 만들자. 예를 들어 UserProfile 컴포넌트가 작업 중에 커진다고 생각했을 때 ProfilePicture.tsx, UserName.tsx 과 같은 식..