비동기 SPA 비동기 데이터 흐름 결국, 프론트엔드는 백엔드의 데이터를 받은 후, 이를 가공하여 사용자에게 어떠한 방식으로 전달하느냐에 따라 달려있다고 볼 수 있으므로 궁극적으로 전체적인 프론트엔드 개발을 관통하는 주제라 생각하게 되었고 이를 주제로 정리하려 합니다. 가장 큰 장점으로는 SPA 자체라기보다는 화면과 데이터 서비스의 분리라고 할 수 있는데, 이렇게 되면 하나의 서버 기능을 통하여, 그 데이터를 가공하여 무수한 ... 데이터flowspa프론트엔드비동기flow 콜백과 처리 콜백이란, 말 그대로 나중에 실행되는 코드를 말합니다. 일반적인 화살표 함수에서, {} 부분이 콜백에 해당된다고 볼 수 있습니다. 이벤트 중심 언어인 자바스크립트는 다음과 같이 여러 함수를 입력했을 때, 결과를 기다리지 않고 다음 이벤트를 계속 실행합니다.(비동기적 특성) 그럴 때는 비동기적으로 처리됩니다. 콜백 함수 그래서, 하단의 코드를 입력했을 때 delay 시간이 더 짧은 second... nodejsJavaScript동기callback비동기JavaScript 0321 개발일지 오늘은 react hooks를 이용해 컴포넌트를 만드는 방법을 공부하고 혼자 실습해본 뒤 wepback을 설치했다. 지난주 react class로 구현한 부분을 hook로 다시 만들어보니 차이점을 잘 느낄 수 있었다. 다음 강의로 넘어가기 전 연습삼아 class로 만들었던 LikeButton에 count를 추가한 버튼을 hooks로 만들어보았다. 직접 만들어보니 setCount()함수 안에선... React HooksJavaScript정보처리기사 실기React-Class비동기ReactwebpackJavaScript [TIL] 프론트엔드 Day 12 2. 비동기 처리 비동기 처리란 어떤 코드를 즉시 처리할 수 없을 때, 처리가 끝날 때까지 기다리지 않고 그 동안 다음 코드를 우선 수행하는 처리방식. callback 방식은 비동기 처리한 결과물을 callback 함수에 넘겨서 다음 동작을 진행하는 비동기 처리방식이다. callback 방식은 callback hell이라는 용어가 존재할 만큼 비동기 처리한 데이터를 계속해서 비동기로 처리할 ... JavaScriptTIL비동기JavaScript Callback - 비동기 처리의 시작 작성자 본인의 첫 velog ( 실제적 내용 관련 ) 포스팅에는 Javascript 비동기 처리의 시발점이라고 할 수 있는 callback function (콜백 함수)에 관해 얘기해보고자 한다. "first class citizen (일급 시민)" 이란 자유롭게 거주하고 일을 할 수 있고, 국가간의 출입국에 있어 자유를 가지며, 투표의 자유또한 가질 수 있는 자유 시민을 의미한다. 즉 "숫... callbackasync-awiatpromise비동기JavaScriptJavaScript 비동기 in Thread 회사 프로젝트를 진행 중에 말뭉치들을 회사 내부에서 구현한 형태소 분석기로 분석해서 메모리에 올려야하는 일이 생겼다 대상 문장들은 14000개정도 되는 FAQ 질의 문장이었다 형태소분석기는 자바로 빌드되었고 jpype로 실행하도록 셋팅이 되었다 형태소 분석 함수에는 성능 향상을 위해서인지 비동기로 코드작성이 되어있는 상황이었다 14000개의 문장을 형태소 분석하는 시간은 2분 30초 정도였고... django비동기JupyterThreadJupyter TIL [JS / Node] 비동기 여기서 한 태그를 선택했을 때, '오늘 읽을만한 글'이라는 주제를 벗어난 곳까지 모두 로딩이 된다고 하면 어떤 점이 이득이라고 할 수 있을까? 여러개의 동작을 수행할 때 어떤 동작을 마친 시점이 다른 동작이 시작되는 시점이 되는 것을 동기적 실행이라고 한다. 즉 비동기적 실행이라는 말은 여러 개의 동작이 동시다발적으로 수행이 된다는 것이다. 그런데 만약 3개의 동작을 순서대로 실행을 시키고 ... 비동기비동기 TIL(41) 비동기(Asynchronous) 비동기 (Asynchronous) ✍🏻 모든 작업이 순차적으로 실행되며 어떤 작업이 수행 중이라면 다음 작업은 대기하게 된다. 1. setTimeout 함수📍 특정 함수의 실행을 원하는 시간만큼 뒤로 미루기 위해 사용하는 함수 2. setInterval 함수📍 특정 콜백을 일정한 시간 간격으로 실행하도록 등록하는 함수 1과 3이 출력되고, 약 2초 뒤에 2가 출력된 후 그 뒤로 계속 2초 간... TIL비동기TIL 모던 자바스크립트 복습 #3 React로 넘어가기 전에 빠르게 JavaScript를 복습해본다. 동기적 처리와 비동기적 처리에 대해 알아보자. 특정 함수가 끝난 다음에 어떤 작업을 처리하고 싶다면 callback함수를 파라미터로 전달해주면 된다. ✔️ callback 함수란 함수 타입의 값을 파라미터로 넘겨줘서, 파라미터로 받은 함수를 특정 작업이 끝나고 호출을 해주는 것이다. 비동기 작업을 다룰 때에는 callback... JavaScript동기비동기JavaScript TIL#41 JS) 자바스크립트의 비동기 암호화/복호화 : 바로 처리 되지 않고, 시간이 어느정도 걸리는 경우 작업 예약 : setTimeout을 사용하여 비동기 처리하는 경우 함수의 반환 값을 받은 다음 비동기 처리를 해야 하는 경우에 위와 같은 함수를 콜백으로 받아 비동기 처리를 할 수 있다. 이러한 무한콜백을 해결하기 위해 ES7에서는 Promise를 지원하고 ES8에서는 async / await를 지원한다. Promise는 ... TILJavaScript비동기JavaScript Chapter [ 비동기 ] 비동기적 (async) : 동시적, 병렬적으로 처리 동기적 (sync) : 순차적, 직렬적으로 처리 카페에서 커피를 주문할 때, 앞사람이 주문을 하고 주문한 커피를 다 제공한 다음, 다음 사람의 주문을 받는다면 동기적 처리 반대로 모든 사람의 주문을 한꺼번에 받고 커피가 완성되는 대로 사람들에게 커피를 제공한다면 비동기적 처리 [ Promise ] 프로미스의 3가지 상태(states) pen... 비동기비동기 TIL [React] 비동기 요청 처리 그렇다면 데이터는 어떤 컴포넌트에 위치해야할까? 컴포넌트는 컴포넌트 바깥에서 props를 이용하여 데이터를 마치 인자나 속성처럼 전달을 받는다. 즉 데이터를 전달하는 주체는 상위 컴포넌트(부모 컴포넌트)가 되는 것이다. 이러한 데이터 흐름 속에서 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지도 전혀 알 수가 없다. 변하는 값, 즉 상태(state)는 최소화시키는 것이 좋다. 아... React비동기React Callback, Promise 그리고 Async Await 아마 아래와 같이 printAll 함수를 실행시킬 때마다 랜덤으로 A, B, C가 출력이 되는 것을 확인할 수 있을 것이다. 개발자가 작성한 흐름대로 코드를 실행시키기 위해 callback 함수를 사용하여 처리할 수 있다. callback 함수를 원하는 시점에 실행시켜 첫 번째 함수 호출이 끝나면, 두 번째 함수를 실행시킬 수 있다. 위와 같이 콜백 함수를 이용하여 코드를 작성한다면 문자열 ... JavaScript비동기JavaScript 죽인 이유가 뭡니까?(동기,비동기) sychronous 동기적처리 : 순서대로 처리 Asychronous 비동기적처리 : 빨리 실행되는거 부터 처리 그리고 이 글은 나만 이해하기 위해서 만든글 먼저 작동되는걸 하고 오래걸리는건 나중에 한다. 이런 동작 방식이 비동기식 영어론 에이싱크로노로오수~~ ㅋㅋㅋ ㅇㅋ? 1.setTimeout(function(){},1000) 2.addEventListerner('click', 함수) 순... 동기비동기동기 [CS] fetch(네트워크 요청) Day-27 비동기 요청의 가장 핵심은 네트워크 요청이라고 볼 수 있습니다. 네트워크 요청 형태는 다양하지만 URL로 요청하는 경우가 많습니다. 이걸 가능하게 만들어주는 것이 fetch API 입니다. fetch API 특정 URL로부터 정보를 받아오는 역할을 합니다. 이 과정은 비동기로 이루어지기 때문에 시간이 걸릴 수 있습니다. blocking 발생 시 UX가 떨어지기 때문에 로딩 창을 띄우는 경우도... await네트워크 요청비동기이벤트 루프event loopasyncFetchFetch APIFetch
SPA 비동기 데이터 흐름 결국, 프론트엔드는 백엔드의 데이터를 받은 후, 이를 가공하여 사용자에게 어떠한 방식으로 전달하느냐에 따라 달려있다고 볼 수 있으므로 궁극적으로 전체적인 프론트엔드 개발을 관통하는 주제라 생각하게 되었고 이를 주제로 정리하려 합니다. 가장 큰 장점으로는 SPA 자체라기보다는 화면과 데이터 서비스의 분리라고 할 수 있는데, 이렇게 되면 하나의 서버 기능을 통하여, 그 데이터를 가공하여 무수한 ... 데이터flowspa프론트엔드비동기flow 콜백과 처리 콜백이란, 말 그대로 나중에 실행되는 코드를 말합니다. 일반적인 화살표 함수에서, {} 부분이 콜백에 해당된다고 볼 수 있습니다. 이벤트 중심 언어인 자바스크립트는 다음과 같이 여러 함수를 입력했을 때, 결과를 기다리지 않고 다음 이벤트를 계속 실행합니다.(비동기적 특성) 그럴 때는 비동기적으로 처리됩니다. 콜백 함수 그래서, 하단의 코드를 입력했을 때 delay 시간이 더 짧은 second... nodejsJavaScript동기callback비동기JavaScript 0321 개발일지 오늘은 react hooks를 이용해 컴포넌트를 만드는 방법을 공부하고 혼자 실습해본 뒤 wepback을 설치했다. 지난주 react class로 구현한 부분을 hook로 다시 만들어보니 차이점을 잘 느낄 수 있었다. 다음 강의로 넘어가기 전 연습삼아 class로 만들었던 LikeButton에 count를 추가한 버튼을 hooks로 만들어보았다. 직접 만들어보니 setCount()함수 안에선... React HooksJavaScript정보처리기사 실기React-Class비동기ReactwebpackJavaScript [TIL] 프론트엔드 Day 12 2. 비동기 처리 비동기 처리란 어떤 코드를 즉시 처리할 수 없을 때, 처리가 끝날 때까지 기다리지 않고 그 동안 다음 코드를 우선 수행하는 처리방식. callback 방식은 비동기 처리한 결과물을 callback 함수에 넘겨서 다음 동작을 진행하는 비동기 처리방식이다. callback 방식은 callback hell이라는 용어가 존재할 만큼 비동기 처리한 데이터를 계속해서 비동기로 처리할 ... JavaScriptTIL비동기JavaScript Callback - 비동기 처리의 시작 작성자 본인의 첫 velog ( 실제적 내용 관련 ) 포스팅에는 Javascript 비동기 처리의 시발점이라고 할 수 있는 callback function (콜백 함수)에 관해 얘기해보고자 한다. "first class citizen (일급 시민)" 이란 자유롭게 거주하고 일을 할 수 있고, 국가간의 출입국에 있어 자유를 가지며, 투표의 자유또한 가질 수 있는 자유 시민을 의미한다. 즉 "숫... callbackasync-awiatpromise비동기JavaScriptJavaScript 비동기 in Thread 회사 프로젝트를 진행 중에 말뭉치들을 회사 내부에서 구현한 형태소 분석기로 분석해서 메모리에 올려야하는 일이 생겼다 대상 문장들은 14000개정도 되는 FAQ 질의 문장이었다 형태소분석기는 자바로 빌드되었고 jpype로 실행하도록 셋팅이 되었다 형태소 분석 함수에는 성능 향상을 위해서인지 비동기로 코드작성이 되어있는 상황이었다 14000개의 문장을 형태소 분석하는 시간은 2분 30초 정도였고... django비동기JupyterThreadJupyter TIL [JS / Node] 비동기 여기서 한 태그를 선택했을 때, '오늘 읽을만한 글'이라는 주제를 벗어난 곳까지 모두 로딩이 된다고 하면 어떤 점이 이득이라고 할 수 있을까? 여러개의 동작을 수행할 때 어떤 동작을 마친 시점이 다른 동작이 시작되는 시점이 되는 것을 동기적 실행이라고 한다. 즉 비동기적 실행이라는 말은 여러 개의 동작이 동시다발적으로 수행이 된다는 것이다. 그런데 만약 3개의 동작을 순서대로 실행을 시키고 ... 비동기비동기 TIL(41) 비동기(Asynchronous) 비동기 (Asynchronous) ✍🏻 모든 작업이 순차적으로 실행되며 어떤 작업이 수행 중이라면 다음 작업은 대기하게 된다. 1. setTimeout 함수📍 특정 함수의 실행을 원하는 시간만큼 뒤로 미루기 위해 사용하는 함수 2. setInterval 함수📍 특정 콜백을 일정한 시간 간격으로 실행하도록 등록하는 함수 1과 3이 출력되고, 약 2초 뒤에 2가 출력된 후 그 뒤로 계속 2초 간... TIL비동기TIL 모던 자바스크립트 복습 #3 React로 넘어가기 전에 빠르게 JavaScript를 복습해본다. 동기적 처리와 비동기적 처리에 대해 알아보자. 특정 함수가 끝난 다음에 어떤 작업을 처리하고 싶다면 callback함수를 파라미터로 전달해주면 된다. ✔️ callback 함수란 함수 타입의 값을 파라미터로 넘겨줘서, 파라미터로 받은 함수를 특정 작업이 끝나고 호출을 해주는 것이다. 비동기 작업을 다룰 때에는 callback... JavaScript동기비동기JavaScript TIL#41 JS) 자바스크립트의 비동기 암호화/복호화 : 바로 처리 되지 않고, 시간이 어느정도 걸리는 경우 작업 예약 : setTimeout을 사용하여 비동기 처리하는 경우 함수의 반환 값을 받은 다음 비동기 처리를 해야 하는 경우에 위와 같은 함수를 콜백으로 받아 비동기 처리를 할 수 있다. 이러한 무한콜백을 해결하기 위해 ES7에서는 Promise를 지원하고 ES8에서는 async / await를 지원한다. Promise는 ... TILJavaScript비동기JavaScript Chapter [ 비동기 ] 비동기적 (async) : 동시적, 병렬적으로 처리 동기적 (sync) : 순차적, 직렬적으로 처리 카페에서 커피를 주문할 때, 앞사람이 주문을 하고 주문한 커피를 다 제공한 다음, 다음 사람의 주문을 받는다면 동기적 처리 반대로 모든 사람의 주문을 한꺼번에 받고 커피가 완성되는 대로 사람들에게 커피를 제공한다면 비동기적 처리 [ Promise ] 프로미스의 3가지 상태(states) pen... 비동기비동기 TIL [React] 비동기 요청 처리 그렇다면 데이터는 어떤 컴포넌트에 위치해야할까? 컴포넌트는 컴포넌트 바깥에서 props를 이용하여 데이터를 마치 인자나 속성처럼 전달을 받는다. 즉 데이터를 전달하는 주체는 상위 컴포넌트(부모 컴포넌트)가 되는 것이다. 이러한 데이터 흐름 속에서 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지도 전혀 알 수가 없다. 변하는 값, 즉 상태(state)는 최소화시키는 것이 좋다. 아... React비동기React Callback, Promise 그리고 Async Await 아마 아래와 같이 printAll 함수를 실행시킬 때마다 랜덤으로 A, B, C가 출력이 되는 것을 확인할 수 있을 것이다. 개발자가 작성한 흐름대로 코드를 실행시키기 위해 callback 함수를 사용하여 처리할 수 있다. callback 함수를 원하는 시점에 실행시켜 첫 번째 함수 호출이 끝나면, 두 번째 함수를 실행시킬 수 있다. 위와 같이 콜백 함수를 이용하여 코드를 작성한다면 문자열 ... JavaScript비동기JavaScript 죽인 이유가 뭡니까?(동기,비동기) sychronous 동기적처리 : 순서대로 처리 Asychronous 비동기적처리 : 빨리 실행되는거 부터 처리 그리고 이 글은 나만 이해하기 위해서 만든글 먼저 작동되는걸 하고 오래걸리는건 나중에 한다. 이런 동작 방식이 비동기식 영어론 에이싱크로노로오수~~ ㅋㅋㅋ ㅇㅋ? 1.setTimeout(function(){},1000) 2.addEventListerner('click', 함수) 순... 동기비동기동기 [CS] fetch(네트워크 요청) Day-27 비동기 요청의 가장 핵심은 네트워크 요청이라고 볼 수 있습니다. 네트워크 요청 형태는 다양하지만 URL로 요청하는 경우가 많습니다. 이걸 가능하게 만들어주는 것이 fetch API 입니다. fetch API 특정 URL로부터 정보를 받아오는 역할을 합니다. 이 과정은 비동기로 이루어지기 때문에 시간이 걸릴 수 있습니다. blocking 발생 시 UX가 떨어지기 때문에 로딩 창을 띄우는 경우도... await네트워크 요청비동기이벤트 루프event loopasyncFetchFetch APIFetch