분류 전체보기39 코드잇 스프린트 7주 차 후기 코드잇 스프린트 4기 기간 2024-02-05 ~ 2024-02-08 과제 팀 데일리 미션: 매일 팀마다 1명이 1개의 질문을 하고 나머지 팀원들이 답변 위클리 미션: 주마다 배운 내용을 바탕으로 스프린트 과정 동안 만들어가는 개인 프로젝트 위클리 페이퍼: 주마다 정해진 2개의 주제에 대해 조사 학습 토픽 16. React 웹 개발 시작하기 토픽 17. React로 데이터 다루기 스터디 codingTest: 매 주 월, 목 코딩 테스트 문제 1개 풀이 으쌰으쌰: 매일 모던 자바스크립트 Deep Dive 책 정해진 진도 공부 후 정리 후기 리액트를 들어가면서 어려움을 많이 느끼고 있다. 처음 배울 때는 HTML을 간편하게 만들고 조작할 수 있어서 편하다는 느낌을 받았는데 state, prop, hook.... 2024. 2. 11. [React] 리스트 렌더링 key 코드잇 스프린트 4기 7주 차 위클리 페이퍼 사용 key는 리액트에서 DOM 요소를 식별하는 유일한 수단이다. 리스트의 요소에서 변경이 있는 요소만 리렌더링을 수행한다. const arr = ['a', 'b', 'c', 'd']; {arr.map((item) => ( {item} ))} key를 등록하지 않으면 리스트의 요소가 추가, 수정, 삭제 되면 리액트는 정확히 어떤 반영이 되었는 지 알 수 없기 때문에 변경이 없는 요소까지 리렌더링이 수행된다. const arr = ['a', 'b', 'c', 'd']; {arr.map((item) => ( {item} ))} 각 요소를 식별할 수 있는 고유의 key를 부여하면 리액트는 효율적인 DOM 트리를 업데이트할 수 있다. 규칙 key는 리스트의 요소 안에.. 2024. 2. 11. 코드잇 스프린트 6주 차 후기 코드잇 스프린트 4기 기간 2024-01-29 ~ 2024-02-03 과제 팀 데일리 미션: 매일 팀마다 1명이 1개의 질문을 하고 나머지 팀원들이 답변 위클리 미션: 주마다 배운 내용을 바탕으로 스프린트 과정 동안 만들어가는 개인 프로젝트 위클리 페이퍼: 주마다 정해진 2개의 주제에 대해 조사 학습 토픽 15. 자바스크립트 웹 개발 기본 토픽 16. React 웹 개발 시작하기 스터디 part1-26팀 코딩 테스트: 매주 월, 수, 금 코딩 테스트 문제 1개 풀이 js-스터디: 매일 코어 자바스크립트 책 정해진 진도 공부 후 정리 후기 6주간의 파트 1이 종료되고 파트 2가 시작되었다. 새로운 파트가 시작되면서 팀이 바뀌었고 새로운 멘토님, 매니저님이 배정되었다. 파트 2부터는 본격적으로 React를 .. 2024. 2. 4. [React] Virtual DOM 코드잇 스프린트 4기 6주 차 위클리 페이퍼 Virtual DOM 브라우저가 HTML을 렌더링 하는 과정은 다음과 같다. 1. HTML을 통해 DOM 트리를 생성한다. 2. CSS를 통해 CSSOM 트리를 생성한다. 3. DOM 트리와 CSS 트리로 렌더 트리를 생성한다. 4. 레이아웃을 계산한다. 5. 픽셀로 변환하여 화면을 그린다. 우리가 JS나 CSS로 DOM이나 CSS에 변화를 주면 위 과정을 반복한다. 웹 페이지의 요구사항이 복잡해지면서 DOM이나 CSS에 변화를 주는 작업이 빈번해졌다. 그 결과 성능을 많이 잡아먹는 문제가 생겼다. 그 해결책으로 DOM에 직접 요청을 하는 것이 아니라 가상돔(Virtual DOM)을 만들어 메모리에서 관리하여 변화가 있을 때 구 가상돔과 새 가상돔을 비교하여 .. 2024. 2. 4. 이전 1 ··· 3 4 5 6 7 8 9 10 다음