본문 바로가기

분류 전체보기

 (200)
🏄‍♀️리심스 1주차 - 리액트 상태, 리렌더링 안녕하세요, 리심스 1주차 아티클 작성하러 온 김한서입니다. 💥 Virtual DOM리액트에서는 렌더링시 가상 DOM을 이용한다. 가상 DOM이란, 실제 DOM을 조작하는 방식이 아닌, 실제 DOM을 모방한 가상의 DOM을 구성해 원래 DOM과 비교하여 달라진 부분을 리렌더링하는 방식으로 작동한다. 이 때 가상 DOM을 잘 이해해야만 리액트의 상태에 대해 잘 이해하고 다룰 수 있다.더보기DOM(Document Object Model) 이란? 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.밑의 그림처럼, HTML과 스크립팅언어(Javascript)를 서로 이어주는 역할을 한다고 할 수 있다.지난 2주차 과제에서 모두 경험해봤듯이, 자바스크립트..
[Week 1] snap state, Context, Virtual Dom, Reconciliation 1. snap statesetState 함수를 이용하여 상태를 업데이트하면 현재의 상태를 즉시 변경시키지 않고 리렌더링을 일으킨다.즉, 현재 시점의 값을 변경시키는 것이 아니라 다음 리렌더링에서 반영해야 하는 상태를 전달하는 것이다.예시를 들어 설명하면 쉽다.import { useState } from 'react';export default function Counter() { const [number, setNumber] = useState(0); return ( {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3 ..
자바스크립트의 DOM 조작과 이벤트 리스너 바인딩의 순서, 그리고 이벤트 위임 이번 2주차 과제를 하면서 처음 알게된 사실이 있습니다. 자바스크립트를 사용해서 동적으로 생성한 요소에는 이벤트 리스너가 적용되지 않는다는 사실입니다. 이걸 이제야 알다니, 제가 그동안 얼마나 자스에 소홀했는지 다시 한번 깨닫게 되었습니다. 열심히 해야겠네요.. 🚨Emergency🚨아무튼, 이번 과제에서 구현해야 할 기능 중 하나인 체크박스 리스트를 추적하면서 모두 체크되었을 때, 혹은 하나라도 체크 해제되었을 때 가장 상단의 전체 체크박스의 체크상태를 업데이트 해줘야하는 테스크가 있었죠.제가 생각한 방식은 모든 체크박스의 개수와 체크박스들 중 체크가 된 요소들의 개수를 각각 세어 length가 같으면 상단의 전체 체크박스의 체크상태를 업데이트 하는 방식입니다.const isAllChecked = (..
[event.preventDefault()] 브라우저의 기본 동작을 막고,우리가 원하는 다른 동작을 넣을 수 있게 해주는 속성?! 안녕하세요 웹파트 OB 손지유입니다.오늘은 자바스크립트에서 자주 사용하는 기능인, event.preventDefault() 속성에 대해 알아보도록 하겠습니다!어려운 속성은 아니지만, 놓치기 쉬운 부분이기에! 더 섬세한 작업을 위해 꼭 알아두면 좋을 것 같습니다 :) 🔑 event.preventDefault() 는 무엇인가?event.preventDefault() 속성은 자바스크립트에서 자주 사용되는 기능입니다.간단하게 말하면, "브라우저가 기본적으로 하려고 하는 동작을 멈추게 한다"고 생각하면 됩니다.🔑 event.preventDefault() 는 언제 사용하면 될까?우리가 브라우저에서 버튼을 클릭하거나 링크를 누르면!!브라우저는 기본적으로 정해진 동작을 수행합니다. ex) 버튼을 누르면 폼(form..
[1주차 초기세팅 ⚙️] 스타일 초기화 및 전역 스타일링 / theme / 폴더 구조 안녕하세요!호기심스 1주차 아티클 작성하러 온 웹파트 OB 박채연입니다 😋  초기 세팅은 프로젝트의 기반을 마련하는 단계로, 특히 팀 프로젝트를 진행하거나 규모가 큰 프로젝트의 경우, 일관성 있는 코드와 용이한 관리를 위해 필수적으로 거쳐야 하는 과정입니다. 프로젝트 시작 시 필요한 초기 세팅을 확실하게 해두면, 유지보수와 확장성 측면에서 큰 도움이 되기 때문에 앞으로 합동세미나, 앱잼 등 다양한 팀 프로젝트를 진행할 우리 웨비들이 초기세팅에 대해 잘 알면 좋을 것 같아 해당 주제를 다루게 되었습니다! 그중에서도 저는 스타일링 관련 부분과 폴더구조에 대해 상세하게 알아보도록 하겠습니다 ☺️  ✨ [1] 스타일 초기화란?HTML 태그는 브라우저마다 기본 스타일이 달라 의도치 않은 결과물을 내곤 하는데요,..
[1주차 초기세팅 ⚙️] 패키지 매니저 / Vite / ESlint+Prettier / Biome 안녕하세요! 웹 YB 이진혁입니다.호기심스 1주차 초기 세팅을 주제로 아티클을 작성하였는데, 작성하는게 노션이 더 익숙해서 노션에 작성하고 링크 첨부했습니다!!https://peppered-parade-9ba.notion.site/12c081ae8cf98090be36d820e3763704?pvs=4 초기 세팅 | Notion패키지 매니저 (Package manager)peppered-parade-9ba.notion.site스터디 당일까지 계속 디벨롭 시키겠습니다 :) 초기 세팅이 어떻게 보면 컨벤션에 따라 팀마다, 개인마다 다를 수 있는 부분이라 제가 부족해 많은 조언과 의견, 생각을 자유롭게 말씀해주시면 감사드리겠습니다!
호이스팅(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은 일반적으로 데이터 저장 및 전송에 사용된다. 간단하고 사용하기 쉬운 데이터 형식의 ..

티스토리툴바