전체 글32 ReactNode와 ReactElement의 차이 props로 컴포넌트(children)를 넘기거나 하는 상황에서 엘리먼트의 타입을 지정해주는데, 이때 ReactNode와 ReactElement의 차이가 헷갈려 찾아보게 되었다. 이런 경우에는 어떤 타입이 맞을까? export interface IEditorLayoutProps extends WithTranslation { children: React.ReactElement; } export interface IEditorLayoutProps extends WithTranslation { children: React.ReactNode; } 결론부터 말하자면 둘다 맞다. 왜냐하면 ReactNode가 ReactElement의 슈퍼셋이기 때문이다. 아래와 같은 관계이다. 리액트에 정의된 타입을 봐도 확인할 .. 2024. 2. 20. React에서 복잡한 상태를 관리하기 위해서 MVC패턴을 적용해보자 - Why편 들어가며 회사에서 업무를 하며 프로젝트에 MVC패턴을 적용했다. 프론트엔드에서는 흔하게 사용되는 구조가 아니기도 하며, 또 나와 같은 어려운 상황에 겪을 누군가를 위해 조금이라도 도움이 되고자 글을 작성한다. 글의 순서는 다음과 같다. 나는 어쩌다가 프론트에서 MVC 패턴을 적용하게 되었을까? MVC 패턴이란 무엇인가? 프론트에서 MVC 패턴을 사용해본 후기 나는 어쩌다가 프론트에서 MVC 패턴을 적용하게 되었을까? 현재 회사에서 AI 휴먼 영상생성 에디터를 개발하고 있다. 에디터 자체도 개발하기에 복잡한 편이지만, 자동으로 AI 음성/ 영상생성해서 캔버스나 타임라인에 적용해줘야하기 때문에 복잡함이 배가 된다. (이 글에서 타임라인은 대부분의 영상편기 하단부에 있는 그 타임라인이다. 아래 우측 사진 참고.. 2024. 1. 25. Recoil under the hood🤿 리코일을 직접 만들어보기 최근 1년 넘는 시간동안 회사에서 리코일을 사용했다. 다양한 환경에서 사용하다보니 자연스럽게 리코일에 대해 공부하게 되었고 이를 바탕으로 글을 작성해보려고 한다. 📌 오늘 해보고자 하는 것 ✅ Context로 구현하기 vs 리코일 사용하기 ✅ 리코일은 어떻게 필요한 부분만 리렌더하는가? ✅ 리코일을 직접 만들어보자! 📌 대상 독자 이 글은 기본적으로 Recoil을 사용해본 사람이 읽으면 좋을 것같다. 리코일이 처음이라면 이 글을 먼저 읽고 한번 사용해보기를 추천한다. 리코일은 리액트 hook을 사용할 수 있고 Context API에 대한 이해도가 어느정도 있다면 정말 쉽게 사용해볼 수 있다. ✅ Context로 구현하기 vs 리코일 사용하기 상태관리를 하다보면 해당 상태가 너무 많은 컴포넌트에서 사용하고.. 2023. 11. 24. 자바스크립트 정규표현식 (Regular expression) 매번 정규 표현식을 사용할 때마다 제대로 이해하지 못한 코드를 가져다 사용하는 것이 싫어 공부해보기로했다. 이번에는 적어도 핸드폰번호와 이메일 정규 표현식은 내가 직접 만들어야겠다. 정규 표현식 만들기 자바스크립트에서 정규 표현식을 만드는 방법은 두 가지가 있다. 정규식 리터럴을 사용하기const regex = /ab+c/; RegExp 객체의 생성자 함수를 호출하기const regex = new RegExp("ab+c"); 정규식 리터럴을 사용하면 스크립트를 불러올 때 컴파일이 된다. 만약 정규식이 상수라면 리터럴 방식을 사용하는 것이 좋다. 반면 생성자 함수를 호출하는 방식은 런타임시에 컴파일이 된다. 그래서 정규식의 패턴이 동적으로 변해야하는 경우에 생성자함수를 사용하면 된다. 사용자에게서 정규 표.. 2021. 5. 28. 리코일(Recoil) 기초 Recoil이란? Recoil is a state management library for React (리코일은 리액트를 위한 상태 관리 라이브러리다.) 목표 1. Flexible shared state React에서 공유된 상태(shared state)를 사용하기 위해 Context Provider를 사용한다. 그러나 Provider가 점점 많아지면 층층이 쌓이면 사이에 걸쳐있는 불필요한 컴포넌트들까지 리렌더링이 발생한다. Recoil은 이를 해결하기 위해서 React state와는 수직적인 방향으로 상태를 관리한다. (수직적이라는 것은 위 그림에서 보듯이 React 상태 트리가 바닥면이고 Recoil의 상태는 위에서 아래로 수직으로 내려오는 모양을 말하는 것이다. 따라서 React 상태의 영향을 받지.. 2021. 5. 19. 자바스크립트 디자인패턴 - 빌더 패턴(Builder pattern) 빌더 패턴(Builder pattern)이란? 빌더라는 이름처럼 객체를 생성하는 것에 관한 디자인 패턴이다. 객체를 만들어 사용하다 보면 간혹 객체 생성자가 너무 길어지거나 복잡해지는 경우가 생긴다. 이런 경우 빌더 패턴은 객체의 생성 과정을 분리해 순차적이고 직관적으로 만든다. 보너스로 객체를 Immutable하게 유지할 수도 있다. 특징 👍 너무 길어지는 생성자를 피할 수 있음. 👍 코드 가독성의 높임. 👍 객체의 Immutability를 유지할 수 있음. 👎 코드가 길어짐. 문제 상황 const user1 = new User('Andy', 10, null, 30); const user2 = new User('June', 11, 150, null); const user3 = new User('Gary.. 2021. 5. 18. 함수형 프로그래밍(Functional Programming) # 함수형 프로그래밍이란 무엇일까? Functional programming (often abbreviated FP) is the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects. 함수형 프로그래밍(Functional programming, FP)은 pure function으로 프로세스를 구현함으로써 공유된 state나 mutable data, side-effect를 피하는 프로그래밍 패러다임이다. 주로 함수형 프로그래밍은 Declarative(선언적)라고 하고, 그에 반대되는 개념을 Imperative(명령형)이라고 한다. Declarative Prog.. 2020. 6. 28. JavaScript Async/Await (비동기 함수와 실행 순서) Promise → then → promise → then → ... 계속 반복해서 사용하면 난잡해짐! ⇒ 이 문제를 해결하고자 등장한게 Async/Await! (Syntactic sugar) The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains. (비동기적인 코드를 동기적으로 보이도록! 가독성 높아짐) # Async async function name([param[, param[, ...param]]]) { statements } 이런식으로 앞에 async 키워드를 사.. 2020. 6. 27. JavaScript의 Call, Apply, Bind ☝ 우선 call, apply, bind를 위해서는 this에 대한 이해가 선행되어야 함. ☝ 일반적으로 JavaScript의 this는 해당 함수를 호출한 객체를 의미한다. (화살표함수에서 제외하고!) 이게 무슨말이야?? 함수를 호출한 객체? 🤦♀️... const toy = { name: 'forky', favorite: 'trash', introduce(){ console.log(`My name is ${this.name}, I like ${this.favorite}`); } } toy.introduce(); // My name is forky, I like trash 여기서 introduce를 호출한 주체는 누구일까? ⇒ 바로 toy!!!가 된다. 이건 어렵지 않게 이해할 수 있다. 그렇다면 조.. 2020. 6. 24. 이전 1 2 3 4 다음
