본문 바로가기

전체 글61

REST와 GraphQL REST: - 서버가 브라우저에게 제공하는 인터페이스를 사용하는 방법. 서로 다른 웹 어플리케이션이 공통으로 사용 가능. - 리소스 기반 ( 예: /users/10 ) - 리소스에 대한 작업은 해당 URL에 대한 HTTP 요청들로 이루어진다. 상황 #1 소셜 미디어 기능이 있는 어플리케이션. 블로그 리스트를 보여주고 싶은데, 내가 팔로우하는 블로그 중에서 유저들이 코멘트를 남긴 글만 보고 싶은 경우 - HTTP 요청 여러번 해야함 - 불필요한 데이터도 받게 됨 - 브라우저 코드 복잡해짐 GraphQL: - 브라우저의 코드가 원하는 데이터에 대한 query를 작성하고, 이를 HTTP POST 요청으로 API로 보내기. - 모든 GraphQL 쿼리는 동일 주소로 POST 된다. query FetchBlogs.. 2021. 3. 8.
Class: constructor에서 async await 이번 데브매칭에서 내가 하려고 했던 가장 이상한 짓은 클래스에 async await로 constructor를 만드는 것이였다. 저렇게 하면 리액트의 componeneDidMount를 구현할 수 있을 것이라고 생각했다. 하지만 그것은 불가능한 일이였고, 안타깝게도 스택오버플로우에는 나같은 짓을 하려는 사람이 적지 않았다. Q. Is it bad practice to have a constructor function return a Promise? 답변: 맞다. constructor는 클래스의 인스턴스를 생성하고 초기화하는 일만 해야한다. constructor의 역할은 데이터 구조와 모든 인스턴스 프로퍼티를 세팅할 뿐, 다른 일을 수행하는 게 아니다. 가급적 사이드 이펙트가 없는 순수 함수여야 한다. 어떤 .. 2021. 3. 8.
배열 Array: 루프 라우쉬마이어 박사님의 블로그 글을 읽고. - for - for-in - .forEach( ) - for-of (박사님 픽) 1. for + 여러 일 할 수 있음, 첫 엘리먼트부터 시작할 필요 없을 때 유용 - 번거로움 2. for-in + - 배열의 키를 루프. 심지어 키는 숫자가 아니라 문자열. 상속된 키도 순회함. 3. .forEach( ) + ES5. 엘리먼트와 인덱스 둘다 확인 가능. 화살표 함수 OK. - 이런 루프의 "body"는 await 쓸 수 없음 - for에서는 break 사용 가능하지만 .forEach( ) 불가능 (대안: some) 4. for-of + ES6. 배열 엘리먼트 순회. await 사용 가능( for-await-of ). break, continue OK. + itera.. 2021. 3. 8.
중첩된 async await 문제점: 정신차려보니 끝없이 async await를 쓰고 있다. 중첩된 async await를 어떻게 해결할 것인가. 스택오버플로우에서 유명한 질문을 하나 찾았다. 질문: forEach로 async await를 호출해보니 작동은 하지만 왠지 수상쩍어보여 이렇게 써도 되냐고 물어봄 import fs from 'fs-promise' async function printFiles () { const files = await getFilePaths() // Assume this works fine files.forEach(async (file) => { const contents = await fs.readFile(file, 'utf8') console.log(contents) }) } printFiles() .. 2021. 3. 8.
Fetch API 보통 axios를 쓰지만 그래도 fetch를 쓴다면 const response = await fetch( url ) response 객체 프로퍼티 - headers - ok ( 200 - 299 사이면 true ) - status - statusText - redirected ... - body 메서드 - json( ) ... // Function to do an Ajax call const doAjax = async () => { const response = await fetch('Ajax.php'); // Generate the Response object if (response.ok) { const jsonValue = await response.json(); // Get JSON value fr.. 2021. 3. 5.
Array-like objects, NodeList, HTMLCollection Array-like objects - 인덱스로 접근 가능하며, length 속성이 존재 - Array.prototype을 상속하지 않는다 - 배열의 네이티브 메소드는 쓸 수 없다 - HTMLCollection, NodeList, arguments ... 배열 메소드를 사용하고 싶다면 - Array.prototype.slice.call(arguments) - Array.from( ) HTMLCollection - getElementsBy..., element.children 으로 리턴되는 객체 - 유사 배열 객체. forEach( ) 메서드 사용 불가 - [ ... collection].map( ), 혹은 Array.from(collection).map( ) - 라이브 콜렉션 NodeList : query.. 2021. 3. 4.
배열 Array: 아이템 추가 및 삭제, flat( ) 아이템 넣고 빼기 - includes( string ) : 포함했는지 확인 - shift, unshift, pop, push : 앞+, 앞-, 뒤-, 뒤+ flat an arrray Array.prototype.flat() Array.prototype.concat() + spread operator (…) Array.prototype.concat () + Function.prototype.apply() [ ].concat.apply([], [1, [2], [3, [[[4]]]]])) = [].concat(1, [2], [3, [[[4]]]]) func.apply(thisVal, argsArray) 은 thisVal에 설정된 this로 + argsArray 배열의 매개변수로 func( )를 호출 새로운 배.. 2021. 3. 3.
Intersetion Observer API 타겟 요소와 상위 요소( or document viewport ) 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법. 요소의 가시성, 두 요소의 상대적인 가시성을 탐지하는 일 필요성 - 페이지 스크롤할 때, 컨텐츠를 지연로딩으로 불러오게 하기 위해 - 페이지를 스크롤할 때, 더 많은 컨텐츠 로드 및 렌더링 ( 페이지네이션 ) - 광고 수익 계산 - 사용자에게 보일 때만 발생하는 작업들 page scroll은 모든 요소가 메인 스레드에서 실행되기 때문에 성능 문제 발생 가능성 농후 IO API - 감시 요소가 다른 요소에 들어가거나 나갈 때, 겹치는 부분이 변경될 때 콜백 함수가 실행된다. - 사이트는 요소 교차를 지켜보기 위해 메인 스레드 사용할 필요 X. 비동기로 실행. 메소드 In.. 2021. 3. 1.
Redux Form 리듀서 : formReducer _ 리덕스 액션으로 인해 어플리케이션에서 일어나는 변화를 리덕스 스토어에 업데이트하라고 지시하는 함수 HOC : reduxForm _ config 객체를 받아서 새로운 함수를 반환. form 컴포넌트를 감싸고, 액션의 디스패치에 유저 인터랙션을 바인딩 컴포넌트 : _ 위에서 HOC로 감싸진 form 컴포넌트 내부의 컴포넌트. redux-form 로직에 input 컴포넌트를 연결하는 데 쓰임 Form 리듀서 _ 우선, 스토어에 formReducer를 연결한다. 내 모든 폼 컴포넌트와 연결된다. Form 컴포넌트 _ 폼 컴포넌트를 스토어와 연결하려면 해당 컴포넌트를 reduxForm( )으로 감싸면 된다. submit 프로세스를 핸들링하는 함수와 form state에 관한 p.. 2021. 2. 21.
Brad Westfall, React: "mount" vs "render" 🔹 렌더링 : 함수 컴포넌트가 호출될 때(클래스 컴포넌트에서 render 메소드 호출될 때) 발생. 호출하면 DOM 생성에 관한 지시 사항들이 반환된다. 🔹 마운팅 : 리액트가 최초로 컴포넌트를 렌더링할 때. 앞선 지시사항들로부터 첫 DOM을 실제로 빌드한다. 🔹 리렌더링 : 리액트가 함수 컴포넌트를 다시 호출하여 이미 마운트된 컴포넌트에 적용할 새로운 지시사항들을 가져온다. 🔸 클래스 컴포넌트 App의 인스턴스 생성 -> render 메소드 호출 [ 렌더링 ] -> DOM 빌드에 필요한 지시사항들을 얻음 - 최초의 렌더링인 경우, 컴포넌트가 마운트 한다고 표현 state가 변경 -> 리렌더; render 재호출 -> DOM 업데이트에 관한 새로운 지시사항이 반환 -> 재조정 🔸 함수 컴포넌트 함수가 호.. 2021. 2. 13.
React 생명주기 원래 하려던 것: 클래스 컴포넌트에서 쓰이는 생명 주기 메서드를 함수형 컴포넌트에서 적용하려면 어떻게 해야하는지 다시 정확하게 알기 먼저 알고 싶은 것: 클래스 컴포넌트에서 쓰이는 생명 주기 메서드 따라서, State와 생명주기에서 다시 시작 - render 메서드는 업데이트가 발생할 때마다 호출되지만, 같은 DOM 노드로 을 렌더링하는 경우 Clock 클래스의 단일 인스턴스만 사용된다. 따라서 로컬 state와 생명주기 메서드 등의 기능을 사용할 수 있다. - 어플리케이션에 컴포넌트가 삭제될 때, 해당 컴포넌트가 사용 중이던 리소스를 확보하기 - 타이머가 DOM에 렌더링 될 때(마운팅), DOM에서 삭제될 때 각각 componentDidMount, componentWillUnmout 예시로 나온 1. .. 2021. 2. 11.
React Ref 보통, 원래, 일반적인 경우: - 부모와 자식 컴포넌트가 있을 때, 자식 컴포넌트를 수정하려면 부모 컴포넌트에서 새로운 props를 전달하여 자식을 리렌더링함 특수한 경우: - 그런 과정 안 거치고 직접 자식을 수정하고 싶음 - 컴포넌트 인스턴스( 클래스로 선언된 컴포넌트, this 키워드로 참조되는 대상 ), DOM 엘리먼트 쓰기 전 경고: - state에 어디에 있어야 할지 먼저 고민해야 함 생성: - 컴포넌트의 인스턴스 생성할 때, Ref를 프로퍼티로 추가 → 인스턴스 내부에서 자유롭게 접근 가능 접근: - render 메서드 안에서 ref가 엘리먼트에 ref attribute 통해 전달되면 해당 노드에 대한 참조가 ref.current에 담김 - ref의 값 HTML 엘리먼트에 쓰인 경우 - re.. 2021. 2. 11.

티스토리툴바