클라이밍하는 개발자

⚠️ 리액트에서 key={index} 쓰면 안 되는 이유는?안녕하세요, 프론트엔드 입문자분들! 👋리액트에서 리스트를 렌더링할 때 key를 꼭 넣으라고 하잖아요?그런데 key={index}는 왜 안 좋은 걸까요? 오늘은 이걸 아주 쉽게 알려드릴게요! 😊🔑 Key는 왜 필요할까?리액트는 리스트를 렌더링할 때 key를 기준으로 어떤 요소가 변경/추가/삭제되었는지 판단해요.즉, key는 리액트의 비교와 최적화의 기준점입니다!🚫 key={index} 쓰면 생기는 문제예를 들어 볼게요:{items.map((item, index) => ( {item.name}))}이런 코드는 간단하긴 한데...리스트에 항목을 추가/삭제하면 인덱스가 바뀌죠?그럼 리액트는 아래처럼 엉뚱한 요소를 다시 그리는 실수를 할 수 있어..

Reflow와 Repaint란?웹 페이지가 화면에 표시되는 과정은 마치 정교한 연극 무대를 꾸미는 것과 같습니다. 이 과정에서 가장 중요한 배우들이 바로 Reflow와 Repaint입니다. 두 용어는 웹 성능의 핵심이며, 프론트엔드 개발자라면 반드시 이해해야 할 개념입니다. Reflow: 무대 배치를 다시 그리다Reflow는 브라우저가 웹 페이지의 레이아웃을 다시 계산하는 과정입니다. 마치 연극 감독이 무대 위 배우들의 위치를 다시 배치하는 것처럼, 브라우저는 DOM 요소들의 위치와 크기를 재계산합니다.Reflow가 발생하는 대표적인 상황// Reflow를 유발하는 코드 예시element.style.width = '300px'; // 요소의 너비 변경element.style.height = '200px..

[프론트엔드 - 테크트리] 1. HTML, CSS, Javascript 문법 익히기 2. 브라우저에 대한 이해 & 렌더링 방식 이해 3. 간단한 프로젝트(+Git) 4. 객체 지향 프로그래밍(OOP) 공부하면서 자바스크립트로 코딩해보기 5. 웹 프레임워크로 React.js 공부 (+npm) 6. React를 이용한 프로젝트 7. 서버 공부하기(네트워크, HTTP, 인증) 8. 서버 구축 혹은 테스트용 서버를 이용한 프로젝트 9. CSR, SSR 방식에 대해 공부하기 10. 웹 번들링 도구인 Webpack, Babel 공부하고 React에 적용해보기 11. 타입스크립트, 혹은 모바일 어플리케이션 개발 [백엔드 -테크트리] 1. 네트워크 & HTTP에 대한 기본 이해 2. 서버용 프로그래밍 언어 공부(Jav..