기술 블로그

포폴 1 슈즈옥션 스케일 아웃 방식 고려 프로젝트 분산서버 고려 세션 정합성 문제 해결 (sticky session, tomcat clustering등 중 세션 저장소 구축 사용) Spring-redis-session 캐시 적용 , 로컬 캐싱과 글로벌 캐싱 중 글로벌 캐시 적용(레디스로) 레디스 활용 레디스 맥스 메모리 설정으로 스왑 영역 보호 캐시 정책 비교하여 LFU 적용 중복되는 부가기능 인터셉터와 ArgumentResolver 활용 jpa 성능 최적화 모든 fetch lazy로 n+1문제 코드는 리펙토링 젠킨스 ci cd NCP 이용 멀티 브랜치 파이프라인 설계 mysql replication 성능개선 -ncp2대 이용 이후 동적라우팅 설정으로 read와 write/read 분리 aws lambd..

React.memo export default React.memo(Category); //videos 내려오는 props가 자주 동일할 때 사용된다. props가 변경될 때만 리렌더링하게 개별 컴포넌트를 설정할 수 있어서 렌더링 최적화에 도움이 된다. 그러나 오버헤드 우려가 있어 필요한 컴포넌트에만 적용하도록 한다. react-window npm install react-window 외부 라이브러리이나 화면에 보이는 부분만 렌더링하도록 한다 몇만개의 데이터가 배열 되어있을때 사용한다. useCallback 함수 재사용 useMemo 값 재사용

getServerSideProps (서버 사이드 렌더링) 페이지에서 getServerSideProps라는 함수를 내보낼 때, Next.js는 이 함수로 반환된 데이터를 사용하여 각 요청에 대해 이 페이지를 사전 렌더링합니다. 주로 자주 변경되는 데이터를 최신으로 업데이트 하는 경우 유용하고 클라이언트 측에 번들되지 않는다. context매개변수는 params,req,res,query를 포함한다. 이 함수는 이중 하나를 포함하는 객체를 반환해야한다 - props라고 명명된 객체 속성 - notfound(bool)로 명명된 속성 - redirect 문제 getServerSideProps내의 기능은 클라이언트 렌더링 이전에 수행된다. 즉 클라이언트 단에서 서버단의 데이터를 받을 순 있지만 일반적인 방법(nex..

// src/_app.js import { RecoilEnv } from 'recoil'; RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false

Layout Components class name const StyledLayout = styled(Layout)` background-color: #ab4b4b !important; padding-top: 4.375rem; width: 100vw; height: 100vh; `; 위와같이 컴포넌트 스타일링을 적용할 때 스타일드 컴포넌트 내부적으로 css class 선택자로 적용된다. function Layout({children}: {children: React.ReactNode;}) { return ( {children} ); } 위 레이아웃 컴포넌트의 문제는 자식 컴포넌트는 잘 내려주었지만 css class지정 까지는 설정해주지 못했다. function Layout({ className, chil..

문제 Next.js의 router-query를 이용해 객체 데이터를 전달하려 했으나 수신페이지에서 특정 객체만 수신할 수 없었다. 원인 router-query는 url 쿼리 파라미터로 전달되고 다음과 같은 문제가 발생할 수 있다. 인코딩 문제: 객체는 URL 안전한 문자열로 인코딩되어야 합니다. 이를 위해 encodeURIComponent와 같은 함수를 사용하여 객체를 문자열로 변환하고 인코딩해야 합니다. 그렇지 않으면 URL이 유효하지 않을 수 있습니다. 길이 제한: URL에는 길이 제한이 있습니다. 대부분의 웹 브라우저와 서버는 URL의 길이를 제한합니다. 큰 객체를 쿼리 파라미터로 전달하려고 하면 이 제한을 초과할 수 있습니다. 읽기 어려움: 복잡한 객체를 URL에 포함시키면 URL이 읽기 어려워집..