분류 전체보기 (28) 썸네일형 리스트형 [JavaScript]🧱ES6 이후 호이스팅과 TDZ (Temporal Dead Zone) 0. 들어가면서이전 포스트에서 호이스팅에 대해 알아보았습니다.이번엔 ES6 이후 변경된 호이스팅과 TDZ를 좀 더 자세히 알아보는 포스팅 시간을 갖겠습니다. 아마 중복되는 내용이 있을 수 있지만 면접 대비 공부 용으로 심화 내용을 공부하는 데 목적이 있음을양해해주시면 감사하겠습니다. 🔸1. TDZ란?**TDZ(Temporal Dead Zone)**는 변수가 선언되었지만 초기화되기 전까지 접근할 수 없는 구간을 의미해요.console.log(a); // ❌ ReferenceError let a = 3;변수 a는 호이스팅 되어 메모리에 등록되어 있지만, 초기화되기 전까지는 TDZ에 머물기 때문에 접근하면 에러 발생let과 const는 이 TDZ의 영향을 받지만, var는 영향을 받지 않음 (대신 und.. [JavaScript]🔍호이스팅(Hoisting)이란? 0. 들어가면서면접 준비를 하며 이런 저런 영상을 찾아보다 호이스팅에 대한 영상을 보게 되고 평소에 잘 신경 쓰지 않던 개념이라 이번에포스팅을 하며 한 번 정리를 하고자 합니다. **호이스팅(Hoisting)**은자바스크립트의 실행 컨텍스트에서 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 동작을 말합니다.이로 인해 코드의 순서와는 다르게 작동하는 경우가 생기며,정확히 이해하지 않으면 예기치 못한 결과나 버그를 경험할 수 있습니다. 🧠 1. 호이스팅의 기본 개념자바스크립트는 실행 전에 변수 선언(var, let, const)과 함수 선언을 메모리에 미리 할당합니다.다만, 할당 방식과 초기화 시점에 따라 작동 방식이 다릅니다.console.log(a); // undefinedvar a = 10;.. [React]🔑배열의 index를 key로 사용하면 안되는 이유 0. 들어가면서React에서 리스트를 렌더링할 때, key props는 필수입니다. 많은 초보 개발자들이 편의상 index를 key로 사용하곤 하는데요, 사실 이것은 예기치 못한 버그의 원인이 될 수 있습니다. 저도 여러 프로젝트를 진행하면서 분명 리스트의 순서가 제 의도와는 맞지 않게 변경되거나리렌더링되는 현상을 경험한 적이 있습니다. 이번 포스팅에서는 왜 index를 key로 사용하면 안 되는지, 어떤 문제가 발생할 수 있는지, 그리고 어떤 대안을 사용하는 것이 좋은지를 정리해보겠습니다. 1. 🔑 key란 무엇인가?React는 리스트를 렌더링할 때 각 요소를 효율적으로 추적하고 업데이트하기 위해 key라는 고유한 식별자가 필요합니다.key를 통해 어떤 요소가 변경되었고, 추가되었으며, 제거되었는.. [JavaScript]💡3. 비동기 처리의 핵심, Promise와 async/await 0. 들어가면서비동기 프로그래밍은 현대 웹 개발에서 필수적인 개념입니다. 얼마 전 포스팅에서도 뉴스 리스트 페이지를 개발하며 마주쳤던 문제인 비동기 제어 처리를 하는 법에 대해 포스팅 했지만 이번엔 온전히 그 개념만을 살펴보도록 하겠습니다. JavaScript에서 비동기 처리를 다루는 대표적인 방식으로 Promise와 async/await.이번 포스팅에서는 이 두 개념을 비교하고, 어떻게 활용하는 것이 좋은지 알아보겠습니다. 1. Promise란?Promise는 비동기 작업을 처리할 때 사용하는 JavaScript 객체로, 성공 또는 실패 상태를 갖습니다. ✅ Promise의 특징대기(pending) → 성공(fulfilled) → 실패(rejected) 의 3가지 상태를 가짐.then(), .cat.. [React]📘2. Virtual DOM(가상 돔)이란? 0. 들어가면서이전 포스팅에서 DOM에 대해 공부했다. 그러면 자연스럽게 떠오르는 것은 React에서 사용하는 가상 돔(Virtual DOM)이다. 그래서 이번 포스팅에서는 가상 돔에 대해 알아보고 공부해보는 시간을 가져보겠다. 1. Virtual DOM의 개념Virtual DOM(가상 DOM)은 실제 DOM의 가벼운 사본변경 사항을 Virtual DOM에서 먼저 계산한 후, 실제 DOM에 최소한의 변경만 적용React 등 최신 프레임워크에서 성능 최적화를 위해 활용 2. Virtual DOM이 필요한 이유2.1 실제 DOM의 성능 문제DOM 변경 시 리플로우(Reflow) 와 리페인트(Repaint) 가 발생하여 성능 저하요소가 많아질수록 브라우저가 다시 렌더링하는 부담이 커짐 2.2 Virtu.. [CS] 📖 1. DOM(Document Object Model)이란? 0. 들어가면서앞으로 있을 여러 면접들을 대비하고자 유튜브나 포털 서치, 챗지피티 등을 사용하여 프론트엔드 개발자(웹 개발자)면접 단골 질문들을 추려내고 앞으로 하나씩 포스팅을 하며 공부할 것입니다. 오늘은 제 주관적인 생각이지만 웹 개발의 가장 기초가 되는 부분이라고 생각이 드는 DOM 에 대해서 알아보고자 합니다. 1. DOM의 개념DOM은 HTML 문서를 객체 기반으로 표현한 구조브라우저가 HTML을 해석하여 트리 구조(계층적 구조)의 노드(Node)로 변환JavaScript를 사용해 동적으로 HTML을 조작할 수 있음 2. DOM의 구조DOM은 노드로 이루어진 계층적 구조로 구성됨Document 노드: document 객체Element 노드: , 같은 HTML 태그Text 노드: 요소 안의 .. [React] 📝async/await + useEffect 내 순차 실행하기(비동기 제어 처리) 0. 배경 설명제목과 관련된 이야기를 시작하기 전에 간단하게 배경 설명을 해야겠다. 거의 마무리 단계에 있는 프로젝트인 '잼시네마(영화 정보 사이트)'의 뉴스 탭을 개발 중에내가 서버 측 코드 newsRouter.ts 에 만들어놓은 두 가지 API가 있었다. 첫 번째 API는 fetch-and-store 이라는 이름(주소?)의 API이다.외부 API인 딥서치 뉴스 API를 사용하여 우리가 원하는 영화라는 키워드와 관련된 뉴스 기사들의 정보를 받아오고그 데이터들을 정제하여 우리 프로젝트의 DB에 저장하는 API로 커스텀 한 것이다. 두 번째 API는 list라고 이름 지은 API이다.이 API의 역할은 DB에 저장된 뉴스 데이터들을 날짜 내리참순으로 가져와서 프론트(클라이언트) 측으로 보내준다. (해당 코.. [React] 💻 모바일 웹 반응형 디자인 하기 0. 들어가면서얼마 전에 대학교 졸업 전 마지막 프로젝트로 과 후배 한 명과 컴공과 지인 두 명과 함께'추억의 칠판'이라는 이름의 졸업식 기념 롤링페이퍼 모바일 웹 서비스 프로젝트를 진행했다. 모바일 웹 프로젝트이다 보니 핸드폰 디바이스 마다 다른 화면 크기에 맞추어 UI들과 홈페이지를 반응형으로 해야 했다. 반응형이라고 해봤자 컴포넌트 단위 정도로만 해보았기 때문에 이렇게 홈페이지 전체적으로 반응형을 필요로 하는 프로젝트는 처음이였기에 꽤나 어려움을 겪었다. 그 때 공부하며 사용도 해보았던 개념들을 정리하고 추가적으로 필요한 부분은 더 알아보도록 하겠다. 1. 반응형 웹 디자인이란?✅ 반응형 웹 디자인의 개념반응형 웹 디자인(Responsive Web Design, RWD)은 다양한 화면 크기와 디.. 이전 1 2 3 4 다음
