본문 바로가기

프론트엔드28

[React]React와 JSX. 개요 리액트의 경우 기본적으로 jsx라는 자바스크립트 확장 문법을 사용한다. 물론 해당 문법을 사용하지 않아도 사용가능하긴하지만 리액트가 가진 편리함이 많이 줄어든다. 기본적으로 jsx문법을 활용하기 위해서는 babel이나 tsc같은 트랜스파일러를 필요로 하는데 그렇게 치환 할 경우 React.createElements 등의 함수를 호출하는 코드로 트랜스 파일링 된다. 그리고 createElements는 일정한 구조의 객체를 반환한다. 해당 부분에 대한 간단한 흐름을 코드를 통해서 살펴보자. JSX 본래라면 트랜스파일러 내부를 어느 정도 들여다보아야 정확한 이해가 가능하지만 그럴 경우 관심사가 분산되니 해당 부분은 생략하겠다. 리액트의 바벨 jsx 런타임 관련 코드는 react패키지의 src폴더 내의 j.. 2022. 4. 14.
리액트 포탈과 렌더링 고민 컨텍스트를 포탈로 감싸는게 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.

티스토리툴바