성장일기

문제 상황navbar의 사이드 메뉴가 펼쳐졌을 때 body의 스크롤을 막아야 했습니다.해결 방법 useEffect(() => { if (mobileMenuCollapsed) { document.body.style.overflow = 'hidden' document.body.style.width = '100%' document.body.style.height = '100%' } else { document.body.style.overflow = 'auto' document.body.style.width = '' document.body.style.height = '' } return () => { document.body...

문제 상황대량 청구서를 발송 중에 취소하는 로직이 필요했습니다.그래서 fetch 비동기 통신을 취소하는 abortController를 사용했습니다. 🚨 주의사항abortController는 프론트의 요청만 취소하는 것임을 알아야 합니다.요청 이후에 백엔드에서 일어나는 일은 제어할 수 없습니다.예를 들어 청구서 발송을 클릭하고, 곧바로 취소를 눌러서 요청을 취소했다하더라도 백엔드에서는 발송이 시작된 상태이고 이것을 취소할 수는 없습니다.저는 위와 같은 이유로 해당 로직을 작성했지만, 사용하지는 못했습니다 :(해결 방법메일을 발송하는 로직을 훅으로 만들어서 사용하는 컴포넌트에서 호출하도록 했습니다.import AbortController from "abort-controller";export functi..

1️⃣ script 초기에는 프로그램의 규모가 작았기 때문에 약간의 상호작용만 제공하면 됐기에 다른 파일을 불러올 때 script를 사용하여 전체 다 가져옴 문제점 자바스크립트는 파일마다 독립적인 스코프를 가지지 않고 전체 파일이 하나의 전역 객체를 공유하여 사용 ⇒ 전역변수가 중복되는 문제가 발생할 수 있음 (위 같이 여러 개의 파일로 분리해도 1, 2, 3이 같은 스코프를 공유하기 때문에 모듈화가 아님) 문제 해결 모듈: 재사용 가능한 코드 조각으로 애플리케이션을 구성하는 개별 요소 파일을 모듈로 나누어 내보내고 불러옴 ⇒ Node.js는 Common JS를 채택 2️⃣ Common JS module.exports = { ... } // 모듈 내보낼 때 const utils = require(&#39..

들어가며... 팀 프로젝트를 할 때 백엔드의 진행 속도가 프론트보다 느려서 API 완성을 기다리는 입장이었다. 당시 단순히 json 파일로 데이터를 모킹해서 사용하다보니 나중에 수정할 코드가 많았고 정상적으로 api 요청이 들어가고 있는건지 알 수 없는 문제가 있었다. 그래서 최근에는 msw를 사용해서 api를 모킹하고 있다. 🍀 MSW (Mock Service Worker)란? 서비스 워커(service worker)를 사용하여 네트워크 호출을 가로채는 API 모킹 라이브러리 실제 서버를 대신하여 브라우저 내에서 가상의 서버를 구축하여 개발 및 테스트할 수 있음 API 스펙은 나왔지만 아직 구현되지 않은 경우 임시로 사용 가능함 특징 모킹이 네트워크 단에서 일어나기 때문에 프론트 코드를 실제 API와 ..

들어가며 최근 Fetch를 사용하던 중 단순히 javascript에서 사용할 때와 react에서 사용할 때 차이점이 있어 이를 공부하게 됐다. fetch는 비동기로 동작하기 때문에 신경쓸 점이 많았다. 그리고 테스트 환경에서 사용하려면 추가적으로 필요한 설정이 있기에 이것까지 정리해보려 한다! 🍀 Fetch란? ES6에 도입된 자바스크립트 내장 함수로, 클라이언트가 서버에 네트워크 요청을 보내서 정보를 받아올 때 사용함 Promise 기반이라 비동기로 응답 받은 데이터를 다루기 쉬움 내장 함수라서 모듈 설치할 필요가 없음 기본 문법 fetch의 기본 메소드(생략시)는 get임 fetch(url, { method: "GET", // 기본값:GET (POST, PUT, DELETE, etc.) headers..

들어가며 처음에 비동기 통신을 공부할 때, axios, fetch, ajax를 배우며 대체 뭐가 뭔지 모르겠고 뭘 써야할지 헷갈렸던 경험이 있다. 최근 fetch를 공부하며 어렴풋이 알고 있던 부분을 정리해봤다. 요약하자면... Ajax는 과거 비동기 통신 방식이며 지금은 거의 사용하지 않음! Axois는 비동기 통신할 수 있는 라이브러리라서 설치해야 사용 가능! fetch는 최근 javascript에 생긴 메서드라서 가장 편하고 좋지만 단점도 존재! 🍀 Ajax / Axois / Fetch Ajax -> Axios -> Fetch 오래된 순서이며, 이전 방식의 문제를 해결하기 위해 다음 방식이 생겨남 Ajax 과거 브라우저에서 화면을 갱신하지 않고 서버로부터 데이터를 받아오기 위해 사용하던 프로그래밍 ..

🌳 해설 코드 뜯어보기 메가테라 프론트엔드 생존코스의 4주차 과제를 진행했다. 기본적인 기능 구현은 끝마쳤지만 과연 이게 최선의 코드일지 고민스러웠다. 컴포넌트의 구조, 상태의 위치, hook과 함수의 분리 기준, 그리고 컴포넌트 명 짓는 방법 등 풀리지 않는 궁금증이 있었다. 다행히 생존 코스는 모범 해설 코드를 제공하기에 궁금증을 어느정도 해소할 수 있다. 나와 어떻게 다르게 했는지 궁금했기에 조각조각 뜯어서 의도를 파악했고 더 최선의 코드라고 생각되면 내 코드도 함께 수정했다. 🌳 이 부분이 정말 최선일까? 과제를 하다가 가장 애를 먹은 부분이 뭐였냐면... 메뉴 주문을 누르면 영수증이 나타났다가 5초 후에 사라지는 기능 구현이었다. 그래서 해당 코드를 꼼꼼히 보고 있었다. 그러던 중, 이해 되지 ..

🍀 들어가며 웹 사이트 방문자의 데이터를 수집하기 위해 구글 애널리틱스를 활용해보기로 했다. 정적 사이트나 CSR이라면 index.html안의 다른 페이지에도 적용하기 이렇게만 설정하면 페이지 이동시에는 데이터 수집이 안된다. 이동시에도 해당 코드가 작동하도록 설정해야한다. 일단 gtag의 동작들을 함수로 분리해준다. lib/gtag.js export const pageview = (url) => { window.gtag("config", process.env.NEXT_PUBLIC_GA_ID, { page_path: url, }); }; export const event = ({ action, category, label, value }) => { window.gtag("event", action, { ..

🍀 URI / URL / URN의 상관관계 URI는 URL과 URN을 포괄하는 개념이다. 모든 URL과 URN은 URI이라는 말이다. Scheme: 리소스에 접근하는데 사용할 프로토콜. 웹에서는 http나 https 사용 Host: 접근할 대상(서버)의 호스트명 Path: 접근할 대상(서버)의 경로에 대한 상세정보 🍀 URI Uniform Resource Identifie = 인터넷상의 리소스 자체를 식별하는 고유한 문자열 시퀀스 Uniform: 리소스을 식별하는 통일된 방식 Resource: URI로 식별이 가능한 모든 종류의 리소스(웹 브라우저 파일 등)을 지칭함 Identifier: 다른 항목과 구분하기 위해 필요한 정보 => 통합 리소스 식별자 ex) google.com, https://googl..

REST는 Representational State Transfer의 약자, 로이필딩에 의해 만들어짐 앱 사이의 결합도를 낮추게끔 설계하는 아키텍처 스타일로 서버와 클라이언트가 별도로 구축되고 결합될 수 있게 함 🍀 REST API 자원을 이름으로 구분하여 자원의 상태를 주고받는 방식 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다. 🍀 Richardson Maturity Model 리차드슨이 정의한 REST API의 성숙도 모델 대개는 4가지를 모두 만족하지 않고, Resou..