Javascript 런타임 환경에서 Event Loop는 Call Stack의 상태를 계속 확인해 Call Stack이 비었을 경우 Microtask Queue, Macrotask Queue를 확인해 가장 처음에 들어왔던 Microtask Queue의 작업부터 Call Stack으로 보냄. 1. PromisePromise 생성자에 전달된 콜백 함수인 Promise Executor는 동기적으로 실행됨. 한편, Promise Executor가 종료되고 나서 then(), catch() 메서드의 콜백함수가 바로 Microtask Queue에 추가되는 게 아님에 주의해야 함. resolve(), reject() 함수가 Promise의 상태를 바꾸고 해당 Promise에 할당된 then, catch 메서드를 실행..
1. Web Worker 불러오기 new Worker("../../utils/ImageLoad.worker.ts") 일반적으로는 위와 같이 Worker를 생성하지만 React에서는 Webpack 번들러로 Worker를 불러와야 함. 하지만 Webpack5부터는 별도의 번들러 없이 인라인으로 Worker를 불러오는 방법을 제공하기 때문에 아래의 방법으로 Worker를 생성할 수 있음. // Webpack5부터 가능 new Worker( new URL("../../utils/ImageLoad.worker.ts", import.meta.url) // js, ts 확장자까지 입력해줘야 함에 주의! ); 2. Web Worker와 메시지 주고받기 메인 스레드와 Worker는 postMessage() 메서드를 이용..
1. AWS S3 이미지 네트워크 요청 AWS S3 이미지 링크를 의 src 속성에 직접 임베드하지 않고 Fetch API 요청으로 blob 객체를 받아올 때, CORS 오류가 발생함. S3 서버에 이미 CORS 설정이 되어있는데다가, 모든 이미지에서 CORS 오류가 발생하는 것은 아니었기 때문에 디버깅에 어려움이 있었음. 검색을 해보니 HTTP 캐시와 관련된 문제임을 확인할 수 있었고, 오류도 아래와 같은 상황에서 재현할 수 있었음. ① 웹페이지에 들어가고 나서 시간이 흐른 후 다시 들어갔을 때, CORS 오류가 발생함. ② 개발자 도구에서 '캐시 사용 중지' 기능을 활성화 했을 때 CORS 오류가 발생하지 않음. 두 가지 현상을 미뤄보아 캐시로 인한 문제임을 확신하게 됨. // 이미지 요청 로직 co..
1. React Suspense React에서 데이터를 받아올 때, 데이터가 완전히 불러와졌는지 나타내기 위해 로딩 컴포넌트를 추가해주는 게 일반적. 하지만, 아래의 경우처럼 앱의 규모가 커져 네트워크 요청 로직이 복잡해지면 각각의 컴포넌트에 로딩 컴포넌트를 넣어주기가 어려울 수 있음. 1. 부모, 자식 컴포넌트 모두 각각의 로딩 상태를 갖고 있을 때 2. 모든 자식 컴포넌트가 데이터를 불러오고 난 후에 부모 컴포넌트를 화면에 보여주고 싶을 때 이러한 경우에 React Suspense를 사용해 의 하위 컴포넌트가 데이터를 모두 받아왔을 때까지 렌더링을 유예할 수 있음. fetch-on-render: fetching doesn’t start until the component has been rendere..
1. 함수 오버로딩(Overloading) Typescript에서는 다른 parameter, 다른 타입 등을 가진 동일한 이름의 함수를 정의할 수 있음. export function add(a:string, b:string):string; export function add(a:number, b:number): number; export function add(a: any, b:any): any { return a + b; } add() 함수는 string 또는 number인 두 인자 a, b를 받고 다른 타입을 반환함. 함수 구현 부분에서 각 인자 a, b는 any 타입을 지정해주는데 일반적인 any가 아니라 string | number 타입의 값만 받을 수 있음. 한편, 이렇게 만든 함수를 다른 파일..
1. 페이지 이동하기: useNavigate() Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 할 때 사용하는 hook으로, 사용자가 로그인되지 않은 상태에서 마이 페이지에 들어가려고 할 때 로그인 페이지로 리다이렉트 시키려는 상황에 쓰일 수 있음. import { useNavigate } from 'react-router-dom'; const App = () => { const navigate = useNavigate(); // ... } 해당 hook을 쓰려는 컴포넌트 내부에서 useNavigate()를 실행하면 리다이렉트에 사용할 수 있는 함수를 반환함. 이때 반환된 함수는 두 개의 parameter를 가지는데 // ① ② navigate("../To", { replace: true, s..
1. URL 파라미터 이용하기: useParams() A. URL 파라미터 ID나 이름 등을 이용해 특정 데이터를 조회할 때 사용하는 값으로, 주소에 유동적인 값을 넣어줄 수 있음. /path/urlParam 부분이 URL 파라미터. 예를 들어, https://www.last.fm/music/Taylor+Swift, https://www.last.fm/music/BTS, ...에서 Taylor+Swift, BTS, ...가 URL 파라미터. URL 파라미터마다 Route 컴포넌트를 하나하나 전부 만든다면 무척 비효율적. React Router의 useParams()을 이용하면 일일히 링크 세부 키워드를 지정하지 않고도 해당 컴포넌트로 이동할 수 있음. B. Route 컴포넌트의 path 속성에 URL 파..
사용자가 웹 페이지에서 사진을 선택한 후에 이미지를 미리 볼 수 있도록 하는 기능을 구현했으나, DOM에 이미지가 렌더링될 때 텍스트 입력이 지연되는 문제가 발생함. 처리해주는 작업 1. 이미지를 Base64로 인코딩 한 후, MD5로 이미지 해시 2. Blob 객체로 클라이언트에서 요소에 넣을 URL 생성 총 22개(27MB)의 이미지를 업로드한 후에 바로 에디터에 포커스가 되도록 했지만, 이미지가 화면에 나타나고 텍스트가 입력되기까지 사용자가 체감할 정도로 프레임이 저하됨. 1. React useTransition() 사용하기 에디터에 텍스트를 입력하는 작업과 이미지를 화면에 나타내주는 작업 중 후자의 작업은 후순위로 미뤄도 상관없기 때문에 이미지 State를 업데이트하는 함수를 startTransi..
1. Data URIs #파일을 인라인으로 임베드할 수 있도록 Base64로 인코딩된 문자열."data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiYAAADICAYAAAGrGBoLAAAABGd"Data URI는 ① data 접두사, ② MIME 타입, ③ Base64임을 알려주는 문자, ④ 실제 데이터까지 네 부분으로 이루어져 있다. 2. Base64 인코딩이진 데이터(binary data)를 문자 코드에 영향을 받지 않는 ASCII 코드로만 이루어진 문자열로 변환하는 인코딩 방식. CPU에서는 0과 1로만 이루어진 데이터를 읽고 쓰는데 왜 이진 데이터를 ASCII 문자로 불필요하게 인코딩하는 것일까? 이메일 SMTP 프로토콜, URL, JSON, XML 등 텍스트 기..
1. 미들웨어(Middleware) # const customMiddleware = (storeAPI) => (next) => (action) => { /* 해당 Reducer가 실행되기 전에 미들웨어에서 처리할 작업 */ return next(action); // 다음 미들웨어로 이동 } Redux에서 미들웨어는 Store의 dispatch, getState 메서드를 담고 있는 객체 storeAPI, 다음 미들웨어를 가리키는 next, Action 객체인 action을 차례차례로 argument로 받는 커링 함수 형태를 띄고 있음. 특정한 Action이 Dispatch 되고, 해당 Reducer가 실행되기 전 또는 후에 미들웨어가 실행됨. 1. 실행 시점: 해당 Reducer가 실행되기 전 또는 후 2..
JavaScript 2022. 10. 22. 17:13
Javascript 런타임 환경에서 Event Loop는 Call Stack의 상태를 계속 확인해 Call Stack이 비었을 경우 Microtask Queue, Macrotask Queue를 확인해 가장 처음에 들어왔던 Microtask Queue의 작업부터 Call Stack으로 보냄. 1. PromisePromise 생성자에 전달된 콜백 함수인 Promise Executor는 동기적으로 실행됨. 한편, Promise Executor가 종료되고 나서 then(), catch() 메서드의 콜백함수가 바로 Microtask Queue에 추가되는 게 아님에 주의해야 함. resolve(), reject() 함수가 Promise의 상태를 바꾸고 해당 Promise에 할당된 then, catch 메서드를 실행..
JavaScript 2022. 10. 21. 16:09
1. Web Worker 불러오기 new Worker("../../utils/ImageLoad.worker.ts") 일반적으로는 위와 같이 Worker를 생성하지만 React에서는 Webpack 번들러로 Worker를 불러와야 함. 하지만 Webpack5부터는 별도의 번들러 없이 인라인으로 Worker를 불러오는 방법을 제공하기 때문에 아래의 방법으로 Worker를 생성할 수 있음. // Webpack5부터 가능 new Worker( new URL("../../utils/ImageLoad.worker.ts", import.meta.url) // js, ts 확장자까지 입력해줘야 함에 주의! ); 2. Web Worker와 메시지 주고받기 메인 스레드와 Worker는 postMessage() 메서드를 이용..
문제해결 일지 2022. 10. 11. 22:06
1. AWS S3 이미지 네트워크 요청 AWS S3 이미지 링크를 의 src 속성에 직접 임베드하지 않고 Fetch API 요청으로 blob 객체를 받아올 때, CORS 오류가 발생함. S3 서버에 이미 CORS 설정이 되어있는데다가, 모든 이미지에서 CORS 오류가 발생하는 것은 아니었기 때문에 디버깅에 어려움이 있었음. 검색을 해보니 HTTP 캐시와 관련된 문제임을 확인할 수 있었고, 오류도 아래와 같은 상황에서 재현할 수 있었음. ① 웹페이지에 들어가고 나서 시간이 흐른 후 다시 들어갔을 때, CORS 오류가 발생함. ② 개발자 도구에서 '캐시 사용 중지' 기능을 활성화 했을 때 CORS 오류가 발생하지 않음. 두 가지 현상을 미뤄보아 캐시로 인한 문제임을 확신하게 됨. // 이미지 요청 로직 co..
JavaScript/React 2022. 10. 1. 17:52
1. React Suspense React에서 데이터를 받아올 때, 데이터가 완전히 불러와졌는지 나타내기 위해 로딩 컴포넌트를 추가해주는 게 일반적. 하지만, 아래의 경우처럼 앱의 규모가 커져 네트워크 요청 로직이 복잡해지면 각각의 컴포넌트에 로딩 컴포넌트를 넣어주기가 어려울 수 있음. 1. 부모, 자식 컴포넌트 모두 각각의 로딩 상태를 갖고 있을 때 2. 모든 자식 컴포넌트가 데이터를 불러오고 난 후에 부모 컴포넌트를 화면에 보여주고 싶을 때 이러한 경우에 React Suspense를 사용해 의 하위 컴포넌트가 데이터를 모두 받아왔을 때까지 렌더링을 유예할 수 있음. fetch-on-render: fetching doesn’t start until the component has been rendere..
TypeScript 2022. 9. 24. 19:31
1. 함수 오버로딩(Overloading) Typescript에서는 다른 parameter, 다른 타입 등을 가진 동일한 이름의 함수를 정의할 수 있음. export function add(a:string, b:string):string; export function add(a:number, b:number): number; export function add(a: any, b:any): any { return a + b; } add() 함수는 string 또는 number인 두 인자 a, b를 받고 다른 타입을 반환함. 함수 구현 부분에서 각 인자 a, b는 any 타입을 지정해주는데 일반적인 any가 아니라 string | number 타입의 값만 받을 수 있음. 한편, 이렇게 만든 함수를 다른 파일..
JavaScript/기타 라이브러리 2022. 9. 23. 20:08
1. 페이지 이동하기: useNavigate() Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 할 때 사용하는 hook으로, 사용자가 로그인되지 않은 상태에서 마이 페이지에 들어가려고 할 때 로그인 페이지로 리다이렉트 시키려는 상황에 쓰일 수 있음. import { useNavigate } from 'react-router-dom'; const App = () => { const navigate = useNavigate(); // ... } 해당 hook을 쓰려는 컴포넌트 내부에서 useNavigate()를 실행하면 리다이렉트에 사용할 수 있는 함수를 반환함. 이때 반환된 함수는 두 개의 parameter를 가지는데 // ① ② navigate("../To", { replace: true, s..
JavaScript/기타 라이브러리 2022. 9. 23. 20:06
1. URL 파라미터 이용하기: useParams() A. URL 파라미터 ID나 이름 등을 이용해 특정 데이터를 조회할 때 사용하는 값으로, 주소에 유동적인 값을 넣어줄 수 있음. /path/urlParam 부분이 URL 파라미터. 예를 들어, https://www.last.fm/music/Taylor+Swift, https://www.last.fm/music/BTS, ...에서 Taylor+Swift, BTS, ...가 URL 파라미터. URL 파라미터마다 Route 컴포넌트를 하나하나 전부 만든다면 무척 비효율적. React Router의 useParams()을 이용하면 일일히 링크 세부 키워드를 지정하지 않고도 해당 컴포넌트로 이동할 수 있음. B. Route 컴포넌트의 path 속성에 URL 파..
JavaScript/React 2022. 9. 21. 13:46
사용자가 웹 페이지에서 사진을 선택한 후에 이미지를 미리 볼 수 있도록 하는 기능을 구현했으나, DOM에 이미지가 렌더링될 때 텍스트 입력이 지연되는 문제가 발생함. 처리해주는 작업 1. 이미지를 Base64로 인코딩 한 후, MD5로 이미지 해시 2. Blob 객체로 클라이언트에서 요소에 넣을 URL 생성 총 22개(27MB)의 이미지를 업로드한 후에 바로 에디터에 포커스가 되도록 했지만, 이미지가 화면에 나타나고 텍스트가 입력되기까지 사용자가 체감할 정도로 프레임이 저하됨. 1. React useTransition() 사용하기 에디터에 텍스트를 입력하는 작업과 이미지를 화면에 나타내주는 작업 중 후자의 작업은 후순위로 미뤄도 상관없기 때문에 이미지 State를 업데이트하는 함수를 startTransi..
JavaScript/React 2022. 9. 19. 18:05
1. Data URIs #파일을 인라인으로 임베드할 수 있도록 Base64로 인코딩된 문자열."data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiYAAADICAYAAAGrGBoLAAAABGd"Data URI는 ① data 접두사, ② MIME 타입, ③ Base64임을 알려주는 문자, ④ 실제 데이터까지 네 부분으로 이루어져 있다. 2. Base64 인코딩이진 데이터(binary data)를 문자 코드에 영향을 받지 않는 ASCII 코드로만 이루어진 문자열로 변환하는 인코딩 방식. CPU에서는 0과 1로만 이루어진 데이터를 읽고 쓰는데 왜 이진 데이터를 ASCII 문자로 불필요하게 인코딩하는 것일까? 이메일 SMTP 프로토콜, URL, JSON, XML 등 텍스트 기..
JavaScript/Redux 2022. 9. 16. 17:45
1. 미들웨어(Middleware) # const customMiddleware = (storeAPI) => (next) => (action) => { /* 해당 Reducer가 실행되기 전에 미들웨어에서 처리할 작업 */ return next(action); // 다음 미들웨어로 이동 } Redux에서 미들웨어는 Store의 dispatch, getState 메서드를 담고 있는 객체 storeAPI, 다음 미들웨어를 가리키는 next, Action 객체인 action을 차례차례로 argument로 받는 커링 함수 형태를 띄고 있음. 특정한 Action이 Dispatch 되고, 해당 Reducer가 실행되기 전 또는 후에 미들웨어가 실행됨. 1. 실행 시점: 해당 Reducer가 실행되기 전 또는 후 2..