try-catch 블록을 사용하지 않는다면 async function - return await Promise은 추가적인 Promise 래핑을 유발하므로 function - return Promise가 바람직함.(단, 성능상의 이점은 미미함.) 하지만, try-catch 블록에서 return Promise를 사용하게 되면 에러가 catch 블록에서 처리되지 못하므로 그로 인한 휴먼 에러를 방지하기 위해 항상 return await Promise를 사용해야 한다는 의견도 있음. (Tip) Promise를 기다려서 어떠한 작업을 해야 한다면 const res = await Promise... 처럼 사용해주고 return을 해야 함. try - catch 문도 Promise를 기다려서 '에러 핸들링 작업'을 ..
1. Next.js에서의 Data Fetching React에서는 웹페이지를 구성하는 방식이 CSR(Client-Side Rendering)뿐이지만, Next에서는 CSR 외에도, SSG(Static-Site Generation), SSR(Sever-Side Rendering), ISR(Incremental Static Regeneration) 방식이 존재함. 1. CSR: 페이지 컴포넌트 내부의 useEffect()에서 처리 2. SSG: getStaticPaths()와 getStaticProps()에서 처리 3. SSR: getServerSideProps()에서 처리 4. ISR: getStaticProps()에서 revalidate 값을 반환 2. getStaticPaths # 다이내믹 라우팅(Dy..
1. 드래그 이벤트 dragstart: 사용자가 요소나 텍스트를 드래그하는 시점에 발생 dragend: 사용자가 드래그 하던 요소나 텍스트를 놓는 시점에 발생 dragenter: 요소나 텍스트가 drop 타겟에 진입하는 시점에 발생 dragover: 요소나 텍스트가 드래그 상태이며 마우스 포인터가 drop 타겟 내부에 존재할 때 지속적으로 발생 drop: 요소나 텍스트가 drop 타겟 내부에서 놓여지는 시점에 발생 dragleave: 요소나 텍스트가 drop 타겟에서 벗어나는 시점에 발생 2. 요소의 위치 변경하기 아래 그림에서 start와 end는 각각 드래그 시작점, 드래그 종료점. 요소의 위치를 드래그 종료점에 맞게 설정하려면 이전 위치(prevLeft, prevTop)에서 드래그 시작점과 종료점 ..
React만 사용해 웹페이지를 구성하면 서버에서 HTML, CSS, JS 파일을 다운로드받아 JavaScript를 실행해 페이지 내부 데이터를 채워넣는 CSR(Client-Side Redering) 방식으로 작동함. 하지만, Next.js에서는 기본적으로 웹페이지를 서버에서 미리 작성(pre-render)하고 클라이언트에 보내주는 방식으로 작동함. 클라이언트에서 어느 정도 완성된 웹페이지와 JS를 다운로드받고 JavaScript가 실행되어 사용자가 상호작용할 수 있는 상태가 되면 웹페이지 구성이 완료되는데 이 과정을 Hydration이라고 함. 1. Next.js에서 Pre-rendering의 형태 A. SSG(Static-Site Generation) 웹페이지를 빌드 때 미리 생성해두고, 사용자가 해당..
1. React Query, React Suspense 활용 2022.10.01 - [React] - React Suspense 사용하기(with. React-Query) React Suspense와 함께 활용해 image 주소로 직접 fetch 요청을 보내 blob 객체로 이미지를 불러오는 방법도 있음. 하지만, 이 방법을 이용하면 CORS 오류를 해결해야 하고, 캐시된 이미지를 불러올 때는 스켈레톤 화면이 보이지 않는 문제도 있는 한계가 있음. 2. Image onLoad 이벤트 활용 요소의 onLoad 이벤트를 활용해 아직 로드되지 않았을 때는 스켈레톤을 보여주고, 로드가 완료되었을 때 State를 변경해 원래 이미지를 보여주는 방식을 이용할 수 있음. 한편, 이미지를 불러올 때 오류가 발생할 수 ..
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. React Suspense React에서 데이터를 받아올 때, 데이터가 완전히 불러와졌는지 나타내기 위해 로딩 컴포넌트를 추가해주는 게 일반적. 하지만, 아래의 경우처럼 앱의 규모가 커져 네트워크 요청 로직이 복잡해지면 각각의 컴포넌트에 로딩 컴포넌트를 넣어주기가 어려울 수 있음. 1. 부모, 자식 컴포넌트 모두 각각의 로딩 상태를 갖고 있을 때 2. 모든 자식 컴포넌트가 데이터를 불러오고 난 후에 부모 컴포넌트를 화면에 보여주고 싶을 때 이러한 경우에 React Suspense를 사용해 의 하위 컴포넌트가 데이터를 모두 받아왔을 때까지 렌더링을 유예할 수 있음. fetch-on-render: fetching doesn’t start until the component has been rendere..
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 파..
JavaScript 2022. 12. 29. 19:51
try-catch 블록을 사용하지 않는다면 async function - return await Promise은 추가적인 Promise 래핑을 유발하므로 function - return Promise가 바람직함.(단, 성능상의 이점은 미미함.) 하지만, try-catch 블록에서 return Promise를 사용하게 되면 에러가 catch 블록에서 처리되지 못하므로 그로 인한 휴먼 에러를 방지하기 위해 항상 return await Promise를 사용해야 한다는 의견도 있음. (Tip) Promise를 기다려서 어떠한 작업을 해야 한다면 const res = await Promise... 처럼 사용해주고 return을 해야 함. try - catch 문도 Promise를 기다려서 '에러 핸들링 작업'을 ..
JavaScript/Next.js 2022. 12. 21. 18:35
1. Next.js에서의 Data Fetching React에서는 웹페이지를 구성하는 방식이 CSR(Client-Side Rendering)뿐이지만, Next에서는 CSR 외에도, SSG(Static-Site Generation), SSR(Sever-Side Rendering), ISR(Incremental Static Regeneration) 방식이 존재함. 1. CSR: 페이지 컴포넌트 내부의 useEffect()에서 처리 2. SSG: getStaticPaths()와 getStaticProps()에서 처리 3. SSR: getServerSideProps()에서 처리 4. ISR: getStaticProps()에서 revalidate 값을 반환 2. getStaticPaths # 다이내믹 라우팅(Dy..
JavaScript 2022. 12. 20. 15:46
1. 드래그 이벤트 dragstart: 사용자가 요소나 텍스트를 드래그하는 시점에 발생 dragend: 사용자가 드래그 하던 요소나 텍스트를 놓는 시점에 발생 dragenter: 요소나 텍스트가 drop 타겟에 진입하는 시점에 발생 dragover: 요소나 텍스트가 드래그 상태이며 마우스 포인터가 drop 타겟 내부에 존재할 때 지속적으로 발생 drop: 요소나 텍스트가 drop 타겟 내부에서 놓여지는 시점에 발생 dragleave: 요소나 텍스트가 drop 타겟에서 벗어나는 시점에 발생 2. 요소의 위치 변경하기 아래 그림에서 start와 end는 각각 드래그 시작점, 드래그 종료점. 요소의 위치를 드래그 종료점에 맞게 설정하려면 이전 위치(prevLeft, prevTop)에서 드래그 시작점과 종료점 ..
JavaScript/Next.js 2022. 11. 29. 17:20
React만 사용해 웹페이지를 구성하면 서버에서 HTML, CSS, JS 파일을 다운로드받아 JavaScript를 실행해 페이지 내부 데이터를 채워넣는 CSR(Client-Side Redering) 방식으로 작동함. 하지만, Next.js에서는 기본적으로 웹페이지를 서버에서 미리 작성(pre-render)하고 클라이언트에 보내주는 방식으로 작동함. 클라이언트에서 어느 정도 완성된 웹페이지와 JS를 다운로드받고 JavaScript가 실행되어 사용자가 상호작용할 수 있는 상태가 되면 웹페이지 구성이 완료되는데 이 과정을 Hydration이라고 함. 1. Next.js에서 Pre-rendering의 형태 A. SSG(Static-Site Generation) 웹페이지를 빌드 때 미리 생성해두고, 사용자가 해당..
JavaScript/React 2022. 11. 28. 14:31
1. React Query, React Suspense 활용 2022.10.01 - [React] - React Suspense 사용하기(with. React-Query) React Suspense와 함께 활용해 image 주소로 직접 fetch 요청을 보내 blob 객체로 이미지를 불러오는 방법도 있음. 하지만, 이 방법을 이용하면 CORS 오류를 해결해야 하고, 캐시된 이미지를 불러올 때는 스켈레톤 화면이 보이지 않는 문제도 있는 한계가 있음. 2. Image onLoad 이벤트 활용 요소의 onLoad 이벤트를 활용해 아직 로드되지 않았을 때는 스켈레톤을 보여주고, 로드가 완료되었을 때 State를 변경해 원래 이미지를 보여주는 방식을 이용할 수 있음. 한편, 이미지를 불러올 때 오류가 발생할 수 ..
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() 메서드를 이용..
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..
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 파..