코딩하는라민

[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] 바닐라 자바스크립트에서 header, footer 와 같은 공통 요소 처리 방법에 대해 📌 개요 1년 전 멋사에서 진행했던 마켓컬리 클론코딩 프로젝트를 리팩토링하기 위해 오랜만에 코드를 살펴보았다. 이 프로젝트는 바닐라 자바스크립트로 작성된 프로젝트인데, header, footer 와 같은 공통 요소가 각 html에 모두 삽입되어 있었다. 리액트에 익숙해진 현재 시점에서 이와 같은 코드를 보니 익숙하지 않았다. 바닐라 자바스크립트에서는 공통적인 요소를 어떻게 적용하는지 궁금해졌다. 📌 웹 컴포넌트 웹 컴포넌트란? MDN 에서는 "재사용 가능한 커스텀 엘리먼트를 생성하고, 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음이다." 라고 정의하고 있다. 등장 배경 컴포넌트는 재사..

webpack webpack 이란 의존 관계에 있는 html, css, javascript, 이미지 등과 같은 여러 개의 파일을 하나의 파일 또는 여러 개의 파일로 병합해주는 모듈 번들러이다. 쉽게 말해 여러 개의 javscript 파일을 하나로 묶어서 번들링하므로 script 태그에 여러 개의 javascript 파일을 로드할 필요가 없어진다. install npm i -D webpack webpack-cli webpack-dev-server --save-dev === -D : devDependencies webpack 기본 설정 const path = require("path") module.exports = { entry: "./src/js/index.js", output: { filename: "..

[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] 이벤트와 이벤트 핸들러, 이벤트 객체 event(e) 📌 이벤트란? `이벤트`(event)란 웹페이지에서 발생하는 사용자 상호 작용을 말한다. 웹 페이지에서 무언가가 일어났다! 라는 신호이다. 즉, 사용자가 어떤 행동을 취하거나 브라우저에서 자체적으로 발생하는 상황을 말한다. 📌 이벤트의 종류 마우스 이벤트 종류 설명 click 마우스 클릭 시 발생 dblclick 마우스 더블클릭 시 발생 mousedown 마우스를 누를 때 발생 mouseup 마우스를 뗐을 때 발생 mousemove 마우스를 움직일 때 발생 mouseover 마우스가 요소 위로 올라갈 때 발생 mouseout 마우스가 요소 바깥으로 나갈 때 발생 💡 `모달창 닫기` 기능 구현 시 mousedown 이벤트 사용 모..

[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...

[정처기/비전공자] 23년 3회차 정보처리기사 합격 🎉 오늘 드디어 정보처리기사 결과가 발표되었다. 일하다사 갑자기 받은 카톡 메시지에 웃음이 절로 나왔다. 😋📌 실기 합격!정처기 카테고리로 작성하는 글은 이 글이 마지막이 될 것 같다. 왜냐면... 드디어 합격! 그동안 다른 일들 때문에(?) 집중할만한 환경이 되지 않아 시험 취소도 하고, 몇번은 거의 공부하지 않고 시험장에 가서 시험비를 날렸었는데, 이번에는 2~3주동안 집중해서 제대로 공부해갔다. 시험이 쉽게 나온 것도 있지만 이번에는 퇴근하고 공부하고 주말에 카페가서 공부하고 나름 열심히 했다. 물론 일하면서 슬쩍 보고 지나간 단어가 하나 있어서 운이 좋은 것도 있었다. 그래도 80점이라니 🤭 가채점 하고 나서도 믿기지 않았는데, 점수는 그대로 나..

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