전체 글

REST 정의REpresentationalStateTransfer월드 와이드 웹 과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식웹 기존 기술, HTTP 프로토콜을 그대로 활용할 수 있어 웹의 장점을 최대활용할 수 있다.클라이언트와 서버 사이의 통신 방식 중 하나이다.자원을 정의하고, 자원에 대한 상태(주소를 지정)를 통신 네트워크 아키텍처의 모음 즉, 자원(Resource)의 표현(Representation)에 의한 상태 전달자원의 표현? 해당 소프트웨어가 관리하는 모든 것(자원)을 표현하기 위한 이름(표현)(ex. DB 의 학생정보가 자원 -> `students` 표현)상태전달? 데이터가 요청되는 시점에서 자원의 상태(정보)를 전달한다. HTTP URI(Uniform Resour..

기존 더보기 버튼으로 구현되어있던 페이지네이션 pagenation 을useInfiniteQuery, Intersection Observer API를 이용하여 무한 스크롤 리팩토링 하였다.기존 더보기 구현 방식 먼저 서버에서 사용하는 데이터 형식을 확인하면, 공연 전체조회 시 쿼리로 page 를 필수로 받는다.다른 codename(장르), title(검색), date(공연날짜)는 필터링이나 상세공연정보 detail 에 접속할때 사용한다. 즉, 이러한 형식으로 요청을 전송하면 데이터는 json 배열로 8개의 각 공연 객체가 전송된다. 데이터를 불러오는 react-query 코드하나의 api url -> 검색, 카테고리, 페이지네이션, 날짜를 이용한 공연상세위 기능을 모두 사용하기 때문에 useQuery 를 ..

에러경계 Error Boundary : 하위 컴포넌트에서 발생하는 자바스크립트 에러를 잡아서 fallback UI 를 보여주는 공식 리액트 컴포넌트.선언적으로 에러를 처리하는 방법. 공식 리액트가 제공한다.1. Error Boundary가 캐치할 수 없는 코드 를 있는 코드로 변경해보기2. 브라우저의 구조를 뜯어보아 Error Boundary의 목적을 알아보기 기본 사용 구조App.tsxexport default function App: React.FC()(// 리액트쿼리 쓰려면! Something went wrong}> //);ErrorBoundary 컴포넌트 하위에 존재하는 컴포넌트에 에러throw 를 적용하기 위해, 상위에서 묶는다. ErrorBoundary.tsx리액트 공식문서inter..

왜 테스트를 해야하나?반복되는 같은 에러, 복잡한 코드장기간의 유지보수 : 수정 시 에러 확인에 용이왜 Vitest 를 사용하기로 했는지?vitestvite 설정을 그대로 사용할 수 있어 간편jest 보다 상대적으로 빠름ESMjest와 호환되는 api 를 제공한다Jestbable, typescript, node, react, angular, vue 지원bable 세팅해야함 - PWA 프로젝트의 안정성 제공commonJS공식문서와 사용예시 등 참고문서가 많다.이외에도 많은 테스트 모듈이 있지만(@testing-library 등) 기본 테스트의 집합체가 Jest 이고, 가장많이 사용되고 있다.그런데 Jest 를 선택하지 않은 이유는, 클라이언트 프로젝트가 Vite, ESM 으로 빌드되었기 때문이다. 타입스크..

🙌문제설명△△ 게임대회가 개최되었습니다. 이 대회는 N명이 참가하고, 토너먼트 형식으로 진행됩니다. N명의 참가자는 각각 1부터 N번을 차례대로 배정받습니다. 그리고, 1번↔2번, 3번↔4번, ... , N-1번↔N번의 참가자끼리 게임을 진행합니다. 각 게임에서 이긴 사람은 다음 라운드에 진출할 수 있습니다. 이때, 다음 라운드에 진출할 참가자의 번호는 다시 1번부터 N/2번을 차례대로 배정받습니다. 만약 1번↔2번 끼리 겨루는 게임에서 2번이 승리했다면 다음 라운드에서 1번을 부여받고, 3번↔4번에서 겨루는 게임에서 3번이 승리했다면 다음 라운드에서 2번을 부여받게 됩니다. 게임은 최종 한 명이 남을 때까지 진행됩니다.이때, 처음 라운드에서 A번을 가진 참가자는 경쟁자로 생각하는 B번 참가자와 몇 번..

1. 사용자가 웹 브라우저 주소창에 www.google.com을 입력한다.입력어가 URL 이라면 해당 주소의 페이지를 요청하러 갈 것이고만약 URL 이 아닌 키워드를 입력했다면 각 브라우저(크롬, 익스플로어, 파이어폭스 등)의 기본 검색엔진을 통해 해당 키워드를 검색 할 것이다. 이때 protocol 을 따로 입력하면 https나 http로 요청하겠지만,위처럼 프로토콜 부분을 생략하고 도메인부분을 입력하게 되면 기본적으로 http로 요청한다.2. DNS 서버에 DNS 쿼리를 보낸다.웹 브라우저는 입력된 URL 을 해석하여 도메인 이름을 IP 주소로 변환하기 위해 요청을 보낸다.캐싱된 DNS 기록을 통해 도메인 이름과 대응하는 IP 주소를 확인한다.DNS Domain Name System : 도메인 네임 ..

개념OSI 7 계층 : 네트워크 통신을 위한 표준 프로토콜 구조 정의한다. 상위 계층일수록 사용자와 더 가까운 기능을 제공한다.프로토콜 : 컴퓨터 네트워크에서 데이터 통신을 위한 규칙이나 약속을 의미한다. 이를 통해 다른 시스템끼리 상호작용할 수 있고, 데이터가 정확하고 일관되게 전송될 수 있도록 한다.OSI 7 Layer의 응용-전송-세션-표현-애플리케이션 계층 중 애플리케이션에 통신에서 사용되는 프로토콜이다. 여러 종류의 프로토콜 중HTTP 는 웹페이지와 데이터를 전송하는 프로토콜 이다.브라우저와 서버 간에 데이터를 주고받기위한 방식으로 사용하고 있다. 특징비연결성 Connectionless : 클라이언트와 서버의 연결을 지속하지 않고, 각 요청마다 새로운 연결을 잇는다.각각의 http 요청에 독립적..

로그인을 구현해본 개발자라면 경험해 본적 있을것!Web Storage 웹스토리지키/값을 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴이다.브라우저에 저장해야하는 데이터, 즉 클라이언트에서 수시로 변경되는 데이터를 웹 스토리지에 저장하게 된다.DB 를 사용하지 않고, 데이터를 임시적으로 저장할때 사용하는 곳이라고 이해하면 된다.저장된 데이터가 존재할 뿐, 서버로 전송하지 않는다. 네트워크 트래픽 비용을 줄여준다.서버에 전송하는 법 : js로 스토리지의 데이터를 읽고, 명시적으로 서버에 전송한다.용량의 제한이 없다한번 저장하면 영구적으로 존재한다.보안적인 문제가 될 수 있다.LocalStorage, Session Storage 가 존재하며, 데이터의 지속성에 따라 제공된다탭/창 마다 공유할..

SSR vs CSR 로 프로젝트 구성하기SPA vs MPASPA : Single Page Application하나의 페이지 내에서 동적으로 콘텐츠를 로드하고 업로드 하는 방식이다.리액트, 앵귤러, 뷰와 같은 프레임워크가 개발하는 웹 어플리케이션ex. 클릭 시 고정되어datdaradanadat.tistory.com이 기술의 선택과 적용에 고민을 하며 작성한 개발글이론과 기술면접에 대비해 좀 더 깊게 작성해보려 한다.SSR, CSR 은 렌더링 하는 방법SPA, MPA 는 페이지 구성된 어플리케이션 방법공식은 `CSR - SPA` `SSR - MPA` 로 많이 사용되고, React 의 경우 SPA 를 기본적으로 사용한다고 알고 있다.그러나 서버측 html 적용 등(node.js...) 추가적인 세팅을 통해 구..