내맘대로 개발일지

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"스플래시 화면을 보여주는 모듈이 있다고 하여 설치하고 사용하려고 한다.react-native-splash-screen해당 모듈을 설치하고 ~App.tsx 에서 useEffect 안에 넣어주면 되는데 나는 1초의 시간동안 보여주기로 했다.useEffect(() => { setTimeout(() => { SplashScreen.hide(); }, 1000); //스플래시 활성화 시간 }, []);나는 Window 환경에서 개발하기 때문에 AOS 쪽만 설정해줬는데// MainActivity.ktoverride fun onCreate(savedInstanceState: Bundle?) { Splas..

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"React Native 는 로컬에 있는 svg 파일을 바로 불러올 수 없다고 한다 .. ( 특이하네 .. )아무튼 로컬에 있는 이미지를 사용하려면 모듈을 설치해서 사용해야 한다고 하는데방법은 다음과 같다.yarn add react-native-svg모듈 설치 후 (IOS) pod install 도 해주고 ~yarn add --dev react-native-svg-transformer추가적으로 transformer 모듈도 설치해주면 import 할 수 있게 된다.마지막으로 추가적은 프로젝트 설정이 필요한데metro.config.js 파일 생성 ( 있다면 수정 )const {getDefaultConfig, mergeCon..

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"최근에 React-native 개발을 준비하고있다.React로 웹개발은 해봤었는데 앱개발이 꿈이였던지라 강의들으면서 새롭게 준비하고있다.프로젝트를 생성할일이 많을 것 같아서 기록하기로 했다.최신버전 설치npx react-native init projectName특정버전 설치npx react-native@0.73.8 init ProjectName --version 0.73.8그다음 설치가 완료되면해당 프로젝트 터미널로 와서 bundle install 그다음 Android 시뮬레이터 키고 yarn start 해주면 확인할 수 있다.Ios 같은 경우에는 cd ios 폴더로 이동해 준 다음 pod install 을 실행해주..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"데이트피커를 넣으려고하는데 로 넣으니까 너무 몬생겼다 ..몬생겨도 너무 몬생겨서 디자인 프레임워크를 이용하고 싶었는데또 React 를 개발을 주로 하다보니 Antd 가 생각이 났다.하지만 Antd 가 아무래도 React UI 에 맞춰져서 가이드도 그렇게 되어있다보니Nuxt 에서 하려니까 좀 애를 먹고 있었다..https://2x.antdv.com/components/overview/일단 Nuxt 의 Antd 는 여기서 확인할 수 있고 DatePicker 를 사용하는 방법은 다음과 같다.// nuxt.config.tsexport default { ... modules: [ ... ..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"Number 에 콤마(,) 를 찍어서 좀 정갈하고 이쁘게 보이게 처리하고싶은데ㅇㅏ주 간단하게 처리할 수 있는 방법이 있다.바로 parseFloat 를 이용하는건데방법은 다음과 같다.export const formatNumberComma = (numbers: number) => { return parseFloat(String(numbers)).toLocaleString()}여러군데에서 사용해야 할 경우 한번에 수정해서 처리할 수 있도록 함수로 만들었고parseFloat 와 toLocalString 을 이용하여 표시하였다.

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0" {{ index + 1 }} {{ item.title }} {{ item.regDt }} 간략하게 Click 이벤트가 상위에 있고 input checkbox 가 해당 태그 안에 있다.이럴때 checkbox 를 누르면 checkbox 도 되고 상위 detail 함수도 실행된다.ㅇㅣ런걸 이벤트 버블링이 발생했다고 하는데 막는 방법은 아주 간단하다.@click.stop 태그를 사용하는 방법이다. {{ index + 1 }} {{ i..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"Tap 이동을 위해 Tap 구조를 만들고 이동하고 있었지만Tap 을 이동할때마다 데이터를 다시불러오고 초기화면으로 돌아가는게 맘에 안들었다.이를 어떻게 하면 좋을까 생각하던 와중에 keep-alive 라는게 있다는 걸 알았다.// ChatGPTkeep-alive 는 Vue.js에서 제공하는 내장 컴포넌트로, 비활성화된 컴포넌트의 상태를 유지합니다.주로 탭 인터페이스나 라우터 뷰와 같이 컴포넌트를 자주 전환하는 경우에 사용됩니다. keep-alive 로 감싼 컴포넌트는 비활성화되더라도 DOM에서 제거되지 않고 활성화될 때 이전 상태를 그대로 유지이렇게 좋은게 있다면 써야겠단 생각으로 다음과 같이..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"const formData = new FormData();이런식으로 선언된 formData 에는 console.log 해봤자 데이터가 안보인다.그렇다. values 에 있을것만 같아서 열어봤자 없다.그래서 값을 확인하는 방법은 다음과 같다.for (const [key, value] of formData.entries()) { console.log(key, value);}값을 넣어줄 때는 key value 를 사용해서 값을 넣어주면 된다.number 는 안들어가니까 string 으로 변환해서 넣어줘야 한다.이 호출과 일치하는 오버로드가 없습니다.오버로드 1/3('(name: string, val..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"id 'org.springframework.boot' version '3.2.0'id 'io.spring.dependency-management' version '1.1.4' 와 이번건 .. 정말 오래걸렸다 .. :(일단 화면은 다음과 같은 화면이 있었고 ..파일 업로드를 누르면 File[] 배열을 서버에 전송해려고 했다.나는 Nuxt 프론트 작업을 하고 동료 분이 Spring Boots 서버 작업을 해주셨는데export interface Drive { id: number; name: string; image1: Images; image2: Images; image3: Images; ..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"테이블에 보이는 데이터들을 엑셀 다운로드 하는 기능이 필요해서 xlsxSheetJS Spreadsheet data parser and writer. Latest version: 0.18.5, last published: 2 years ago. Start using xlsx in your project by running `npm i xlsx`. There are 4486 other projects in the npm registry using xlsx.www.npmjs.com해당 라이브러리를 사용하기로 했다.사용방법은 엄청 간단하지만 어디에선가 또 사용할 수도 있기 때문에함수로 만들어놓고 js..