본문 바로가기

분류 전체보기

 (989)
디자인시스템 토큰 이름붙이기 [Naming Tokens in Design Systems] 디자인 시스템의 토큰에 이름 붙이는 방법을 알아봅니디. 부제 : 비주얼 스타일을 설명하는 용어, 유형 및 분류; Base, Modifier, Objects, Namespace 원문 : https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676 Naming Tokens in Design Systems Terms, Types, and Taxonomy to Describe Visual Style medium.com 디자인 토큰은 Salesforce가 2014년에 개념을 개척한 이후로 (Salesforce pioneered the concept in 2014) 많은 디자인 시스템의 시각적 기반을 제공했습니다. 저는 2016년에 ..
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 분명히 상태를 잘 쪼개고, 리덕스나 리액트 쿼리를 사용하는 경우 셀렉터를 아주 잘 쪼개면 관심사의 분리와 유지보수성,성능 세가지 토끼를 한번에 잡을 수 있다. 하지만..

티스토리툴바