건망증 환자의 뇌장하드

Problem 디자인 시스템 구축을 위한 UI 프로젝트의 개발을 진행. 최초 개발 시 컴포넌트별 색상의 변경이 있을 것이라는 고려는 없는 상태로 개발 진행하여 version1에서 지원해야 할 컴포넌트들이 개발됨. light 테마만 지원하는 프로젝트가 개발됨 Use case 신규 개발 프로젝트에서 디자인 컴포넌트를 제공하기 위해 개발 하던 도중 고객사의 요청이 다크 테마를 지원해야 된다고 하여 디자인이 변경됨 따라서 기존에 개발된 컴포넌트의 색상때문에 이용할 수 없는 상황이 발생함. 이용할 수 있도록 컴포넌트의 테마를 주입하는 기능이 필요함. Condition Dark 테마를 지원해야 함. 고객사에서 요청하는 프로젝트의 Dark테마 Color set과 추후 사내 플랫폼에서 사용할 Dark테마의 Color ..

이미 개발되어 있는 컴포넌트에 추가적인 디자인, 기능이 필요한 경우 문제점 이미 개발되어 있는 컴포넌트라면 외부에서 사용하고 있을 가능성이 높음 만약 미묘한 디자인 또는 기능의 변경이 있더라도 해당 컴포넌트를 사용하는 모든 부분에서 장애를 일으킬 수 있음 해결방안 개발되어 사용되고 있는 컴포넌트에 새로운 기능을 넣지 않도록 한다. 완벽한 기획과 디자인이 선행되어야 하는데 현실적으로 불가능함. 모든 가능성을 열어두고 확장성이 무궁무진한 코드를 작성한다. 실현 불가능함. 같은 ui의 컴포넌트를 버전별로 나누어 개발한다. npm을 이용한 버전 관리를 진행한다. 사내에서만 사용해야 되기 때문에 private 저장소가 필요하다. 컴포넌트와 기능은 완전히 분리할 것 이를방지하기 위해 기능은 컴포넌트 외부에 일임하도..

목차 1. CSR이란? 2. Vanilajs, Nodejs, Expressjs를 이용한 SSR 만들어보기 CSR이란? 웹 페이지를 브라우저에 렌더링하는 전통적인 방식은 서버에서 렌더링하여브라우저로 뿌려주는 MPA(Multi Page Application) 방식이었습니다. CSR이 등장하게 된 여러가지 이유 중 하나로, 하드웨어의 발달은 소프트웨어에서의 많은 기능들의 실현을 가능하도록 했고, 이에따라 서버의 역할이 점점더 많아지고 서버가 감당하는 부하가 커졌습니다. 이러한 서버의 부하를 줄이기 위한 여러가지 개선방안이 필요했고 CSR은 그 대안 중 하나가 되었습니다. 서버에서 rendering하여 정적 리소스를 전송하는 것이 아닌 웹 클라이언트에서 렌더링하는 방식입니다. 하나의 HTML파일과 History..

Redux redux는 인기있었던 전역 상태관리 라이브러리입니다. redux와 같은 전역 상태관리라이브러리를 이용하여 상태 관리에 대한 단순화를 제공할 수 있습니다. 깊이가 50인 컴포넌트가 존재하고 root컴포넌트에서 최하위 컴포넌트에 상태를 전달하는데 그 사이의 컴포넌트에서는 그 상태를 전혀 사용하지 않는다고 생각해볼때 48개의 컴포넌트에 쓰지않는 코드가 추가되는 불합리한 구조를 가지게 됩니다. 전역 상태관리를 이용하여 root컴포넌트의 상태를 최하위 컴포넌트가 바로 접근하여 사용할 수 있다면 상태관리에 대한 단순함을 제공할 수 있게 됩니다. redux의 데이터 흐름도는 다음과 같습니다. React Component에서 변화가 일어남 action 생성함수(Action Creator)에서 action을..

DOM HTML, XML등 문서의 프로그래밍 interface입니다. 문서의 구조회 된 표현을 제공하며, 프로그래밍 언어가 DOM 구조에 접근하여 문서 구조를 동적으로 변경할 수 있도록 돕습니다. Node와 property, method 등을 가지고 있는 object문서로 표현하며, 이들은 Web page를 script 또는 프로그래밍 언어들에서 사용될 수 있도록 연결시켜주는 역할을 담당합니다. Virtual DOM virtual DOM은 UI를 가상으로 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의하여 실제의 DOM과 동기화 하는 프로그래밍 개념입니다. DOM을 수정하는 일은 비용이 크기 때문에 성능저하를 최소화 하기 위해 DOM을 최소한으로 수정해야 됩니다. 웹 application이 복잡..

React Hooks Hooks는 React v16.8에 추가된 기능입니다. 이전 버전에서 함수 컴포넌트에서는 사용할 수 없던 class 컴포넌트의 Life Cycle메서드(componentDidMount, componentWillUnmount, componentDidUpdate)와 동일한 기능을 사용할 수 있도록 고안된 기술입니다. Closure 함수가 속한 Lexical scope를 기억하여 해당 함수밖에서 이 scope에 접근할 수 있게 하는 기능. react hooks를 이해하기 전에 먼저 closure를 알고 있어야 합니다. closure를 한줄로 정의하면 위와 같습니다만, 잘 이해하기 위해 직접 사용해볼 필요가 있습니다. 여기서는 React hooks를 직접 만들어보며, closure를 사용해..

현재 재직중인 회사에서 yarn workspace를 활용하여 모노레포(MonoRepo) 프론트엔드 시스템을 구축하고 있습니다. 제가 하는 업무는 기존 서비스하는 application의 공통적으로 사용되는 컴포넌트를 storybook에 작성한 뒤 storybook 컴포넌트를 기존 컴포넌트와 교체하는 작업입니다. 이러한 업무를 진행하던 중 이슈가 발생하여 기록해놓고자 합니다. Monorepo 여러개의 프로젝트를 하나의(mono) 저장소(repository)로 관리하는 시스템을 의미합니다. 각각 패키지를 하나의 Root Package 아래에 묶어 하나의 저장소로 관리합니다. 기존 멀티레포 시스템에서 모노레포 시스템으로 프로젝트를 구축하며 다음과 같은 이점을 얻기를 원하고 있습니다. 중복되는 패키지에 대한 공간..

REST(Representation State Transfer, 자원의 상태 전달) - 웹에 존재하는 모든 자원을 고유이름(URI, Uniform Resource Identifier)으로 구분하여 해당 자원의 상태를 주고받는 모든것 - 자원(Resource - URI), 행위(Verb - HTTP Method), 표현(Representation) - Web Site의 text, image 등과 같은 모든 자원에 고유한 ID(HTTP URI)를 부여 - Json을 통하여 데이터를 주고받는것이 일반적이다. - Web의 기존기술, HTTP를 그대로 활용하는 Architecture - Client ↔ Server 간 통신 방식 중 하나이다. - CURD ▪ Create : 생성(POST) ▪ Read : 조회(..