그럼에도 불구하고

요즘 추세를 보면 Webpack기반의 CRA보다 Vite를 많이 쓴다고 해요 "남들도 Vite 쓰니까~ 나도 Webpack 말고 Vite 써보자" 하고 썼던 나를 반성하는 글입니다. ( 최소한 이유는 알고 쓰자..ㅎㅎ ) 🧑🏻‍💻 번들러 ( Bundler) 번들러는 여러개의 파일들을 하나의 파일로 묶어주는 도구입니다. 번들러는 웹 개발에서 사용되는 도구 중 하나로, 웹 애플리케이션을 개발하거나 배포할 때 사용됩니다. 번들러의 주요 역할은 여러 개의 웹 리소스 파일, 예를 들면 JavaScript 파일이나 CSS 파일 그리고 이미지 파일 등을 하나의 번들(묶음)로 결합하고 최적화하는 것입니다. 이러한 작업을 통해 웹 애플리케이션의 성능을 향상하고 로딩 시간을 줄일 수 있습니다. 번들링을 하지 않는다면 매우..

React Query를 공부하다 보면 isLoading과 isFetching에 대해 그냥 지나칠 수 없는데 너무 헷갈려서 정리해보기로 했습니다. 🧑🏻‍💻 isLoading이 끝나지 않는 경우 button을 눌렀을 때 react query를 사용하여 비동기 방식으로 data를 가져올 건데, enabled:false 이면 isLoading이 계속 true인 문제가 발생했습니다. ( button을 누르기 전부터 isLoading 상태임 ) 즉, button을 눌렀다면 enabled: true 가 되어 해당 query의 isLoading이 true에서 false로 변경되고 UI가 보여야 하는 상황인데 보이지가 않았습니다. HTML 삽입 미리보기할 수 없는 소스 왜 계속 Loading 상태가 지속되는걸까... 우..

React Query에서 페이지네이션(Pagination)과 데이터 프리페칭(Prefetching)에 대해 알아보겠습니다. 🧑🏻‍💻 Pagination 예를 들어, 블로그의 게시글을 나열하는데 페이지 번호를 매겨서 나타낼 때가 있습니다. 이때 React Query의 Pagination을 사용하면 현재 페이지(current page) 상태를 통해, 현재 페이지를 파악할 수 있습니다. 📌 사용 예시 최대 페이지의 수는 10 const MAX_POST_PAGE = 10; 사용자가 다음, 또는 이전 페이지로 가는 버튼을 누르면 해당 페이지로 이동하며 currentPage의 상태를 업데이트합니다. React Query는 바뀐 쿼리 키를 감지하고 새로운 쿼리를 실행해서 새 페이지가 표시됩니다. 👉 전체 코드 HTM..

면접 중에 면접관님께서 하셨던 말씀이 있는데 저희는 SaaS 기반의 클라우드 컴퓨팅 서비스를 통해 소프트웨어를 제공하는데.. 얼핏 알고 있던 SaaS가 정확히 어떤 의미인지 정의 내려지지 않아서 정리하기로 마음먹었습니다~~ 그 SARS 바이러스 아니고요 CSS를 보완하고 더 효과적으로 작성하기 위한 전처리기 Sass 아니고요 (그저 빛..) SaaS는 Sortware as a Service로! 우선 클라우드부터 보고 넘어가겠습니다. 🧑🏻‍💻 클라우드? 클라우드는 다양한 데이터 센터에 있는 원격 웹 서버로서 데이터베이스를 호스팅 하고 애플리케이션 코드를 실행합니다. 클라우드 제공 업체는 인터넷을 통해 고객이나 최종 사용자에게 서비스를 전달할 수 있습니다. 클라우드에는 아래와 같이 3대 클라우드 서비스 모델..

Next.js에 대해 알아보겠습니다. :) 🧑🏻‍💻 Next.js란? Next.js는 React로 만드는 서버사이드 렌더링 프레임워크입니다. React는 클라이언트 사이드 렌더링을 수행하지만, Next.js는 서버 사이드 렌더링을 하게 됩니다. 기존의 클라이언트 사이드 렌더링에서는 아래와 같은 문제점이 있습니다. 1. 클라이언트 렌더링의 경우 사용자는 모든 js 파일이 로드된 후에 웹을 볼 수 있습니다. 만약, js 파일의 용량이 클 경우 사용자는 많은 시간을 대기해야 합니다. 2. SEO (검색 엔진 최적화) 문제가 있습니다. 클라이언트 사이드의 경우 js가 로드되지 않은 경우 아무런 정보를 볼 수 없습니다. 구글의 검색엔진의 경우 js가 로드되지 않은 페이지를 검색 엔진으로 스캔하기 때문에 검색에 아..

React Query를 TS에서 사용할 때 Type은 어떻게 지정해야 할지 알아보겠습니다. Start! 🧑🏻‍💻 React Query TypeScript React Query는 TypeScript의 제네릭(Generics)을 많이 사용합니다. 이는 라이브러리가 실제로 데이터를 가져오지 않고 API가 반환하는 데이터 유형을 알 수 없기 때문입니다. 공식 문서에서는 타입스크립트를 그다지 광범위하게 다루지 않고, useQuery를 호출할 때 기대하는 제네릭을 명시적으로 지정할 수 있게 알려줍니다. 📌 useQuery 현재 useQuery가 갖고 있는 제네릭은 4개이며, 다음과 같습니다. TQueryFnData: useQuery로 실행하는 query function의 실행 결과의 타입을 지정하는 제네릭 타입입니..

Start! 🧑🏻‍💻 Cross origin이란? 크로스 오리진 (cross origin) 문제란 "브라우저는 자신의 오리진과 다른 오리진의 API 서버와 통신할 때 문제가 발생한다"는 개념입니다. 크로스 오리진 문제를 발생시킴으로써 잠재적인 위험을 가진 문서의 로딩을 제한해 브라우저 공격의 가능성을 줄일 수 있습니다. 크로스 오리진 문제는 웹 브라우저에 내장된 SOP(Same Origin Policy: 동일 근원 정책)라는 보안 정책 때문에 발생합니다. 크로스 오리진과 SOP를 이해하려면 브라우저의 오리진이라는 개념부터 이해해야 합니다. 브라우저가 웹 서버에 요청(request)을 전송하면 이에 대해 웹 서버는 응답(response)을 합니다. 일반적인 경우라면 웹 서버는 HTML 문서 형태를 응답할 ..

Start! 🧑🏻‍💻 라이브러리와 프레임워크의 차이를 알고 있나요? 라이브러리는 특정 기능 개발을 도와주는 도구들을 모아놓은 개념이고, 프레임워크는 프로그램을 개발하기 위한 구조를 제공하는 개념입니다. 프레임워크를 사용하면 개발에 대한 전체적인 기능을 제공하고, 프로그램 제어 흐름을 프레임워크에서 관리하는 차이점이 있습니다. 이런 특징을 제어의 역전이라고 합니다. 🧑🏻‍💻 React에 대해 설명해 주세요. React는 UI를 만들기 위한 JavaScript 라이브러리입니다. React는 스스로 상태를 관리하는 캡슐화된 컴포넌트를 조합해 복잡한 UI를 만들 수 있도록 지원하며, 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 합니다. 🧑🏻‍💻 React의 원리, 특징이 무엇인가요? Re..

Start! 🧑🏻‍💻 프론트엔드 ⭐️ 🧑🏻‍💻 사용자가 URL을 입력한 후 화면이 출력되기까지의 과정을 설명해 주세요. 사용자가 URL을 입력하면 웹 브라우저에서 URL의 유효성을 판단합니다. URL이 유효하지 않으면 웹 브라우저는 입력한 내용을 검색하게 되고, URL이 유효하면 DNS 서버에 연결할 IP를 요청합니다. DNS 서버에서 IP 주소를 받으면 3-way 핸드셰이킹으로 TCP 통신을 위한 가상 회선을 연결합니다. HTTP 연결 요청을 서버에 보내면, 이에 대한 응답을 받고 웹 페이지 화면을 출력합니다. ⭐️ 🧑🏻‍💻 브라우저 렌더링 과정에 대해 설명해 주세요. HTML 파일과 CSS 파일을 파싱 해서 각각 Tree를 만듭니다. (DOM Tree, CSSOM Tree 생성) 두 Tree를 결합하..

Start! 🧑🏻‍💻 DOCTYPE은 무엇을 하나요? DOCTYPE는 document type의 약어입니다. DOCTYPE는 항상 DTD(Document Type Definition)와 관련됩니다. DTD는 특정 문서가 어떻게 구성되어야 하는지 정의합니다. (예시: button은 span을 포함할 수 있지만, div는 그럴 수 없다.) 반면, DOCTYPE는 문서가 대략 존중할만한 DTD를 선언합니다. 웹 페이지는 DOCTYPE 선언이 필요합니다. 유저 에이전트에게 문서가 존중하는 HTML 사양의 버전을 알리는 데 사용됩니다. 유저 에이전트가 올바른 DOCTYPE을 인식하면, 문서를 읽는 데에 DOCTYPE과 일치하는 no-quirks mode를 트리거합니다. 유저 에이전트가 올바른 DOCTYPE을 인식..

면접관: www.naver.com를 주소창에 치면 무슨 일이 일어나나요? 나: 네이버가 켜집니다. 농담입니다만, 이렇게 대답할 수는 없잖아요 ㅠ 만약 면접에서 면접관님이 이런 질문을 해주신다면, 어떻게 대답하실 건가요? 실제로 웹사이트를 개발하는 개발자라면, 문제가 터졌을 때 "어디서부터 문제가 발생했지?" 하고 역추적하는 자세를 갖춰야 합니다. 제가 생각하는 이 질문의 의도는 개발자는 과정을 이해해야 하는 사람이고, 웹을 다루는 기본적인 cs 지식을 갖췄는지 여부를 묻는 것이 아닐까 싶습니다. 그럼 다시 질문으로 돌아와서 네이버를 주소창에 치면 무슨 일이 발생할까요? 답을 먼저 말씀드리자면 👉 리다이렉트, 캐싱, DNS, IP 라우팅, TCP 연결 구축을 거쳐 요청, 응답이 일어나는 TTFB(Time ..

 크고 작은 프로젝트를 진행하다 보면, 우리는 백엔드 또는 서드파티 API에 네트워크 요청(HTTP Requests)이 필요한 애플리케이션을 개발할 때 Fetch 혹은 Axios와 같은 HTTP 클라이언트를 사용합니다. 이 글에서는 Fetch와 Axios에 대한 간단한 설명과 차이점에 대해 알아보겠습니다. 🧑🏻‍💻 Fetch Fetch API는 네트워크 요청을 위해 fetch()라는 메서드를 제공하는 인터페이스입니다. 모던 브라우저 자체에 내장되어 있어 따로 설치할 필요가 없으며, promise 기반의 HTTP 클라이언트로 resolve 혹은 reject 할 수 있는 promise가 반환됩니다. 📌 문법 Fetch는 두 개의 인자를 받습니다. 첫 번째 인자는 내가 필요로 하는 리소스의 URL이며, 두 ..