코딩을 잘하고 싶은 코린이 동토니

사내 비즈니스 프로젝트인 제휴몰에서의 결제방식을 내부 결제 시스템으로 연결하는 작업이있었고 이를 위해 MSW를 통해 결제시스템 연결을 사전준비하기로 했다. 이슈사내 결제시스템으로 연결하기 위해선 구매하려는 콘아이템의 정보가 필요하다.하지만 구매 이전 단계의 화면들이 기획되지 않았고 API를 어떤 라우터를 사용해야하는지도 명확하지 않았기 때문에 어차피 결제 페이지 연동만 할거라면 주문서 작성에 필요한 데이터만 모킹해서 사내 결제시스템으로 연결하기로 결정했다.MSWMSW는 mock service worker의 줄임말로 브라우저의 서비스 워커를 통해 서버로 호출하는 실제 네트워크 요청을 intercept해서 가상의 response를 보내주는 API mocking 라이브러리이다.MSW를 사용하면 실제 data를..

주요 변경점useQuery1. 컨벤션의 변화기존 : queryOptions에 queryKey와 queryFn이 포함되지 않았음const { data: paymentPromotions, isSuccess } = useQuery(PaymentPromotionsKey.all(),fetchPaymentPromotions,)변경 : queryOptions에 모들 property 추가const { data: paymentPromotions, isSuccess } = useQuery({queryKey: PaymentPromotionsKey.all(),queryFn: fetchPaymentPromotions,})2. options의 변화(많은 변화가 있지만 제일 많이 사용하는 위주로 정리)cacheTime (삭제) =..

식별자 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름이다. 따라서 변수이름은 식별자라고도 불리며 식별자는 값이 아닌 메모리 주소를 기억하고 있다. 즉 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근하게 된다. 식별자란 용어는 변수 이름에만 국한되는것이 아닌 변수,함수,클래스 등의 이ㅡㄻ은 모두 식별자이다. 변수 선언 변수 선언은 변수를 사용하기위한 선언으로 JS에서는 var, let ,const 를 사용한다. ES6에서 let과 const가 도입된 이후 var은 잘 사용하지 않는다 let은 값이 변경 가능한 변수 const는 값이 변경 불가능한 상수이며 두가지 모두 블록 레벨 스코프를 지원한다. 변수의 실행시점과 호이스팅 console.log(score); *// u..

state란? state는 변경될 수 있는 데이터를 말한다. (Hooks가 사용되기 이전에는 state는 함수형 컴포넌트에서 사용이 불가능 했지만 Hooks가 나온 이후로는 함수형 class형 관계없이 사용이 가능하다.) 즉 state는 컴포넌트 내에서 데이터를 유동적으로 관리해야 할 때 사용한다. Props? 이전에 공부한 props(properties)는 컴포넌트간에 전송이 가능한 데이터였지만 부모 컴포넌트에서 전달되는 값이였기 때문에 한 컴포넌트안에서 데이터 변경을 할수가 없다. state 접근 state의 경우 직접적으로 state의 값을 변경시켜주려하면 안된다. class형 컴포넌트에서 setState()함수를 통해 state의 값을 변경시켜주어야 한다. state 예시 counter.js im..

Props JS로 웹개발을 진행해보신분들이라면 수도없이 많이 접했을 단어일 것입니다. 기본적으로 Props는 컴포넌트의 속성(attribute)을 설정할 때 사용하는 요소입니다. 즉 컴포넌트에서 다른 컴포넌트로 값을 전해주는 요소입니다. 중요한건 Props는 모든 컴포넌트와 컴포넌트 사이에서 값을 전달할 수 있는것이 아니라 부모 컴포넌트로부터 값을 불러와 자식 컴포넌트가 사용을 할 수 있게 됩니다. 밑에 예제를 한번 보게되면 import React, { Component } from "react"; import Mycomponent from "./Component/MyComponent"; class App extends Component { render() { return ( ); } } export d..