내맘대로 개발일지

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"React 에서 엑셀을 다운받는 기능을 추가하려고 한다.처음에는 xlsx 를 이용했는데 넘 못생겨서 스타일을 추가하려고 하니xlsx-js-style 라이브러리를 이용하면 된다고 해서 사용했다.예제만 따라해도 쉽게 사용할 수 있어서 금방 적용할 수 있었다.내 코드는 다음과 같다.import * as XLSX from "xlsx-js-style";export const excelDownLoad = (data: any) => { const worksheet = XLSX.utils.json_to_sheet(data); const headerStyle = { font: {bold: true, color: {..

📱테스트 환경"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 = { //..