어리둥절 분석가 그리고 개발자

✔️ 설치 yarn add styled-components babel-plugin-styled-components yarn add @types/styled-components -D ✔️ pages/_document.tsx import Document, { Html, Head, Main, NextScript, DocumentContext, } from "next/document"; import { ServerStyleSheet } from "styled-components"; class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const sheet = new ServerStyleSheet(); con..

✔️ eslint 설치 npx eslint --init ? How would you like to use ESLint? ❯ To checkt syntax, find problems, and enforce code style ? what type of modules does your project use? ❯ JavaScript modules (import/export) ? Which framework does your project use? … ❯ React ? Does your project use TypeScript? ❯ Yes ? Where does your code run? ✔ Browser ? How would you like to define a style for your project? … ..

2021년 11월에 react-router-dom이 그간의 v5에서 v6로 업그레이드하였습니다 이에 맞춰서 코드를 변환시키다보니 react에서 현재 url을 가져오는 부분이 바뀌어서 조금 애를 먹었습니다. 기존에는 아래처럼 useRouteMatch()를 사용하고 있었어요 import { Link, useRouteMatch } from 'react-router-dom' import { useHistory } from 'react-router' ... const { path, url } = useRouteMatch() const key = useRecoilValue(keyState) const history = useHistory() const clickHandler = () => { history.push..

✔️ 필요성 react-native로 한동안 개발하다가 다시 react 프로젝트를 만들려고 하니 다음과 같은 에러가 발생했다 npx create-react-app project-name --template typescript You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remo..

✔️ 필요성 react-native 의 상단에서 뒤로가기 버튼을 깔끔하게 만들고 싶다면 어떻게 할 수 있을까? 필자는 styled-components를 활용하여 개발하였다 ✔️ 문제 해결 HeaderLeftGoBack이라는 컴포넌트를 만들어둔 다음에 Screen에서 쓰이는 곳마다 공통적으로 사용하자. 뒤로가기 꺽쇄 모양은 원하는 아이콘으로 얼마든지 활용가능하다. hitSlop값을 적당히 줘서 사용자가 적당히 아이콘 근처를 눌러도 뒤로가기를 클릭할 수 있도록 설정해주었다. import React from 'react'; import styled from 'styled-components/native'; import Icon from 'react-native-vector-icons/Ionicons'; con..

✔️ 필요성 react-native로 앱 개발을 할 때 MS Azure의 appCenter를 활용하면 CICD를 잘 구축할 수 있다. 이 때 매번 UI를 조금씩 수정할 때마다 새로 Deploy를 하고 build를 하고 모든 사람들이 새로 앱을 다운받아야 하는 것이 다소 귀찮다. CodePush는 모바일 앱 업데이트를 사용자의 장치에 직접 배포 할 수 있는 App Center 클라우드 서비스입니다. pod-install을 하지 않아도 되는 정도의 UI는 code-push 로 배포하고 앱을 2번 정도 껐다가 켜면 업데이트가 반영된다. https://docs.microsoft.com/en-us/appcenter/distribution/codepush/ Use CodePush to update your app ..

✔️ 필요성 글자 길이가 해당 Container의 길이보다 길면 말줄임표(...)로 줄이고 싶을 때가 있다 ✔️ 방법 (1) 직접 truncate 함수를 짜서 길이를 몇으로 할 것인지 정해준다 // 글자 후반부를 자르고 ..으로 대체 export const truncate = (word: string, n: number) => { if (word.length < n + 1) return word; return word.substr(0, n).concat('..'); }; ✔️ 방법 (2) 방법(1)보다 방법(2)가 더 선진 방법이다. CSS에서 max-width를 지정해준다음에 컴포넌트 props에서 numberOfLines를 1로 지정해주면 된다! import React from 'react'; imp..

✔️ 필요성 iOS 시뮬레이터로 개발하다보면 디바이스를 변경하면서 각 디바이스에서 어떻게 보여질 지 확인해야하는 상황이 자주 생깁니다. 제 iOS 시뮬레이터에서는 기본 디바이스가 iPhone 12로 되어있는데요. 보다 작은 화면인 iPhone 13 mini에서 UI를 확인해보고 싶습니다. ✔️ 문제 해결 //기존 npm run ios //수정 npm run ios --simulator="iPhone 13 mini" ✔️ 참고 iOS 디바이스 이름을 참고하세요~ npx react-native run-ios --simulator="iPhone 8" npx react-native run-ios --simulator="iPhone 8 Plus" npx react-native run-ios --simulator=..

✔️ 필요성 줄 너무 심각하게 마음에 안든다 어떻게 없애지 ✔️ 문제 해결 BottomBorder라고 생각했었는데 알고보니 그림자였다. 삽질 다 해봤는데 headerShadowVisible: false로 해주면 없어진다! //...

✔️ 필요성 Victory Native에서 x축과 y축을 예쁘게 꾸며봅시다 ✔️ x축 꾸미기 x축은 모든 숫자가 다 label로 나오게 하고 싶고, tick과 x축은 보이지 않게 하고 싶다. ✔️ y축 꾸미기 y축은 위치를 offsetX를 통해서 약간 이동시킨 다음에, 초를 분으로 바꿔서 2분 단위로 label이 나타나기를 원한다. 그리고 옅은 회색으로 보조선을 그리고 싶다. (grid) `${secondsToMinute(value)}`} /> ✔️ 통합 예제 코드 import React from 'react'; import styled from 'styled-components/native'; import {VictoryAxis, VictoryBar, VictoryChart} from 'victory-..