코딩하는라민

[React] Axios instance 와 interceptors 로 Axios 효율성 높이기 전역 Axios 기본값 설정하기 axios.defaults 속성을 사용하여 전역 Axios 기본값을 설정할 수 있다. 이를 통해 Axios 요청에 적용되는 기본값을 지정할 수 있다. 전역 Axios 기본값을 설정하면 코드를 간결하게 유지할 수 있고, 일관된 설정을 적용해 코드의 가독성과 유지보수성을 향상시킬 수 있다. axios.defaults.baseURL = 'https://devDiary.com/'; axios.defaults.timeout = 5000; axios.defaults.headers.common['Authorization'] = 'Bearer AccessToken'; axios.default..

[React] React 에서 Axios 사용하기 Axios 란? Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 브라우저 및 Node.js 환경에서 모두 사용할 수 있다. 브라우저 환경에서는 XMLHttpRequests 를 생성하고, node.js 환경에서는 http 요청 생성한다. Axios는 백엔드와 통신하기 위해 AJAX 요청을 만들고 응답을 다루는 데에 사용된다. 다른 비동기 통신 api 보다 사용하기 쉬워 백엔드와 통신하기에 수월하다. Axios 를 사용하면 좋은점 Axios 는 XMLHttpRequest, Fetch API 등 다른 HTTP 클라이언트와 비교할 때 좋은 점이 있다. 간단해서 HTTP 요청을 보내고 응답하는 것이 쉽다. 서버에서 받은 응답을 자동으로 JSON..

[Next.js] 모바일 브라우저 환경에서 초기 렌더링 시 미디어쿼리 적용되지 않는 현상 문제 상황 프로젝트 진행 중 모바일 브라우저 환경에서 미디어쿼리가 적용되지 않는 현상을 확인했다. 사용중인 스펙은 `next.js`, `emotion/styled`, `react-responsive`, `vercel`. 데스크탑 브라우저에서 페이지를 오픈했을 때는 미디어쿼리 스타일이 정상적으로 작동했다. 물론 브라우저의 창을 줄여 모바일 뷰포트로 변경되었을 때에도 정상적으로 작동했다. 하지만 모바일 브라우저에서 페이지를 오픈했을 때 미디어쿼리 스타일이 적용되지 않았다. 모바일 환경에서는 왜 적용되지 않는걸까? 🫨 Next.js 에서는 기본적으로 `pre-rendering` 을 한다. pre-rendering 이란 서..

[Javascript] confirm() 후 clipboard api 사용 시 TypeError 발생 📌 confirm 후 clipboard api 사용 시 에러 [JavaScript/React] 현재 URL 복사하기 & window.location 객체 [JavaScript/React] 현재 URL 복사하기 & window.location 객체 프로젝트를 진행하면서 페이지의 url 을 사용자에게 공유하는 기능을 구현하게 되었다. 그러면서 알게된 것이 바로 window.location 객체이다. windo ramincoding.tistory.com 지난번 포스팅에서 window.location 객체와 cilpboard api 를 이용해 현재 url 을 복사하는 로직을 구현했었다. 버튼을 누르자마자 url..

[JavaScript/React] 영역 외 클릭 감지로 모달/프로필 박스 닫기 기능 구현 웹 페이지를 구현하다보면 모달창이나 프로필 박스 혹은 사이드바를 구현해야 하는 경우가 많다. 모달창의 예를 들어보면, 모달창의 바깥 영역을 클릭했을 때 창을 닫을 수 있으면 사용자 경험을 향상시킬 수 있다. 이번 프로젝트의 경우에는 프로필 박스가 페이지가 전환됨에도 닫아지지 않고, 외부 영역을 클릭해도 상태 변화가 없어 닫아지지 않았다. 그래서 찾아본 기능이 영역 외 클릭 감지 기능이다. 👀 기본 레이아웃 더보기 HTML ramincode hello world! CSS #wrapper { width: 200px; height: auto; margin: 0 auto; position: relative; } #usern..

[JavaScript/React] 현재 URL 복사하기 & window.location 객체 프로젝트를 진행하면서 페이지의 url 을 사용자에게 공유하는 기능을 구현하게 되었다. 그러면서 알게된 것이 바로 window.location 객체이다. window.location 를 활용하면 웹페이지의 url 과 관련된 다양한 작업을 할 수 있다. 대표적으로 url 복사, 페이지 이동, 새로고침 등이 있다. 📌 window.location 객체란? window.location 객체는 웹 브라우저의 현재 URL 에 관련된 정보를 제공하는 Javascript 의 객체다. 이 객체를 이용해 현재 페이지의 URL 을 가져오거나 변경할 수 있다. 기본 url 이 다음과 같다고 하자. https://www.example...

[Frontend] 스웨거(swagger) API 사용하는 방법 (feat. 리액트) 프론트엔드 개발자로써 첫 회사에 들어가자마자 스웨거 API 링크를 받았다. 멋사에서 프로젝트할 때 서버리스로 Firebase 만 써본 입장에서 스웨거 API 는 너무 새로웠다. method 종류별로 색이 달랐고, url 과 Parameters, Pesponses, Responses 등등 낯설어서 익숙해지는 데 며칠이 걸렸던 기억이 있다. 지금은 시행착오를 거치면서 아주 잘 사용하고 있고, 이렇게 편한 도구가 있을까 싶을 정도이다. 🙂 스웨거(swagger)란? REST API를 설계, 빌드, 문서화 하는 것을 도와주는 오픈 소스 소프트웨어 프레임워크이다. API 를 문서화해서 사용하기 쉽게 만들며, 따로 API 문서 작..

[React] 리액트에서의 아토믹 디자인(Atomic Design)이란 Medium Out of nothing, something. You can find (just about) anything on Medium — apparently even a page that doesn’t exist. Maybe these stories about finding what you didn’t know you were looking for will take you somewhere new? bootcamp.uxdesign.cc 본 게시글은 위의 글을 읽고 번역하여 정리한 내용입니다. 📌 아토믹 디자인(Atomic Design) 효율적이고 확장 가능한 웹 애플리케이션을 만드는 방법중의 하나는 아토믹 디자인 시스템을 사용..

[React] React router 와 React router dom 에 대해 📌 React router 와 React router dom ? 리액트 팀 프로젝트를 하고있을 때였다. 리액트 라우터로 SPA(Single Page Application) 를 구현했다. 그러던 중 package.json 에 아래의 사진처럼 react-router 와 react-router-dom 이 두 가지가 설치되어 있는 것을 발견했다. 왜 두가지나 있는거지? 하고 구글링을 했다. 요약하면, React Router는 라우팅을 처리하는 핵심 라이브러리이고, React Router DOM은 React Router를 웹에서 사용하기 쉽도록 확장한 라이브러리이다. 즉 React Router DOM 은 React Router 을 포..

[React] React.lazy 코드 스플리팅으로 프로젝트 성능 개선하기 📌 React.lazy 함수를 사용하게 된 이유 리액트 프로젝트를 진행하면서 중간중간 Light House 를 이용해 성능 검사를 진행했다. 다른 점수는 항상 90점 이상으로 나왔는데 '성능' 점수만 항상 주황색으로 60~70점 정도가 나왔다. 이 6, 70점도 잘나온 편이었고 정말 성능이 좋지 않은 페이지의 경우에는 4, 50점대까지 나왔다. 성능 최적화는 코드를 작성하고 나서 수행해야 하기 때문에 일단 프로젝트에 집중했고, 추가적으로 성능 개선을 진행하였다. 📌 React.lazy 함수란? React.lazy() 는 동적으로 코드를 로드하고 렌더링할 수 있게 해주는 React의 기능 중 하나이다. 이 기능을 사용하면 일반적인 ..