본문 바로가기

개발자 강화

 (128)
[매일메일] 로딩 속도 개선을 위한 이미지 크기 최적화 (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() 동적 컴포넌트 로딩이미지 최적화:..
[매일메일] SSR의 개념과 장단점? (FE.250115) (개발자 강화/프론트엔드) 2025. 1. 15. 22:14 SSR(Server Side Rendering)이란 무엇인가?- 서버에서 완성된 정적 HTML을 클라이언트에 내려주는 방식- 클라이언트는 해당 HTML을 파싱만 해서 화면을 랜더링함 CSR(Client Side Rendering)이란 무엇인가?- 서버에서 비어있는 뼈대 HTML을 클라이언트에 받음- 필요한 자바스크립트 번들을 다운로드하고 번들을 실행해서 동적으로 컨텐츠를 채움 SSR의 장점?- SEO(Search Engine Optimization)에서 유리함.- 크롤러가 컨텐츠를 쉽게 인식함.- 초기 로딩 속도가 빠름. 이미 컨텐츠가 완성된 상태로 서버에서 보내주기 때문에 번들을 다운로드/실행할 필요 없음.- 블로그나 커머스 등, 컨텐츠 노출이 중요한 웹 애플리케이션에 적합함 SSR의 단점?- 클라이언..
[매일메일] 디바운스와 쓰로틀, 무한 스크롤? (FE.250108) (개발자 강화/프론트엔드) 2025. 1. 14. 22:10 디바운스(Debounce)와 쓰로틀(Throttle)은 이벤트 핸들러가 너무 자주 실행되지 않도록 조절하는 기법 Debounce: 이벤트가 연속적으로 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 지나야 이벤트 핸들러 실행검색창에 사용자가 검색어를 입력할 때, 사용자가 입력을 멈춘 후 일정 시간이 지나면 검색 요청을 보냄Throttle: 일정 시간 간격 동안 발생한 이벤트 중 첫 번째 또는 마지막 이벤트만 처리함이벤트가 계속해서 발생해도 설정된 시간 동안은 한 번만 이벤트 핸들러가 실행됨사용자가 연속 광클을 시도할 경우, 일정 간격 내 한 번만 요청을 보냄무한 스크롤 구현 시 유리한 방법은?쓰로틀: 스크롤이 하단에 위치하게 된 순간 즉시 추가 데이터 요청을 수행해서 자연스러운 스크롤 경험을 제공함디..
[매일메일] 사용자가 웹사이트에 접근하면 발생하는 일?(FE.241225/BE.250110) (개발자 강화/프론트엔드) 2025. 1. 14. 21:52 프론트엔드 관점백엔드 관점[1단계] DNS 조회(DNS Lookup): 도메인을 IP 주소로 변환- 브라우저가 캐시된 DNS 기록을 확인함- 처음 접속하는 도메인인 경우 로컬 DNS 서버에 요청함- 도메인을 IP 주소로 변환함- 어플리케이션 계층(7th 계층)에서 이루어짐[2단계] TCP(Transmission Control Protocol) 연결- 브라우저는 서버와 3-way handshake를 수행해 TCP 연결함1. 브라우저가 SYN 패킷 보냄2. 서버가 SYN-ACK 패킷 보냄3. 브라우저가 ACK 패킷 보냄- 브라우저는 서버와 통신을 시작함- HTTP는 TCP/IP 기반으로 작동, TCP 3-Way Handshake수행- 전송 계층(4th 계층)에서 이루어짐[3단계] HTTP Request- 웹..
[매일메일] React에서 index를 key값으로 사용하면 안되는 이유(FE.250109) (개발자 강화/프론트엔드) 2025. 1. 14. 21:20 React의 key란 무엇인가?리스트를 랜더링 할 때 엘리먼트를 구분하는 고유 식별자 역할어떤 항목이 변경(추가, 삭제, 정렬 변경)되었는지 효율적으로 파악하고, 필요한 부분만 다시 렌더링함React의 index란?배열을 순회하며 리스트를 랜더링할 때(.map), 현재 요소가 몇 번째인지 나타내는 정수 값const fruits = ['Apple', 'Banana', 'Orange'];const fruitList = fruits.map((fruit, index) => { return ( {fruit} (index: {index}) );});간단하게 구현하는 경우에는 이처럼 key에 index값을 쓰곤 하는데, 사실 이러면 문제가 생길 수 있다. React의 리스트에서 index를..

티스토리툴바