Chunho’s DevLife

처음 프로젝트를 시작할 때 Next13버전의 App dir은 Stable하지 않다는 이유로, App dir가 아닌 Pages dir를 사용하여 페이지 라우팅을 진행했었다. 이후 기획의 변경으로 프로젝트에 다국어를 지원해야 하는 상황에 직면했다. 이전에 했던 프로젝트 중에 다국어를 적용했었던 경험이 있어 어렵지 않게 적용할 수 있다고 생각했는데, Next13에서는 꽤나 많은 삽질을 하게 되었다.... (30분이면 틀은 잡아놓을 수 있다고 생각했었는데, 동작을 하지 않아 이틀을 날려먹었던 ㅎㅎ) 처음 다국어를 지원하기 위해 사용한 라이브러리는 next-translate이다. nextJS의 공식문서에 Internationalization 관련 section이 있었고 locale 관련하여 기능을 제공해 주는 것..

페이지 간 이동을 할 때, Web과 달리, React Native에서는 Stack 구조로 되어있는 React Navigation을 사용한다. Web에서는 url을 통해 라우팅을 했다면, RN에서는 화면이 기존의 화면 위에 계속해서 쌓이게 된다. React Navigation을 사용하기 위해 npm install @react-navigation/native npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view npm install @react-navigation/stack 다음 명령어를 사..

https://github.com/react-native-webview/react-native-webview GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView React Native Cross-Platform WebView. Contribute to react-native-webview/react-native-webview development by creating an account on GitHub. github.com react-native-webview의 공식 문서에서 자세한 내용을 확인할 수 있다. react-native에서 Webview를 사용하는 방법은 생각보다 간단했다.. npm i ..

https://reactnative.dev/docs/environment-setup Setting up the development environment · React Native This page will help you install and build your first React Native app. reactnative.dev 자세한 세팅 방법은 React-Native의 공식문서에서 확인할 수 있다. brew --version 먼저 Homebrew 설치 여부를 확인해 준 뒤에, 설치가 되어있지 않다면 설치해준다. https://brew.sh/index_ko Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 위 사이트에서 명령어를..

먼저 모듈을 설치한다. npm install @paypal/react-paypal-js https://www.npmjs.com/package/@paypal/react-paypal-js @paypal/react-paypal-js React components for the PayPal JS SDK. Latest version: 8.0.0, last published: 8 days ago. Start using @paypal/react-paypal-js in your project by running `npm i @paypal/react-paypal-js`. There are 46 other projects in the npm registry using @paypal/react-p www.npmjs.com ..

프로젝트의 규모가 클수록, 또는 지속적인 버전 관리와 고도화가 필요할 경우 개발 전 프로젝트 설계는 매우 중요하다고 생각한다. 또한 컴포넌트를 구조적으로 설계하여 최하단에서 최대한 재사용이 가능한 컴포넌트들을 확장성 있게 만들어야 한다. 기능은 같지만 디자인이 조금씩 달라지는 Tab, Select box, Modal, Button, Input, 여러가지 Form들을 매번 새로 생성하는 것은 매우 비효율적이고 프로젝트의 코드를 지저분하게 만든다. https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/ 아토믹 디자인을 활용한 디자인 시스템 도입기 | 카카오엔터테인먼트 FE 기술블로그 정호일(harry) 카카오..

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

API에 로그인 요청 이후, API에 로그인 세션을 확인하는 요청을 보냈을 때 404를 응답했다. 분명 로그인 요청은 200의 응답과 함께 정상적으로 성공을 했지만, 세션을 받아오지 못하는 이유를 알 수 없었다. 로그인 요청의 Response Header에서 Set-cookie의 same-site 값이 Strict로 설정이 되어있었고, 서로 다른 도메인으로 요청을 보냈기에 set-cookie가 되지 않았 던 것이다. 이를 해결하기 위해 proxy 설정을 해주었다. React 프로젝트의 src 디렉토리 안에 setupProxy.js 파일을 만들어 준 뒤 const {createProxyMiddleware} = require('http-proxy-middleware') const baseUrl = '요청을 ..

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 위와 같이 단방향으로 데이터가 흘러갔기에..