[JavaScript] Callback 과 Promise
콜백함수를 이용하면 자바스크립트의 비동기 처리의 특성에도 원하는 시간에 원하는 값을 얻어올 수 있다. 하지만 콜백 패턴은 콜백 지옥으로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 한계가 있다는 단점이 있다. 이를 해결하기 위해 ES6에서는 비동기 처리를 위한 패턴으로 프로미스(Promise
)를 도입하였다.
Front-End Developer
콜백함수를 이용하면 자바스크립트의 비동기 처리의 특성에도 원하는 시간에 원하는 값을 얻어올 수 있다. 하지만 콜백 패턴은 콜백 지옥으로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 한계가 있다는 단점이 있다. 이를 해결하기 위해 ES6에서는 비동기 처리를 위한 패턴으로 프로미스(Promise
)를 도입하였다.
React
로 클론코딩을 할때 아이콘의 경우는 Font Awesome
을 자주 사용하였는데 이번 기회에 간략하게 사용법에 대해 정리해본다.
Vue.js
는 React
와 가장 유사하지만 React
보다는 좀 더 많은 사람들이 접근하기 쉽도록 제작된 자바스크립트 프레임워크이다. Vue.js
의 창시자인 에반은 Angular
의 필수적인 요소들만 가지고 화면을 구현하기 시작했고, 이를 오픈 소스화하고 많은 사람들이 참여하여 기능을 점차 붙여나가면서 Angular
의 양방향 데이터 바인딩과 React
의 단방향 데이터 흐름의 장점을 모두 결합한 프레임 워크로 탄생 하였다.
정규표현식은 일정한 규칙을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어이다. 정규 표현식은 패턴과 플래그로 구성된다. 패턴은 일정한 규칙을 표현하기 위해, 플래그는 검색 방식을 설정하기 위해 사용한다.
GitHub READEME.md 에 기술블로그 최신 글을 자동으로 가져오고 READEME에 자동 작성되도록 하는 방법에 대해 간단히 정리하였다.
이벤트가 발생할때마다 반복문을 실행하는 함수나 API 로직이 호출되는 경우 비용적인 문제가 발생할 뿐 아니라 최적화에도 좋지 않다.
이런 경우 사용하는 Debounce
에 대해 알아보자.
dangerouslySetInnerHTML
은 브라우저에 DOM에서 innterHTML
을 사용하기 위한 React의 대체 방법이다. 일반적으로 코드에서 HTML을 설정하는 것은 XSS 공격에 쉽게 노출될 수 있기 때문에 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML
을 작성하고 __html
키로 객체를 전달해주어야 한다.
클라이언트 컴퓨터와 서버 컴퓨터는 어떻게 통신을 하는 걸까?
클라이언트와 서버는 수많은 노드의 집합인 인터넷 망에 의해 연결이 된다. 클라이언트와 서버는 IP주소를 부여받고, 수많은 노드를 지나 이 IP를 찾아 패킷이라는 통신 단위로 데이터를 주고 받는다.
하지만 IP만으로도 통신을 할 경우 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷을 전송하고 패킷이 순서대로 가지 않아 패킷 전달 순서 문제 등이 발생할 수 있다. 이를 보완해주는 것이 TCP이다.
자바스크립트의 모든 값은 타입이 있다. 타입 변환이란 이러한 타입을 변환시키는 것을 말하는데 개발자가 의도적, 명시적으로 타입을 변환시키는 경우를 ‘명시적 타입 변환’이라 하고 개발자 의도와는 상관없이 자바스크립트 엔진에서 암묵적으로 타입을 변환시키는 것을 ‘암묵적 타입 변환’ 혹은 ‘타입 강제 변환’이라고 한다.
부수 효과를 없애고 순수 함수를 만들어 모듈화 수준을 높이는 프로그래밍 패러다임
2차 Project 회고
개인 프로젝트를 진행하면서 실제 서비스는 어떻게 구동되는지 궁금했고, 직접 프론트엔드부터 백엔드까지 구현해보기로 마음먹었다.
아래는 백엔드 서버를 AWS EC2를 통해 배포하는 방법에 대해 간략히 설명하겠다.
GitHub 레포지토리에 작성한 코드를 무료로 배포하는 방법을 알아보겠다.
문자열이 공백인지 체크하는 함수
검색창 구현에 필요한 로직
1차 Project 회고
자바스크립트에서 에러가 발생하면 코드는 멈추게 되고, 콘솔에 에러가 출력된다. 하지만 try...catch
문법을 사용하면 스크립트가 죽는 것을 방지하고, 에러 상황을 잡아 예외처리를 할 수 있게 한다. 기본적인 형태는 두 블록으로 구성되며 예시 코드는 아래와 같다.
깊은 복사와 얕은 복사에 대해 알아보겠다. 이 글의 초반 내용은 이전 포스팅의 (원시 타입과 참조 타입의 차이)과 맥락이 비슷하며, 위 포스팅은 원시 타입과 참조 타입의 차이점이라면 아래는 참조 타입의 깊은 복사하는 방법에 대해 알아보도록 하겠다.
ECMAScript6(2015)에서 새로 추가된 전개연산자(Spread Operator)란 객체나 배열의 값을 하나 하나 넘기는 용도로 사용할 수 있다. 전개연산자를 사용하는 방법은 점 세개(…)를 붙이면 된다.
중첩함수에서 내부함수가 외부함수의 환경을 기억하는것을 클로저라고 한다.