Chunho’s DevLife

Orval 라이브러리는 Restful Codegen 라이브러리로, React app, React-query, Svelte-query, Vue-query, React app with swr, nx fastify react, angular app 등 다양한 라이브러리에서 endPoint별 Codegen 기능을 제공한다. 나는 React-Query 기반 Code generator가 필요해서 열심히 구글링을 하던 중 가장 강력하고 안정적으로 보이는 Orval이라는 라이브러리를 발견했다. https://orval.dev/ orval orval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI ..

Footer에 position:absolute를 주고, bottom 0으로 고정시키면 Footer를 바닥에 고정시킬 수 있다. 하지만 위와 같이 화면의 세로 px이 부족하거나 브라우저의 하단을 잡고 끌어올리게 될 경우 Footer가 Section을 잡아먹는 현상이 발생한다. 따라서 Footer는 화면의 하단을 잡고 끌어올릴 경우, 덮여져야 한다고 생각했다. 만약 Layout에서 height을 100vh로 줄 경우, 위와 같이 Footer 아래로 여백이 생기는 현상이 발생한다. 이를 해결하기 위해서 Body에 flex를 준 뒤, Section(main)에 flex 1을 주게 되면, Section이 차지하는 비중이 가장 많아지게 되어 화면의 세로 px과 상관 없이 항상 footer가 바닥에 붙어있게 된다.

학부시절 처음 React로 프로젝트를 진행할 때 디자인 패턴에 대해 정확하게 인지하지 못하고 있었다. 그 때 당시 잡았던 구조와 작성했던 코드를 다시 보면 딱히 디자인 패턴이라고 할 만한 부분이 없었지만 굳이 정하자면 MVC 패턴에 가까웠던 것 같다... 서버 상태 관리 또한 이루어지지 않고 있던 상태였다. MVC 패턴의 경우 프로젝트의 규모가 커지거나 복잡해질수록 컨트롤러가 비대해진다는 문제가 있었다. 이후 어느정도 여러가지 부분들에 대한 개념이 잡힌 후 Redux, Context API를 사용하여 전역 상태 관리와 서버 상태 관리를 하며, Flux 패턴을 사용하여 당시의 프로젝트들을 진행했다. Action -> Dispathcer -> store -> view 위와 같이 단방향으로 데이터가 흘러갔기에..

IamPort에 이어 Omise PG를 연결해야 했다. 먼저 결제 페이지의 tsx 내부에 omise를 사용하기 위한 script 코드를 넣어줬다. 프로젝트는 NextJS를 사용한 SSR 아키텍쳐였기에, next/script가 제공하는 Script 태그를 사용했다. Checkout Button 클릭 시, const handleSubmit = useCallback( async (values) => { // @ts-ignore const OMISE = window.Omise // @ts-ignore const OMISE_CARD = window.OmiseCard try { const res = await postOrders(values) OMISE_CARD.configure({ publicKey: res.om..

NextJS 환경에서 Google Analytics는 다음과 같이 적용할 수 있다. 1. lib폴더에 gtag.js 파일을 생성한다. export const GA_TRACKING_ID = `${process.env.NEXT_PUBLIC_GA_TRACKING_ID}` // https://developers.google.com/analytics/devguides/collection/gtagjs/pages export const pageview = (url) => { window.gtag('config', GA_TRACKING_ID, { page_path: url }) } // https://developers.google.com/analytics/devguides/collection/gtagjs/events..

비회원 장바구니 기능 구현 중 비동기 처리 관련하여 Issue가 있었다. 기존에는 회원만 장바구니 추가, 장바구니 조회가 가능하여 API 호출 시 Session 정보가 없으면 401을 응답했다. 내가 생각한 비회원 장바구니 기능 로직은 다음과 같다. 1. 로그인이 되어있지 않은 상태에서 장바구니에 상품 추가 시 localStorage를 사용한다. (새로고침 시 데이터를 유지하기 위함) 2. 로그인이 되어있지 않은 상태에서 장바구니 페이지로 접근 시, localStorage에 있는 데이터를 사용한다. (결제 시에는 로그인 필요.) 3. 비회원 장바구니에 상품이 있는 상태에서 로그인 시, localStorage에서 상품 데이터를 가져와 API에 POST해준다. 이후 localStorage 데이터를 clear..

QA를 진행하며, Safari 환경에서 테스트 시 Select Box Option 텍스트가 노출 안되는 이슈가 있었다. 문제의 원인은 의외로 간단했는데 label을 option의 속성으로 지정해주어 생긴 이슈였다. option의 라벨을 속성값이 아닌 option태그 안에 직접 넣어주어 해결할 수 있었다. {options.map((option, index) => { let optionAttribute: IOptionProps if (typeof option === 'string') { optionAttribute = { key: option, label: option, value: index } } else { optionAttribute = option } return })} 위 코드를 )} {opti..

NextJS & Typescript 환경에서 애플 로그인을 연결하며, 몇 가지 문제와 마주했다. 우선 첫 번째로 react-apple-login 라이브러리를 사용했는데, 연결은 잘 됐지만 의존성 문제가 발생하여 배포가 안 되는 이슈가 있었다. 따라서 다른 라이브러리를 찾아봤다. 두 번째로 react-apple-signin-auth라는 라이브러리가 있어 사용해봤다. 해당 라이브러리는 타입스크립트를 사용하는 부분에서 문제가 있어 사용하지 못했다.  결국 라이브러리를 사용하지 않고 애플 공식 홈페이지에 있는 개발자 문서를 보며 react에 맞춰 적용하기로 결정했다.. Typescript를 사용하며, 기존에 없는 window객체의 값에 접근하려 했을 때 Window & typeof globalThis 에러가..

프로젝트를 진행하며 종종 컴포넌트가 자동으로 import 되지 않는 불편함이 있었다.. 라이브러리를 찾던 중 Auto Import라는 라이브러리가 있어서 설치했다..) ES6, TS, JSX, TSX 모두 지원한다! 설치 후 import가 되어있지 않은 컴포넌트를 클릭하면 위와 같이 왼쪽편에 전구 모양이 생기는 것을 확인할 수 있다. 전구 모양을 클릭한 뒤 가져오기 추가를 누르면 자동으로 import가 된다!

Facebook Login을 구현하기 위해 먼저 appId를 발급받아야 한다. https://developers.facebook.com/?locale=ko_KR Meta for Developers Conversations 2022: 제1회 Meta 비즈니스 메시지 콘퍼런스 가장 인기 있는 메시지 플랫폼에서 더욱 빠르고 개선된 경험을 구축하고자 하는 비즈니스, 개발자 및 파트너를 위한 제1회 콘퍼런스를 개최 developers.facebook.com 위 url에서 발급받을 수 있으며, 발급받는 과정은 생략하겠다. npm install react-facebook-login 타입스크립트일 경우 @types/react-facebook-login 명령어를 통해 라이브러리를 설치해준다. 나같은 경우 peer de..