profile
늘 한결같이 꾸준히
post-thumbnail

[JavaScript] 함수

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

2022년 3월 1일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 표현식과 연산자

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

2022년 2월 27일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 리터럴과 변수, 상수, 데어터 타입

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

2022년 2월 21일
·
0개의 댓글
·
post-thumbnail

[TypeScript] 타입 추론, 타입 가드

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

2022년 2월 9일
·
0개의 댓글
·
post-thumbnail

[TypeScript] 타입 호환성

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

2022년 2월 8일
·
0개의 댓글
·
post-thumbnail

[TypeScript] 타입스크립트 기본 타입

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

2022년 2월 6일
·
0개의 댓글
·
post-thumbnail

[React] NavLink

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

2022년 1월 27일
·
0개의 댓글
·
post-thumbnail

리덕스로 상태 관리하기

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

2022년 1월 21일
·
0개의 댓글
·
post-thumbnail

[React] 네이버 지도 api 사용하기

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

2022년 1월 17일
·
2개의 댓글
·
post-thumbnail

[JavaScript] generator

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

2022년 1월 11일
·
0개의 댓글
·
post-thumbnail

[JavaScript] async await

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

2022년 1월 8일
·
0개의 댓글
·
post-thumbnail

[JavaScript] promise

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

2022년 1월 5일
·
0개의 댓글
·
post-thumbnail

[JavaScript] ES6에서 객체와 배열에 추가된 문법

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

2022년 1월 3일
·
0개의 댓글
·
post-thumbnail

[React] 리액트 성능 최적화

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

2021년 12월 30일
·
0개의 댓글
·
post-thumbnail

AWS EC2 배포

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

2021년 12월 29일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 변수를 정의하는 방법

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

2021년 12월 28일
·
0개의 댓글
·
post-thumbnail

[React] useEffect cleanup

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

2021년 12월 26일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 클래스

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

2021년 12월 4일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 클로저

클로저(Closure)는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성이고 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상을 말한다.6번째 줄에서 inner 함수

2021년 11월 22일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 콜백 함수

콜백 함수는 다른 코드에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다.timer 변수에는 setInerval의 ID 값이 담긴다. setINterval에 전달한 첫 번째 인자인 cbFunc 함수(이 함수가 곧 콜백 함수이다)는 0.3초마다 자동으로 실행될 것

2021년 11월 19일
·
0개의 댓글
·