하리하링웹

Github Repository에 서버 코드를 push했을 때 자동으로 ECS를 통해 서버 코드가 배포되는 실습을 진행할것이다. 이 글로 실습하기 전에 아래 글을 참고하면 좋다.https://jjongsk.tistory.com/entry/Docker이미지를-ECS를-통해-배포해보기1. Git Repository 생성 및 설정github repository를 생성해준뒤 이름, public, private 유무는 편한대로 설정한다. repository 생성이 완료되었으면 서버 코드를 push해준다. 서버 코드 설정은 아래 링크를 참고하자https://jjongsk.tistory.com/entry/Docker이미지를-ECS를-통해-배포해보기이제 ECS 배포를 위한 AWS env를 설정할 차례이다. reposi..

Support for Document Metadata / stylesheets / async scripts / preloading resourcesSupport for Document Metadata ... 이를 통해 초기 렌더링을 늦출 수 있는 요소들을 우선순위 혹은 설정에 따라 미리 가져오거나 최적화하여 가져와 초기 렌더링을 향상시킬 수 있음주요 기능preinit:초기 로드 시 중요한 스크립트를 미리 로드하여 페이지 로드 시간을 단축preload:폰트, 스타일시트, 이미지 등 다양한 리소스를 미리 로드prefetchDNS:특정 호스트에서 요청이 발생하지 않을 경우에도 DNS fetch를 미리 실행하여 네트워크 지연을 감소preconnect:특정 호스트에 대해 요청이 발생할 가능성이 있지만 ..

일반 공백 (space)과 &nbsp(non-breaking space)는 서로 다른 문자이다. 이로 인해 디버그깅이 어려운 문제가 발생하기도 하고, 코딩할 때 어떤것을 사용해야할 지 헷갈릴 수도 있다. 그렇다면 왜 이 두개를 나눠 놓았을까? 이제부터 알아보도록 하자 특징일반 공백문자 (space)코드: U+0020키보드의 스페이스바를 눌러 생성되는 공백 문자.여러 개의 일반 공백문자는 HTML에서 하나의 공백으로 압축될 수 있다.nbsp (non-breaking space)코드: U+00A0HTML에서   로 표현된다.줄바꿈을 방지하고, 여러 개의 비깨짐 공백문자는 연속해서 표시된다.  위 내용에서 알 수 있듯이 두 종류의 공백은 코드부터 시작해서 표현되는 모양도 다르다. 또한 두 공백의 출력..

이전 내용은1편을 참고하자https://jjongsk.tistory.com/entry/Docker%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-ECS%EB%A5%BC-%ED%86%B5%ED%95%B4-%EB%B0%B0%ED%8F%AC%ED%95%B4%EB%B3%B4%EA%B8%B0 Docker이미지를 ECS를 통해 배포해보기(1)ECS는 쿠버네티스와 같은 컨테이너 이미지 오케스트레이션 도구이다. 이를 사용하여 Docker이미지를 ECS에 배포하는 과정을 실습해보겠다.1. 테스트용 노드 서버 만들기여기서는 fastify를 사용한jjongsk.tistory.com 5. Load balancer 생성이 설정을 통해 밖에서 오는 HTTP 요청을 application 서버로 보내줄 수 있다.E..

ECS는 쿠버네티스와 같은 컨테이너 이미지 오케스트레이션 도구이다. 이를 사용하여 Docker이미지를 ECS에 배포하는 과정을 실습해보겠다.1. 테스트용 노드 서버 만들기여기서는 fastify를 사용한 서버를 만들어보겠다. 먼저 아래 문서를 참고하여 노드 서버를 만들어보자https://fastify.dev/docs/latest/Guides/Getting-Started/디렉토리를 만들고 아래 명령어를 실행해준다.>yarn init >yarn add fastifypackage.json에 아래 코드를 추가해준다.{... "scripts": { "start": "node index.js" }, "type": "module"}index.js 파일을 루트에 만든 뒤 아래 코드를 추가한다.import Fa..

프론트엔드에서 측정해야하는 성능 웹을 개발할 때 성능 관련하여 신경써야 하는 부분은 뭐가있을까?아래의 3가지가 가장 중요한 3가지 요소라고 생각하고 있으며 위에서 부터 아래순으로 더욱 중요하다고 봐도 무방할 것 같다.로딩렌더링메모리 로딩FCP(First Contentful Paint): 첫 요소가 로드 될 때까지 걸리는 시간* 로딩바, 텍스트 등FMP(First Meaningful Paint): 의미 있는 첫 요소가 로드 될 때까지 걸리는 시간* 많은 크기를 차지하는 부분 (이미지) , deprecated 되었다고 생각해도 됨LCP(Largest Contentful Paint): 주요 콘텐츠가 로드 될 때까지 걸리는 시간* 뷰포트 내에 있는 가장 큰 이미지, 텍스트의 렌더링 시간 * FMP가 부정확해서 ..

개요 자바스크립트는 단일 스레드로 동작하며, 이는 한 번에 하나의 작업만을 처리할 수 있다는 의미를 갖는다. 그러나 자바스크립트가 이러한 단일 스레드 모델에도 불구하고 여러 이벤트를 동시에 처리할 수 있는 이유는 바로 **이벤트 루프**에 있다. 이벤트 루프는 이름 그대로 끊임없이 루프하여 현재 큐에 태스크가 있는지 확인하며 큐에 태스크가 있을 경우 이벤트 루프의 내부 동작 알고리즘에 따라 태스크를 처리해주는 역할을 하며 이를 통해 I/O와 같은 이벤트들을 차단하지 않고 부드럽게 동작하게 해준다. 물론 정확히 말하면 차단이 되지만 우선순위를 높여 마치 차단되지 않는 것처럼 동작하게 해준다.이벤트 루프의 역할 정리하자면 이벤트 루프의 주요 역할은 다음과 같다:이벤트 처리: 이벤트 루프는 비동기적으로 발생하..

개요웹에서 대용량의 데이터를 보여주는 경우는 어떤 경우가 있을까? 아마 대부분의 경우 긴 리스트 혹은 테이블 형태일것이라고 생각한다. 이런 경우에는 보통 virtualization으로 성능을 최적화 할 수 있지만 개인 프로젝트가 아니라 회사 단위의 프로젝트라면 기획, 기존 코드와의 충돌과 같은 문제로 인해 virtualization과 같은 기법을 사용하지 못하는 경우도 있을 수 있다. 대용량의 데이터를 웹에서 보여주다보면 별 이슈를 다 겪을 수 있는데 이번에 겪은 이슈도 이로 인해 발생한 이슈이다.원인은 redux에서 상태 업데이트 시 구독된 middleware의 코드가 실행되는데 이러한 상태 업데이트를 여러 번 실행할 때 n번 middleware가 실행되었으며 약 5000줄의 행과 각 행에서 몇 개의 ..

개요프론트엔드에서 애니메이션을 구현할 때 CSS를 사용하는 방법을 주로 사용하지만 Javascript를 사용하는 방법도 있다. 물론 CSS에 비해 Javascript는 성능이 떨어지지만 모든것을 CSS로 해결할수 는 없기에 Javascript 를 사용해야만 하는 경우가 있으며 requestAnimationFrame Javascript로 애니메이션을 구현할 때 성능과 UX를 최적화 하기에 좋은 함수이다. requestAnimationFrame는 사용시에 브라우저에게 작업의 실행을 알려주며 내부적으로  requestAnimationFrame 전용 queue에 해당 작업을 집어넣는다.이후 해당 작업은 대기하고 있다가 다음 repaint 작업 전에 해당 큐의 작업을 처리해주는 방식으로 동작한다.  이를통해 re..

Settimeout 함수 설명 setTimeout(functionRef, delay, param1, param2, /* …, */ paramN) 첫 번째 인자에 넣은 함수를 딜레이 이후 실행해준다. 뒤의 파라미터들은 함수에 전달해주는 매개변수이다. delay 값을 숫자값이 아니라 “1000” 과 같은식으로 전달할 경우 1초로 자동으로 변경된다. 잘못된 값을 넣으면 자동으로 0초로 변환된다. 반환 값은 timeoutID를 받으며 이는 clearTimeout() 을 통해 타입아웃을 취소할 수 있다. This 문제 setTimeout은 다른 excution context에서 실행된다. 따라서 자바스크립트의 this 바인딩 특성상 이 값이 바뀔 수 있어 문제가 발생할 수 있다. [정상 동작] const myAr..