FrontEnd94 [JavaScript] 자바스크립트 비동기 처리 비동기 프로그래밍의 개념 비동기적 일반적으로 주어진 프로그램의 코드는 한 번에 한 가지만 발생하면서 곧바로 실행된다. 함수가 다른 함수의 결과에 의존하는 경우 다른 함수가 완료되고 반환될 때까지 기다려야하므로, 전체 프로그램이 중지된다. (동기적) Blocking Code 비동기 기술은 특히 웹 프로그래밍에서 매우 유용하다. 웹 앱이 브라우저에서 실행되고 브라우저에서 제어를 반환하지 않고 큰 크기의 코드를 실행하면 브라우저가 정지된 것처럼 보일 수 있다. 이것을 Blocking이라고 한다. 브라우저는 웹 앱이 프로세서의 제어를 반환할 때까지 계속해서 사용자 입력을 처리하고 다른 작업을 수행하지 못하도록 차단된다. 스레드 스레드는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 하나의 과정으로, 각.. 2022. 1. 5. [JavaScript] 이벤트 버블링과 캡처링, 그리고 이벤트 위임 버블링(Bubbling) 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. FORM DIV P 가장 안쪽의 를 클릭하면 p -> div -> form 순서로 alert창이 뜬다. 이런 흐름을 "이벤트 버블링"이라고 부른다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문이다. 거의 모든 이벤트는 버블링된다. focus 이벤트와 같이 버블링 되지 않는 이벤트도 있다. 버블링 되지 않는 이벤트의 종류에 대해서는 아래에서 설명한다. 몇몇 이벤트를 제외하곤 대부분의 이벤.. 2022. 1. 4. [JavaScript] 4가지의 바인딩과 화살표 함수 JavaScript에서의 this JavaScript에서 this는 자기 자신을 가리키지 않는다. JavaScript에서 함수는 모두 객체이기 때문에 내장된 프로퍼티, 메서드를 가질 수 있다. 따라서 특정 상태값을 유지/접근하기 위해 함수 내부에서 this를 사용할 것이다. 이러한 방법도 가능하지만, this를 이해하지 못하고 사용하면 잘못된 결과를 얻을 수 있다. 아래 예시를 참고하자. function foo(num) { console.log("foo: " + num); this.count++; } foo.count = 0; for(let i = 0; i < 10; i++) { if(i < 5) { foo(i); } } console.log(foo.count); console.log(count); //.. 2022. 1. 4. 쿠키 vs 세션 vs 웹 스토리지(로컬 스토리지, 세션 스토리지) HTTP 프로토콜의 한계를 보안하기 위해 쿠키 또는 세션을 사용한다. 기본적으로 HTTP 프로토콜 환경은 비연결지향(connectionless), 무상태(stateless)한 특성을 가지기 때문에 요청만으로 서버는 클라이언트를 구별할 수 없다. 비연결성지향(connectionless) HTTP는 먼저 클라이언트가 요청을 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 응답을 보내고 TCP/IP 연결을 끊는 특성이다. HTTP 1.1에서는 헤더에 keep-alive라는 값을 줘서 커넥션을 재활용한다. 무상태(stateless) 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보를 유지하지 않는 특성이다. 쿠키(Cookie) 클라이언트(브라우저)에 저장되는 키와 같이 들어있는 작은 파일이다. 클.. 2022. 1. 2. [React.js] React checkbox 에러 Warning Message Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. Warning Message가 발생하는 이유 onClick 핸들러와 checked 속성을 설정하는 코드에서 위와 같은 에러 메시지가 발생한다. 해결방법 1. onClick 핸들러 대신에 onChange 핸들러를 사용한다. 2. onClick 매서드와 함께 readonly 키워드를 사용.. 2021. 12. 6. [React Native] React Native란? 리액트 네이티브에 앞서 기본 모바일 앱이란? 기본 모바일 앱은 운영체제(Android 또는 iOS) 용으로 제작된 앱이다. iOS에서 네이티브 앱을 빌드할 때는 보통 Objective-C/Swift 개발 언어를 사용하고, Android에서는 Java/Kotlin을 사용한다. 규모가 큰 회사에서는 Android 개발자와 iOS 개발자 그리고 웹 개발자를 구분하여 두는 것이 큰 부담이 되지는 않을 것이다. 하지만 신생 스타트업이나 규모가 크지 않은 프로젝트를 진행하는 회사라면? 리액트 네이티브는 JavaScript 언어로 앱 개발을 시작할 수 있다. 리액트 네이티브란? Native UI Element를 사용하여 Android 및 iOS 앱을 개발할 수 있는 크로스 플랫폼 앱 개발 프레임워크이다. JavaSc.. 2021. 12. 2. 이전 1 ··· 6 7 8 9 10 11 12 ··· 16 다음 반응형
