API를 Mocking 하기 위해 MSW를 사용하고 있다.MSW는 화면 개발할 때만 쓰일 거 같아서 딱히 스토리북까지는 세팅을 안 해줬는데 개발하다 보니 필요해졌다. ✏️ 설정이 필요한 이유나의 경우에는 현재 게임 카드 리스트를 띄우는 탐색 페이지를 개발 중이다.게임 카드들의 경우 선택한 태그(장르)를 기반으로 결과를 필터링할 수 있다. 태그 선택 버튼(태그 +)을 클릭하면 조회하고 싶은 장르의 태그들을 선택할 수 있는 모달을 띄어야 한다. 여기서 띄어지는 태그들은 백엔드에서 응답받은 정보이다.현재는 백엔드 API가 나오지 않았기 때문에 MSW 핸들러 정보로 띄우고 있다.그렇기 때문에 스토리북에 MSW를 연결하지 않으면 저 정보들을 띄울 수 없었다.No QueryClient set, use Query..

🌐 Web APIs? Application Programming Interfaces 웹 개발을 하다 보면 브라우저 안에서 아주 많은 기능을 기본적으로 사용할 수 있다.예를 들어, 서버와 통신하거나, 사용자의 위치를 가져오거나, 알림을 띄우는 것처럼 복잡한 기능들도 자바스크립트만으로 실행할 수 있다.이처럼 브라우저가 기본으로 제공하는 기능들을 통칭해서 Web API라고 부른다. 🧰 Web API 기능Web API는 말 그대로 “웹 환경에서 사용할 수 있도록 브라우저가 제공하는 API”를 뜻한다.이 API들을 사용하면 자바스크립트로는 직접 하기 어려운 작업도 간단하게 구현할 수 있다.대표적인 Web API는 다음과 같다.DOM APIHTML 요소를 동적으로 조작할 수 있음Fetch APIHTTP 요청을 ..

공통 프로젝트에서는 React를 썼는데 특화 프로젝트에서는 Next를 쓰려고 한다.React는 자바스크립트 라이브러리고, Next는 React의 프레임워크이다.라이브러리와 프레임워크의 차이가 뭔지 알아보자! 라이브러리 (Library)특정 기능을 구현하기 위해 제공되는 도구 모음개발자가 필요에 따라 호출하여 사용할 수 있는 함수나 클래스들의 집합ex) jQuery, Lodash, Numpy, pandas, tenserflow 등 프레임워크 (Framework)애플리케이션의 구조나 동작 방식을 정의하는 전반적인 툴 원하는 기능 구현에 집중하여 개발할 수 있도록, 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대 ex) Vue.js, Next.js, Spring, Django 등 여러 장치들이 합쳐져서 ..

🔎 개발자 도구웹 페이지를 디버그, 수정, 성능 분석하기 위한 강력한 도구 모음이다. 개발자 도구를 활용하면 웹 개발의 생산성을 높일 수 있다.크롬에서 윈도우는 F12 또는 Ctrl + Shift + I, 맥은 Command + Option + I를 누르면 개발자 도구가 켜진다. 🧩 주요 패널Elementshtml/css 상태 확인ConsoleJavaScript 코드 실행 및 디버깅로그 확인오류 메시지 표시Sources페이지 소스 검사 및 디버깅break point 지정 및 변수 모니터링Network브라우저에서 발생하는 통신 상태네트워크 모니터링네트워크 요청 상세 정보 확인Performance성능 측정페이지 로드 및 상호작용 성능 분석타임라인 기록Application저장소, 쿠키, 캐시 등을 관리Se..

Client-side framework클라이언트 측에서 UI와 상호작용을 개발하기 위해 사용되는 JavaScript 기반 프레임워크 필요한 이유? 🤷‍♀️웹에서 하는 일이 많아짐 웹에서 단순히 문서를 읽는 것만이 아닌 무언가(음악 스트리밍, 채팅 등)를 하게 되었다.현대적이고 복잡한 대화형 웹 사이트 -> 웹 애플리케이션(web application)Client-side framework를 통해 동적인 대화형 애플리케이션을 쉽게 구축할 수 있다. 다루는 데이터가 많아짐애플리케이션의 기본 데이터를 안정적으로 추적하고 업데이트(렌더링, 추가, 삭제 등)가 필요하다.애플리케이션의 상태를 변경할 때마다 일치하도록 UI를 업데이트해야 한다. SPA (Single Page Application)페이지 한 개로 구..

vsc로 웹 개발 코딩할 때 도움되는 익스텐션 추천 1. Live Server크롬에 html 파일 경로를 치면 웹 페이지로 볼 수 있는데, 이는 파일에 변경사항이 있을 때마다 새로고침해줘야 한Live Server를 install하면 vsc 우측 하단에 Go Live 버튼이 뜬다Go Live 버튼을 누르면 새로고침하지 않아도 파일을 저장하자마자 웹에서도 변경사항이 반영된다 2. Live Preview돋보기를 누르면 실시간으로 vsc에서 미리보기할 수 있다 3. Material Theme다양한 vsc 테마 제공Set Color Theme 버튼을 누르면 다른 테마로 변경할 수 있다 4. Material Icon Themevsc에서 뜨는 파일 아이콘 테마html, css, js...등 파일명 우측에 뜨는 파일 ..

로렘 입숨(Lorem Ipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트이다. 문서에서 텍스트가 보이면 사람들은 전체적인 프레젠테이션보다는 텍스트에 담긴 뜻에 집중하는 경향이 있어서 출판사들은 서체나 디자인을 보일 때는 프레젠테이션 자체에 초점을 맞추기 위해 로렘 입숨을 사용한다. 즉, 로렘 입숨은 디자인에 초점을 맞추기 위한 의미없는 글자이다. 나의 경우는 웹 페이지를 디자인할 때, 예시로 사용할 글자로 쓰려고 한다. 로렘 입숨을 쉽게 생성해주는 사이트가 있다. https://lipsum.com/ 해당 링크를 들어가면 다음과 같은 화면이 뜬다. paragraphs(문단), words(단어), bytes(글..