🏠HOME

[바닐라 프로젝트] 토글 되는 탭 버튼 만들기

이번 글은 지금 바닐라 프로젝트를 진행하면서 내가 맡은 부분 중 하나인 예약/주문 페이지의 컴포넌트로 제작한스위치로 토글 되면서 탭이 바뀌는 버튼을 만들게 된 과정에 대해 설명해보고자 한다. css 보다는 JS에 집중하여 설명해보려고한다.이런 결과물이 나오게 된다  JS 코드document.addEventListener("DOMContentLoaded", () => { // (1) const switchContainer = document.querySelector(".toggle-switch"); // 해당 클래스 가진 요소 선택 const buttons = document.querySelectorAll(".toggle"); // 해당 클래스 가진 요소를 '모두' 선택 buttons.for..

[Javascript] 옵셔널 체이닝(Optional Chaining) 이란?

오늘은 옵셔널 체이닝(Optional Chaining)에 대해 이야기해보겠습니다~!💡 참고: 옵셔널 체이닝은 ES2020에 도입된 최신 문법이기 때문에 구식 브라우저에서는 폴리필(polyfill)을 사용해야 합니다.  ✅ 옵셔널 체이닝이란?옵셔널 체이닝(optional chaining)은 자바스크립트에서 중첩된 객체의 특정 프로퍼티나 메서드에 안전하게 접근할 수 있도록 도와주는 문법입니다.즉, 안전한 코드를 작성하기 위한 도구라고 볼 수 있는데 어떻게 이런 역할을 할 수 있는지는 차차 설명 드려보죠!  ✅ 옵셔널 체이닝은 왜 쓸까?? (옵셔널 체이닝이 필요한 이유)  1️⃣ 에러를 방지하기 위해옵셔널 체이닝이 등장하기 전에는 중첩된 객체의 프로퍼티에 접근할 때, 해당 경로의 값이 존재하지 않으면 Typ..

[Javascript] 가비지 컬렉션 (Garbage Collection) 이란?

오늘은 가비지 컬렉션(Garbage Collection)에 대해 이야기 해보겠습니다~ ✅ 자바스크립트의 메모리 관리 JS는 자동 메모리 관리를 통해 개발자가 따로 신경 쓰지 않아도 메모리를 정리해줍니다.더 이상 필요하지 않은 메모리를 자동으로 회수하 메모리의 누수를 방지해주죠!이러한 역할을 하는게 '가비지 컬렉션' 이라고 할 수 있습니다. 그런데 "더 이상 필요하지 않은 데이터 라는 것을 자바스크립트가 어떻게 알아낼까?" 라는 의문이 들지 않나요??저는 궁금했습니다ㅎㅎ 결론부터 이야기하자면 가비지 컬렉션은 다음 두 가지 기준에 따라 동작하게 됩니다. 도달 가능성(Reachability)프로그램 내에서 참조되지 않는 객체를 식별하여 객체가 현재 코드에서 접근이 불가능하다면, 이 상태를 "도달할 수 없는 상..

오늘은 범쌤 라젠카를 봤다.

오늘은 범쌤 라젠카를 봤다.불과 30분 전에 본 따끈따끈한 후기이다.너무 웃겨서 계속 웃었더니광대가 너무 아프다. 우빈님이 계속 찍으시던데 제발 공유받고싶다ㅜ끝~

Vite를 사용하는 이유

오늘은 Vite에 대해 이야기해보려고 한다.   ✅ 왜 Vite를 사용해야 할까?우선, 기존 개발 환경의 문제점부터 알아보자. 번들링의 등장과 한계 브라우저에서 ES Modules을 지원하기 전까지, JavaScript 코드는 모듈화를 브라우저 레벨에서 직접 수행할 수 없었다. 그래서 등장한 개념이 바로 번들링(Bundling)이다. Webpack, Rollup, Parcel 같은 도구들이 이 번들링 도구들의 대표적인 예시인데, 이것들은 개발자의 생산성을 높이는데 기여하긴 했지만 애플리케이션 규모가 커질수록 새로운 문제가 발생하기 시작했다...! 🔍 1. 모듈의 개수 증가모두가 느끼듯이 요즘의 웹은 꽤나 복잡하고 많은 기능을 수행하고 있다. 이런 복잡한 웹을 만들다 보면, 하나의 코드로 보기 힘들기 때..

Ajax와 비동기 통신

오늘은 Ajax와 비동기 통신에 대해 설명하고자 한다. ✅ 일반적인 브라우저 = 동기 통신 우선 일반적인 웹 브라우저는 동기 통신을 한다는 것을 알아야한다. 그럼 동기 통신이 무엇일까?    비동기 통신을 하는 네이버 검색 화면을 예로 들자면  위와 같이 연관 검색어가 사용자가 입력하는 키워드에 따라 동시에 바뀌는 모습을 볼 수 있다. 그런데 사실 사용자가 입력하는 키워드가 무엇인지를 알아야그에 걸맞는 연관 검색어 키워드를 사용자에게 보여줄 수 있기 때문에 저 화면에서도 서버와의 통신이 여러번 일어나고 있다.    그런데 동기 통신이란 저 큰 네이버 화면에서 검색어에 관련한 데이터만 주고 받고 있음에도사용자의 검색어 관련 데이터 뿐만 아니라, 화면에 보여지는 모든 데이터를 서버에 주고, 다시 반환 받게된..

[오블완] 오늘의 주제는?

오늘의 주제는???지금은 시간이 없습니다 지금은 대충 써놓고 이따가 수정하려구여더미데이터 넣어두기..    one look, give 'em whiplashBeat drop with a big flash집중해 좀 더 think fast이유 넌 이해 못 해 uh왜 이제야 know I did that, uhDay one, know I been bad, uhDon't stop 흔들린 채무리해도 can't touch that (can't touch that)Under pressure, body sweating, can you focus? (Yeah)어디서나 거침없어 I'm the coldest오직 나만이 이 판을 바꿀 changerJust close your eyes, breathe in and visualiz..

[10/30] 엄격모드, 전역 객체, 오래된 var, 호이스팅, 데이터 타입(자료형)

🌟 엄격 모드 (strict-mode)엄격 모드 엄격 모드 ko.javascript.info 엄격모드가 나오게 된 배경JS는 하위 호환성 문제로 이전 버전부터 수정되지 않고 쌓이며 지속되어 왔기 때문에 구버전에 쓰였던 JS는 JS언어 자체만의 문제들이 많다. 이런 문제는 ES4버전까지 계속 되었다. 그런데! 마침내 ES5 버전부터 기존의 JS를 개선하기 시작했다. 다만.. 여전히 하위 호환성 문제가 있기 때문에 ES5의 기본 모드에서는 이런 변경사항이 활성화 되지 않도록 설계되었다…ㅜㅜ 하지만 당연하게도 사람들은 이 전 JS 버전 말고 ES5 버전 부터 적용된 JS를 사용하고싶어했기때문에 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 이 변경사항이 ..