S3 버킷에서 파일을 일정 기간 보관 후 자동으로 삭제하는 기능이 필요했다. AWS 기능 내에서 해결하려고 하니 S3 버킷의 수명 주기 규칙과 S3 트리거를 사용하여 람다 함수를 호출하는 방법 두 가지가 있었다.S3 버킷 수명 주기 규칙장점 : S3 버킷 옵션에서 쉽게

프로젝트에 CI-CD가 구축되어 있어 빌드 시간 때문에 스트레스를 받는 일은 없었다. 하지만 코드를 수정했을 때 devServer를 통해 리빌드 되는 시간이 3~6초 정도 소요됐고 새로고침도 일어나 state 값까지 날아가니 생산성이 많이 떨어진다는 생각이 들었다. 그

함수는 하나의 단위로 실행되는 문의 집합이다.모든 함수에는 바디가 있고 바디는 함수를 구성하는 문의 모음이다.예제는 함수 선언(function declaration)의 한 예이고 sayHello라는 함수를 선언했다.함수를 선언하기만 해서는 바디가 실행되지 않고 함수를

표현식(expression)은 값으로 평가될 수 있는 문이다.두 번째 행에는 두 개의 표현식이 있다. 첫 번째 표현식은 3 \* 5 곱셈 표현식이고 두번째 표현식은 결과 15를 변수 x에 할당하는 표현식이다.표현식이 값이 되는 것이라면 연산자는 값을 만드는 행동이라는

리터럴과 변수, 상수, 데어터 타입 리터럴(literal)과 변수(variable), 상수(const), 데어터 타입에 대해 알아 보자. 변수 변수란 간단히 말해 이름이 붙은 값으로, 언제든 바뀔 수 있다. > 변수 currentTempC를 선언(할당) 하고 초기값을

정적 타입 언어를 사용할 때의 단점은 타입을 정의하는 데 시간과 노력이 많이 들기 때문에 생상선이 저하될 수 있다. 하지만 타입스크립트에서는 타입 추론과 타입 가드를 통해 코드를 최소화 할 수 있다.명시적으로 타입 코드를 작성하지 않아도 타입스크립트가 타입을 추론할 수

타입 호환성 타입 호환성은 어떤 타입을 다른 타입으로 취급해도 되는지 판단하는 것이고 정적 타입 언어의 가장 중요한 역할은 타입 호환성을 통해 컴파일 타임에 호환되지 않는 타입을 찾아내는 것이다. 숫자와 문자열의 타입 호환성 > 숫자와 문자열 타입은 서로 포함 관계에

자바스크립트는 동적 타입 언어이고 동적 타입 언어는 변수의 타입은 런타임에 결정된다. 이와 반대인 정적 타입 언어도 존재하고 정적 타입 언어는 변수의 타입이 컴파일 타임에 결정이된다. 정적 타입 언어인 타입스크립트에 대해 알아보자.타입에 대한 고민을 하지 않아도 되므로

여러 개의 메뉴 중 내가 선택한 메뉴에 특정 스타일을 주고 싶을 때 NavLink를 사용하면 쉽게 구현 가능하다.URL과 to에 지정한 path가 일치할 때 activeStyle과 activeClassName이 활성화된다.NavLink 태그의 activeClassNam

리덕스(reudx)는 자바스크립트를 위한 상태 관리 프레임워크이고 리덕스를 사용하는 이유는 다음과 같다.같은 상태값을 다수의 컴포넌트에서 필요로 할 때페이지가 전환되어도 데이터는 살아 있어야 할 때알림창, 장바구니 같은 전역 컴포넌트의 상태값을 관리할 때부모 컴포넌트

react에서 네이버 지도 api를 통해 지도를 구현하는 데 어려움을 겪어서 사용법을 남겨본다.회원가입 및 등록은 건너뛰고 사용법에 대해 알아보자.index.html에 script를 작성하고 YOUR_CLIENT_ID에 등록한 aplication의 cilient id를

generator 제너레이터(generator)는 함수의 실행을 중간에 멈추고 재개할 수 있는 기능이다. 실행을 멈출 때 값을 전달할 수 있기 때문에 반복문에서 제너레이터가 전달하는 값을 하나씩 꺼내서 사용할 수 있고 이는 배열이 반복문에서 사용되는 방식과 같다. 값을

async await는 promise를 조금 더 쉽고 가독성 좋게 작성하기 위해 ES8에 추가된 기능이다.async를 통해 정의된 함수는 항상 프로미스를 반환하고 따라서 함수 호출 후 then 메서드를 사용할 수 있다.async는 비동기 처리할 함수 앞부분에 await

비동기 프로그래밍 promise 프로미스를 사용하면 비동기 프로그래밍을 할 때 동기 프로그래밍 방식을 코드를 작성할 수 있다. 콜백 패턴의 문제 ES6에 프로미스가 추가 되기 전에는 콜백(callback) 패턴을 많이 사용했었다. 하지만 콜백 패턴은 콜백이 조금만 중

단축 속성명은 객체 리터럴 코드를 간편하게 작성할 목적으로 만들어진 문법이다.객체의 속성값 일부가 이미 변수로 존재하면 간단하게 변수 이름만 적어주면 된다.계산된 속성명은 객체의 속성명을 동적으로 결정하기 위해 나온 문법이다.\[] 안에 변수, 계산식 등을 이용해 속성

1. React.memo() 컴포넌트가 동일한 props로 동일한 결과를 렌더링한다면 React.memo를 통해 불필요한 리렌더링을 방지해 성능 최적화를 할 수 있다. 컴포넌트가 React.memo()로 래핑 되면 결과를 메모이징(Memoizing) 하기 때문에 pro

인스턴스를 생성 후 배포하는 방법에 대해 알아보도록 하자.위와 같이 aws에서 발급받은 키 페어를 통해 서버를 열수 있다.해당 키 페어의 권한이 낮을 경우 에러가 발생할수 있는데 위의 명령어로 키 페어의 권한을 수정하면 된다.우분투 서버에는 설치되어 있는게 아무것도 없

ES5까지의 자바스크립트에서는 var를 이용해서 변수를 정의했고 그게 유일한 방방법이었다. ES6에서는 const와 let을 이용하는 새로운 변수 정의 방법이 생겼고 var가 안고 있는 문제들을 해결하였다.var의 경우 정의된 변수가 함수 스코프를 가진다. 스코프(sc

useEffect는 class 생명주기 메서드인 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것이다.이중 컴포넌트가 사라질 때(componentWillUnmount) 특정 작업을 처리하는 방법에 대

# 클래스 자바스크립트는 프로토타입 기반 언어이기 때문에 상속 개념이 존재하지 않았다. 하지만 클래스 기반의 다른 언어에 익숙한 많은 개발자들의 혼란, 클래스와 비슷하게 동작하게끔 흉내 내는 기법이 탄생하는 등 이러한 니즈에 따라 ES6에 클래스 문법이 추가되었다.