본문 바로가기

분류 전체보기364

24.01.07~24.01.14 업무 POC 기업 추가 기능 개발 POC 기업의 요구 사항을 처리하다 보니, 현재 개발된 기능으로는 구현할 수 없는 사항이 있었다. input이나 textarea 등 사용자와 상요작용이 필요한 가이드가 있는데... 지금까지 구현된 온보딩 요소들은 타겟과의 상호작용이 일어나는 순간 → 다음 요소로 넘어갔기 때문! 이를 구현하기 위해 template의 sub category를 추가, 해당 요소는 페이지와 상호작용이 가능하고 + 다음 버튼을 눌러 온보딩을 진행할 수 있게 구현했다. MVC로 구성된 kit에서는 애플리케이션 공통 interface를 추가하고 View단 로직만 수정하면 이를 구현할 수 있었기 때문에, 큰 공수가 들지는 않았다. (객체지향 만세!) extension에서 해당 요소를 toggle 할 .. 2024. 1. 14.
전방 십자인대 재건술 1달 차 후기 (보조기, 재활 운동) 수술한 지 정확히 1달 차. 드디어 반깁스를 떼고, 보조기를 착용했다. 사실 원래라면 지난주, 그러니까 수술 후 3주 차에 보조기를 착용해야 했다. 그런데 담당 선생님 왈. 많은 환자들을 봐보니, 일찍 보조기를 착용해 버리면 후유증이 금방 오는 경우가 많더라... 특히 나 같은 젊은 사람들은! (띠용) 친구의 소개로 찾아가서 신경을 더 써주시는 건지... 아무튼 덕분에 1주일 더 반깁스를 했다. 당연한 얘기지만, 반깁스보다는 훨씬 편하다. 착용 1주일 전 병원과 제휴된 듯한 보조기 업체가 와서 안 다친 쪽 다리를 재고 갔다. 개인별 맞춤 제작이라 가격이 좀 나간다고 했고... 실제 가격은 220000원! (당연히 보험처리는 안된다) 살짝 딛는 정도는 괜찮지만, 어쨌든 목발은 계속 착용해야 한다. 의사 선.. 2024. 1. 13.
네트워크 기초 정리 (IP 주소, IPv4, Subnet-mask) IP 주소 IP 주소는 Host에 대한 식별자를 의미합니다. 이때 Host는, 인터넷에 연결될 컴퓨터를 의미합니다. IP 주소는 IPv4와 IPv6라는 두 버전이 존재합니다. 두 버전의 가장 큰 차이는 → 주소 길이! (IPv4 : 32bit 주소 체계, IPv6 : 128bit 주소 체계) IPv4 현재 가장 보편적으로 사용되고 있는 IP 버전입니다. 터미널창에 윈도우 기준 ipconfig, 맥 기준 ifconfig 명령어를 통해 자신의 IP주소를 확인할 수 있습니다. IP 주소는 . 을 기준으로 8bit씩 끊어서 표현합니다. (즉 각 자릿수에는 0에서 255까지의 숫자가 가능합니다) Subnet-mask (Net-mask) Subnet-mask는 IPv4에서 network ID의 길이를 의미합니다. .. 2024. 1. 10.
이벤트 캡처링(Event Capturing)을 통한 이벤트 우선 순위 제어 이벤트(Event) 이벤트는 사용자의 행동이나 브라우저 자체에서 발생하는 사건을 의미합니다. 모든 DOM node는 특정한 이벤트를 만들어내며, 키보드 입력, 마우스 움직임 등이 대표적인 예시입니다. 이벤트 발생 시 브라우저는 이벤트 객체 를 생성합니다. 각 이벤트는 이벤트 객체에 의해 표현되며 해당 객체는 이벤트에 대한 상세한 정보를 포함합니다. 이벤트 흐름(Event Flow) 이벤트는 보통 세 단계로 진행됩니다. 캡처링 단계 (Capture Phase): 이벤트가 최상위(루트) 요소에서 시작하여 대상 요소로 향하는 단계입니다. 타겟 단계 (Target Phase): 이벤트가 실제 대상 요소에 도달하는 단계입니다. 버블링 단계 (Bubble Phase): 이벤트가 대상 요소에서 시작하여 최상위(루트).. 2024. 1. 9.
24.01.01~24.01.07 업무 온보딩 빌더 기능 개발 두 번째 POC를 진행했다. 이전부터 큰 관심을 보여온 기업이라, 진짜 개발된 익스텐션을 제공해 주는 것으로 했는데... 지난주에 줬던 1차 버전은 지나치게 많은 버그 + 미리 보기 중 페이지 이동 안됨 등의 이슈로 인해, 정상적으로 사용이 불가능했다. 해당 기업과 팀 내 자체 피드백을 수정한 버전을 이번 주에 개발했고, 목표대로 금요일에 2차 버전을 성공적으로 제공했다. 미리보기 관련 기능 개발 POC 기업의 페이지는 SPA 형태가 아닌, 각 메뉴가 이동할 때마다 페이지 새로고침이 발생하는 형태였다. 이전 버전에서는 페이지 이동 시 관련 데이터를 유지할 방법이 없었기 때문에... 해당 기업에서 만든 온보딩 flow의 미리 보기가 불가능한 이슈가 있었다. local stora.. 2024. 1. 7.
react-dom의 root.render()를 여러 번 호출하면 어떤 일이 생길까? 현재 회사에서 chrome extension을 React를 사용해 개발하고 있다. extension에서는 manifest.json의 content_scripts를 통해, 실행 시 자동으로 js 파일을 동작하게 할 수 있다. → 실행할 content-sciprts 파일에서 react를 사용해 페이지를 그려주면 되는 것. // content-script.ts import React from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; const rootElement = document.createElement("div"); document.body.appendChild(rootElement); const ro.. 2024. 1. 4.
네트워크 기초 정리 컴퓨터의 세 가지 구성요소 컴퓨터는 세계는 크게 세 가지 계층으로 구분할 수 있다. → 애플리케이션 수준의 User 계층 / OS 수준의 Kernal 계층 / 물리적 기기 수준의 HardWare 계층 이때 각 네트워크 요소들을 OSI 7 계층의 관점에서 원론적으로 접근하기보다(Abstract), 해당 추상에 대한 구현(Implement)에 집중할 필요가 있겠다. (학습 단계에서는!) (ex TCP/IP, HTTP) User process Kernal TCP IP Driver H/W NIC (Network Interface Card, LAN 카드) User 단계의 Process, 그 밑에 kernal 단계의 프로토콜이 구현되어 있다. 이때 전송/네트워크 계층의 추상을 구현한 것이 → TCP/IP가 되는 것.. 2024. 1. 2.
XState Visualizer 활용하기 XState란?→ 유한 상태 머신(Finite State Machine, FSM)을 구현하고 관리하기 위한 Javascript 및 Typescript 라이브러리! FSM는 시스템이 여러 상태 간에 전이할 수 있는 동작을 정의하는 모델링 도구로 사용되는데, XState는 이러한 상태 머신을 사용해 복잡한 상태 및 이벤트 기반 로직을 간결하게 구현하고 유지 보수할 수 있게 해 준다. FrontEnd 개발 시 상태 관리, UI 논리 제어, 이벤트 핸들링과 같은 상황에서 사용이 가능하며... 2023.10.11 - [source-code/FrontEnd] - 유한 상태 기계를 통한 사용자 선택 UI 개발 (feat xState) 유한 상태 기계를 통한 사용자 선택 UI 개발 (feat xState)프론트엔드 개.. 2024. 1. 1.
재정비의 해 무너뜨리고, 다시 짓고. 1년 전 이런 글을 썼었다. 예상은 적중했고, 팀은 피봇을 결정했다. 올해 6월 말. 대표의 입에서 처음으로 피봇과 관련된 얘기가 나왔다. 혼란스러웠고, 허탈했고, 화가 났다. 피봇을 결정한 이유는 간단했다. 2년 동안 서비스를 운영하며 모은 500여 곳의 애견 미용샵. 이들에게서 돈을 받아낼 방법이 보이지 않았다. 지난 몇 년. 모두가 행복회로를 돌리고 있었다. 일정 수준의 활성 애견 미용샵을 점유한 후 o2o 플랫폼으로 나아가 예약 중계 수수료로 돈을 벌고 커머스까지 확장한다. 이 (망상과도 가까운) 생각이 팀의 2년을 지배했다. 뭐 하나 명확하고 구체적인 게 없었다. o2o로 넘어갈 만큼 충분한 숫자의 미용샵은 얼마 정도인지, 애견 미용 시장의 보호자와 미용사들에게 비대면 .. 2023. 12. 31.

티스토리툴바