인트로실행 컨텍스트 내용 본 지도 오래됐고 스터디 발표 준비를 하기 위해서 실행 컨텍스트를 다시 한번 펴봅니다표라던가.. 뭐가 좀 많네요...실행 컨텍스트를 알면...실행 컨텍스트를 한 번 알면 자바스크립트가 왜 그렇게 동작하는 이해할 수 있습니다.식별자 바인딩, 호이스팅이 발생하는 이유, 클로저 동작방식, 비동기 처리 동작 방식... 등실행 컨텍스트에 대해 알고 나면 실행 컨텍스트를 몰랐을 때는 예측할 수 없었던 동작들을 예측할 수 있게 됩니다. 처음 읽었을 때는 정말 어지러웠지만 알고 나니 매우 유용한 친구였습니다.소스코드 타입에 따른 실행 컨텍스트 생성전역 코드- 전역에 정의된 함수, 클래스 등의 내부 코드는 포함X전역 실행 컨텍스트함수 코드- 함수 내부에 중첩된 함수, 클래스 등의 내부코드 포함X..

인트로 부트캠프 advanced 과제 진행 중 advanced에서도 또다시 도전하기 과제가 있더라고요. 키보드 방향으로 자동검색(drop down) 항목을 선택할 수 있도록 하는 거였습니다. 과제가 생각보다 빨리 끝났기 때문에 도전해 봤습니다. 키보드로 드롭다운 선택할 수 있게 해주는 라이브러리가 있었지만 직접 ref를 사용해서 해보기로 했습니다. 결과 어떻게든 구현은 할 수 있었습니다. 컴포넌트에 ref를 넘겨야 해서 forwardRef를 써야 하더라고요. 고정된 틀에서 구현을 해야 해서 그런지 더 헷갈리고 복잡했습니다. 코드 자동검색 목록의 경우 객체를 사용하여 임시로 완성되어 있습니다. css의 경우 styled-Component로 적용하였습니다. //자동검색을 위한 임시 목록들 const dese..

오늘 배운 것리덕스유데미 강의기억할 것  내일 공부할 것끝나지 않는 유데미..오늘 아이디어 내는데 시간을 많이 쏟아서 공부는 많이 못했네요...디자인공부도 아주 조금은 하는게 좋겠다는 생각이 드는 날이었습네다..

오늘 한 일FLUX 패턴 공부피그마 클론 styled-Component 기초 문법 알기storyBook 사용해보기유데미 리액트 강의기억할 것styled-Component 사용법storyBook 사용법내일 공부할 것유데미 리액트실행 컨텍스트 정리평소 module css 기능을 많이 사용해서 styled-Component의 경우 맛만 보았는 데 이번에 좀 제대로 이해하고 사용할 수 있었네요... storyBook은 사용법이 좀 ..귀찮은 것 같다는 생각이 들었습니다. ts에서는 그냥 상속해서 뭐 js보다 깔끔하게 쓸 수 있다는 것 같네용

인트로오늘은 portal에 대해서 알아보겠습니다. 너무 힘들어서 별 말없이 바로 시작하겠습니다.. 나 파이팅..왜 사용하나요?createPortal을 사용하면 자식을 원하는 위치에 렌더링 시킬 수 있습니다. 여기서 자식은 react로 렌더링 할 수 있는 모든 것을 말합니다. createPortal을 사용하면 어떤 컨테이너에 있든 'escape'가 가능합니다.또한 이벤트 버블링 문제를 해결할 수 있으며 Z-index 관리가 편하다 등의 장점이 있습니다.createPortal(children, domNode)createProtal을 사용해서 portal을 만들 수 있습니다.  import ReactDOM from 'react-dom';//컴포넌트// return 내부{ ReactDOM.createPorta..

오늘 배운 것꼬리재귀메모이제이션UI/UXFigma 사용법redux 기본 개념기억할 것user flow 다이어그램을 그려보면서 UX를 개선할 수 있다.그리드 시스템내일 공부할 것유데미 리액트 강의

인트로 오늘은 UI/UX에 대해 배웠습니다. 평소에 공부하고 싶었지만 다른 공부가 급급하여 못하고 있었는데 이렇게 따로 유닛으로 있으니까 좋네요. 바로 가봅시다. UI/UX란? UI(User Interface, 사용자 인터페이스)는 사람과 컴퓨터 사이의 상호 작용하는 시스템(시각적인 요소)을 말합니다. 화면상의 터치뿐만 아니라 키보드, 마우스, 버튼 등 물리적 요소도 UI입니다. GUI(Graphical User Interface, 그래픽 사용자 인터페이스) 사용자가 그래픽을 통해 컴퓨터와 소통하는 방식 CLI(Command Line Interface) 글자 입출력을 통해 사용자가 컴퓨터와 소통하는 방식 NUI(Natural User Interface) 신체 움직임으로 직접적으로 소통하는 방식 NUI는 ..

오늘 배운 것 재귀 useReducer onBlur : 포커스를 잃을 때 이벤트 설정 useContext Hooks의 규칙 기억할 것 useReducer로 useState를 대체할 수 있으나 항상 useReducer가 좋은 것은 아니다. 복잡한 상태를 관리할 때 좋다. useState() useReducer() 개별 state 및 데이터 다루기에 적합함 복잡한 state를 다루기에 적합함 간단한 state에 적합함 연관된 state 조각들로 구성된 state 관련 데이터를 다룰 경우 state update가 간단 복잡한 state update에 유 useContext 사용하는 경우 : 많은 컴포넌트를 통해 전달하고자 하는 것이 있는 경우 or 특정적인 일을 하는 컴포넌트(ex: navigation)로 전..