기술 블로그

https://blog.jaegwan.com/96 [TIL] GCP Next.js deploy 최근 서류합격한 기업의 우대사항을 보니 GCP 배포가 기재되어 있어 면접 전 GCP 배포를 경험해보고자한다. 구글 클라우드에 가입 후 원할한 진행을 위해 카드 등록도 해준 후 배포하기 위한 프로 blog.jaegwan.com 이전 게시글에 이어서 작성되는 글이다. "CI/CD"란 "Continuous Integration"과 "Continuous Delivery" 또는 "Continuous Deployment"의 약어로, 소프트웨어 개발 및 배포 프로세스를 자동화하고 효율화하기 위한 방법론과 관련된 도구와 절차를 통칭합니다. GCP내의 CI/CD를 검색해서 Cloud Build를 클릭한다. 사용을 클릭한다. 이..

모듈: 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위 웹펙에서의 모듈: 웹 애플리케이션을 구성하는 모든 자원 모듈 번들러: 의존성이 있는 리소스(html,css,js,img)를 각각의 모듈로 보고 하나 또는 여러개의 파일로 묶어주는 도구 리소스: 웹 애플리케이션을 구성하는 모든 자원 기존의 페이지 별 자바스크립트 방식의 문제 의존성 순서 비보장 문제 일부 파일 에러 -> 전체 에러 문제 번들러(웹팩) 장점 여러 타입으로 구성된 여러 리소스파일들을 받으면 다수의 http통신이 발생하여 웹 로딩 속도 저하로 이어질 수 있다. 번들러는 파일을 하나로 합쳐 이 문제를 해결한다. 성능 최적화 및 자동화 코드 축소 및 트리쉐이킹 코드 스플릿을 통한 lazy loading 필요한 코드를 필요할 때 로딩 종속성..

인프라에 관심이 생겨 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..