'🗂 WIL' 카테고리의 글 목록 (3 Page)

본문 바로가기

함수형 프로그래밍 컨퍼런스 후기 이번주에 함수형 프로그래밍 컨퍼런스를 다녀왔다. 예전에 읽었던 함수형 프로그래밍 책에서 말하는 ‘하나의 계산에 하나의 함수’ 원칙을 잘 적용할 때도 있지만, 실제로는 다양한 도메인 로직과 상태 관리가 UI 로직과 얽히면서 지키기 어려울 때가 많았다. 다른 분들은 어떻게 풀어나가는지 궁금했는데, 마침 이번 컨퍼런스에 FE 세션도 있어서 신청하게 되었다. 기억에 남았던 내용은 간단히 적어보자면 1. FE 태희 님 세션에서 내가 작성한 로직이 순수한지? 를 판단하는 기준 중에 하나로 테스트 코드를 작성하면서 느껴지는 불편함+어색함이 로직을 제대로 작성하지 못했다는 신호로 판단한다는 것이었고 해당 대목에서 테스트 코드의 중요성을 느끼게 되었다. 다만 FE 세션은 패널 토크로 조금은 라이트하게 진행되었는데 그럼.. 2024. 12. 15.

Polyfill이란? 최근에 신규 기능 개발을 진행하면서, EyeDropper API를 사용이 필요했다. 사용자가 화면에 표시된 색상을 선택하고 그 정보를 자바스크립트로 가져올 수 있는 Web API 이였는데, 아직 대부분의 브라우저에서 해당 API를 공식 지원하지 않거나, 지원 범위가 제한적이라 프로젝트에 바로 적용하는 데에는 무리가 있었다. 🥲💦이때 팀원분이 EyeDropper Polyfill 이 있다는 것을 알려주셨는데, Polyfill이 무엇인지, 그리고 EyeDropper Polyfill은 어떻게 구현되어 있는지 정리하고자 한다.Polyfill이란?Polyfill은 쉽게 말해 최신 브라우저 기능을 지원하지 않는 구형 브라우저를 위해 그 기능을 대신 구현해 주는 ‘코드’이다.예를 들어, ES6에서 새롭게 도입된 .. 2024. 12. 8.

🗂 FSD (Feature-Slided Design) 1️⃣ FSD 구조FSD는 레이어(Layers), 슬라이스(Slices), 세그먼트(Segments)의 계층 구조로 이루어져 있다.1. 레이어(Layers) => 프로젝트 기능적 역할레이어는 모든 FSD 프로젝트에서 표준화된 구조로 총 7개의 레이어로 구성되어 있다.App - 앱을 실행하는 모든 것 - 라우팅, 진입점, 전역 스타일, 프로바이더.Processes(더 이상 사용되지 않음) - 페이지 간 복잡한 시나리오.Pages - 전체 페이지 또는 중첩 라우팅에서 페이지의 주요 부분.Widgets - 독립적으로 작동하는 대규모 기능 또는 UI 컴포넌트, 보통 하나의 완전한 기능.Features - 제품 전반에 걸쳐 재사용되는 기능 구현체로, 사용자에게 실질적인 비즈니스 가치를 제공하는 동작.Entitie.. 2024. 12. 1.

프론트엔드에게 배포플랫폼이란 - 2024 당근 테크 밋업 당근 테크 밋업 영상을 보고 내용 위주로 정리하였습니다.🌐 HTML웹페이지에서 가장 중요한 요소는 브라우저에 표시되는 내용을 결정하는 HTML이다.사용자가 로컬에서 HTML 파일에 접근하면 브라우저가 직접 열 수 있지만 리모트 서버에 있는 HTML에 접근하기 위해서는 리모트 URL로 접근해야 한다. (* 리모트 URL : 외부에 위치한 HTML을 가리키는 경로)로컬에서는 파일 프로토콜을 통해 HTML을 요청, 리모트에서 접근할 때는 HTTP 프로토콜을 사용하여 요청한다.(*프로토콜: 컴퓨터와 컴퓨터 사이, 또는 한 장치와 다른 장치 사이에서 데이터를 원활히 주고받기 위하여 약속한 여러 가지 규약)📦 배포의 정의 및 성공적인 배포의 조건배포란?1. 사용자와 개발자가 만나는 지점.2. HTML 위치를 .. 2024. 11. 24.

동일한 컴포넌트를 재사용하면서 독립적인 상태를 관리하는 방법 이전 글에서 커스텀 이벤트를 사용해 상태를 관리하는 방법에 대해 정리했었다. 해당 에픽 버그배시를 진행하면서 발견한 이슈로 동일한 컴포넌트를 재사용하는 상황이 발생하면서 이벤트가 고유하지 못해 상태가 공유되는 이슈가 발견이 되었고 이벤트 네이밍에 고유한 ID를 추가해 중복 호출을 방지하도록 추가하였다.상태 관리 라이브러리인 Zustand를 활용한다면, 이와 같은 문제를 어떻게 해결할 수 있는지 정리해보고자 한다.1. createStore을 사용해 보자zustand의 createStore를 사용하면 컴포넌트별로 독립적인 store를 생성할 수 있다고 한다.import { createStore, useStore } from "zustand";// 독립적인 store를 생성하는 함수function create.. 2024. 11. 17.

CustomEvent 사용해서 노드 연결하기 이번에 ProseMirror에서 부모-자식 노드 간의 데이터 전달 문제로 어려움을 겪게 되었는데, React 컴포넌트에서는 부모가 자식 컴포넌트에 props를 통해 쉽게 데이터를 전달하고, 변경된 Props에 따라 리렌더링 되면서 컴포넌트 상태를 쉽게 변경할 수 있지만, ProseMirror에서는 부모의 상태가 변경되더라도 자식 노드를 리렌더링하기 어려워, 상태를 원활하게 공유하기에는 한계가 있다.위 문제를 간단하게 해결하기 위해 dispatchEvent 를 사용하였는데, dispatchEvent 가 무엇인지에 대해 간단히 정리해 보았다. 🤔🏓 CustomEvent1. 생성하기CustomEvent는 아래와 같은 형태로 생성할 수 있다.const event = new CustomEvent('crush'.. 2024. 11. 10.

🤨 lingui 이번에 회사에서 https://lingui.dev/introduction 해당 라이브러리를 사용해서 현재 다국어 작업이 필요한 프로젝트에 추가하는 작업을 진행 중인데, 나도 잠시 작업을 함께 진행하게 되면서 알게 된 lingui에 대해 간단하게 정리해 보았다.1. Lingui 초기 설정먼저 Lingui CLI와 필요한 패키지를 설치가 필요한데, @lingui/cli는 CLI 도구로 메시지 추출 및 번역 관리를 돕고, @lingui/macro는 코드를 분석하여 번역이 필요한 텍스트를 인식하고, @lingui/react는 React에서 사용할 컴포넌트를 제공한다.npm install @lingui/cli @lingui/macro @lingui/react그리고 lingui.config.js를 생성해서 loca.. 2024. 11. 3.

🔨 React Dev Tools 에 대해 알아보자 요즘 개발일정이 픽스되어 있는 상황이 많다 보니 이슈가 발생했을 때 이슈를 파악하는 과정에 있어서 어떻게 하면 효율적으로 빠르게 이슈를 해결할 수 있을 지에 대해 고민하게 되었는데.. 문득 내가 디버깅을 잘하는 편이 아니라는 생각이 들었고..(콘솔로그만 냅다 많이 찍는 사람 + debugger가 편하지 않는 사람 = 나) React Dev Tools을 잘 활용해 보기 위해 관련 내용들을 찾아서 읽고 간단히 정리해 보았다! 🔥 React Dev Tools 은 크게 Components 탭과 Profiler 탭으로 나누어지는데, Components 탭 에서는 현재 React 구성 요소 트리와 모든 props, state 또는 context를 표시하고, Profiler 탭에서는 사용하면 상호 작용을 기록.. 2024. 10. 27.

이전 1 2 3 4 5 6 ··· 9 다음

티스토리툴바