728x90 반응형 전체 글233 devExtreme 사용 중 만난 에러 보통 Selection 기능을 사용하기 위해 DxGrid에 ref를 지정해놓고 computed로 해당 ref.value.selectedRowData로 계산을 해 props로 모달에게 넘겨줄 것이다. 아래는 항상 정상 작동되다가 갑자기 되지 않는 이슈가 발생했을 때에 유용한 방법이다. function onSelectionChanged(e) { selectedRowsData = e.selectedRowsData } 만약 사용하는 ref의 ref.value. selectedRowData가 있는데 콘솔을 아무리 찍어봐도 변하는 값이 없다면 이렇게 해보자. const가 아닌 let을 사용한다는 점이 맘을 불편하게 하지만 어떻게든 해결해냈다. 2024. 1. 16. Vue3.0 + Nuxt 프로젝트 진행 후 정리 프로젝트를 진행하며 기존에 배웠던 React.js나 React.ts가 아닌 Vue.ts를 썼다. 사실 처음부터 Vue3.0과 Nuxt를 쓰느라 Vue2와 Vue3.0의 차이, Vue와 Nuxt의 차이에 대해선 잘 모르겠다. React를 사용할 때는 항상 axios를 service 폴더에서만 사용하여 백엔드와 연결했었는데, Vue를 쓰면서는 store에서 fetch를 사용하며 정보 교환을 했다. 덕분에 Pinia란 것을 처음 사용해보게 되었는데, 아직도 해당 코드를 전부 파악했다기보다는 내가 사용했던 코드는 파악한지라 계속해서 공부가 필요할 것 같다. 취준생인 우리들이 쓰는 차트메이커 라이브러리는 보통 chart.js나 d3.js 정도이다. 그러나 이번 프로젝트에서는 devExtreme이라는 새로운 라이브.. 2023. 11. 22. [패스트캠퍼스] 앱개발 강의 학습 후기 [내일배움카드] 를 사용해서 평소 애용하던 fast campus에서 앱 개발 강의를 수강했다. 솔직히 자주 듣진 않았다..! 집에 오면 항상 8시이기 때문에... 매일 1시간 듣는 게 생각보다 어려운 일이더라. 프로젝트 발표날과 강의 제출 마감날이 동일해 여간 힘든 일이 아니었다. 패스트 캠퍼스에서 제공하는 앱개발 강의의 이름은 ' 한 번에 끝내는 앱 개발 : 기획부터 개발, 배포까지' 이다. 약 5주 간 배우고 싶었던 앱 개발의 기획부터 배포까지 배운다고 생각하니 5만원을 환급받지 못해도 꽤나 이득 아닌가? 라는 생각이 들었다. 강의를 수강하며 내가 중요하게 여겼던 점은 js와 dart의 기본적인 문법 차이였다.영어와 스페인어가 기본적인 문법만 살짝 다르지, 꽤나 유사해 문법과 단어만 잘 알아두면 기본.. 2023. 11. 20. Dart 기초 공부 Dart Google에서 개발 객체지향 프로그래밍 언어 두 가지의 컴파일러(JIT, AOT) 강력한 타입 시스템 컴파일러 JIT(Just In Time) 코드 실행 시점에 컴파일 -> 빠른 개발/디버깅(Hot-Reload / Hot-Restart 구현 시 사용) AOT(Ahead Of Time) 미리 컴파일 -> 코드 내부 보호, 높은 실행 속도, 여러 플랫폼에서 실행하도록 바이너리 파일 생성 다트 사용 Dart Pad(Web Browser) Android Studio or IntelliJ VS Code Dart에서 변수는 선언과 동시에 타입을 정해 선언을 한다. 기본형 / 자료형(List, Set, Map) / 확장형(Object, Enum, Future, Stream) var(타입 고정) / Dyna.. 2023. 10. 19. Nuxt 모달 만들기 및 적용하기 모달 만들기 components/modal/Alert.vue {{ message }} 확인 message를 props로 받아 페이지나 상태마다 모달의 내용이 달라지게 해준다. message를 더블 중괄호에 담고, props에 message가 String임을 담아준다. typescript로 작용하는 것을 볼 수 있다. 모달 적용하기 pages/user/login.vue 로그인 ... 모달은 주요 컴포넌트의 제일 아래, 최상위 컴포넌트의 닫는 태그의 바로 위에 작성해주면 된다. v-if로 태그를 조건에 따라 작동하게 한다. react의 state와 비슷한듯? showAlert가 참이면 message에 "로그인 성공!"이라는 AlertMessage를 담는다. showAlert가 거짓이면 message에 "로그.. 2023. 10. 4. Nuxt 라우팅 및 <NuxtPage /> Nuxt는 자동 라우팅 아래처럼 pages 아래에 index.js 또는 user 아래에 login 등으로 파일이나 폴더를 생성해주면 index / login /user/login register /user/register 위처럼 자동으로 라우팅 된다. 해당 태그가 있어야 Nuxt가 내가 생성한 Page들을 불러온다. app.vue에서를 넣어주는 것을 잊지말자! 2023. 10. 4. Nuxt Header & Footer 먼저, 헤더와 푸터 파일을 각각 만들어준다. 모든 페이지에서 쓰이므로 components/common에 생성한다. components/common/Header.vue Home Login Register Nuxt(Vue3.0)은 태그 안에 최상위 태그가 무조건 한 개 존재해야 한다. Nuxt에서 React의 Link와 같은 기능을 사용하고 싶을 때에는 NuxtLink를 사용한다. Home 사용 방법은 Link와 똑같다. components/common/footer.vue 연습용으로 만들고 있읍니다. 연습용으로 만들고 있읍니다. 연습용으로 만들고 있읍니다. 헤더 푸터 적용하기 app.vue에 헤더와 푸터를 박아준다! 2023. 10. 4. Nuxt 프로젝트 생성하기 Nuxt 프로젝트 생성 과정 proj01 프로젝트 생성 npx nuxi@latest init proj01 프로젝트로 이동 cd proj01 pnpm 설치 npm i -g pnpm 필요 라이브러리 설치 pnpm add -D @unocss/nuxt pnpm i @pinia/nuxt nuxt.config.ts export default defineNuxtConfig({ devtools: { enabled: true }, modules: [ '@unocss/nuxt', ['@pinia/nuxt', { autoImports: ['defineStore', 'acceptHMRUpdate'] }], ], components: { dirs: ['pages', 'components'], }, imports: { dirs:.. 2023. 10. 4. 09.25 최종 프로젝트 & 온보딩 인턴십 파란만장 최종 프로젝트가 끝난 후 드디어 인턴십을 왔다..! (프로젝트 동안의 개발 기록은 추후 업로드 예정) 인턴십은 uvc로 왔다. 아마 제일 지원자가 많았던 것 같다. 아무튼 처음 와서는 아무래도 월욜이다 보니 주간회의가 있으셨는지 쭈욱 기다렸다가 점심 사주셔서 점심 먹구 돌아와서 추석 전까지 3일간 뭘해야할지 일러주셨다. 그동안 쓴건 React였는데, 앞으로 이 회사에 있는 동안 써야할 건 Vue 3.0이다..! 3일 동안 Vue에 대해 개인 학습 뒤, 추석 지나고 팀플을 진행할 예정이다~ 따라서 앞으로는 Vue 개발 기록이 주가 될 예정이다. 참고로 현재 공부 예정인 정처기, RN에 대한 이야기도 가끔 올라갈 것 같다~~ 암튼 밑부터는 Vue 개발 기록 시작~~ Vue Vue를 시작하기 위해 G.. 2023. 9. 25. 이전 1 2 3 4 ··· 26 다음 728x90 반응형 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
