본문 바로가기

전체 글

 (170)
[매일메일] 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..
🌟[매일메일] 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..
[매일메일] CSS Flexbox와 Grid의 차이점 (FE.250116) 2025. 1. 17. 21:35 FlexboxGrid레이아웃1차원 레이아웃2차원 레이아웃사용 목적콘텐츠 중심- 콘텐츠가 추가되거나 줄어들 때 유연하게 대처 가능- 수평/수직 방향으로 콘텐츠 정렬, 간격 조절- 버튼 그룹, Nav bar 등- 한 줄의 콘텐츠가 추가 되는 구성레이아웃 중심- 페이지 구조 구성에 최적화- 카드 레이아웃, 갤리러 형식 등- 명확하게 구분된 영역 기반으로 레이아웃 구성 시기본 동작컨테이너 크기/위치에 맞게 자동 정렬- justify-content와 align-itmes 속성- 주축 방향으로 요소 배치, 여백 조절 가능행과 열을 사전에 정의하고 격자에 요소 배치- grid-template-rows, grid-template-columns 속성- 행과 열 크기 정의- 각 요소 위치 세밀하게 설정 가능 출처[1] 매..
[매일메일] 리버스 프록시와 포워드 프록시의 차이점? (BE.250117) 2025. 1. 17. 21:27 포워드 프록시(Forward Proxy)리버스 프록시(Reverse Proxy)위치클라이언트 측서버 측역할사용자가 인터넷에 접근 시 중개자 역할- 회사 내부망으로 외부 웹 접근 시 프록시 서버 IP 사용클라이언트 요청을 내부 서버로 전달핵심 기능익명성 제공- 사용자의 실제 IP를 숨겨 개인정보 보호캐싱- 자주 요청되는 정보 저장. 동일 요청 시 빠른 응답  (네트워크 대역폭 절약해 네트워크 성능 향상)보안 강화- 악성 웹사이트나 불법 콘텐츠 접근 차단   네트워크 보안 강화, 악성 코드 유입 예방 로드 밸런싱- 여러 백엔드 서버로 트래픽 분산해 서버 과부하 방지- 서비스의 고가용성 유지  외부에서 백엔드 서버 직접 접근 방지(해킹 시도 방지)SSL 종료- SSL/TLS 암호화 처리.   들러오는 요청 모..
[매일메일] 프론트엔드 E2E 테스트란? (FE.250117/BE.250107) 2025. 1. 17. 21:13 테스트 코드가 필요한 이유버그를 조기에 발견하고, 리팩토링을 수행할 때 유용함개발 속도를 향상시키고, 코드에 대한 문서로서 역할을 수행할 수 있음 프론트엔드 E2E(End-to-End) 테스트(=기능 테스트, 브라우저 테스트)1. 개념- 어플리케이션의 사용자 경험을 처음부터 끝까지 시뮬레이션하여 테스트하는 방식- 사용자 관점에서 전체 어플리케이션이 의도한 대로 작동하는지 검증함- 테스트 과정에서 실제 사용자 동작을 흉내내어 시나리오를 테스트 함(버튼 클릭, 페이지 이동, 데이터 입력)- 예시) Cypress, Playwright 2. 장점- 사용자와 동일한 방식으로 작동시키기 때문에 사용자에게 직접적인 영향을 미치는 오류 조기 발견 가능- 프로덕트의 안정성 높이고, 실제 배포 후 발생하는 리스크 줄이는 ..
[매일메일] 웹 어플리케이션의 성능을 최적화 하는 방법? (FE.250107/250102) 2025. 1. 15. 23:38 코드 스플리팅: 자바스크립트 번들을 여러 개로 분리해서 필요한 시점에 필요한 코드만 로드함대규모 SPA에서 유리함. 초기 로딩 시간을 단축시켜 줌.Webpack, Vite, Parcel 같은 모듈 번들러에서 코드 스플리팅을 지원Dynamic Import: import()를 사용해 특정 페이지나 기능이 필요하면 해당 모듈을 로드함Route-based Splitting: React Router의 lazy와 Suspense를 활용해 라우트 단위로 코드 분리레이지 로딩: 무거운 리소스(이미지, 비디오)를 사용자가 실제로 볼 때만 로드현재 화면에 보이는 만큼만 불러오고, 스크롤 이벤트가 발생하면 추가적으로 로딩. 브라우저가 이미지의 뷰포트 진입 시점에 로드함React.lazy() 동적 컴포넌트 로딩이미지 최적화:..
728x90

티스토리툴바