분류 전체보기218 [함수형 코딩] 13. 함수형 도구 체이닝 , 14. 중첩된 데이터에 함수형 도구 사용하기 map var names = map(customer, getFullName); var namesLengths = map(names, stringLength); //위와 아래는 같은 동작을 한다. var nameLangths = map(customer, function(customer) { return stringLength(getFullName(customer)); }); filter var goodCustomer = filter(customer, isGoodCustomer) var withAddress = filter(goodCustomers, hasAddress) //위와 아래는 같은 동작을 한다. var withAddress = filter(customers, function(customer){ r.. 2024. 1. 1. HTTP 캐시 콘텐츠 요청에 빠르게 응답하기 위해 서버와 클라이언트 사이에 응답 콘텐츠의 사본을 저장하는 공간을 “캐시” 라고 한다 캐시를 유지하고 처리해주는 별도의 서버를 “캐시서버” 라고한다. 캐시는 클라이언트 ←→서버 사이에 존재한다. 웹 아키텍쳐에 있는 캐시 서버 브라우저 캐시서버 or 로컬 캐시 리버스 프록시 형태의 캐시서버 ( = 웹 서버), 리버스 프록시 서버에 캐시 기능을 추가해 리버스 프록세 캐시 서버로 사용하기도 하는데 이를 “웹 캐시” 라고 한다. 캐시 서버는 프록시 서버, ISP라우터 등 다양한 위치에 존재하며 네트워크 대역폭 및 비용절감을 위해 사용된다. 웹 캐시 동작 원리 웹서버와 웹 브라우저 중간에 위치하면서 원본 컨텐츠 요청을 최종 서버에 보내 응답을 받은 후 복사본을 만들어 저장하고 사용.. 2023. 9. 27. [실전에서 바로쓰는 Next.js] Next.js 기초와 내장 컴포넌트 라우팅 Next.js는 “파일 시스템 기반 페이지와 라우팅” 을 사용한다. pages/디렉터리를 가지고 있음. 디렉터리 안에 .js, jsx, .ts, .tsx 파일에서 익스포트한 리액트 컴포넌트 이다. 동적 라우팅 규칙을 생성해서 [idx].js 파일을 만들면 ~~/test/1 이런식으로 가져 갈 수 있음 페이지에서 매개변수 사용하려면 “getServerSideProps” 함수를 이용한다. 컴포넌트에서 경로 매개변수 사용하려면 “useRouter”을 사용한다. 클라이언트에서 내비게이션 Link컴포넌트를 이용한다. useRouter훅을 사용해 이동. router.push 정적 자원 제공 정적자원은 /public 디렉터리 안에 저장하는 방식으로 클라이언트에서 제공한다. 이미지를 불러온 후에 이미지 주변의 .. 2023. 5. 10. [실전에서 바로쓰는 Next.js] 렌더링 전략 Next.js에서는 페이지를 빌드시점에 정적으로 생성하고 페이지 실행시점에 동적으로 제공할 것인지 쉽게 정할 수 있다. 어플리케이션의 특정 페이지에 대한 요청이 있을 때마다 페이지를 다시 생성할 수 있다. 서버 사이드 렌더링(SSR) 서버에서 HTML페이지를 동적으로 렌더링하고 웹 브라우저로 전송한다. HTML페이지를 웹브라우저로 전송하기 전에 서버에서 전부 렌더링한다. 해당 페이지의 모든 자바스크립트 코드가 적재되면 동적으로 페이지 내용을 렌더링한다. 사용자가 페이지에 접근하면 서버는 페이지를 렌더링해서 결과로 생성한 HTML페이지를 클라이언트로 전송한다. 그리고 브라우저는 페이지에서 요청한 모든 스크립트를 다운로드 한 다음 DOM위에 각 스크립트 코드를 하이드레이션한다. 그래서 페이지를 새로 고치치않.. 2023. 5. 5. 이전 1 2 3 4 ··· 55 다음 반응형