기술 블로그

인프라에 관심이 생겨 GCP 배포를 경험해보고자한다. 구글 클라우드에 가입 후 원할한 진행을 위해 카드 등록도 해준 후 배포하기 위한 프로젝트를 만들어 선택한다. 옆의 id를 잘 기억해준다 추후 사용한다. 우리가 주로 참고해야할 레퍼런스는 아래 두개다. https://nextjs.org/docs/pages/building-your-application/deploying#docker-image Building Your Application: Deploying | Next.js Congratulations! You're here because you are ready to deploy your Next.js application. This page will show how to deploy either ma..

일반적으로 재귀함수는 프로그래밍에서 아주 중요한 요소이며 알고리즘으로도 자주 활용되는 기법이다. 그러나 프론트엔드 환경에서는 어떨까? 이전 게시글에서 봤던 것 처럼 프론트엔드 개발자는 콜스택의 부하를 경계해야하고 여러 문제를 야기한다. 1. 잘못 사용하면 재귀는 스택 오버플로우를 일으키기 좋은 기법이다. 2. 각 함수 호출마다 실행컨텍스트가 생성되기 때문에 메모리 측면에서 좋지 않다. 3. DOM 조작시 성능 저하가 발생할 수 있다.( 매 함수마다 리플로우 리페인팅) 이를 방지하기위해 꼬리 재귀라는 기법을 사용할 수 있다. //일반 재귀 function factorial(n) { if (n === 1) { return 1; } return n * factorial(n-1); } //꼬리 재귀 functi..

동기: 이전 작업이 끝날때 까지 기다렸다가 끝난 이후 다음 작업을 실행하는것 비동기: 이전 작업의 완료여부와 관계 없이 다음 작업을 실행하는 것 자바스크립트에서 비동기는 아래와 같은 상황에서 발생한다. 👉 DOM Element 의 이벤트 이벤트 핸들러 - 마우스, 키보드 입력 (click, keydown 등), 페이지 로딩 (DOMContentLoaded 등) 👉 타이머 - 타이머 API (setTimeout 등), 애니메이션 API (requestAnimationFrame) 👉 서버에 자원 요청 및 응답 - fetch API, AJAX (XHR) 사실 위 사진이 자바스크립트 비동기 작업의 전부이다. 추가 할 점이 있다면 콜스택 옆에 메모리힙이 있다. 콜스텍과 실행컨텍스트 그리고 메모리힙 실행컨텍스트는 ..

프론트엔드 개발에 있어 리소스가 제한된 상황은 얼마든지 발생할 수 있다. 리소스란 네트워크, 서버, 클라이언트 등 더 나아가서 브라우저의 메모리,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

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