콜라사이다환타

📌자바스크립트의 비동기 (1)SetTimeout Web API의 한 종류인 setTimeout() 함수를 통해 비동기 처리를 적용해보자. HTML 삽입 미리보기할 수 없는 소스 코드를 살펴보면 동기적으로 코드가 진행되면서 콘솔창에 보이는 1,2,3 이라는 결과를 얻게 된다. 이제 중간의 2를 비동기적으로 처리하면 아래와 같다. HTML 삽입 미리보기할 수 없는 소스 아까와 같이 순차적으로 1,2,3 이라는 결과가 나오지 않고 1,3,2라는 결과를 얻게 되었는데, 이는 바로 setTimeout()이라는 비동기 함수를 통해 2를 2초 뒤에 출력하게 하는 명령을 주어서 2가 출력될 때까지 3이 기다리지 않고 먼저 출력된 후에 2초가 지나서 2가 출력되었기 때문이다. (2)콜백함수 콜백함수란 다른 코드의 인수로..

📌자바스크립트의 비동기 자바스크립트는 대표적인 싱글 스레드 언어이다. 현재 많은 컴퓨터들은 여러개의 CPU 코어를 가지고 있기 떄문에 한 번에 여러가지의 일을 수행할 수 있다. 하지만 여러가지의 일을 수행하려면 멀티스레드를 지원하는 프로그램 언어일 때 가능하다. 스레드1: 작업A -> 작업B -> 작업C 이러한 면에서 JS는 아무리 CPU코어를 많이 가지고 있더라도 싱글 스레드 언어이기 때문에 한가지의 작업이 끝난후에 다음 작업을 수행할 수 있다. 하나의 작업만 수행할 수 밖에 없는 자바스크립트 동작을 여러 작업이 동시에 일어나는 것처럼 보이게 하는 것이 이벤트 루프라는 개념을 통해서 동시성을 구현하는 것이다. 비동기로 동작하는 핵심요소는 자바스크립트 엔진이 아니라 브라우저 또는 node.js가 지원하는..

📌SPA 와 다른 점 클라이언트 사이드 렌더링(CSR)인 vue SPA에서의 데이터 호출 방식은 아래와 같다. {{ user }} created( ) 라이프사이클 훅을 이용하여 컴포넌트가 생성되자마자 서버에 데이터를 요청해 받아온 값을 화면에 표시하는 코드입니다. 이때 서버에 데이터를 요청하는 시점은 브라우저에서 Vue.js 코드가 화면의 DOM을 구성하고 스크립트를 실행하는 시점이다. CSR과 SSR의 차이점에서도 볼 수있지만 CSR은 빈 화면을 브라우저가 받아 화면에 뿌릴 요소와 데이터를 모두 브라우저에서 구성하기 때문에 위와 같은 코드가 가능하다. 하지만, nuxt는 서버에서 페이지의 내용을 모두 그려서 브라우저로 가져가야 한다. 그럼 어떻게 해야할까? 📌NUXT의 REST API 호출 방식 SPA..

서버 사이드 렌더링이란 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. vue SPA을 SSR의 반대인 CSR방식입니다. 이 글에서는 CSR과 SSR 방식의 차이점을 살펴보고 SSR의 장단점을 분석해보도록 하자 📌CSR 예를 들어 vue.js 를 처음 환경설정한 후 npm run server를 해보면 서버에서 넘겨받은 HTML 코드에 body 태그 본문에 밖에 없지만 화면에는 welcome To Your Vue.js App 텍스트와 이미지가 있다. 이 텍스트와 이미지는 모두 클라이언트(브라우저)에서 동작한 vue.js 라이브러리가 그려준 것이다. 즉 브라우저에서 화면의 결과를 그려낸 것이다. 📌SSR과 CSR의 차이점 1)웹 페이지를 로딩하는 시간 웹 페이지 로..

📌Nuxt란? nuxt.js는 SSR프레임워크으로 Vue.js로 빠르게 웹을 제작할 수 있게 도와주는 프레임워크입니다. 웹 애플리케이션을 제작할 때 필요한 Vuex, router, Axios와 같은 라이브러리들을 미리 구성하여 SPA(Single Page Application), SSR(Server Side Rendering),정적 웹 사이트(Static Cenerated Website)를 쉽게 제작할 수 있습니다. SPA : "서버"에서 브라우저로 빈 HTML을 던진다. 이벤트를 잡아서 화면을 바꿔준다 서버로 가지않고 이벤트로 화면을 바꿔준다. SSR : 페이지를 뒤쪽에서 서버에서 url로 요청을 했을때 페이지를 다 그려서 원본파일 그대로 보내준다. 📌Nuxt의 장점 nuxt로 개발했을 때의 장점은 다..

1)프로세스 프로세스는 메모리에 올라갈 때 운영체제로부터 시스템 자원을 할당받는다고 언급했었다. 이 때 운영체제는 프로세스마다 각각 독립된 메모리 영역을, Code/Data/Stack/Heap형식으로 할당해 준다. 각각 독립된 메모리 영역을 할당해 주기 떄문에 프로세스는 다른 프로세스의 변수나 자료에 접근할 수 없다. 이와 다르게 스레드는 메모리를 서로 공유할 수 있다. 이에 대해 더 자세히 설명하자면, 프로세스가 할당받은 메모리 영역 내에서 stack 형식으로 할당된메모리 영역은 따로 할당받고, 나머지 Code/Data/Heap 형식으로 할당된 메모리 영역을 공유한다. 따라서 각각의 스레드는 별도의 스택을 가지고 있지만 힙, 메모리는 서로 읽고 쓸 수 있게 된다. (스레드들이 프로세스의 Code/Dat..