내맘대로 개발일지

📱테스트 환경"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 를 통해 이미지를 호출한다는 것이다.이미지를 호출하는 방식이 다르다 보니 한번씩 햇갈릴때가 있는데이번기회에 햇갈리지 않도록 기억해두자 ..

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"역시 사람의 뇌는 믿을게 안된다 .. 한달전에 한 세팅이 기억이 안나서전에 했던 설정을 다시 살펴보는 지경 .. ㅠ설정하는 방법을 기록하면서 다시한번 새기기 위해서 작성한다.1. 외부 폰트 파일 ( .ttf .otf ) 파일을 다운받는다.2. 다운받은 파일을 /assets/fonts 폴더에 저장한다.3.react-native.config.js 파일을 수정한다. ( 없으면 생성 )module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts'],};4. npx react-native-asset 명령어를 입력해주면 끝난다.5...

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"Nuxt 에서 사용하던 Router.push() 나React 에서 사용하던 navigate 를 사용하고있었다.간단하게 사용할 순 있는데 자꾸 까먹게되서 설정하는 방법을 기록하려고 한다.const TestCalcScreen = ({navigation}: NavigateProps) => { return (...)}export default TextScreen해당 컴포넌트를 생성할때 호출해주면된다.NavigateProps 타입은 만들어서 사용해주면되는데// types.tsximport {NativeStackScreenProps} from '@react-navigation/native-stack';import {RootS..

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"React 에서 사용하던 을 사용하려고 보니 당연히 안됐고 ..이게 몇개있는데 사용방법은 다른 글을 확인해보면 좋다. [RN] Input 사용하기📱테스트 환경"react": "18.2.0""react-native": "0.74.2"React 와 React-Native 가 같다고 하니Input 도 당연히 이렇게 쓰려고 하니 당연히 안됐고 ^^ ..React Native 에서 Input 을 사용하는 방법은 다음과 같다.import { T8735.tistory.com   [RN] Alert 사용하는 방법📱테스트 환경"react": "18.2.0""react-native": "0.74.2"버튼을 눌렀을 때 API 사용후..