아래의 익숙한 로딩 스피너를 만드는 CSS 코드를 찾아봤는데, 생각보다 코드 반복이 많다 이렇게 blade 하나씩 전부 회전 각도가 달라야 하기 때문이다 SCSS를 활용해도 mixin과 function으로 반복을 줄일 수 있을 것이다 하지만 이번에는 Styled-components를 활용하여 반복을 줄여 본다 📍1. props로 모든 blade에 각각 다른 회전 각도 부여하기 1) 먼저, blade 갯수 기본값을 정의하고, 배열을 만들고 map으로 blade 컴포넌트를 렌더링한다 2) styled props를 활용해 0 * (360 / 12) deg, 1 * (360 / 12) deg ... 이렇게 자동으로 회전각을 부여해준다 - 이 상태에서는 2번의 원 형태로 나오게 된다 (최대 배율 확대 상태) - ..

📍개요✅일부 JSX 조각을 React Root가 아닌 DOM의 일부분으로 렌더링할 때 사용- 즉, 렌더링하고 싶은 JSX 조각을, 원하는 위치로 바로 연결되는 '입구' (Portal)를 만들고 싶을 때 사용예) 팝업이나 모달 등 {createPortal(children, domNode, key?)} 📍createPortal API✅createPortal(children, domNode, key?)- children : 새로 만들어낼 React 컴포넌트 (JSX 조각, fragment, 문자열, 숫자)- domNode : 만든 컴포넌트를 렌더링할 부분. 이미 DOM에 존재하고 있는 곳이어야 함 (DOM API로 찾을 수 있는 곳)- key (optional) : 포털의 키값으로 사용할 고유 문자열..

설득의 심리학 1권 - 로버트 치알디니 📍목차 PART1 설득의 무기 PART2 상호성의 원칙 - 받은 대로 갚아야 한다 📍상호성의 원칙 다른 사람에게 뭔가를 받으면, 나도 보답해야 한다는 심리 - 부채 의식 - 전 세계 문화권에서 공통으로 보여짐 상호성 원칙의 성립 목적 => 사람들 간의 호혜적 관계 발전을 촉진하여 개인이 손실에 대한 두려움 없이 호혜적 관계를 시작할 수 있게 하는 것타인에게 음식, 보살핌 등의 호의를 베풀면, 나도 나중에 받을 수 있다 => 인간의 사회화와 더불어 내면에 깊게 각인됨=> 원조, 무상제공 등이 쌓이며 인류 문명의 발전에 기여 특징 1. 어떤 부탁의 승낙 여부를 결정하는데 영향을 끼칠 다른 요소까지 압도 2. 원치 않는 호의에도 적용되기에 신세지고 싶은 대상을 선택할 수..

📍개요 ✅hydrateRoot와 비슷 createRoot API로 브라우저 DOM node 안에 React 컴포넌트를 추가할 root element를 만들 수 있다 1. root를 만들고, (createRoot) 2. React 컴포넌트를 렌더링 (render) ✅Vite React App에서 createRoot 쓰임새 살펴보기 ✅createRoot 와 hydrateRoot 비교 📍createRoot API 1. createRoot(domNode, options?) : React Root 객체 (render, unmount 메서드를 보유) 를 반환 - domNode : DOM element (하위에 React Component를 표시) import { createRoot } from 'react-dom/..

설득의 심리학 1권 - 로버트 치알디니 📍읽는 이유 - 얼마 전에 읽었던 책에서 타이탄들이 많이 인용한다고 했던 책이라서 읽기로 함 📍목차 PART1 설득의 무기 📍프롤로그 설득의 달인들이 상대로부터 YES를 끌어내는 방법들은 수만 가지에 이르지만, 대부분 6가지 카테고리로 나눌 수 있다 - 상호성의 원칙 - 일관성의 원칙 - 사회적 증거의 원칙 - 호감의 원칙 - 권위의 원칙 - 희소성의 원칙 📍누르면 작동한다 - 고정행동 패턴과 유발 요인 고정행동패턴 - 예) "칩칩" 울음소리 어미 칠면조는 새끼 칠면조의 "칩칩" 울음소리를 듣고 나서야 새끼 칠면조를 케어해준다. 만약 새끼 칠면조가 "칩칩" 울음소리를 내지 않으면 무시하거나, 심지어 죽이기도 한다. 또한 과학자들이 칠면조의 천적인 족제비 박제 모형으..

타이탄의 도구들 - 팀 페리스 📍목차 1장 | 세상에서 가장 성공한 사람들의 비밀 2장 | 세상에서 가장 지혜로운 사람들의 비밀 3장 | 세상에서 가장 건강한 사람들의 비밀 📍3-8. 생각을 쉬게 하라 게임은 시각적인 플래시백을 경험하게 하고, 이는 뇌의 시각처리 중추를 차지하여 쉽게 가시지 않는 부정적인 감정 또는 충격적인 사건을 완화하며 나아가 PTSD 증상을 치료하는데 도움을 주기도 한다 (게임의 순기능) 정신도 딴 짓을 하며 쉬는 시간이 필요하다 정신 건강을 위해 공개적인 비난을 삼가는 것이 중요 -> 무의식적으로 내 마음에도 상처를 입힘 비난의 당사자가 얻는 상처는 말할 것도 없고.. 📍3-9. 아무것도 하지 않는 즐거움을 찾아라 바쁨은 인생에 필수적이거나 불가피한 상태가 아니다 - 무위(아무것..

타이탄의 도구들 - 팀 페리스 📍목차 1장 | 세상에서 가장 성공한 사람들의 비밀 2장 | 세상에서 가장 지혜로운 사람들의 비밀 3장 | 세상에서 가장 건강한 사람들의 비밀 📍2-26. 디로딩 타임을 가져라 디로딩(deloading): 운동이나 스포츠의 훈련 관련 용어로, 기본 계획에서 물러나 컨디션을 회복하기 위한 행동 - 빌게이츠의 생각 주간(think week) 전략적으로 엑셀 페달에서 발을 떼며 일상의 과부하를 해소 => 좋은 아이디어 창출 📍2-27. "Good!" 의 힘 실패에 대처하는 방법 => "잘 됐네" (Good!) 이라고 생각하기 - 승진을 못했다고? 앞으로 더 열심히 할 시간이 생겼어! - 야심차게 준비한 프로젝트가 취소됐어? 오히려 다른 프로젝트에 집중할 수 있겠네! - 자금 조달..

타이탄의 도구들 - 팀 페리스 📍목차 1장 | 세상에서 가장 성공한 사람들의 비밀 2장 | 세상에서 가장 지혜로운 사람들의 비밀 📍2-21. 다수를 경계하라 많은 사람이 합의하거나 의견의 일치를 보이는 것에는 함정이 있을 확률이 높다 => 내 의견이 다수의 의견과 같아도 그것이 100% 내 진짜 의견인지 의심해봐야 한다 좋은 아이디어를 떠올리고 싶다면, 사람들이 절대 말하거나 생각할 수 없는 것을 떠올려 보라 무거운 여행가방을 들고다니는 것에 왜 불평하지 않지? => 바퀴달린 캐리어를 개발한 로버트 플래스 높이뛰기에서 배면뛰기를 처음 시도하여 멕시코 올림픽 금메달을 딴 딕 포스버리 📍2-22. 최고의 성과를 창출하는 사운드트랙 타이탄들은, 집중력을 높이기 위해 반복적으로 듣는 곡이나 앨범 한가지를 갖고 ..