2주차 (27) 썸네일형 리스트형 객체를 얼려주세요. Object.freeze() 안녕하세요 웹파트YB 강민하 입니다 ! ! 자바스크립트의 객체는 매우 미끌미끌 유연하기 때문에 필요에 따라 잘 얼려주는게 중요하답니다. JS의 객체는 기본적으로 변경 가능한(mutable) 데이터 구조이다. 즉, 객체의 속성에 대한 추가, 수정, 삭제가 자유롭다는 것을 의미한다. 하지만, 필요에 따라 객체를 불변(immutable)으로 만들어야 할 때가 있다.예를 들면, 설정 관련 데이터라던가 사용자에게 보내는 메세지 ... 등등 데이터의 무결성을 보장해야할 때 객체를 불변으로 만들어야 한다. var,let 말고 const 쓰면 해결되는거 아닌가요 ? 우선 const로 선언된 변수는 재할당이 불가능 하다.하지만 객체와 배열같은 참조형 데이터에서는 값이 훅훅 변할 수 있다.const number = 42;.. 자바스크립트의 DOM 조작과 이벤트 리스너 바인딩의 순서, 그리고 이벤트 위임 이번 2주차 과제를 하면서 처음 알게된 사실이 있습니다. 자바스크립트를 사용해서 동적으로 생성한 요소에는 이벤트 리스너가 적용되지 않는다는 사실입니다. 이걸 이제야 알다니, 제가 그동안 얼마나 자스에 소홀했는지 다시 한번 깨닫게 되었습니다. 열심히 해야겠네요.. 🚨Emergency🚨아무튼, 이번 과제에서 구현해야 할 기능 중 하나인 체크박스 리스트를 추적하면서 모두 체크되었을 때, 혹은 하나라도 체크 해제되었을 때 가장 상단의 전체 체크박스의 체크상태를 업데이트 해줘야하는 테스크가 있었죠.제가 생각한 방식은 모든 체크박스의 개수와 체크박스들 중 체크가 된 요소들의 개수를 각각 세어 length가 같으면 상단의 전체 체크박스의 체크상태를 업데이트 하는 방식입니다.const isAllChecked = (.. [event.preventDefault()] 브라우저의 기본 동작을 막고,우리가 원하는 다른 동작을 넣을 수 있게 해주는 속성?! 안녕하세요 웹파트 OB 손지유입니다.오늘은 자바스크립트에서 자주 사용하는 기능인, event.preventDefault() 속성에 대해 알아보도록 하겠습니다!어려운 속성은 아니지만, 놓치기 쉬운 부분이기에! 더 섬세한 작업을 위해 꼭 알아두면 좋을 것 같습니다 :) 🔑 event.preventDefault() 는 무엇인가?event.preventDefault() 속성은 자바스크립트에서 자주 사용되는 기능입니다.간단하게 말하면, "브라우저가 기본적으로 하려고 하는 동작을 멈추게 한다"고 생각하면 됩니다.🔑 event.preventDefault() 는 언제 사용하면 될까?우리가 브라우저에서 버튼을 클릭하거나 링크를 누르면!!브라우저는 기본적으로 정해진 동작을 수행합니다. ex) 버튼을 누르면 폼(form.. 호이스팅(hoisting) 에 관하여 안녕하세요. YB 김고은입니다오늘은 JS에서의 호이스팅에 대해서 다뤄보고자 합니다 변수나 함수의 선언 위치가 코드에 어떤 영향을 미치는지 알기 위해서 호이스팅을 공부하는건 필! 수! 라고 생각하기 때문에 이번 기회에 다시 복습해봅시다 ~ 📍 호이스팅(hoisting) 이란 무엇인가? 호이스팅이란 인터프리터가 코드를 실행하기 전, 함수/변수/클래스 또는 임포트의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻한다.[MDN hoisting](https://developer.mozilla.org/ko/docs/Glossary/Hoisting) 단어 뜻 그대로, "위로 끌어 올리다" 라는게 포인트인데, 변수나 함수 등의 선언을, js 엔진이 스코프의 최상단으로 끌어올리는 것 처럼 처리하.. 2주차: JSON 알아보기 안녕하세요 YB 김린아 입니다 :)2주차 과제의 JavaScript를 작성하며 문득문득 보이는 JSON에 대해 알아보고자 2주차 아티클 주제로 선정하게 되었습니다. 1. JSON(JavaScript Object Notation)이란 : JSON은 사람이 읽을 수 있고 시스템에서 구문 분석할 수 있는 방식으로 데이터를저장하고 교환하기 위한 텍스트 기반 형식이다. 결과적으로 JSON은 비교적 쉽게 학습하고 문제를 해결할 수 있다. JSON은 JavaScript에 기반하지만, 다양한 플랫폼 및 프로그래밍 언어에서 데이터 교환을 단순화하는 매우 강력한 데이터 형식이다. 2. JSON과 HTML, XML 비교 -JSON은 일반적으로 데이터 저장 및 전송에 사용된다. 간단하고 사용하기 쉬운 데이터 형식의 .. [JavaScript] 이벤트위임 안녕하세요 웹파트 배영경입니다🤗이번에는 자바스크립트의 이벤트위임에 대해 알아보았습니다! 2주차 과제를 구현할 때 각 체크박스마다 이벤트 리스너를 개별적으로 등록하는 방식을 사용하였는데, 많은 DOM 요소에 이벤트 리스너를 등록하면 성능상 좋지 않다는 것을 알게되었습니다. 이벤트 위임을 하면 상위 요소에서 이벤트를 처리하고, 이벤트가 발생한 요소에 맞게 로직을 처리할 수 있습니다. 이벤트 위임을 이해하기 위해서는 이벤트 버블링과 캡처링에 대한 이해가 필요합니다. 이벤트 캡처링(Event Capturing) 이벤트 캡처링은 이벤트가 최상위 요소에서부터 자식 요소로 전달되는 과정. 이벤트가 위에서부터 내려오는 방식으로 전파된다. 캡처링과 버블링 모두 기본적으로 발생하지만, 브라우저는 대부분 이벤트 버블링 방.. 메모이제이션 - useCallback, useMemo + React.memo 안녕하세요, 웹파트 OB 공준혁입니다. 요즘 리액트가 개편되면서, 자동으로 렌더링 효율성을 챙길 수는 있다고는 하나, 메모이제이션에 대한 개념을 알고는 있어야 한다.💡 메모이제이션:이전에 계산한 값을 기억하여 재계산을 방지하는 기술. 함수나 값의 결과를 캐싱하여 동일한 입력에 대해 동일한 출력을 반환하도록 만든다. 이는 성능 향상과 코드의 최적화에 도움이 된다. 즉, 메모이제이션은 말 그대로 “기억” 한다는 의미이다.리액트에서는 컴포넌트 렌더링이 자주 일어나기 때문에, 불필요한 렌더링을 방지하기 위해“기억”하는 기술을 사용하는 것이 종종 필요하다. 대표적으로 useCallback, useMemo가 있다!use로 시작하는건 기본적으로 리액트 컴포넌트의 Hook이라고 생각하면 된다.useCallback,.. 로컬스토리지, 세션스토리지, 쿠키 안녕하세요 웹파트 YB 한수정입니다!2주 차 실습과 과제를 하면서 로컬스토리지에 대해 찾아보게 되었고 그러면서 새롭게 세션스토리지도 있다는 걸 알게 되어 이 두 가지 개념에 대해 공유 과제를 작성하게 되었습니다. 로컬스토리지(LocalStorage)로컬스토리지는 사용자의 브라우저에 데이터를 영구적으로 저장하는 공간입니다. 페이지를 닫거나 브라우저를 종료해도 데이터가 사라지지 않고 남아 있으며, 사용자가 직접 삭제하거나 브라우저의 캐시를 지우기 전까지 유지됩니다. // 로컬스토리지에 'test'라는 키로 1을 저장한다localStorage.setItem('test', 1);// 브라우저를 닫았다가 다시 열어도 이 코드를 실행하면 '1'을 출력한다alert(localStorage.getItem('test'.. 이전 1 2 3 4 다음
