들어가며 뭔가 뒤바뀐 순서지만 지난번 CSR과 SSR에 대해 알아보며, 우리가 웹페이지에 접속하면 '렌더링'이라는 과정을 거친다는 것을 알게 되었다. 자연스레 이 렌더링이 구체적으로 어떻게 이루어지는지 궁금해져서, 얼핏 들어본 단어들을 드디어 정리할 시기가 왔다..! 머리 한편에 흩어져있는 단어들을 한번 맞춰가며 이번 글에서는 브라우저 렌더링에 대해 정리해본다. 일단 브라우저가 뭔가요? 렌더링이 일어나는 주체, 우리가 매일같이 흔하게, 인터넷 접속을 하기 위해서 사용하고 있는 프로그램이다. 예전에는 인터넷 익스플로러, 요즘엔 크롬, 파이어폭스, 네이버 웨일, 맥 유저라면 사파리. 그 외에도 브레이브, 비발디 등등 다양한 브라우저가 있다. 그럼 렌더링은 뭔데요? render라는 단어는 사전적으로 make와..

들어가며 상태 관리에 대해서 알아보기를 결심!.. 어디서부터 이미 먼저 작성된 많은 글들을 둘러보다 보니 음.. 🤨 먼저 알고 있어야 하는 이론이..... 이 부분에 대한 지식이 아주 얕은 상태인 걸 깨달았다. 지금의 나.. 어렴풋이 들어본 CSR과 SSR의 이름만 알고 있을 뿐.. 😓 모르면 찾아보면 되지!! 좋아 그럼 어디부터 알아볼까~ 하고 거슬러 올라가다 보니 먼저 열심히 찾고 읽고 보게 된 지점이 SPA부터 CSR, SSR이라서 정리해 보았다. SPA는 MPA와 비교되는 방식이라 함께 작성! 🥊 MPA vs SPA MPA (Multi Page Application) 여러 페이지로 구성된 웹 애플리케이션. 전통적인 웹 페이지 구성 방식이다. MPA의 렌더링 방식 인터랙션이 발생한다. (클릭 같은)..

선택 요소 외의 형제요소 클래스 모두 지우기 미니 프로젝트를 하다가 형제요소가 많은 상태에서 특정 요소를 선택했을 때만 is-active 클래스를 추가하고, 나머지 요소들은 is-active 클래스를 어떻게 지울 것인가...를 고민하다가 스택 오버플로우에서 보고 참고하게 되었다. 예전에 제이쿼리로는 한줄로 쉽게 했던 것 같은데 바닐라 JS로만 하려니까 아직 영 쉽지 않은 것!!... 아래 사진과 같이 현재 play-button 이라는 동일한 클래스를 가진 버튼이 3개 있고, 클릭한 요소에만 is-active를 추가, 나머지는 있었더라도 없애주는 것을 원했다. 해결 function handlePlayerImage(e) { e.preventDefault(); const buttonGroup = this.pa..

console. 자바스크립트를 이용해서 코드를 작성할 때, 콘솔을 통해서 값을 확인하는 일이 많다. 아마 콘솔에서 제일 많이 사용하는 메서드는 console.log 일 것이다! 그 외 현재 자주 사용하는 메서드가 있다면 가끔 객체 내부 구조를 파악하기 위해 사용하는 console.dir 와 로그를 다 지워버리는 console.clear() 정도?.. 내가 얕게 알고 있었던 console 객체의 몇몇 메서드들 이외에도 다양한 메서드들이 있다는 것을 이번 챌린지를 통해 알게되어 한번 정리해보려 한다. console.log 가장 많이 사용하는, 로그를 찍는 메서드다. 여러 개를 출력할 수도 있고, C언어의 printf처럼 입력한 문자를 치환하여 사용할 수도 있다! 하지만 우리에겐 더 익숙한 템플릿 스트링 ${..

classList DOM을 조작하여 클래스를 추가하거나 삭제할 때, class 명을 바꿀 때 등 다양한 상황에 사용할 수 있는 classList 프로퍼티. 챌린지를 진행하다 classList 프로퍼티 중 극히 일부의 메서드만 사용하고 있었다는 것을 깨달았다. 상황에 따라 코드를 더 깔끔하게 짤 수 있는 메서드도 있고 해서, 전체적으로 어떤 메서드가 있는지 한번 훑어보려 한다. add, remove 평소 사용했던 일부의 메서드.. 가장 간편해서 그런지 기억에 오래 남아있는 것인가 싶기도 하다. 🤔 아래와 같이 간단한 예시를 들 수 있다. 메소드 이름대로, 클래스를 추가하고 제거하는 메서드다. 여러 개를 나열할 수도 있다. let li = document.createElement('li'); li.class..

자바스크립트 만으로 아날로그 시계 만들어보기를 진행했다. 먼저 아날로그 시계를 만든 뒤 따로 디지털 시계도 추가해줬다. 알게 된 점 CSS의 속성 중 transform-origin 으로 transform의 기준점을 잡을 수 있다. 침을 조절하는 각도를 지정하는 방식은 여러가지. 첫 번째 이슈 처음에 12시 방향으로 모든 침을 고정시키기 위해 rotate를 90도로 설정해주었더니, 12시 방향에 도착할 때 마다 transform이 요란하게 움직였다가 다시 돌아오는 것을 볼 수 있었다. (너무 빨라서 캡쳐 불가능..) 이건 아마 444도 까지 늘어났다가 급격하게 90도로 변경되며 생기는 문제같았다. 그래서 아래 같은 방식으로 모든 침이 12시 방향에 도달했을 때 transition 속도를 잠시 조정해주는 것..

이전 커밋을 수정하려다가 상황이 좀 꼬였다가 어떻게 다시 복구... (벌써 두 번째 😇) 하였으나 결론적으로 수정은 실패해서 !.... git rebase를 이용해 특정 시점으로 돌아가서 커밋을 수정해보려고 한다. 현재의 경우는 이미 오타 수정 커밋....을 해버렸는데 또 오타가 있음을 발견해버렸고!... 더 이상의 오타 커밋을 하고싶진 않아서 rebase를 써보려 한다. 이전에도 rebase를 썼음 좋았을 것을.. git rebase 해보기 터미널의 git log에서 바꿀 커밋의 해시를 복사한다 git rebase -i 해시 를 통해 리베이스 하러 들어간다. 그럼 현재 커밋된 페이지에 대한 부분이 나오는데, pick 커밋번호 커밋메세지 부분의 pick을 edit으로 수정 후 저장하고 나와준다. (참고로..

이벤트 객체 우리가 자바스크립트에서 동적인 기능을 위해 이벤트를 등록하고자 할 때는 여러 방법이 있지만, 흔히들 addEventListener()과 같은 메서드를 사용하곤 한다. 브라우저는 이벤트가 발생하면 결과적으로 아래와 같은 이벤트 객체 event object를 만든다. 브라우저는 이벤트를 어떻게 감지해서 객체를 만들어 낼 수 있는 것일까? 이런 궁금증을 해결해주는 이벤트를 감지 하는 특성이 있다. 바로 이벤트 버블링과 이벤트 캡쳐링, 두 가지 방식이다. 이벤트 버블링 Event Bubbling 이벤트 버블링은 비누방울이 아래에서 올라오는 것과 비슷하게 생각하면 좀 더 수월한 이해가 가능하다. 이벤트가 발생했을 때 해당 이벤트가 더 상위의 요소들로 전달되는 특성을 말한다. Article부터 Butt..

들어가며 콜백지옥이라는 것을 들어본 적이 있는지? ES6이 도입되기 이전에 비동기 작업을 하기 위해서는 콜백함수로 처리했다고 한다. 비동기 작업으로 처리해야하는 일이 많아질수록 함수가 점점 더 깊어지게 되는데, 이를 흔히들 콜백지옥, 콜백 헬 callback hell 이라고들 부른다. 위의 짤만 보아도 얼마나 가독성이 좋지 않은지...😇 연결을 파악하기가 쉽지 않다는 것을 알 수 있다. 이런 콜백 지옥을 피할 수 있는 방법이 몇가지 있는데, 이 글에서는 프로미스 Promise에 대해 써보고자 한다. 프로미스 프로미스는 ES6에서 도입된 객체로, 비동기 처리 상태와 처리 결과를 반환하는 객체이다. 비동기 처리를 했을 때 작업이 성공이든, 실패이든 결과를 반환해준다. 아래와 같은 형태로 new 연산자를 통해..

Fetch API를 이용해서 데이터를 받아오는 연습! JSONPlaceholder 예시로 jsonplaceholder 에서 데이터를 받아오려 한다. 서버가 없을 때 가상의 데이터를 가져오기에 유용한 사이트다. https://jsonplaceholder.typicode.com/ 사용할 수 있는 데이터 소스들은 아래와 같다. 이 중에서 users를 이용해보려 한다. 사용 가능한 HTTP 메서드들은 다음과 같다. REST API를 연습해볼 때도 유용하게 사용할 수 있을 것 같다. Fetch API로 데이터 받아오기 Fetch API Fetch API는 XMLHttpRequest 객체에서 좀 더 보완된 API로, 모던 브라우저라면 대부분 내장되어있다. 비동기 통신에 많이 사용되던 ajax를 대체하여 페이지의 새..