리액트13 [react] recoil(state management)은 리액트 19부터 사용이 불가능하다. 예전에 기획해둔 작은 규모의 프로젝트를 미루다가 최근에 개발을 진행하면서 경험한점 + 프론트엔드 상태관리에 대한 짧막한 정리(이전에 정리한거보다 좀더 실사례를 들어서 구체적으로)으로 해볼까한다. 사실 내 성격상 이런 사소한 것들을 글로 쓰는게 의미 있냐?는 의문이 들긴하지만 잘 활성화된 개발 블로그들의 경우 보통 이런 내용들이 많은 유입을 끌어들이는 걸로 보이니 조금은 벤치마킹하는 것도 나쁘지 않을거같다. React 19가 오면서 cra(create-react-app)부트스트랩이 지원종료 한건 소식을 들어서 알고 있었다. 사실 그전부터 별로 좋아하지도 않았던 (특유의 블랙박스, 무거움)부트스트랩이고 개인적으로 보일러플레이트를 만들어서 사용했는데최근(?)에 접했던 번들러인 vite에 대한 경험이 나름 좋.. 2025. 3. 17. [프론트엔드] 코드 스플릿에 대한 정리 벡엔드뿐 아니라 프론트엔드 개발에서 성능 최적화를 위해서 고려해야 할 요소는 상당히 많다. 디테일한 부분을 제외하고 큼직만 한 요소들을 축약해서 꼽자면 리소스 용량을 줄이는 것(압축 및 캐시와 분할), 렌더링 비용을 줄이는 것(DOM, CSSOM, VDOM), 네트워크 비용을 줄이는 것(커넥션 릴리즈) 정도로 분류할 수 있을 거 같다. 그중 리소스 용량 즉 js나 html, css, image등의 파일의 용량을 관리하는 방식으로 웹을 최적화할 수 있는데 단순히 압축(webp, gzip 등)을 통해서 해당 리소스들의 용량을 줄이는 방향과 cache를 통해서 중복 요청을 줄이는 방법 등이 존재한다. 그리고 단순히 용량을 줄인다는 측면이 아닌 꼭 필요한 부분만을 미리 가져다 쓴다는 측면의 분할을 적용하기도 하.. 2022. 7. 20. [React]React-dom 과 render 리액트 18기준 레거시가 된 render 함수의 구조를 간단히 들여다 보자 render함수는 react-dom 패키지의 ReactDomLegacy로 분류 되어 있다. export function render( element: React$Element, container: Container, callback: ?Function, ) { if (__DEV__) { console.error( 'ReactDOM.render is no longer supported in React 18. Use createRoot ' + 'instead. Until you switch to the new API, your app will behave as ' + "if it's running React 17. Learn " + .. 2022. 7. 17. [React] React-dom에서의 innerHTML 리액트의 경우 리액트(jsx,정의 등)와 렌더러(웹의 경우 보통 react-dom)를 사용해서 어플리케이션의 UI를 렌더링한다. 렌더러의 경우 그 내용이나 구조등이 복잡한 편이라 정리해서 쪼개서 글을 쓰자니 너무 양이 많아지는 문제점이 있다. 그래서 소스코드 일부를 작게작게 쪼개서 정리하는 포스팅을 추가적으로 하기로 했다. 리액트의 경우 v-dom을 만들어서 DOM 자체를 리액트에서 관리하다보니 XSS 공격등 상대적으로 프론트엔드 영역에서의 보안이 안정적이다. 내부 dom을 직접 모두 관리하고 innerHTML등의 기존 js API를 최대한 사용하지 않아서 그런데 문제는 개발을 하다보면 innerHTML등의 API가 필요한 상황이 존재한다는 것이다. HTML 태그가 포함된 문자열을 DOM으로 추가하는 경.. 2022. 5. 31. 이전 1 2 3 4 다음
