분류 전체보기464 프록시와 안정적인 트래픽 최종 수정: 2025.06.15프록시와 안정적인 트래픽개발자는 클라이언트보다 서버를 만들고 다루는 일이 더 많다. 서버를 다루는 개발자는 한 번에 수많은 클라이언트와 메시지를 주고받아야 한다.■ 오리진 서버와 중간서버: 포워드 프록시와 리버스 프록시클라이언트와 단일한 서버가 한 네트워크 내에 존재하거나 나란히 위치하는 경우는 거의 없다. 클라이언트와 서버 사이에는 수많은 네트워크 장비들이 있을 수 있고, 서버를 보완하는 수많은 중간 서버들도 있을 수 있다. 게다가 어느 한 서버에 문제가 생기더라도 문제없이 동작할 수 있도록 서버를 다중화하여 운영하는 경우가 많다. 수많은 네트워크 장비과 중간 서버들 사이에서 클라이언트가 최종적으로 메시지를 주고받는 대상을 오리진 서버(origin server)라고 한다... 2025. 6. 15. 응용 계층 - HTTP의 응용 최종 수정: 2025.06.15응용 계층 - HTTP의 응용■ 쿠키HTTP는 기본적으로 스테이트리스 프로토콜이기 때문에 모든 HTTP 요청 메시지는 독립된 메시지로 간주된다. 그렇다면, '3일간 보지않기'와 같은 기능은 어떻게 구현되는 걸까? HTTP 쿠키(이하 쿠키)를 활용하면 이와 같은 기능을 구현할 수 있다. 쿠키(cookie)는 HTTP의 스테이트리스한 특성을 보완하기 위한 대표적 수단으로, 서버에서 생성되어 클라이언트 측에 저장되는 쌍 형태의 데이터이다. 때로는 쿠키의 만료 기간과 같은 추가적인 속성값도 가질 수 있다. 클라이언트는 서버로부터 받은 쿠키를 주로 브라우저에 저장한다. 그렇기 때문에 서버로부터 전달받은 쿠키는 브라우저를 통해 확인할 수 있다. 서버는 쿠키를 생성하여 클라이언트에 전.. 2025. 6. 15. 성능 향상을 위해 시도할 수 있는 방법 최종 수정: 2025.06.12성능 향상을 위해 시도할 수 있는 방법■ 렌더링 최적화 (Redering Performance)1. 컴포넌트 재렌더링 최소화React.memo(): props가 바뀌지 않으면 리렌더링 방지useMemo, useCallback: 계산 결과 or 함수 캐싱상태(state)를 가능한 상위에서 분리context API 대신 props 전달 or 전역 상태관리 라이브러리 사용 2. 서버 컴포넌트 활용서버 컴포넌트는 클라이언트로 JS번들을 전송하지 않아 더 빠른 초기 렌더링 가능하다.■ 정적 렌더링과 캐싱 활용1. SSG2. ISR 3. CDN 캐싱정적 자산을 CDN에 캐싱(Clodflare, Vercel 등에서는 자동 지원 된다.)■ 이미지 최적화1. Image 컴포넌트 사용자동 사.. 2025. 6. 12. 정적 배열과 동적 배열 비교 최종 수정: 2025.06.12정적 배열과 동적 배열■ 정적 배열 (Static Array)내용이 고정되어 있고, 변경하지 않는 배열보통 리터럴로 선언하며, 불변 데이터를 표현할 때 사용한다.const fruits = ['apple', 'banana', 'orange']; 주요 메서드원본 배열을 변경하지 않는다.forEach(): 각 요소 순회map(): 요소 변환하여 새 배열 반환filter(): 조건에 맞는 요소만 반환includes(): 특정 값 포함 여부 확인find(): 조건에 맞는 첫 요소 반환join(): 배열 -> 문자열 변환slice(): 배열 일부 복사■ 동적 배열 (Dynamic Array)실행 중에 데이터를 추가하거나 제거할 수 있는 배열사용자 입력, API 데이터 등으로 구성되는.. 2025. 6. 12. 성능 개선 - 게시글 상세 페이지 LCP 개선 요약: LCP 5.04 -> 2.27~3.29 개선방법1) 컴포넌트 분할2) preload와 prefetch 적용 (이미지 있을 때)3) 렌더링 순서 조정 (모든 데이터를 동시에 -> 게시글 먼저 UI 즉시 업데이트)게시글 상세 페이지에서 LCP가 5.04가 나왔다.해당하는 부분은 이곳이다.{/* 게시글 본문 */} {user && user.id === post.author_id && ( 수정 삭제 )} {renderPostContent(post.content)} 컴포넌트를 분할하니 4.13~4.48 정도로 감소했다. 그럼에도 좋은 수치는 아니다. 코드를 살펴보면 renderContent가 문제인 것인데, Image 컴포넌트를 사용해도 수치가 .. 2025. 6. 7. 이전 1 2 3 4 5 ··· 93 다음
