본문 바로가기

전체 글

 (176)
[매일메일] React의 StrictMode란? (FE.241226) (개발자 강화/프론트엔드) 2025. 1. 20. 21:12 import { StrictMode } from 'react';function App() { return ( );}React의 StrictMode란?- 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하기 위해 사용됨.- 개발자가 안전하고 효율적인 코드를 작성할 수 있도록 도와줌. 1. 오래된 라이프사이클 메서드와 비권장 API의 사용을 감지함.- componentWillMount, componentWillReceiveProps 같은 더이상 사용이 권장되지 않는 메서드를 쓰는 경우 경고를 표시.   (컴포넌트 생성 직전 호출되어 초기 상태 설정, 컴포넌트가 새로운 p..
[매일메일] 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..

티스토리툴바