본문 바로가기

전체 글

 (176)
🌟[매일메일] 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 암호화 처리.   들러오는 요청 모..

티스토리툴바