이안의 평일코딩

📚 React v19 React 19는 단순한 기능 추가를 넘어, React 개발 방식에 큰 변화를 가져올 여러 실험적 기능들을 공식화했습니다.서버 중심의 렌더링 철학, 자동화된 성능 최적화, 간결한 API 설계로 한 단계 도약한 모습을 보여줍니다.개인적으로 저는 커스텀 훅을 사내에서 자주 만들어 사용하는 편이라 익숙하게 Migration 가능할 것 같은데요.이번 포스트에서는 그중 가장 주목할 만한 기능들을 정리해보겠습니다. 🚀 React CompilerReact 컴파일러는 자동으로 useMemo, useCallback 최적화를 수행해주는 새로운 도구입니다.더 이상 불필요한 메모이제이션에 신경 쓰지 않아도 되는 시대가 왔습니다.function ProductPage({ productId }) { co..

React v18 후기 2022년 3월 출시된 리액트 18의 기존 버전과의 가장 큰 차이점은 바로 동시성(Councurrency) 지원이다.동시에 여러 작업을 효율적으로 처리하여 앱의 응답성을 개선한 점이 눈여겨볼만 하다.코드를 크게 바꾸지 않고도 성능 개선을 느낄 수 있고 필요하면 점진적으로 적용할 수 있어 업데이트 부담도 적었다. Automatic Batching Batching은 업데이트 대상이 되는 상태값들을 하나의 그룹으로 묶어 한번의 리렌더링에 업데이트가 모두 진행될 수 있게 해주는 것이다.한 함수 안에서 setState를 아무리 많이 호출시키더라도 리렌더링은 단 한번만 발생하고 여러번 리렌더링 하는것을 막아 성능이 향상된다.// React 17에서는 각각 렌더링 됨setTimeout(() =..

컴퓨터 프로그래밍에서 SOLID란 로버트 마틴이 2000년대 초반에 명명한 객체 지향 프로그래밍 및 설계의 다섯 가지 기본 원칙을 마이클 페더스가 두문자어 기억술로 소개한 것이다. SOLID 원칙들은 소프트웨어 작업에서 프로그래머가 소스 코드가 읽기 쉽고 확장하기 쉽게될 때까지 소프트웨어 소스 코드를 리팩터링하여 코드 냄새를 제거하기 위해 적용할 수 있는 지침이다. 단일 책임 원칙 (SRP: Single Responsibility Principle) "모든 함수/모듈/컴포넌트는 정확히 한 가지 작업을 수행해야 한다"라는 정의라고 해석할 수 있는 원칙. ✍🏻 개방 폐쇄 원칙 (OCP: Open Close Principle) OCP는 "소프트웨어의 구성요소(컴포넌트, 클래스, 모듈, 함수)는 확장에는 열려있..

✍🏻 단일 책임 원칙 (SRP) 원래 정의는 "모든 클래스는 단 하나의 책임만 가져야 한다"라고 명시되어 있습니다. 이 원칙은 해석하기 가장 쉽습니다. "모든 함수/모듈/컴포넌트는 정확히 한 가지 작업을 수행해야 한다"라는 정의라고 해석할 수 있기 때문입니다. 5가지 원칙 중 SRP는 가장 따르기 쉽지만 코드 품질이 크게 향상하기 때문에 가장 영향력 있는 원칙이기도 합니다. 컴포넌트가 한 가지 작업을 수행하도록 하기 위해 다음을 수행할 수 있습니다. 너무 많은 작업을 수행하는 큰 컴포넌트를 더 작은 컴포넌트로 나눔 주요 컴포넌트 기능과 관련 없는 코드를 별도의 유틸리티 함수로 추출 관련 있는 기능들을 커스텀 hook으로 캡슐화 👨🏻‍💻 React에 적용해보자! 이제 이 원칙을 적용하는 방법을 살펴보겠습니..

🤪 anyscript 타입스크립트 프로젝트의 tsconfig에서 strict를 true로 설정하거나, noImplicitAny를 true로 설정하면, 각종 변수에 타입을 지정하지 않았을 때 에러가 발생합니다. 타입스크립트에서 기본적으로 타입 추론이라는 것을 하는데, 추론한 근거가 없으면 암시적으로 any로 할당됩니다. 이러한 것을 못하게 하는 옵션이 noImplicitAny(말 그대로, no implicit any – 암시적인 any는 no)를 true로 설정하는 것이고, strict를 true로 설정하면 noImplicitAny도 true로 설정되죠. 타입스크립트 프로젝트에서 strict 모드를 설정하는 것은, 프로젝트에 엄격한 룰을 강제해서 추후에 코드를 수정하기 쉽게 만들어주는데, 이러한 프로젝트에..

💬 이슈 링킹이란? 이슈들의 관계를 정의하는 필드로써 하나의 관계에는 자동태와 수동태로 관계를 설정할 수 있다. 💬 장점은? 해당 이슈 담당자로 하여금 이 이슈가 어디서 파생된 이슈인지 혹은 어떤 작업이 선행되어야 하는지 명시적으로 알려줄 수 있는 기능이므로 잘 사용하면 커뮤니케이션 비용을 상당히 아낄 수 있다. 💬 사용법은? 🔗 링크 아이콘 - 이슈 연결을 클릭하면 아래와 같이 연결할 수 있는 필드가 나타난다. 📝 Blocks(병목) - is blocked by, blocks Cloners(복제) - is cloned by, clones Duplicate(중복) - is duplicated by, duplicates Relates(관계됨) - relates to 만약 A 이슈와 B 이슈가 있을 때 A ..

새로운 프로젝트의 repo를 npm install로 설치하는데 이와 같은 에러가 떴다. 해결방안 0. node-modules 폴더가 있다면 삭제. (없으면 다음 단계로 바로 넘어가도 된다) 1. 터미널에 아래와 같이 입력. npm cache clear --force 2. 다시 설치해주면 에러없이 설치가 완료된다. npm install 완료! ✨

글자 수 초과 시 ... 처리하는 방법 조건을 줘서 substr 메서드를 이용하면 간단하게 처리할 수 있다. const truncate = (str, n) => { return str?.length > n ? str.substr(0, n - 1) + "..." : str; }; 위와 같이 truncate라는 함수를 만든 후 jsx, tsx에서 가져다 쓰면 된다. {truncate(movie.overview, 100)} 그럼 100자 초과 시 나머지 글자를 자르고 "..."가 붙어서 원하는 대로 처리된다.