본문 바로가기

FrontEnd

 (437)
Vue.js 내부 들여다보기[Demystifying Vue.js internals] vue.js의 내부 구현을 알아봅니다. 원문 : https://medium.com/js-imaginea/the-vue-js-internals-7b76f76813e3 Demystifying Vue.js internals When it comes to JavaScript frameworks, Vue.js is a trending UI framework.(just crossed 90k Github ⭐️ and more than 13k 🍴, very much… medium.com 저는 github의 소스를 살펴보고 vue 내부에서 무슨 일이 일어나는지 이해하기 위해 여러 차례 디버깅을 했습니다. 이 게시물은 여기 4가지 질문에 대한 답변을 제공하려고 합니다. Vue.js 인스턴스를 생성하면 무슨 일이 일어날까요..
자바스크립트 참조에 관한 시각적 가이드 [aka 자바스크립트 포인터] 자바스크립트의 참조에 대해 시각적으로 알아봅니다. 원문 링크입니다 : https://daveceddia.com/javascript-references/ A Visual Guide to References in JavaScript daveceddia.com 코딩 학습 1일차에 누군가가 이렇게 설명합니다. "변수는 상자와 같습니다. let thing = 5는 thing 상자에 5를 넣습니다." 변수가 실제로 동작하는 방식은 아니지만 계속 진행하기에 충분합니다. 수학 수업에서 큰 그림에 대해 거짓말을 하는 것과 같습니다. 큰 그림을 바로 보여주면 뇌를 폭발시킬 것이기 때문입니다. 하지만 얼마 후 이상한 문제가 보이기 시작합니다. 변경하지 않았을 때 값이 변경되는 변수. "나는 그것을 복사했다고 생각했습니다! ..
[React hooks] 리액트 훅의 원리 : 단지 배열일 뿐 리액트 훅이 배열임임을 알아봅니다. 원문 : https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e React hooks: not magic, just arrays Untangling the rules around the proposal using diagrams medium.com 저는 새로운 hooks API의 열렬한 팬입니다. 그러나 어떻게 사용해야 하는지에 대한 몇 가지 이상한 제약(odd constraints)이 있습니다. 여기에서는 이러한 규칙의 이유를 이해하는 데 어려움을 겪는 사람들을 위해 새 API 사용에 대해 생각하는 방법에 대한 모델을 제시합니다. 훅이 어떻게 동작하는지 알아보기 훅의 규칙 React 핵심..
리덕스 이후의 삶(Life after Redux) : 리덕스 없이 리덕스 장점 누리기 Redux는 유용한 도구이지만 React의 새로운 API는 다음 애플리케이션에서 해당 라이브러리를 대체할 수 있습니다. 원문 : https://medium.com/itnext/life-after-redux-21f33b7f189e Life after Redux Redux has been a useful tool but React’s new APIs are cause for pause as to whether or not you should use it in your next application. itnext.io 이 기사에서는 React의 새로운 useReducer 훅을를 간단한 이벤트 버스와 결합하여 애플리케이션 아키텍처에 필요한 확장성을 제공하는 동시에 Redux가 대규모 애플리케이션에서 종종 촉진하..
리액트 엘리먼트에 $$typeof 속성이 존재하는 이유 리액트 엘리먼트에 $$typeof 속성이 존재하는 이유를 알아봅니다. TLDR : XSS 공격 방지 원문입니다 : https://overreacted.io/why-do-react-elements-have-typeof-property/ Why Do React Elements Have a $$typeof Property? It has something to do with security. overreacted.io JSX는 사실 리액트 엘리먼트로 컴파일되고 리액트 엘리먼트는 JSON으로 컴파일됩니다. hi JSX를 작성한다 생각했지만, 실제로, 당신은 함수를 호출하고 있습니다: React.createElement( /* type */ 'marquee', /* props */ { bgcolor: '#ffa7c..
리액트가 함수 컴포넌트와 클래스 컴포넌트를 구분하는 방법 React는 함수 컴포넌트와 클래스 컴포넌트를 어떻게 구분하나요? 원문 : https://overreacted.io/how-does-react-tell-a-class-from-a-function/ How Does React Tell a Class from a Function? We talk about classes, new, instanceof, prototype chains, and API design. overreacted.io 본문 내용은 리액트보다는 js에 관한 내용입니다. 개발하는데 몰라도 전혀 지장없는 내용이니 스킵하셔도 됩니다. TLDR : 리액트는 React.Component를 상속한 클래스만 클래스 컴포넌트로 취급합니다. 해당 클래스의 객체 플래그를 이용해 리액트는 해당 컴포넌트가 클래스..
리액트 : 리렌더링 하도록 코딩하기 (부제 : memo 대신 useMemo) 리액트의 리렌더링은 다양한 원인으로 일어난다. 그 중 가장 리렌더링을 자주 유발하는 원인은 상단 컴포넌트의 리렌더링에 의한 하위 컴포넌트들의 리렌더링이다. (그러면서 가장 불필요한 리렌더링을 자주 발생시킨다.) 이는 구조적 리팩토링 (composition)으로 해결한다. https://reactjs.org/docs/composition-vs-inheritance.html Composition vs Inheritance – React A JavaScript library for building user interfaces reactjs.org 분명히 상태를 잘 쪼개고, 리덕스나 리액트 쿼리를 사용하는 경우 셀렉터를 아주 잘 쪼개면 관심사의 분리와 유지보수성,성능 세가지 토끼를 한번에 잡을 수 있다. 하지만..
리액트 쿼리 : 리액트 라우터와 연계하기 리액트 쿼리와 리액트 라우터를 함께 효과적으로 사용하는 방법을 배워봅니다. 원문 링크입니다. https://tkdodo.eu/blog/react-query-meets-react-router React Query meets React Router React Query and React Router are a match made in heaven. tkdodo.eu Remix는 로더와 액션이라는 데이터 가져오기의 새로운 컨셉을 도입했습니다. 그리고 이 개념은 React Router 6.4 버전부터 순수한 CSR에서도 사용할 수 있게 되었습니다. URL 세그먼트, 레이아웃, 데이터는 좋은 짝꿍입니다. loader는 리액트 쿼리 등 데이터 가져오기를 url 단위로 캡슐화 해주는 요소입니다. action은 폼 제..

티스토리툴바