기술 블로그

프론트엔드 개발에 있어 리소스가 제한된 상황은 얼마든지 발생할 수 있다. 리소스란 네트워크, 서버, 클라이언트 등 더 나아가서 브라우저의 메모리,CPU 사용량,네트워크 대역폭 등을 의미한다. 코드 최적화- 코드 분할 대부분 리액트 앱은 웹팩,롤업,브라우저파이와 같은 툴을 이용하여 여러 파일을 하나로 병합하고 번들 된 파일을 웹페이지에 포함하여 한 번에 전체 앱을 로드한다. 이는 앱의 크기를 키우고 무겁게 만든다. 비대한 번들을 방지하는 해결 방법중 하나가 코드 분할이다. import() :동적 임포트 웹팩에서는 위 구문을 만나면 앱의 코드를 분할한다. 해당 함수는 모듈을 동적으로 불러와 결과를 프로미스로 반환한다. 주로 lazy()와 같이 사용된다. 코드 최적화 - 트리쉐이킹 사용하지않는 코드를 제거한다..

포폴 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..

좋은 개발자란 무엇일까 아직 1년도 안된 주니어 개발자 입장에서 생각해 볼 떄 좋은 개발자는 누가 바라보느냐에 따라 크게 달라질 것 같다. 기획자, 디자이너, 동료 개발자 등 다양한 직군 만큼 좋은 개발자의 기준은 달라질 수 밖에 없다. 그 중에서도 동료 개발자가 바라보았을 떄 좋은 개발자에 대해 생각해보았다. 동료 개발자로서 좋은 개발자 문제 해결 능력 실무를 경험하면서 가장 중요하다고 느낀 것은 문제 해결 능력이었다. 같은 문제를 두고 어떻게 해결하느냐에 따라 하루가 걸리기도 하고 사흘이 걸리기도 했다. 내가 문제 해결 능력이 부족하면 결국 물어보는 곳은 사수이고, 이는 동료 개발자의 시간을 뺏는 결과를 초래했다. 질문 자체는 문제가 아니다. 그러나 문제 해결 능력을 배양하지 못한 채 발전 없이 시간..

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