전체 글

앞서 다뤘던 내용들에서는 이미 만들어진 Promise를 가져다 사용하였다. 이번에는 Promise를 직접 만들어서 사용해보자. new Promise 라는 키워드로 Promise를 새로 만들 수 있고, job1() 함수에서는 이 Promise를 리턴하도록 해줬다. Promise에는 Promise에서 실행된 작업이 성공했을 때와, 실패했을 때에 대한 콜백함수가 정의되어야 한다. 그리고 이 함수는 2개의 파라미터를 갖는데 하나는 성공했을 때 호출될 함수(resolve)이고, 다른 하나는 실패했을 때 호출될 함수(reject) 이다. resolve, reject 이름은 아무거나 설정 가능하지만 관습적으로 저렇게 적는다고 한다. 따라서 위 코드의 job1() 함수를 실행하면 setTimeout을 실행하는 함수가 ..

왼쪽과 오른쪽의 코드를 비교해보자. 왼쪽은 이전 글에서 다루었던 Promise를 사용하여 연쇄적으로 비동기 함수가 호출되는 코드이다. Promise를 리턴하는 timer()라는 함수가 호출되면 .then()을 통해 콜백함수 function()이 호출되고 이 함수는 다시 Promise 리턴해주는 timer() 함수를 리턴한다. 그러면 Promise를 반환하는 함수를 리턴했기 때문에 다시 .then()을 붙여서 Chaining이 가능해진다. 오른쪽은 이러한 왼쪽의 코드와 완전히 동일하게 동작하는 코드이고, async와 await라는 키워드를 사용하여 동기적인 방식으로 코드를 작성하지만 비동기적 처리를 할 수 있게 해준다. 오른쪽 코드를 살펴보면 비동기적으로 실행되는 함수들의 앞에는 await를 붙여줘야 한다..

Synchronous / Asynchronous ?? Synchronous (동기) -> 명령어의 순서대로 실행 위 코드의 출력은 차례대로 1 2 3 4 가 된다. Asynchronous (비동기) -> 명령어의 순서대로 실행되지 않음 위 코드의 출력은 1 2 4 3 이 된다. setTimeout(function(){console.log(3)}. 5000); 코드는 5초 뒤에 function() 함수를 실행시킨다. 이 때 console.log(4)는 setTimeout 코드를 기다리지 않고 먼저 실행된다. 아래의 그림을 살펴보자 왼쪽은 동기적(Synchronous)으로 실행되는 그림이고, 오른쪽은 비동기적(Asynchronous)으로 실행되는 그림이다. 동기적으로 실행될 경우, 하나의 프로세스가 다른 프..

자바스크립트에서는 변수가 함수가 될 수 있다. 그 밖에도 함수의 리턴값으로 함수가 올 수 있고, 함수의 인자로도 함수가 들어갈 수 있다. 위의 예시의 함수 val 처럼 다른 함수의 입력값으로 전달되어서 호출되는 함수를 Callback 함수 라고 한다. 자바스크립트에서 콜백함수가 사용되는 예시를 하나 살펴보자 아래 함수는 자바스크립트의 Array.prototype.filter() 함수이다. filter() 함수는 첫번째 파라미터로 함수를 받도록 되어있다. 이 때, 입력받는 callback 함수는 element들을 살펴보며 true를 반환하면 요소를 유지하고, false를 반환하면 요소를 버린다. filter() 함수의 사용 예시를 살펴보자. words 배열의 단어들 중 길이가 6보다 긴 단어들만 반환된다...

컴포넌트 (Component) : 화면에 나타나는 UI 요소 (= 재사용 할 수 있는 조립 블록) 컴포넌트는 단순히 UI 역할만 하는 것이 아니라 부모로부터 받은 속성(props)이나 자신의 상태(state)에 따라 표현이 달라지고 다양한 기능을 수행한다. 리액트 네이티브는 컴포넌트를 이용하여 화면을 구성한다. import React from 'react'; -> 리액트를 불러와서 사용. JSX는 React.createElement를 호출하는 코드로 컴파일되므로, 컴포넌트를 작성할 때 반드시 작성해야 하는 코드임 props -> props란 properties를 줄인 표현으로, 부모 컴포넌트로부터 전달된 속성값 혹은 상속받은 속성값을 말한다. -> 부모 컴포넌트가 자식 컴포넌트의 props를 설정하면 자..

React-Native 2015년 3월에 페이스북에 의해 공개된 오픈소스 프로젝트 사용자 인터페이스를 만드는 React(리액트) 에 기반을 두고 제작됨 웹 브라우저가 아닌 iOS와 안드로이드에서 동작하는 Native Mobile 애플리케이션을 만드는 자바스크립트 프레임워크 [ 장점 ] 작성된 코드 대부분이 플랫폼 간 공유가 가능해서 iOS, 안드로이드 두 플랫폼을 동시에 개발 가능 모바일 개발에 대한 지식이 없어도 자바스크립트만 알고 있으면 쉽게 시작 작성된 구성 요소들이 재사용 가능 [ 단점 ] 네이티브의 새로운 기능을 사용하는 데 오랜 시간이 걸림 유지보수의 어려움 잦은 업데이트 리액트 네이티브의 동작 방식 리액트 네이티브에는 자바스크립트 코드를 이용해 네이티브 계층과 통신할 수 있도록 연결하는 역할..

한 2주 정도 전부터 리액트 네이티브 프로젝트 작업을 하면서 ios 시뮬레이터를 작동시키면 5~10 이내로 맥북이 멈추고 재부팅 되는 현상이 나타나기 시작했다. 내 기억상으론 Xcode를 업데이트 하고 나서 이 문제가 시작됐거나 더 심해졌다. 항상 패턴이 똑같은데, 일단 화면이 다 멈추고 클릭해도 반응이 없다. 근데 마우스 포인터는 움직이는게 보인다. 그 상태로 30초~1분 정도가 지나면 갑자기 팬이 윙! 하고 컴퓨터가 꺼진다. 그 다음은 굉장히 기분 나쁜 메세지와 함께 맥북이 재부팅 됐다. (메세지는 your computer restarted because of a problem 어쩌고 였던것 같은데 여러 언어로 나오고 한국말은 없다. 빡쳐서 오류 사진도 안찍어놓음) 재시동 돼도 이상은 없었는데 계속 ..

리액트 네이티브 Drawer Navigation 공부를 하기 위해 Drawer 설치를 진행하고 예제 코드를 입력해 보려는데 const Drawer = createDrawerNavigator(); 코드를 추가하니까 이런 오류가 뜬다. reanimated 2 failed to create a worklet maybe you forgot to add reanimated's babel plugin https://github.com/software-mansion/react-native-reanimated/issues/2774 ERROR Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin? ·..

Docker Compose VS Docker Swarm ?? docker compose -> 동일 호스트에서 두 개 이상의 컨테이너를 운영 docker swarm -> 여러 호스트에서 다수의 컨테이너들을 운영(orchestrate), 필요에 따라 컨테이너의 수를 늘이고 줄이는 auto-scaling 기능을 수행 구체적으로 docker swarm이 무슨 일을 하는 걸까? -> 컨테이너들을 cluster하고 schedule하여 전체 컨테이너 클러스터를 하나의 가상 단일 컨테이너로 관리하고, 각 컨테이너의 상태를 모니터링하여 컨테이너 수를 각 호스트에서 늘리거나 줄이며(auto-scaling) 운영하는 도구 But, 지금은 docker swarm 보다는 구글의 쿠버네티스가 더 많이 쓰인다고 한다. [ Swar..

Monolithic App VS Microservices 본격적으로 docker compose에 대해 설명하기에 앞서 Monolithic App과 Microservices 두 가지 소프트웨어 모델을 서로 비교해 보도록 하겠다. Monolithic App (모놀리식 애플리케이션) : 모든 기능이 단일 프로그램 안에 구현된 애플리케이션 모놀리식 애플리케이션의 특징은 다음과 같다. 비현실적, 비효율, 매우 낮은 생산성 app의 크기가 커지고, app의 일부분만 업데이트 해도 전체 app이 재배포 되어야 함 bug가 발생하면 전체 app에 영향을 미침 새로운 기술을 채택하기 어려움 ==> 통합된 구조로 인해 많은 단점을 갖고 있기 때문에 소프트웨어공학적으로 좋지 않은 모델이다. 이러한 단점을 해소시키기 위해 등..