본문 바로가기

프론트엔드27

리액트 포탈과 렌더링 고민 컨텍스트를 포탈로 감싸는게 flux 패턴을 위함일까? 기존의 provider 방식과 무슨 차이를 가질까? 렌더링 측면에서 관련없다. 포탈로 context를 제공한다고 해도 각 상태값이 렌더링 되는건 기존의 context api와 차이가 없다. context을 제공하는데 portal을 활용하는게 아니라 portal을 공통으로 제공하는데 context를 활용하는 측면이 있다. 그 역은 성립하지 않는다. (라고 설명을 들었다.) 개인적으로 영감을 느낀 부분이 조금 있어서 해당 부분을 상태관리에 활용할 방법을 고민해봐야겠다. DOM트리를 벗어나는 설계를 한 이유는 그냥 모바일 특유의 네비게이션 이 목적으로 보인다. UI 특징에 상단 해더와 하단 버튼등 해당 레이아웃을 포탈을 통해서 컨테이너 컴포넌트 내부에서 관.. 2022. 4. 9.
프론트엔드 설계 고민 -2- 일반적인 웹 애플리케이션을 구성하는 부분은 어떤 게 있을까? 해당 웹의 라우팅, 해당 웹의 UI, 해당 웹의 상태 사용자 액션에 따른 요청 처리 등을 생각해 볼 수 있다. 간단하게 정의 내리면 라우팅은 두 가지 측면을 가진다. 해당 애플리케이션의 절차라는 측면과 해당 애플리케이션이 제공하는 서로 다른 도메인을 가진 기능이라는 측면으로 말이다. 즉 동일 도메인 내의 플로우나 서로 다른 도메인을 라우팅으로 구분지어서 제공 할 수 있다. 도메인의 경우 보통 루트에 가까운 라우팅으로 나뉘는 경우가 대부분이지만 특정 액션이 복잡하거나 반드시 특정 절차를 따라서 지켜져야 한다면 복잡도가 증가함에 따라서 동일한 도메인에 속하더라도 서로 다른 도메인으로 분리해서 취급 하는게 좋을 것이다. 라우팅을 통해서 코드스플릿까지.. 2022. 4. 8.
프론트엔드 설계 고민 -1- SPA 컴포넌트 방식의 프로젝트의 경우 기본적인 entry 포인트가 존재한다. 그게 vue든 앵귤러든, 스벨트든 말이다. index로 명명하든 main으로 명명하든 기본적인 SPA의 entry가 존재하고 이를 통해서 다양한 번들러나 트랜스 파일러들이 프로젝트를 파싱 해서 빌드한다. 이때까지는 보일러플레이트들을 따라서 만들다 보니 리액트 기준으로 index 파일에 store연결 등과 App컴포넌트(웹 애플리케이션 entry)를 바인딩하고 있었는데 최근 모종의 기회로 해당 부분에 대해서 생각을 되짚어볼 기회가 생겼다. 내가 내린 index와 app 파일의 정의는 각각 index: "개발 entry", app: "웹어플리케이션 entry"인데 store를 바인딩하는 것을 index에 넣는게 맞는 것일까? 각자.. 2022. 4. 5.
[React]React 와 Hooks. 동기 바닐라 js로 전역 store를 만들어보면서 리액트 인터페이스를 참고하면서 상태변화 구독을 자동화할 방법을 찾기 위해서 리액트 소스 코드를 분석을 진행하다가. 방대한 소스코드 분석을 차근차근 진행하면서 그 내용을 포스팅해보는 게 어떨까?라는 생각이 들어서 진행하게 되었다.(개인 학습과 생태계 기여) 개요 이번 파트는 React 패키지를 분석하면서 React Hooks 대한 그러니까 react-dom과 react 중에서 react의 컴포넌트 함수 Hooks에 대한 간략한 분석이다. 저장소 구성 리액트의 경우 자바스크립트 오픈소스 UI 라이브러리로 보통 기본 구성으로 react와 react-dom이라는 패키지를 설치하여서 사용한다. 오픈소스 라이브러리다보니 깃허브에 그 코드 전체가 repo로 공유되어있.. 2022. 3. 30.

티스토리툴바