prefer2 Log

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정(Reconciliation)이라고 합니다 -React 공식 문서(Virtual DOM과 Internals)- React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. -React 공식 문서(엘리먼트 랜더링)- virtual DOM은 브라우저 API 위에 있는 JavaScript 라이브러리에서 구현되는 개념이다. Virtual DOM은 실제 DOM의 구조와 비슷한, React 객체 트리이다. 우리는 이러한 Virtual DOM을 제어하고, React에서는 이를 실제 DOM에 반영하는 ..

Plus 적절한 속도 조절. 머지가 빨리 되다 보니 공부와 미션의 밸런스를 잡기가 좋았다. pr제출과 피드백 반영을 1순위로 두고 진행하다보니 시간적 여유가 많아졌다. 미션이 거의 끝나가는 시점에서 알게되서 아쉽다. 코드 관련해서나 그냥 놀러나 크루들과 다양한 대화를 많이 나눴다. 훠어얼씬 친해진 느낌. 여러면에서 많은 도움을 받고 있다. 다들 최고야 이전 미션들보다 조금은 편하게 미션을 진행했다. 리액트를 잘 모른다는 불안감이 꽤 컸었는데 조금씩 익숙해지고 있는게 느껴져서 걱정되는 마음이 많이 사라졌다. 미션을 진행하며 느끼는 점은 돌고돌아 자바스크립트가 제일 중요하다는 점. 다시 자스 공부를 해야겠다는 생각이 든다. 꾸준히 하다보면 어떻게든 되겠지라는 마음으로 살아가는 중이다 따릉이 출퇴근. 출근 o..

더 까먹기 전에 정리를 해보자! 절대경로 CRA로 프로젝트를 만들었다면 아주 간단하게 절대경로로 코드를 작성할 수 있다. root에 jsconfig.json파일을 만들고 아래와 같이 baseUrl을 설정해주면 된다 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } https://create-react-app.dev/docs/importing-a-component/#absolute-imports custom hook 리액트를 거의 처음 접해보다보니 1단계에서는 커스텀 훅을 전혀 사용하지 않고 기본적인 react 학습에만 집중했었다. 2단계에서는 시간적 여유가 있어서 이를 학습해 적용해보았다. 커스텀 훅을 학습하기에 앞서 우선 hook에 대해 ..

Plus 억지로라도 9-9을 지켰다. 3주차가 되다 보니 확실히 루틴이 만들어진 것 같다. 맨날 똑같은 버스와 지하철을 타고 일정한 시간에 루터에 도착하고 있다. 다만 아침 9는 확실히 좋은데 저녁 9시까지는 잘 모르겠다. 집중이 잘 되는 공간 찾기. 독서실을 좋아하는 사람이라 페어룸에서 공부를 해보니 이전보다 집중이 잘되었다. 저녁 먹고 졸리면 서서 하는 것도 좋다. 여기저기 돌아다니면서 공부가 잘 되는 공간을 더 찾아봐야겠다. 개인 공부를 충분히 했다. 머지되기까지 시간이 좀 있어서 부족했던 공부를 할 수 있었다. 어느정도 준비단계를 거치고 step2로 넘어가다보니 미션을 진행하기가 수월해졌다. 공부한 내용들 이것저것 적용해보았는데 이쁘지는 않지만 학습을 했다는 점에 의의를 두고 싶다. 리액트 스터디..

Ref? Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다 When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref ref를 생성하고 console.log(ref)를 해보면 위와 같은 결과를 확인할 수 있다. ref는 다음과 같이 current property를 가진 객체이다. state와 다르게 refs는 그냥 javascript 객체이므로 값을 읽고 변경할 수 있다. React는 이 객체를 통해 DOM에 직접적으로 접근 할 수 있게 해준다. ref가 DOM을 다룰 때..

멋있는 제목을 짓고 싶지만 매주 지을려면 힘드니까 Plus 아침형 인간이 되었다. 레벨 1때 새벽형이었는데 루터에 등교하며 자연스럽게 미라클 모닝중. 규칙적인 생활을 하니 몸도 가볍고 기분도 좋다. 아침 9시의 루터는 차분하고 너무 좋다. 조용히 책을 읽거나 하루를 계획하기에 딱이다. 루터에 10시까지 있다가 집에 와서 뒹굴거리다 자는 일상을 사는중. 직장과 집의 거리의 중요성을 알게된다. 학교도 이렇게 가까웠으면 얼마나 좋았을까? 오프라인 좋은데? 코로롱에 익숙해져서 바깥생활을 잘 할 수 있을까 걱정이 되기도 했다. 오프라인으로 만나니 오히려 고민 없이 크루들에게 질문할 수 있어서 너무 좋다. 페어와 고민하다 막히면 주변 크루들에게 물어보면 된다. 빙글뱅글 돌아다니면서 구경하는 것도 재미있다. 질문하면..

자바스크립트는 단일 스레드(single thread)이면서 비동기 작업을 수행할 수 있다. 이가 가능한 이유를 알아보자 JavaScript has a runtime model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks -MDN- 비동기로 동작하는 핵심적인 이유는 자바스크립트가 아니라 브라우저가 가지고 있다. 자바스크립트가 '단일 스레드' 기반의 언어라는 말은 ‘자바스크립트 엔진이 단일 호출 스택을 사용한다’에서 나온 말이다. 실제로 자바스크립트가 구동되는 환경(브라우저, nodejs)에서는 주로 여러개의 스레드..

CustomElement custom element api를 처음으로 사용해보았다. 사용하면서 state와 props의 차이, 생명 주기에 대한 이해가 높아졌다. 사용 방법은 mdn과 아래 글들에 정말 친절하게 나와있다. https://meetup.toast.com/posts/115 https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_custom_elements https://ko.javascript.info/custom-elements mixin customElement를 쓰다보니 HTMLElement, HTMLTableRowElement를 상속받을 일이 있었다. 두 클래스 모두 내부 메서드는 동일하고 table property 차이 정도가 ..

코드를 작성하다보면 object를 복사해서 쓸 일이 있다. 앝은 복사(직접 할당)을 하게 되면 같은 주소를 공유하게 되어 한 값을 수정시 이가 다른 값에도 반영되게 된다. 정말 값만을 복사해서 쓸 수 있도록 깊은 복사에 대해 알아보자. 가장 쉬운 방법부터 조금 어려운(?) 조금 더 완벽한(?) 방법 순으로 진행해보겠다. shellow copy • spread operator const obj1 = { a:1, b:2 }; const obj2 = { ...obj }; obj2.a = 3 console.log( obj1 === obj2 ) // false console.log( obj1.a ) // 1 spread 연산자를 통해 값을 복사하는 방법이다. 단, 이 방법은 1depth까지만 가능하다. Sprea..

custom event 페어였던 소피아 덕분에 커스텀 이벤트를 처음 사용해보았다. 애매하게 이해한 채 사용을 했는데 리뷰어님께 좋은 답변을 받아 남겨본다. 의존성을 없애기 위해서 사용한다 정도로 이해했는데 예시를 들어주셔서 조금 더 이해에 도움이 되었다. 커스텀 이벤트에 대해서는 조금 더 공부해보고 정리해봐야겠다. 미래를 생각하자! step2를 제출하고 스스로 코드를 리뷰해보니 아쉬운점이 너무 많았다. 특히 이벤트 관련해서 위임을 사용할 수 있지만 이를 사용하지 않아서 복잡해진 코드들이 많았다. 결과적으로 탭의 개수가 더 늘어나도, 초기 선택 탭이 달라져도 유연하게 반응할 수 있는 코드로 변경하면 좋겠다는 리뷰를 받게되었다. 이에 대해서는 크게 고민하지 않고 작은 기능 구현에만 집중했었다. 확장성에 대..