본문 바로가기

전체 글

 (172)
[매일메일] React의 props와 state란? (FE.241219) (개발자 강화/프론트엔드) 2025. 1. 20. 19:32 props란?- 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터.- 읽기 전용이라 자식 컴포넌트는 props를 수정할 수 없음.- 컴포넌트 사이의 데이터 흐름을 예측 가능하게 만들고, 컴포넌트 재사용성 높임.function ChildComponent(props) { props.name = "New Name"; // 오류 발생 가능 return {props.name};} state란?- 컴포넌트 내부에서 관리되는 데이터.- state 변경되면 컴포넌트는 다시 렌더링되고 ui가 업데이트 됨.- 사용자 입력이나 네트워크 요청 응답에 따라 변하는 데이터 관리할 때 사용함. props가 자식 컴포넌트에서 변경할 수 없는 이유?- 리액트의 단방향 데이터 흐름 원칙. 부모 컴포넌트가 자식 컴포넌트에 단방향으로 데..
[매일메일] 로딩 속도 개선을 위한 이미지 크기 최적화 (FE.250120) (개발자 강화/프론트엔드) 2025. 1. 20. 19:31 이미지 포멧 최적화- JPEG나 PNG 대신 압축 효율이 높은 WebP 또는 AVIP로 변환- 이미지 품질을 유지하면서 파일 크기를 줄일 수 있음- 그러나 최신 포맷이기 때문에 구버전 브라우저에서 지원하지 않을 수 있으므로 호환성 고려 필요    - HTML의 요소를 통해 fallback 이미지를 적용함.    - 고효율 포맷을 우선 설정하고, 브라우저가 지원하지 않으면  JPEG, PNG 같은 기본 포맷 로드 AVIF 시도, 지원 안되면 WebP, 둘 다 안되면 img 태그의 jpg 이미지 로드 이미지 사이즈 조정- 화면에 노출되는 크기에 비해 이미지가 과도하게 큰 경우, 이미지 작게 resizing- 필요한 크기에 맞게 서버에서 작게 조정해 보냄- Responsive Images의 scrs..
🌟[매일메일] React의 render phase, commit phase란? (FE.241227) (개발자 강화/프론트엔드) 2025. 1. 20. 19:31 리액트의 렌더링 과정은 크게 render phase, commit phase로 나뉜다.React는 Fiber 구조를 사용해 Render phase와 Commit phase를 분리해 작업을 나눈다 React Fiber란?- 렌더링 작업을 작은 단위(chunk)로 나누고, 우선순위에 따라 처리함- 긴 렌더링 작업이 발생해도, 사용자의 상호작용을 처리할 수 있도록 비동기 처리가 가능하게 해줌- Fiber는 중단 가능한 Render phase와 중단 불가능한 commit phase로 나눠서 작업을 관리함- Fiber Node: Fiber의 구조는 Node의 구조체로 구성됨. Node에는 컴포넌트의 상태와 작업을 저장함   - type: 이 노드가 나타내는 React component 타입(함수형, 클래스형, D..

티스토리툴바