리액트의 Compound Pattern에 대해 알아보자

리액트에는 몇 가지 디자인 패턴들이 있습니다. 그 중에서 Compound Pattern에 대해 배워보도록 하겠습니다! Compound 패턴을 통해 하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담할 수 있게 됩니다. 클릭하면 메뉴바를 보여줘서 수정, 삭제 작업을 할 수 있는 Flyout 컴포넌트를 만들어봅시다. `Flyout` 컴포넌트에는 2가지 컴포넌트가 필요합니다. 메뉴를 클릭하면 토글할 수 있도록 하는 `Toggle` 버튼 수정, 작업 버튼을 가지고 있는 `List` 컴포넌트 Context API를 통해 Compound Pattern을 구현해보도록 해보겠습니다. 먼저 Flyout 컴포넌트에 Context API의 Provider를 구현해보자. type ContextType = { open: ..

• format_list_bulleted 프론트엔드 개발/React
• · 2024. 3. 7.
• textsms

졸업작품 진행상황 - 1

현재까지 진행 상황 공유 지금 졸업작품 프로세스를 생각해보면 3가지 입니다. 첫 번째는 VsCode Extension 개발이고, 두 번째는 Backend 개발이고, 마지막은 Frontend 개발입니다. 이 중 가장 중요한 것은 VsCode의 코드 타이핑 시, 시간을 어떻게 처리해야 하는가에 대한 부분입니다. 이 부분을 가장 많이 신경써야 했고, 앞으로도 신경써서 작성해야 할 부분입니다 1. VsCode에서 코드를 수정하고, 저장할 때 프로그래밍 시간을 측정하는 로직을 구현하고 있고, 구현 중에 있습니다. VsCode에서 저장을 눌렀을 때, 이벤트를 발생시키는 콜백함수를 등록하여 로직을 구현하려고 노력했습니다. 2. 나중에 수정될 가능성이 있지만 데이터베이스 스키마를 구상했습니다. 현재 DB 스키마는 2개..

• format_list_bulleted 프로젝트들/졸업작품
• · 2024. 3. 2.
• textsms

함수형 프로그래밍 - go, pipe, curry 함수

함수형 프로그래밍은 코드를 값으로 다루어 표현력을 높이는 방법을 배울 수 있습니다. `go` 함수: 인자에 들어있는 함수들을 차례대로 실행하여 하나의 값으로 만들어나가는 함수 `pipe` 함수: 여러 함수들을 합성하여 하나의 함수로 리턴해주는 함수 `curry` 함수: 값으로 다루면서 받아둔 함수를 원하는 시점에 평가시키는 함수 차례대로 공부해봅시다. 앞으로의 모든 코드들에는 `reduce` 함수가 있으니 `reduce` 함수에 대해 이해가 안되신 경우에는 제 이전 글을 보시면 감사하겠습니다. 1. go 함수 코드를 값으로 다룰 수 있기 때문에, 함수가 다른 함수를 인자로 받아 평가하는 시점을 원하는 대로 다룰 수 있습니다. 이를 통해 코드의 표현력을 높일 수 있습니다. `go` 함수는 인자들을 특정 함..

• format_list_bulleted 프로그래밍 방법론/함수형 프로그래밍
• · 2024. 2. 24.
• textsms

함수형 프로그래밍 - map, filter, reduce

프로그래밍에서 요소들을 순회하면서 특정한 작업을 하는 경우는 매우 많습니다. 함수형 프로그래밍에서는 이러한 작업들을 좀 더 보기 쉽도록 해주는 함수들을 사용하여 요소들을 순회합니다. map, filter, reduce 함수란? 대표적인 예시가 `map`, `filter`, `reduce` 입니다. `map` 함수는 요소를 순회하면서 요소마다 작업을 하는 경우에 사용됩니다. `filter` 함수는 요소를 순회하면서 특정 조건을 만족하는 요소들만 필터링할 때 사용됩니다. `reduce` 함수는 요소를 순회하면서 내부적으로 특정 함수를 재귀적으로 호출하려는 경우에 사용됩니다. 이제 각각의 함수들을 만들어보도록 합시다. 1) map 함수 먼저 다음과 같이 순회할 수 있는 배열이 있습니다. type Product..

• format_list_bulleted 프로그래밍 방법론/함수형 프로그래밍
• · 2024. 2. 24.
• textsms

React Query의 Prefetch란?

특정 데이터가 필요하다는 것을 알고 있는 경우 또는 예측할 수 있는 경우 prefetching를 통해, 미리 해당 데이터로 캐시를 채워 더 빠른 유저 경험을 제공할 수 있습니다. 몇 가지 `Prefetch` 패턴이 존재합니다. 이벤트 핸들러에서 컴포넌트에서 Router Integration을 통해서 서버 렌더링 동안 이번 글에서는 4번은 제외하고 설명을 하도록 하겠습니다! 너무 길어질 수도 있고, 공식문서에서도 3번까지도 설명하고 있기 때문입니다 `Prefetching`을 왜 쓸까요? 바로 Request Waterfall을 방지하기 위함, 더 빨리 데이터 요청을 하기 위함입니다. `prefetchQuery / prefetchInfiniteQuery` 메서드 별도의 구성없이, `staleTime`은 `qu..

• format_list_bulleted 프론트엔드 개발/React
• · 2024. 2. 19.
• textsms

졸업 작품 프로젝트 주제 선정까지의 고뇌

고민의 연속 졸업 작품을 뭐할지에 대해 계속된 고민을 했었습니다. 저는 애초에 이번 졸업작품에 대해서는 팀을 꾸릴 생각이 전혀 없었습니다. 여러 이유가 있지만 팀으로 꾸리다보면 제가 하고 싶은 주제를 하는데 있어서 제약사항이 많기 때문입니다. 그리고 학생들끼리 모여서 프로젝트를 하다보면 배우는 점이 거의 없었습니다. 이러한 경험에 의거해서 여럿이서 하는 프로젝트에 대한 경험은 잘하는 분들과 하고 싶었습니다. (물론 잘하시는 분들이 절 원하진 않겠지만요...😢) 몇 일 동안 조금씩 고민을 해보고, 교수님과 이야기를 나눈 결과, 3가지 정도로 압축되어졌었습니다. R3F를 사용하여 웹 상에서 3D를 구현하는 서비스 최적화와 관련된 지표들을 분석 좋은 아이디어를 웹 서비스로 구현 첫번째는 제가 예전부터 봐두던 ..

• format_list_bulleted 프로젝트들/졸업작품
• · 2024. 2. 17.
• textsms