ODDN

ODDN

블로그 이전 안내(2) oddn.ai.kr 로 블로그 이전을 했습니다 ! 이전 블로그에 글들은 따로 마이그레이션 할 필요를 못느껴서 앞으로는 oddn.ai.kr에서 활동합니다. 아직 글은 작성하지 않았고 기능들도 추가되지 않았지만 앞으로 계속 추가될 예정이니 https://oddn.ai.kr/ 로 놀러오세요 ~

카테고리 없음

블로그 이전 안내 대학생 때, 블로그를 시작하고 벌써 6년이 됐습니다.그저 프론트 엔드 개발자로 일하고 싶다고 생각했던 청년이 어느 새 4년이나 넘긴 중니어 개발자가 됐고한 집안의 가장이자 남편이 됐네요 ㅎㅎ 에디터 관련 글이나 예전에 작성한 알고리즘 문제, 면접 후기 등 유입은 계속 있지만티스토리에 대한 불편함과 새로운 자극을 새로운 곳에서 공유하고 싶은 마음이 생겨 새로운 곳으로 이전하려고 합니다. 아직 어느 플랫폼으로 이전할 지는 정해진 게 없지만 1월 안으로 결정해서 2025년 회고를 작성해보려고 합니다!좋은 블로그 플랫폼 있으면 추천부탁드릴게요 ~

카테고리 없음

프론트엔드 영역에서 헤드리스(Headless) UI란 무엇일까

프론트엔드 영역에서 헤드리스(Headless) UI란 무엇일까 개요최근에 저와 팀은 차세대 프로젝트를 준비 중이에요. 팀에서 개발하고 있는 웹 에디터는 레거시한 아키텍처와 ES5로 이루어져 있어 유지보수와 새로운 기능을 넣기에는 한계적인 순간이 많았어요. 현재는 IE11를 완전히 지원하지 않아 ES6를 사용할 수 있지만 구조적인 부분에서 개선이 되지 않았기 때문에 아쉬울 수밖에 없어요. 그래서 저희는 차세대 웹 에디터를 개발하고자 팀 내 목표를 수립했습니다. 저는 개발 단계 수립 중에서 UI 라이브러리 및 프레임워크에 대해서 조사를 맡았는데요. 조사를 하던 가운데 자세히 알지 못했던 개념인 Headless UI의 정의와 사용하는 이유에 대해서 공유를 해보고자 합니다. 정의Headless UI란 비즈니스 로직과 접근성(a11y) 기능은 제공하지만, 시각적인 스타일은..

npm에서 pmpm으로 마이그레이션 하기

npm에서 pmpm으로 마이그레이션 하기 저번 글에서는 npm 대신 pnpm이 왜 npm 보다 더 많이 사용되는지 이유와, 장/단점에 대해서 알아보았는데요. 이번에는 기존에 npm으로 만들어진 프로토 타입을 pnpm으로 마이그레이션 하는 과정을 공유해보고자 합니다. 마이그레이션 순서는 아래와 같습니다.1. npm에서 pnpm으로 마이그레이션 하기 위해서는 기존의 npm 파일을 제거해야 합니다.아래의 파일들을 삭제해 주세요.`package-lock.json``node_modules` 디렉토리 삭제또는`rm -rf node_modules package-lock.json` 을 통해 삭제해 주세요. 2. pnpm 설정 파일을 생성합니다.pnpm-workspace.yaml 모노레포 워크 스페이스 구조를 정의합니다.packages: - packag..

왜 npm 대신 pnpm을 사용하게 됐을까? npm <-> pnpm 알아보기

왜 npm 대신 pnpm을 사용하게 됐을까? npm <-> pnpm 알아보기 개요새로 시작하게 될 프로젝트의 Node.js 패키지 매니저를 pnpm으로 정했습니다. 사실 pnpm은 npm 보다 좋다고 말만 들어봤지 정확히 어떤 부분에서 좋은지 분석해보지는 않았는데요. 이번 글에서는 npm으로 환경 구성된 프로토 타입을 pnpm으로 마이그레이션 하면서 알게 된 npm과 pnpm의 차이점, 장/단점에 대해서 기록하고 다음 글에서는 마이그레이션 과정을 정리해보고자 합니다. npm이란?자바스크립트 생태계에서 npm(Node Package Magner)은 Npde.js와 함께 배포되는 기본 패키지 매니저입니다.Node.js가 처음 등장했을 때, 개발자들이 다양한 모듈 및 라이브러리들을 공유하기 위한 저장소가 필요했는데 그 결과가 npm 레지스트리와 이를 다루는 CLI 도구인 npm이 됐습..

ProseMirror 뜯어보기 - prosemirror-model의 fragment.ts

ProseMirror 뜯어보기 - prosemirror-model의 fragment.ts 해당 게시글은 정보 공유 보다는 개인적인 학습을 위한 게시글입니다.Fragment의 개념Fragment는 여러 Node를 순서 있는 리스트로 보관하는 불변 객체문서의 각 Node가 자식 노드를 가질 때, 그 자식들의 집합이 Fragment내부적으로 Node 배열 + size(문서 좌표 길이)를 관리Node는 "한 개"를 표현하고, Fragment는 "여러 개"를 모아 놓는 컨테이너2. 주요 속성속성설명contentreadonly Mark[] - 노드 배열size모든 하위 노드의 총 길이( 텍스트 길이 + 구조 길이)firstChild / lastChild첫 번째 / 마지막 노드3. 주요 메서드 분류생성Fragment.from(arrayOrNode)Node 하나 또는 Node 배열로 Fragment 생성e..

티스토리툴바