프론트엔드27 [React] React-dom에서의 innerHTML 리액트의 경우 리액트(jsx,정의 등)와 렌더러(웹의 경우 보통 react-dom)를 사용해서 어플리케이션의 UI를 렌더링한다. 렌더러의 경우 그 내용이나 구조등이 복잡한 편이라 정리해서 쪼개서 글을 쓰자니 너무 양이 많아지는 문제점이 있다. 그래서 소스코드 일부를 작게작게 쪼개서 정리하는 포스팅을 추가적으로 하기로 했다. 리액트의 경우 v-dom을 만들어서 DOM 자체를 리액트에서 관리하다보니 XSS 공격등 상대적으로 프론트엔드 영역에서의 보안이 안정적이다. 내부 dom을 직접 모두 관리하고 innerHTML등의 기존 js API를 최대한 사용하지 않아서 그런데 문제는 개발을 하다보면 innerHTML등의 API가 필요한 상황이 존재한다는 것이다. HTML 태그가 포함된 문자열을 DOM으로 추가하는 경.. 2022. 5. 31. 프론트엔드 설계 고민 -4- UI적인 측면은 컴포넌트와 아토믹 패턴을 통해서 feature를 구성한다. 데이터 처리 관련은 스토어, 커스텀훅(컨테이너)으로 처리한다.(model, viewmodel) 그렇다면 공통 feature는 어떻게 처리할까? 그러니까 위젯처럼 동일한 UI로 데이터 패칭이 필요해서 그 컴포넌트 내부에서 데이터를 패칭하고 그 구성을 여러 도메인에서 가져다 쓰는 경우가 존재 하는 경우 말이다. 개인적으로는 이럴 경우 해당 로직이 아예 동일하다 할지라도 도메인 영역이 다르기 때문에 공통되는 feature를 공유하기 보다는 같이 쓰는게 맞다고 본다. 도메인 별로 컨셉이 달라질 수 있는데 그럴 경우 영향을 받는게 바람직 하지 않다고 생각 되기 때문이고, 만약에라도 도메인에 상관 없이 동일한 인터페이스와 데이터를 제공해야 .. 2022. 5. 21. 프론트엔드 설계 고민 -3- 설계의 기본적인 규칙은 벡엔드나 프론트엔드나 대동소이하다.(사실 프로그래밍 외적인 분야로 봐도 비슷한 거 같다) 하나의 컨셉(관심사)에 집중한다. 하나의 행동(목적)을 여러 단계로 추상화하고 그 단계에 적합한 관심사에 맞는 부분에 집중해서 처리한다. 그런 작은 단위의 작업을 목적을 완성할 때까지 반복한다. 그리고 해당 목적의 디테일이 달라졌을때 또는 그런 추상화한 구조를 다른 목적을 수행하는데 재사용 가능하게 한다. 내가 철학적인 성향이 강해서 그런지 개인적인 생각을 말하자면 프로그래밍 자체가 철학과 유사하다는 생각이 많이 든다. 어떤 관심(목적)을 위해서 지속적으로 추상화된 보편율(코드)를 구하고 그를 검증하고 다듬는다. 물론 그렇게 개발을 하지 않는 사람도 많겠지만... 적어도 나는 그렇게 생각하고 .. 2022. 4. 26. [React]React와 JSX. 개요 리액트의 경우 기본적으로 jsx라는 자바스크립트 확장 문법을 사용한다. 물론 해당 문법을 사용하지 않아도 사용가능하긴하지만 리액트가 가진 편리함이 많이 줄어든다. 기본적으로 jsx문법을 활용하기 위해서는 babel이나 tsc같은 트랜스파일러를 필요로 하는데 그렇게 치환 할 경우 React.createElements 등의 함수를 호출하는 코드로 트랜스 파일링 된다. 그리고 createElements는 일정한 구조의 객체를 반환한다. 해당 부분에 대한 간단한 흐름을 코드를 통해서 살펴보자. JSX 본래라면 트랜스파일러 내부를 어느 정도 들여다보아야 정확한 이해가 가능하지만 그럴 경우 관심사가 분산되니 해당 부분은 생략하겠다. 리액트의 바벨 jsx 런타임 관련 코드는 react패키지의 src폴더 내의 j.. 2022. 4. 14. 이전 1 2 3 4 5 6 7 다음
