완성본 코드https://github.com/donghyun1998/vanilla_js_SPA_starter_kit/blob/main/src/utils/useEffect.js 컴포넌트의 생명주기를 관리 하는 useEffect 리액트 훅을 구현하려 했다. 실제 useEffect는 아래와 같이 동작하지 않는다. 오해 금지단지 내 vanilla js SPA 환경에서 사용할 함수 추상화 한 것일 뿐먼저 내 vanilla js SPA 환경에서는 모든 렌더링을 HTMLElement.innerHTML로 한다.즉 컴포넌트 마운트, 업데이트, 언마운트 모두 innerHTML로 되므로HTMLElement의 변경 감지가 필요하다. MutationObserver api를 사용하면 해당 HTMLElement의 변경을 감지할 수..

https://github.com/donghyun1998/vanilla_js_SPA_starter_kit GitHub - donghyun1998/vanilla_js_SPA_starter_kit: 바닐라 js로 SPA 구현하기 위한 스타터킷바닐라 js로 SPA 구현하기 위한 스타터킷. Contribute to donghyun1998/vanilla_js_SPA_starter_kit development by creating an account on GitHub.github.com바퀴의 재발명이긴 하지만 많이 배울 수 있는 시간이었다.component 분할, useState 활용하는 예시 페이지 만들어 두었으니 자바스크립트 잘하시는 분은 그냥 코드 보시면 됩니다.초심자 분들은 아래 설명 봐주세유 router ..

완성본 코드https://github.com/donghyun1998/vanilla_js_SPA_starter_kit/blob/main/src/utils/useState.js 클래스형컴포넌트에 react hook 패턴을 추가한 코드지만 재밌게 봐주세용 바닐라 자바스크립트로 useState없이 온몸 비틀기로 사이트 만들다가 도저히 안되겠어서 useState 구현 시작했다.전에 배운 클로저를 이용해서 useState가 호출되는 시점에 인스턴스를 만들고 getState, setState를 리턴하게 해서 구현했다. 근데 다 정상적으로 되지만 render함수가 갱신되지를 않았다.function useState(oldState, render) { let state = [oldState]; const getStat..

c, c++ 만 해 본 나로선 클로저라는 머싯는 이름을 붙이는 게 이해가 안 갔다. 이거 그냥 함수 포인터 리턴하는 거 아니냐??라고 생각했다. 허나 아래 같은 상황에서는 애매하다. function createCounter() { let count = 0; return function() { count += 1; return count; }; } const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2 counter변수에 담긴 createCounter 내부에 선언되어 리턴된 function의 경우 counter 변수가 참조하고 있으므로 인스턴스가 살아있는 게 맞지만, 함수 createCounter의 ..

https://donghyun1998.github.io/ https://donghyun1998.github.io/ donghyun1998.github.io 42 서울 webserv과제가 끝난 후 빈둥대던 와중 sunhwang님이 nextjs로 개인 blog 만들기 스터디를 모집하시길래 후다닥 들어갔다. c, c++, webserv에서 배운 기본 지식? 정도만 알고 있는 나에겐 스터디 첫날 스터디원분들의 대화를 10퍼센트도 이해하지 못했다. 그래서 모르는 키워드들을 노션에 전부 적어두고 스터디장이신 sunhwang님을 붙잡고 죄다 물어봤다. 다행히 webserv에서 배운 지식들 기반으로 여러 번 여쭤본 결과 조금이나마 이해할 수 있었다. 한 달 동안 진행된 스터디에서 아주 많은 것들을 얻을 수 있었다. 1..