본문 바로가기

전체 글69

JS - 프로미스 (Promise) Promise 비동기 함수를 동기 처리하기 위해 고안한 객체 비동기 작업이 완료된 이후에 다음 작업을 연결시켜 진행할 수 있다. 작업 결과 따라 성공 또는 실패를 리턴하며 결괏값을 전달받을 수 있습니다. ​ * Promise 자체는 동기이다 하지만 그 뒤의 then이 비동기로 동작하기 때문에 비동기 취급 // callback 패턴 function delay(sec, callback) { setTimeout(() => { callback("callback 패턴 " + new Date()); }, sec * 1000); } delay(1, (result) => { console.log(1, result); console.log("============================================.. 2021. 12. 9.
Node JS의 특성 1.이벤트 기반 ㄴ 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식 -이벤트의 예 :클릭, 네트워크 요청, 타이머 등 -이벤트 리스너: 이벤트를 등록하는 함수 -콜백함수:이벤트가 발생했을 떄 실행될 함수 2.논블로킹 I/O ㄴ 오래 걸리는 함수를 백그라운드로 보내서 다음 코드가 먼저 실행되게 하고 나중에 오래 걸리는 함수를 실행 -논블로킹 방식 하에서 일부코드는 백그라운드로 보내서 병렬로 실행 -일부코드: I/O 작업(파일 시스템 접근, 네트워크 요청), 압축, 암호화 등 -나머지 코드는 블로킹 방식으로 실행 ​ * I/O 작업이 많을때 노드 활용성이 극대화 됨 3.프로세스와 스레드 ㄴ 프로세스: 운영체제와 할당하는 작업의 단위, 프로세스 간 자원공유 X ㄴ 스레드: 프로세스 내에서 실행되는 작업.. 2021. 12. 9.
React - React Hook React vs React Hook Class Component - 많은 기능들을 제공 - 대신 코드가 길어지고 복잡해짐 - 성능이 상대적으로 낮음 import React, { Component } from "react" export default calss hi extends Component { render() { return ( hi lee! ) } } Functional Component - 한정된 기능들을 제공 - 대신 코드가 간단해짐 - 성능이 상대적으로 높음 import React, { Component } from "react" export default function hi() { return ( hi lee! ) } life cycle import React, { Component } .. 2021. 12. 9.
React - Redux props vs state props : 프로퍼티의 줄임말 ​부모 컴포넌트에서 자식 컴포넌트로만 보낼 수 있음 props 의 값은 바뀔 수 없음 값이 바뀌려면 부모 컴포넌트에서 값을 바꿔서 다시 내려줘야 함 state props처럼 부모 컴포넌트에서 자식 컴포넌트로 값을 내려주는게 아니라 그 자리에서 값을 바꾸고 싶다면 state로 하면 된다. state 의 data는 바뀔 수 있음 state 의 data가 바뀌면 re-render 됨 state = { example1:'', example2='', }; redux 흐름 (단방향) action : 상태를 알려준다 {type: '좋아요따봉' , articles: 13} reducer : 이전 state가 action을 받은 후에 바뀐 상태를 알려준다 {pr.. 2021. 12. 9.

티스토리툴바