corin

배경 토스 슬래시 중 useOverlay를 읽으며 의문이 들었다. let elementId = 1; export function useOverlay({ exitOnUnmount = true }: Options = {}) { ...(중략) const [id] = useState(() => String(elementId++)); ...(중략) 나는 항상 useState를 사용할때 값을 넣어서 사용을 했다. id를 전역으로 관리하는 것하며, 초기값으로 함수를 넣는 것이 무엇을 의미하는지 궁금해졌다. 같은 원리의 쉬운 코드 제작 stackblitz를 통해 코드를 만들어봤다. 구조는 아래와 같다. 앱 안에 엘리먼트 컴포넌트가 2개 들어있다. 앱과 엘리먼트 컴포넌트에는 각각 hook이 호출된다. hook은 초기값이..

상태관리 라이브러리 종류 - proxy patten : Mobx, Valtio - flux patten: Redux, Zustand - atomic patten: Recoil, Jotai 위 언급한 것과 같이 아토믹 패턴에 포함되는 것이 조타이이다. 조타이 공식문서를 보면 다음과 같이 설명한다. Jotai는 Recoil 에서 영감을 받은 원자 모델로 상향식 접근 방식을 취합니다 . 원자를 결합하는 상태를 구축하고 원자 종속성을 기반으로 렌더링을 최적화할 수 있습니다. 이렇게 하면 메모이제이션이 필요하지 않습니다. 특징: - 최소 코어 API(2kb) - 많은 유틸리티 및 통합TypeScript 지향 - Next.js, Gatsby, Remix 및 React Native와 함께 작동 - SWC 및 Babe..

문제 666은 종말을 나타내는 수라고 한다. 따라서, 많은 블록버스터 영화에서는 666이 들어간 제목을 많이 사용한다. 영화감독 숌은 세상의 종말 이라는 시리즈 영화의 감독이다. 조지 루카스는 스타워즈를 만들 때, 스타워즈 1, 스타워즈 2, 스타워즈 3, 스타워즈 4, 스타워즈 5, 스타워즈 6과 같이 이름을 지었고, 피터 잭슨은 반지의 제왕을 만들 때, 반지의 제왕 1, 반지의 제왕 2, 반지의 제왕 3과 같이 영화 제목을 지었다. 하지만 숌은 자신이 조지 루카스와 피터 잭슨을 뛰어넘는다는 것을 보여주기 위해서 영화 제목을 좀 다르게 만들기로 했다. 종말의 수란 어떤 수에 6이 적어도 3개 이상 연속으로 들어가는 수를 말한다. 제일 작은 종말의 수는 666이고, 그 다음으로 큰 수는 1666, 266..

리액트에서 api를 다루면서 2가지를 많이 사용한다. 1. suspense 2. errorBoundary 간단하게 promise에 대해 이야기를 하자면 1. api 등을 사용하기 위해 fetch를 사용한다. 2. fetch의 결과는 프로미스로 전달된다. 3. 결과는 3가지 상태가 있는데, 1) 팬딩-진행중- 2) 실패 3) 성공이 있다. 이는 더 찾아보면 좋다. 4. 이 상태를 관리하기 위해 위 두 가지를 사용한다. 1) 서스펜스 - 팬딩상태라면 스켈레톤을 그려준다. 2) 에러 바운더리 - 에러바운더리로 감싼 컴포넌트 안에서 에러가 발생하면 이를 캐치해서 대체 컴포넌트를 그려준다. > 나는 api를 사용한 컴포넌트 밖에 놓고, api가 실패한 경우 그 자리에서 throw new Error를 던져서 사용했..

처음 짰던 코드는 대충 다음과 같다. 1. hi 2. hello 3. bye 4. good bye ul:first-child { color: blue; } 그럼 어떻게 될까? 물론 되지 않는다..! 왜일까?? ul: last-child라고 작성하는 것은 자기 자신한테 거는 것이다. 근데 우리는 ul 안에 있는 마지막 li에 css를 걸고 싶은 것이니 ul > *:first-child { color: blue; } ul > *:last-child { color: red; } 이렇게 하면 이렇게 된다!

배경지식 01. 점심 뭐먹지와 동일한 ui이다. 02. 레스토랑을 추가하고 삭제하는 기능은 구현하지 않으며 클릭했을 때 모달창이 켜지는 것만 실행된다. 03. 기존에 바닐라로 구현한 것을 리액트로 구현한다. 04. 리액트를 접해보지 않은 사람들을 위해 익숙한 이전 미션을 다시 해보며, 기능도 줄어들었다. 05. 리액트 온보딩 같은 느낌이라서 짧은 미션기간이었다. 1단계가 화-목/ 2단계가 금-월었다. 06. 1단계는 class형으로 컴포넌트를 작성했다. 2단계는 이를 function형으로 수정했다. 이번에 처음 리액트를 만졌기 때문에 걱정이 많았는데 페어가 리액트를 잘 다루고 파일분리를 잘하는 크루라서 도움을 많이 받았다. 사실 거의 배우는 시간이었다고 할 수 있을 정도로 따라가는 시간이 많았는데, 아예..

svg를 컴포넌트로 만들어서 화면에 그려내야 했다. 이런식으로 svg를 불러와서 로고를 그려내고 싶었다. 위 코드대로라면 첫번째 줄에 하나로고/우리로고 두번째 줄에 롯데로고/롯데로고가 나와야했다. 하지만 역시나 잘 되지 않는다.. (리액트를 시작하고 되는일이 하나도 없어) 따란..! 이렇게 하나은행이 4개가 나왔다. 이게 순서를 바꿔도 하나은행이 나오냐? 아니다. 무조건 첫번째 있는 놈에 따라 뒤에 것들이 모두 바뀌어버렸다.. 결과적으로는 무엇이 문제냐 이건 하나은행 로고 svg이다. 이건 우리은행 로고 svg이다. 두 코드에서 중요하게 봐야하는 것은 pattern의 id이다. 두 id가 같다. 이 아이디가 같으면 같은 이미지를 보여준다-다른 크루의 도움을 받았다-고 한다. 그래서 얼른 바꾸어보았다. 단..

이미지 파일을 svg로 사용하면 좋다. 대충 이유는 1. 코드로 되어 있기 때문에 수정이 쉽다. > 만약 색상을 바꾸거나 크기를 변경하고 싶다면 코드를 변경하면 된다. 2. 렌더링에 좋다. > 코드로 들어가기 때문에..? 렌더링이 될 때 깜박이지 않는다. 3. 깨지지 않는다. > svg는 백터타입이라 깨지지않는다. (구체적인 이유는 검색해보세요) 그렇다면 어떻게 사용하는가? 이렇게 된 svg가 들어간 버튼을 만들고 싶다면? 1. 그냥 코드에 넣어버린다. export default function PlusButton() { return ( ); } 이런 방식으로 넣으면 된다. 근데 이렇게 하면 간단한 svg는 괜찮으나 여러개의 svg가 필요하거나 한다면 코드가 번잡스러워진다. 2. 따로 파일에 분리해서 i..

처음 리액트 렌더링에 대해 생각하게 된 계기는 다음과 같았다. const [val, setVal] = useStats(0) function foo(){ setVal(val+1) ; setVal(val+1) ; setVal(val+1) ; } 맥락이 위와 같은 코드를 짜고 대단히 오류가 났다. 답은 무엇일까? 왜 위에 코드가 문제가 생길까? 이것과 관련한 답은 "틀리면서 공부하는.."코너에 나와있으니 여기에서 확인하기 바란다. 여튼간 "state가 바뀌면 새로 랜더링 된다고 한다"라는 사실만을 믿고 코드를 짜는 것은 이러한 오류를 낼 수 있다는 생각에 리액트가 언제 다시 랜더링되는 지를 조금 알아보게 되었다. .jsx는 어떻게 렌더링될까? 리액트는 업데이트가 된 부분만 다시 그리기를 하게 된다. 이는 단순..

리액트를 잘 모르면 발생하는 문제가 여럿있다. 그중 한 가지를 가지고 왔다. const [count, setCount] = useState(0); function plus() { setCount(count+1); setCount(count+1); setCount(count+1); } plus(); 이 상황에서 count는 몇일까? 3? 정답은 1이다. 그 이유는 저 plus가 실행되는 당시 안 count는 0이다. setCount 속 count는 0이니 결국 그 안에는 주구장창 1만 들어가게 된다. 그럼 나는 한 함수 안에서 setCount를 어러번 하고 싶은데 어떻게 해야하지? const [count, setCount] = useState(0); function plus() { setCount((cou..