1. useAsyncEffect useAsyncEffect는 React Hooks중 하나인 useEffect를 통해 제작한 커스텀 훅입니다. 기본적으로 useEffect를 비동기 작업에 사용 할 수 있게 확장한 커스텀 훅이라고 할 수 있습니다. 이를 사용하면, useEffect 내에서 async/await를 사용하여 비동기 작업을 수행할 수 있습니다 (useAsyncEffect 코드) import { useEffect, DependencyList } from "react" export const useAsyncEffect = (asyncEffect: () => Promise, deps?: DependencyList) => { useEffect(() => { const asyncEffectWrapper =..
📝 문제 Next.js로 포트폴리오를 제작하고 있는데, Prettier format on save 기능이 급격하게 느려지는 현상이 발생하였다. 리액트에서 작업할때는 수정 및 저장시 지연 없이 Prettier format on save 기능이 동작했는데, Next에서는 짧게는 2~3초, 길게는 5초이상 해당 현상이 지속되어 여간 불편한게 아니였다. 🔍️ 원인 구글링 결과, prettier git의 issue에서 비슷한 현상을 겪는 게시글을 찾을 수 있었다 FormatOnSave takes a long time #1333 FormatOnSave takes a long time · Issue #1333 · prettier/prettier-vscode Summary Frequently, when I save a..
Route Next.js에서는pages 폴더 내부에 있는 파일들의 이름을 기준으로 자동으로 페이지가 생성이 된다. 실습환경 디렉토리 구조 & 레이아웃 Next.js 13 이상의 환경 태그 a태그를 사용해 링크를 연결하면, 해당 링크로 들어갔을 때 바뀌어야 하는 페이지 외의 변화가 없는 layout 같은 다른 부분들도 전부 처음부터 끝까지 요청 보내서 다운로드 받게 된다. 아래의 예시는 html 페이지와 css 페이지 이동시 개발자도구 - 네트워크 탭의 내용이다. 매번 서버로부터 html을 받아오기 때문에 비효율적이고, 리소스를 많이 사용하게 된다. 태그 a태그를 Link태그로 바꾸고 클릭하면 내가 이동하려는 페이지만 요청이 들어가게 된다. 하지만, 이조차도 이미 클릭해서 요청이 들어간 적이 있는 페이지는..
🐛 도입 리액트(React)는 보통 HTML과 유사한 JSX 코드로 작성하는 경우가 대부분입니다. 이 JSX의 편리함 때문에 리액트를 좋아하는 사람도 많지만, 이 JSX 때문에 리액트를 싫어한다는 사람도 많다고 합니다. 이번 블로깅에서는 이러한 JSX와 JSX를 변환(transpile) 해주는 babel에 대해서 알아보도록 하겠습니다. 📝 JSX가 뭘까? JSX를 설명하는 리액트 문서를 바탕으로 살펴보도록 하겠습니다. // 아래 변수 선언을 살펴보자 const element = Hello, world! ; 위 선언문을 보면 문자열도 HTML도 아닙니다. 이 문법을 JSX라고 부르며, JSX는 HTML 태그를 변수로 할당하고, 호출하며, return 할 수 있는 확장 문법이라고 볼 수 있습니다. 이를 통해..
⚡️ useState는 동기? 비동기? 삐삐 프로젝트를 진행하며, 멘토님과 얘기를 하던 도중 useState는 동기일까 비동기일까에 관련된 내용이 나오게되었다. 단순히 useState는 상태를 관리하는 훅으로만 알고 있었던 나를 반성하며, useState의 정체를 파헤쳐 보도록 할 예정이다. 📌 useState는 비동기 이다! 결론부터 얘기하자면 useState는 비동기 이다. 좀 더 자세히 얘기하자면, 상태를 변경시키는 setter 메소드인 setState가 비동기적으로 동작한다. Q. 리액트는 왜 setState를 통해서만 상태를 변경시키는 걸까? A. 직접 상태값을 변경하지 말아야하는 이유는, 이전 상태값을 바탕으로 업데이트된 상태값을 비교해 리액트가 감지하기 때문이다. 리액트는 가상 DOM(Vir..
📝 기술면접 질문 목록 (JavaScript) Promise의 기능과 필요한 이유에 대해서 설명해 주세요. (React) React의 state와 props에 대해서 설명해 주세요. (HTTP / 네트워크) CSR과 SSR의 차이점에 대해서 설명해 주세요. (웹서버) Same-Origin Policy와 CORS에 대해서 설명해 주세요. 🔒 (JavaScript) Promise의 기능과 필요한 이유에 대해서 설명해 주세요. 🔑 Promise는 자바스크립트에서 네트워크요청, 파일 로딩, 데이터베이스 조회 등과 같은 비동기 작업을 효과적으로 다루기 위한 기능입니다. 이를 통해 비동기 작업의 성공과 실패를 보다 직관적으로 나타내며, 작업의 순서와 관계를 명확하게 표현할 수 있습니다. 🔑 Promise의 필요성 ..
⚡ Ajax가 뭘까? Ajax란 Asynchronous Javascript and Xml의 약자입니다. 이는 자바스크립트의 라이브러리 중 하나이며, 브라우저가 가지고 있는 객체를 이용하여, 전체 페이지를 새로고침 하지 않고, 페이지의 일부분만 로드하는 기법입니다. 즉, 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것입니다. ⚡ 비동기 방식이란? 비동기 방식은 웹페이지 전체를 리로드 하지 않고, 필요한 부분만 데이터를 불러오는 방식입니다. ⚡ 그렇다면 왜 Ajax를 쓸까요? 단순하게 웹에서 데이터를 조회하고 싶은 경우, 페이지 전체를 새로고침 하지 않기 위해서 json이나 xml등의 형태로 필요한 데이터만 받아 갱신하기 때문에 자원과 시간을 절약 할 수 있음 ⚡ Ajax의 장 / 단점 ❗..
