내맘대로 개발일지

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"나는 React 에서 Styled-Components 를 사용하는데전부 커스텀가능하게 만들고 사용한다.예를 들어서export const Flex = styled.div.` display: flex; align-items: ${(props) => props.alignItems || "center"}; justify-content: ${(props) => props.justifyContent || "center"}; gap: ${(props) => (props.gap ? `${pixelToRem(props.gap)}` : 0)}; flex-direction: ${(props) => props.fle..

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"이번에 Antd RangePicker 연결하면서 Dayjs 을 사용하는 것을보고오랜만에 잊고있었던 Day.js 가 생각나면서 흔히 사용하는 Moment 대신 사용하는이유를 다시한번 상기하는 시간을 가지게 되면 좋을 것 같아 기록하게 되었다.Moment.js와 Day.js는 모두 날짜와 시간 작업을 위한 라이브러리이다.두 라이브러리 모두 시간 형식 지정, 날짜 조작, 타임존 지원 등의 기능을 제공한다.MomentDay.js날짜 형식 지정 및 변환Moment.js와 비슷한 API 제공날짜 간 차이 계산불변성 (immutable data structure) 지원날짜 조작 (더하기, 빼기 등)빠르고 가벼운 성능다양한 로케일 지원..

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"와 해당 경고 때문에 진짜 정신나가는줄 알았다.ChatGPT 도 몰라 .. 스택오버플로우도 없어 ..다른 블로그에서도 찾아볼 방법이 없어 .. (NOBRIDGE) WARN Codegen didn't run for DebuggingOverlay. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code. (NOBRIDGE) WARN Codegen didn't run for SafeAreaView. This will be an error in the futu..

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"React Native 에서 env 를 사용하러면 설정해야 할 값들이 좀 있어서까먹지 않기위해 작성한다.바로 레츠꼬yarn add react-native-dotenv// ts용yarn add --dev @types/react-native-dotenv필요한 모듈 설치해주고bable.config.js 로 가서plugins: [ ... [ 'module:react-native-dotenv', { moduleName: "@env", path: ".env", safe: false, // 파일에 지정되지 않은 환경 변수가 있는 경우, 오류 없이 통과하도록 설정 ..

📱테스트 환경"react": "19.0.0-rc-02c0e824-20241028","react-dom": "19.0.0-rc-02c0e824-20241028","next": "15.0.2"이번에 React 가 19로 업데이트 되면서 바로 최신버전을 사용하려고했고 Antd 를 사용하여 스타일을 적용할 생각이였다.근데 React 가 19로 업데이트되면서 render 방식이 변경되었는데아직 최신 Antd 에서는 해당 반영이 안됐고편법으로 dynamic 를 사용해서 쓰려고 했는데도 당연히 안됐다.해당 방법을 수정할 방법이 있다면 좋겠지만일단 Antd 에서 업데이트가 될때까지는 어렵지 않을까 생각한다.나는 그래서 React 버전을 18.3.1 버전으로 다운그레이드 진행했다.그러니 에러는 고쳐졌지만 왠만하면다운그..

📱테스트 환경"react": "19.0.0-rc-02c0e824-20241028","react-dom": "19.0.0-rc-02c0e824-20241028","next": "15.0.2"사실 애널리틱스는 필수느낌으로 가고있는 것 같다.유저 리텐션이나 유입환경 등 파악하기 위해서는 필수이기 때문이다.예전에는 설정하기 되게 좀 까다로웠던 같은데쉽게 설정하는 방법이 있다고 하여 기록하려고 한다.import Script from 'next/script';export default function GoogleAnalytics({ gaId }: { gaId: string }) { return ( );}/lib/GoogleAnaly..

📱테스트 환경"react": "19.0.0-rc-02c0e824-20241028","react-dom": "19.0.0-rc-02c0e824-20241028","next": "15.0.2"  [NextJS] Syled-components 사용하는 방법📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^5.1.6" 😢 내가 겪은 문제 개발환경 ( http ) 에서는 문제가 없었는데 배포환경 ( https ) 에서는 한번씩 디자인이 깨졌다. 아니면 새로고침8735.tistory.com작년에 작성한적이있는데 새롭게 적용하려고문서를 좀 찾아보다보니 적용하는 방법이 변경됐었다.버전이 업데이트되면서 사용방식도 변경된것같은데 이에맞춰서최신버전에 맞게..

📱테스트 환경"react": "19.0.0-rc-02c0e824-20241028","react-dom": "19.0.0-rc-02c0e824-20241028","next": "15.0.2"회사에서 오랜만에 nextjs 를 쓸일이 생겨서하는김에 이것저것 다시 써보기로 하였다 !오늘 작성할 내용은 Sentry 연결하는 부분이다.센트리는 10에 9은 쓴다고 생각할 정도로 무료인데에러를 확인할 수 있다는 점에서 무조건적으로 사용해야한다고 생각할 정도로중요한데 이걸 설정하는 방법을 이번에 포스팅 해보도록 하겠다.yarn add @sentry/nextjs해당 모듈 추가해주고const { withSentryConfig } = require("@sentry/nextjs");const nextConfig = { //..

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"시뮬레이터에서는 이미지가 나오는데 실제 디바이스에서는 이미지가 나오지 않는아주 슬픈 버그가 발생했다.일단 나같은 경우는 s3 에서 이미지를 받아와서버 url 로 변경 후 프론트로 내려주는 방식을 사용하고있었다.보안때문에 s3 주소를 그대로 보여주면 안된다고 들어서 .encodeURI, encodeURIComponentdecodeURI, decodeURIComponent별의 별 방법을 사용해봤지만 시뮬레이터에서는 정상적인게이상하게도 실제 디바이스로만 가면 이미지가 안나왔다 ..챗지피티도 .. 블로그도 .. 스택오버플로우도 .. 어떤것도도움이 되지 않았는데 주소를 유심히 보다보니 http 로 이미지 주소가 나오고 있었다...

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"이미지를 호출하는 방식이 2개인데하나는 외부 URL 링크를 통해서 호출하는 방법이고하나는 내부 이미지를 호출 하는 방법이다.나는 이미지를 /assets/img 폴더에 모아놓기 때문에경로는 자기에 맞게 수정하면된다.1. 내부이미지 호출하는 방법이런식으로 source 안에 require 를 이용하여 내부 이미지를 호출한다.2. 외부이미지 호출하는 방법내부이미지 호출방법과 다른 점은 source 안에 중괄호가 하나 더 들어간다는 점과uri 를 통해 이미지를 호출한다는 것이다.이미지를 호출하는 방식이 다르다 보니 한번씩 햇갈릴때가 있는데이번기회에 햇갈리지 않도록 기억해두자 ..