일단 Doit

HTML 삽입 미리보기할 수 없는 소스 2년물이 10년물보다 높다면 경기 침체 확율이 높다. 일반적으로 2년물보다 10년물 수익률이 더 높습니다. 10년물 국채 수익률을 3%, 2년물 국채 수익률을 3.4%라고 하면, 둘의 차이는 +0.6% 즉 플러스가 되는데, 이렇게 플러스 스프레드spread(차이)가 나는 것을 정상시장이라고 합니다. 하지만, 단기가 장기보다 높아지는 스프레드역전 현상이 발생하는데, 그래프가 0보다 아래에 위치할 경우를 수익률곡선 역전Yield Curve Inversion이 발생했다고 합니다. 또한, 일정 기간이 지나면 회색막대가 있는데, 이것이 경기침체 Recession 입니다. 하지만, 경기침체는 곧 투자의 기회입니다. 이때가 투자하기 가장 좋은 시기일수 있으니, 거시적 관점에서 ..

경제 2024. 1. 27. 22:51

HTML 삽입 미리보기할 수 없는 소스 환율과 코스피는 정확히 반대 방향으로 움직입니다. 환율이 올라가면 코스피는 하락하고, 환율이 내려가면 코스피는 상승한다. 상승 이유는, 1. 세계 경제가 좋아지면 한국의 수출이 늘어납니다. 2. 한국내에 달러 공급이 늘어나게 되고, 글로벌 투자자들의 한국 투자는 크게 늘어납니다. 3. 외국인의 주식매수가 늘어나게 되어 주가는 상승합니다. 하락 이유는, 1. 글로벌 경제가 안 좋아질 것으로 예상됩니다. 2. 외국인 투자자들은 한국에서 주식, 채권, 부동산등 국내 자본을 매도 합니다. 3. 주식 매도가 늘어나게 되어 주가는 하락합니다.

경제 2024. 1. 27. 22:19

https://ko.legacy.reactjs.org/docs/components-and-props.html React 컴포넌트를 작성하는 방법중 흔히 사용하는 것이 Function Component 입니다. 기본적인 구현 방법은 아래와 같습니다. const UserNameDisplay = ({userName}: { userName:string })=>{ return {userName} } 결국 함수라는 것은 아래와 같은 특징을 가지며, React Function Component도 동일한 특징을 가집니다. 재사용이 가능하며, Props를 전달할 수 있고 Return 값을 반환할 수 있다. 즉, 컴포넌트 단위가 묶여 페이지를 형성하고, 각 상황에 맞는 Props를 전달하고, JSX를 Return 함으로서..

React 2024. 1. 12. 19:20

https://www.typescriptlang.org/ko/docs/handbook/2/generics.html Typescript를 사용할때 가장 어려움을 겪을 수 있는 부분은 바로 재사용 컴포넌트 구현시 입니다. 재사용 컴포넌트란 말은 다양한 Type을 받을 수 있고 다양한 Type을 반환한다는 것인데, 해당 Type에 따라서 각각 다른 컴포넌트를 구현할 수 없으니, Generic을 통해 컴포넌트 사용자가 Type을 설정하게 한다는 것입니다. 예를 들면, 아래와 같이 Number와 String을 받아 해당 Type의 Array를 반환하는 함수가 있다면, 아래와 같이 정의 할수 있습니다. const arrayNumber = (a: number, b: number) => [a, b]; const arr..

Typescript 2024. 1. 12. 19:15

Recoil에서 atom은 상태(state)를 나타내고 이렇나 atom을 관리합니다. 그럼 동일한 atom을 여러개 생성하고자 하면 어떻게 할까요? 그때 atomFamily를 사용합니다. atom은 key에 따라서 상태가 관리됩니다. 즉, key 변경된다면 동일한 atom도 다른 상태값을 가지게 됩니다. atomFamily를 이러한 key를 전달하여 atom을 생성할 수 있습니다. 예를 들면, InfiniteScroill과 같은 component에서는 component마다 page 번호, 도달여부(hasMore)를 가지고 있게 됩니다. 먼저, 아래와 같은 atom을 생성할 수 있습니다. interface ScrollInfo { page: number; hasMore: boolean; } atom({ ke..

React/Recoil 2023. 3. 8. 16:09

구현 방법은 아래와 같습니다. atomFamily를 이용하여 state 관리 useQuery를 사용하여 server data 관리 ref array를 이용하여 각 element를 관리하여 최적화 관리 최적화 Rendering 여부 판단 atomFamily를 이용하여 state 관리 atomFamily를 이용하여 scroll 정보와 리스트 item 정보를 관리합니다. const todoGroupListSelector = atomFamily({ key: 'todoGroupList', default: (key: string) => atom({ key: `todoGroupList_${key}`, default: [] }), }); interface ScrollInfo { page: number; hasMore:..

React 2023. 3. 8. 16:08

Infinite scroll은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 리스트입니다.사용자는 페이지 이동없이 Scroll을 하게되고 Scroll에 따라 컨텐츠가 로드 됨으로써 지속적인 컨텐츠를 보여주게 됩니다. 특히 모바일에서 많이 사용합니다. 구현 방법 IntersectionObserver 사용 Event에서 페이지 번호 증가 추가 컨테츠 로딩 1. IntersectionObserver https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API Intersection Observer API - Web API | MDN Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 documen..

React 2023. 3. 8. 16:02

React와 같은 SPA는 여러 컴포넌트간의 관계, 즉 state관리가 가장 중요한데, Recoil을 사용하면 State(Recoil Atom)를 관리할 수 있다. https://recoiljs.org/ko/docs/basic-tutorial/selectors/ Selectors | Recoil Selector는 파생된 상태(derived state)의 일부를 나타낸다. 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물로 생각할 수 있다. recoiljs.org 그러면, selector는 무엇일까? 단순하게, 정의하면 state를 다양한 형태로 조회하게 해주는 방법이다. - state관리를 위해 recoil을 사용하고 화면과 분리하여 state를 관리하고자 recoi..

React 2023. 3. 1. 21:32