JavaScript/vanilla

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

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

[VanillaJS] 바닐라JS만으로 To Do List 만들어보자 3

이전글 [VanillaJS] 바닐라JS만으로 To Do List 만들어보자 2 2021.04.30 - [JavaScript/VanillaJS] - [VanillaJS] 바닐라JS만으로 To Do List 만들어보자 1 [VanillaJS] 바닐라JS만으로 To Do List 만들어보자 1 Vanilla JavaScript(순수한 자바스크립트)만을 사용해서 To Do.. gobae.tistory.com To Do 삭제하기 마지막 To Do 삭제 기능이다. 삭제를 위해서는 어떤 것이 필요할까? 삭제를 위한 버튼이 필요하다. 삭제 버튼을 클릭하면, 해당하는 to Do가 삭제되어야 한다. 이전 2편에서 완성한 코드를 가지고 시작해보자. 이전 포스팅 JS 코드 const toDoForm = document.que..

[VanillaJS] 바닐라JS만으로 To Do List 만들어보자 2

1편 [VanillaJS] 바닐라JS만으로 To Do List 만들어보자 1 Vanilla JavaScript(순수한 자바스크립트)만을 사용해서 To Do List를 만들어보자. 왜 귀찮게 VanillaJS로 구현하는가? 만약에 하나의 기능을 구현하는 데 100줄, 200줄 정도의 코드를 요구한다고 하자. 이미 gobae.tistory.com 1편에 이어서, toDo의 저장을 위해 Local Storage를 활용해보자. Local Storage mdn 설명 항상 자바스크립트를 공부하면서 모르는 것이 있다면 구글을 열어서, keyword mdn 으로 검색하자. 예) local storage mdn 혼자 모르는 개념을 알아야 할 때 아주 좋고 상세하게 설명되어 있는 곳이다. local storage란? 간단..

[VanillaJS] 바닐라JS만으로 To Do List 만들어보자 1

Vanilla JavaScript(순수한 자바스크립트)만을 사용해서 To Do List를 만들어보자. 왜 귀찮게 VanillaJS로 구현하는가? 만약에 하나의 기능을 구현하는 데 100줄, 200줄 정도의 코드를 요구한다고 하자. 이미 그 코드를 잘 정리해 둔 라이브러리에서 가져와서 잘 쓸 수 있는 상황임에도 불구하고 프로젝트를 할 때 마다 그 코드들을 직접 구현한다면...? 매우 비효율적이다. 사실, 남이 이미 잘 짜둔 코드를 가져다 쓰는 것도 능력이다. 이 글을 보시는 여러분이나 필자와 같은 초보(아마..? 그럴것이다.)들은, 공부할 때 만큼은 직접 구현해보자. 간단해 보이는 기능들도 직접 구현해보면 어렵거나, 생각해봐야 할 부분이 많다. 즉 우리는 이걸 직접 구현함으로서 배우는 것이 많을 것이다. ..