전체 글

[vanillaJS] 채팅창 컴포넌트의 스크롤을 다뤄보자.

채팅창 문제의 시작점 프로젝트에서 채팅 컴포넌트와 관련된 코드 중 일부분이다. chats 이라는 state가 업데이트 될 때 마다, 새로운 채팅요소를 생성하게 될 것인데 채팅방 엘리먼트에 채팅들이 넘치기 시작하면 문제가 발생한다. 문제가 발생한 프로젝트는 리액트였지만, 바닐라로 차근차근 정복해보자. 바닐라를 이해하면 리액트는 effect, ref 정도만 고려해서 그대로 적용하면 된다. 👍👍 HTML을 통한 문제 소개 // index.html chat 0 채팅추가 2. 유저가 스크롤을 조절하여 특정 채팅을 보고 있다면, 새로운 채팅을 추가하지만 스크롤은 건드리지 않는다. 1번 기능에 의하면, 새로운 채팅이 추가되면 항상 스크롤이 내려가게 된다. 그렇다면 사용자는 이미 지나가버린 채팅을 보기가 쉽지 않다. ..

[CSS] box-sizing : border-box;

box-sizing : border-box! 요소의 크기가 원하는대로 보이지 않을 때 사용하는 CSS 프로퍼티다. 예전에는 뭔가 치트키스럽다는 생각을 가지고 있었다 ㅎㅎ.. 사실 그냥 박스모델 개념을 알면 쉽게 풀린다. 아주 짧게 박스모델과 관련하여 box-sizing 속성에 대해 알아보자. 박스 모델 프론트엔드 개발자가 크롬에서 자주 만나는 사각형이다. box model은 4가지 부분으로 구성된다. margin, border, padding, content box! margin은 생략하고, border, padding, content box를 중심으로 보자. 우리가 만들 요소의 크기가 border+pading+content box로 정해지기 때문이다. 우선, CSS box-sizing 속성의 기본값은 ..

비동기 작업 취소하기. "AbortController"

예전에 과제전형 테스트에서 "비동기 요청 *초 전까지 응답이 오지 않는다면, 요청 취소 후 재전송"이라는 요구사항이 있었는데 그 이후(시원하게 말아먹고 난 이후) AbortController의 존재에 대해서 알게 되었다. 👍👍 먼저 간단하게 비동기 요청시 사용되는 fetch API의 특징을 간단하게 알아보고, 포스팅의 주 대상 AbortController를 공부해보자. fetch : return Promise fetch API의 결과는 Promise이다. 응답이 오기 전 까지 pending(대기) 상태를 유지하게 되며, pending 상태가 끝나면 fullfilled 혹은 rejected로 바뀌게 된다. fetch 자체만으로는 pending을 취소하는 방법이 따로 존재하지 않으며, 여기서 pending ..

엄격모드. "use strict"

엄격모드(strict mode)란? ES5(ES2009)에서 추가된 스펙으로, 암묵적인 느슨한 모드"sloppy mode"를 해제하고, 자바스크립트 문법을 보다 엄격히 적용하는 방법이다. 느슨한 모드에서는 오류를 발생시킬 확률이 높거나, 최적화에 문제를 일으킬 수 있는 작업들을 유발할 수 있으며 이를 엄격모드로 전환함으로써 몇가지 실수에 대해서 명시적인 오류를 발생시키게 된다. 엄격모드 코드 런타임에서는 몇가지 변화가 생기는데, 1. 기존에는 무시되던 몇가지 에러들을 던진다. 2. JavaScript 엔진 최적화를 방해하는 실수들을 바로잡는다. 3. ECMAScript의 다음 버전들에서 정의될 문법을 금지한다. 그래서 핵심은? 평소 자바스크립트는 너무 관대하게 동작하니, 조금 빡빡하게 보면서 잠재적 오류..

이벤트 위임, 버블링, 캡쳐링 (Event Delegation, bubbling, capturing)

이벤트 위임 유사한 노드들을 다뤄야 할 때 노드마다 핸들러를 할당하지 않고, 공통 조상에 이벤트 핸들러를 할당하여 여러 노드들을 한꺼번에 다루는 방법이다. 요약하면, 이벤트를 효율적으로 다루는 방법이다. 이벤트가 전파되는 특징(캡처링과 버블링)을 이용하면 이벤트 위임을 구현할 수 있다. 이벤트 위임을 배우기에 앞서, 먼저 노드마다 직접 핸들러를 할당하는 경우를 살펴보자. 1 2 3 4 5 지금은 나름대로 querySelectorAll + forEach를 통해 그럴싸한 코드를 작성해뒀는데, 여기서 add 버튼을 통해 li태그가 추가되거나, li태그에 delete 버튼을 생성해 삭제버튼을 도입했다고 하자. 새로운 li태그 추가시에 해당 태그에도 이벤트핸들러를 부여해야 하며, 기존 li태그 삭제시에 해당 태그..

[Commit] 과거 커밋으로 돌아가서 새로운 브랜치(분기) 만들기

목적 기존 react 프로젝트에 nextJS를 입혀서 현재 nextJS를 조금씩 학습하고 있었다. 그러던 도중 이전의 react 프로젝트에 이것저것 실험해보고 싶은게 생겼다. 그래서 이번 포스팅의 목적은, nextJS 적용 이전 커밋으로 돌아가서 새로운 브랜치를 개설하는 것이다. 요약해보면 이 그림을 수행할 것이다. 돌아가려는 커밋의 해시 찾기 우선 돌아가고자 하는 커밋의 해시를 찾아야 하는데, 커밋 해시를 보기 위해선 두가지 방법이면 충분하다. 1. 깃허브 프로젝트 저장소 이용하기 2. 로컬 프로젝트 폴더에서 터미널 이용하기 아래 내용을 보고, 둘 중에 하나의 방법을 고르면 되겠다. 1. 깃허브 프로젝트 저장소 이용하기 프로젝트 저장소에서 커밋 로그를 보면, 4640c2b~ 라는 해시가 있다. 해시 전..