내맘대로 개발일지

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

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"https://postcode.map.daum.net/guide Daum 우편번호 서비스우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.postcode.map.daum.net해당 가이드를 참고하여 만들었고나는 유저에게 따로 먼저 정보를 받지 않고 주소 검색한 정보를입력 포맷에 입력될 수 있도록 만들고 싶었다.1. 팝업을 통해 받은 정보를 등록할 수 있도록2. 함수로 만들어서 여러 곳에서 사용 할 수 있도록코드는 다음과 같다.// 타입스크립트 daum 무시 -> 나중에 수정..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"기존에 React 나 Next 개발을 할 때는 index.html 파일에 를 넣을 수 있었는데Nuxt 는 html 파일이 없더라 .. 그래서 title 이나 meta 데이터나 외부 script 들을어디다가 넣어야하나 .. 하고 찾아봤는데 생각보다 정보가 없어서당황스러웠다.그리고 nuxt.config 파일에 head: { ... } 에 넣으면 된다는데 안되는게 아닌가 !!알고보니 이건 반쪽자리 답변 ? 또는 정보 부족이였고app 안에 head 안에 넣어주면 됐다.사용방법은 다음과같다.// nuxt.config.tsexport default { ... app: { head: ..