본문 바로가기

전체 글370

[WEB] 웹 바이탈이 비즈니스에 미치는 영향

https://web.dev/vitals-business-impact/ The business impact of Core Web Vitals This article will help you understand how Core Web Vitals correlate with key business metrics by exploring examples of companies which have already seen positive impact for their users and business. web.dev 위 글을 정리한 글입니다. 소요된 시간에 관계없이 의사 결정자는 이를 비즈니스 성장에 대한 장기적인 투자로 간주해야 한다. 빠르고 원활한 탐색 경험을 제공하면 사용자들를 즐겁게 하고 충성도가 높고 재방.. 2022. 10. 1.

참고 사이트

https://mdxjs.com/ Markdown for the component era | MDX MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. mdxjs.com https://github.com/react-syntax-highlighter/react-syntax-highlighter GitHub - react-syntax-highlighter/react-syntax-h.. 2022. 9. 29.

[Javascript] 메서드? 함수?

메서드란, 객체 프로퍼티에 저장된 함수를 말한다. 메서드는 this로 객체를 참조한다. https://ko.javascript.info/object-methods 2022. 9. 28.

[Javascript] this

this javascript의 this는 실행 컨텍스트에 따라 참조하는 값이 달라진다. 객체 안에서 선언되면, this는 객체다. 일반 함수에서 호출되면, 함수가 호출된 실행 컨텍스트가 this가 된다. 화살표 함수의 this는 실행 컨텍스트를 this로 가지지 않는다. 외부 함수에서 this를 가져온다. 일반 함수에서의 this 일반 함수에서 호출되면, 함수가 호출된 실행 컨텍스트가 this가 된다. const user = { name: '라에니라' } const dragon = { name: '드래곤' } function sayHi() { return this.name + 'hi'; } user.f = sayHi; dragon.f = sayHi; console.log(user.f()); // 라에니라.. 2022. 9. 28.

[Javascript]Context란?

런타임에 자바스크립트 함수가 런타임 환경의 콜스텍에 들어갈 때, context는 만들어진다. context는 '문맥'이다. 2022. 9. 28.

[AWS] Amazon Elastic Container Registry(Amazon ECR)

난 오늘 ECR을 처음 알았다. AWS의 도커 정도로 생각하고 있다. 문서를 보니, ECR에 컨테이너 이미지만 푸시하면 되는 것 같다. ECR에 컨테이너 이미지를 올리고, 컨테이너를 실행하고, Amazon EC2의 요청을 받을 수 있도록 설정하면, EC2로 들어오는 요청을 받아서, 웹을 응답해줄 수 있는 듯 하다. 나 같은 경우, Nuxtjs의 웹 애플리케이션을 S3에 빌드 파일을 올려서 사용하고 있는데, 팀에서 ECR을 도입하였다. NUxtjs를 컨테이너 이미지 파일로 만들어 ECR에 업로드하고, ECR과 EC2를 연결했다. 그리고, EC2의 요청을 CloudFront가 받도록 하였고, CloudFront는 Route53에의해서, 특정 도메인 요청에 의해서 호출되게 해놨다. 좀 더, ECR을 파보면, .. 2022. 9. 26.

[Javascript] mutable과 immutable 데이터 관리하기

mutable 메서드 mutable method로 상태를 변경하면 안됩니다. splice() sort() push() shift() unshift() pop() immutable 메서드 immutable 메서드를 사용해서 상태 관리를 해줘야, 사이드 이펙트가 없다고 한다. 변수가 참조하고 있는 메모리 주소에 값을 변경하는게 아니라, 새로운 값을 가지는 새로운 메모리 주소를 상태가 재할당받는 거임. slice() map() concat() filter() spread(...) 2022. 9. 26.

[Javascript] 파일 용량 포멧 코드

Math.log() 자연로그의 값을 반환한다. 0이면, -Infinity, 음수면, NaN 반환 Math.log는 입력받은 파라미터가 2.718..(자연상수)의 몇 거듭제곱인지 반환해준다. 자연로그 자연로그: ln(x)에서 x에 해당하는 수. 무리수 e를 밑으로 하는 로그 logex를 자연로그라고 lnx로 나타낸다. 자연상수 자연상수: 2.7182... 끝이 없는 무리수.(e), 자연로그 lnx의 밑이다. '오일러의 수'라고 한다. x의 값이 0에 한없이 가까워질 때, 일정한 값에 가까워지며 그 극한값을 e로 나타낸다. 로그를 계산하는 방법 log3^9 = 2 log3^27 = 3 log2^1024 = 10 . . . lnx = loge^x Math.log(980) = ln980 = log2.718..... 2022. 9. 25.

[]CORS 캐슁하기 - 성능과 비용을 위해

https://news.hada.io/topic?id=7453&utm_source=slack&utm_medium=bot&utm_campaign=T8FPTUPJ7 CORS 캐슁하기 - 성능과 비용을 위해 | GeekNews CORS preflight 란 ?복잡한 요청을 보내기 전에 OPTIONS로 권한을 있는지 먼저 요청하는 것하지만 실제로는 대부분의 요청들이 이걸 필요로 함 (JSON/XML 바디가 있거나 크레덴셜을 포함하거나 등등 )이 news.hada.io CORS preflight이란 복잡한 요청을 보내기 전에 OPTIONS로 권한을 있는지 먼저 요청하는 것 하지만 실제로는 대부분의 요청들이 이걸 필요로 함 (JSON/XML 바디가 있거나 크레덴셜을 포함하거나 등등 ) 2022. 9. 23.

[Nextjs] Pre-rendering과 Data fetching

https://nextjs.org/learn/basics/data-fetching/blog-data Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org Data Fetching Overview getStaticProps() nextjs가 빌드타임에 'getStaticProps'가 props를 반환하면서 페이지를 pre-render할 거다. export async function getStaticProps(context) .. 2022. 9. 23.

티스토리툴바