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..

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

무한 스크롤을 만들어보고자 한다. 이는 이벤트 스크롤로도 가능하지만 IntersectionObserver을 이용하는 것이 reflow가 덜 일어나 더 좋다고 한다. 그리고 이벤트 스크롤은 연속해서 계속 이벤트가 발생하기 때문에 Debounce, Throttle관리를 해줘야하지만, IntersectionObserver은 그런 것들을 하지 않아도 된다. 작동 원리는 대충 이해하기로는 전체 페이지가 있고, 그 안에 우리가 보는 뷰가 있다는 것을 전제로 한다. 그 중 지정된 element가 우리가 보는 뷰 안에 들어오거나 나가는 것을 감지하여 이벤트를 발생해준다. 실행 목적 1. div 태그에 a 태그를 연이어 놓고 싶다. 2. 이 a 태그는 무한으로 만들어질 수 있고 이걸 스크롤로 계속 내리고 싶다. 태그 정..

1. resolve / reject = callback 함수이다. 2. resolve / reject 인수는 진행 상 필수요소이다. > 없다고 해서 문제가 발생하는 것은 아니지만 아래 finally, then, catch가 실행되지 않는다. 3. 사용예시 1) val() 실행되며 안에 있는 프로미스 작동 2) setTimeout = 비동기 함수라서 동기 흐름에서 벗어나서 작동 3) setTimeout 안 함수로 랜덤함수를 만들어 5보다 작으면 성공/ 크면 실패로 성공실패 사례를 만듦 > 해당 부분은 원래 API가 연결이 안되는 등의 오류를 처리하기 위함. 연결되면 성공, 안되면 실패처럼. > 하지만 여기서는 임의로 랜덤함수로 성공-실패를 지정해줌 4) 여기서 "안에 들어있는 콘솔로그" 는 프로미스 안에 ..

간단한 inline / block에 대한 소개, flex, grid의 설명, 실제 사이트 예시를 포함하고 있습니다.

프리코스 때에 우테코에서 준 파일들의 형식은 App.js가 기본이 되었다. 이 위에 input/output/constant 등을 require/exports 하며 운용했다. 하지만 이번 파일의 이름은 index.js였다. 이에 대해 우리팀(나의 페어를 포함하여 3쌍의 페어)는 아래와 같이 행동했다. 1. index.js 속에 class app을 만들고 파일 Controller.js를 만들어 연결하고 controller중심으로 코드를 짠다. 2. index.js 속에 class app을 만들고 여기를 중심으로 코드를 짠다. (나!) 3. app.js를 index.js로 수정한 후 파일 Controller.js를 만들어 연결하고 controller중심으로 코드를 짠다. 여기에서 잘못된 코드는 없다.. 늘,,..

* 여러 글을 읽은 후 이해한 내용과 내 생각을 정리하는 것으로 올바르지 않는 정보가 있을 수 있습니다. 1. Layered Architecture Pattern ( 계층화된 아키텍처 패턴)이란? : 개발 모델 중 하나로 수직적-단계적-인 여러 층(레이어)으로 구성하는 것. 예로 들어서 2단, 3단, 4단이 있지만, 딱 잘라서 '여기부터 여기까지 레이어'하는 것은 아님. 개념의 경계가 흐릿하여 어느사람은 이걸 A레이어로 볼 수도 있고, B레이어로 볼 수도 있음. 때문에 무엇이 무엇에 포함된다를 중점으로 보기보다는 그 개념이나 의미를 생각하여 왜 이걸 사용하는지에 대해 고민하는 것이 좋은 접근으로 보임 - 2. 그럼 대체로 어떻게 구분되는가? : 크게는 사용자부분과 데이터부분으로 나눈다고 보면 됨. 거기에..

우테코를 하면서 깃/깃허브를 처음 접했다. 그래서 이걸 어떻게 하라고...? 싶은 느낌. 뭐가 뭔지 모르겠어서 하라는 대로 하기만 했다. 아직도 뭐가 뭔지 모르겠지만, 이제까지 하면서 내가 이해한 바를 정리한다. 각 코드보단 큰 줄기가 다음과 같다. 만약 여러 사람과 하는 프로젝트라고 할 때, 주되게 끌고 가는 ID의 레파지토리가 있을테다. 각각의 업무를 맡은 사람이 이 main이라는 ID의 레파지토리에서 "fork"해서 자신의 깃 허브에 레파지토리를 판다. > main의 홈페이지 안에 fork라는 칸이 있고, 이를 클릭하면 된다. fork를 해도 내 컴퓨터 안에서 작업하기 위해서는 로컬저장소로 "clone" = 복사해야 한다. > 내가 작업하고자 하는 폴더에서 터미널에 "git clone 클론 코드"를..

목표 1. 내가 생각한 웹 기능을 구현할 수 있는지 실험목적(어디까지 프론트엔드로 되는지 몰라서 그냥 머리속에서 웹기능을 하나씩 만들어보는중.. ) 2. 이전에는 각 element 하나하나가 기능했다면 이번엔 동일한 류의 element(여기선 책)을 만들어 이걸 어떻게 다루어볼 수 있는지 확인 구상 1. 각 책은 아래로 임의 처리함 서울에서 강릉으로 > 왜 id로 안넣었느냐? 테마별 또는 best에 중복되는 경우 동일한 책이라고 처리하기 위해 > id로 하면 같은 책인 다른 요소가 다른 id를 가져야한다고 생각했음 (예. NEW BOOk의 "코딩의.."와 best의 "코딩의.."가 같길바람) > 일단 이런 생각으로 id가 아닌 class로 처리했고, id로 같은 방식이 되는지 다시 해볼 생각. 2. JS..