개발/FRONT (23) 썸네일형 리스트형 [Vue3] Composition API 환경 컴포넌트 간 이벤트 전달하기 Vue3 환경에서 서로 다른 컴포넌트 간의 이벤트를 전달하기 위해 사용했던 방법이다. 사용 이유 나의 경우에는 상단의 알림 다이얼로그에서 보여지는 알람들 중, 읽지 않은 것은 별도의 표시를 해주고 있다. 또한 알림 리스트 페이지를 따로 구현해서 전체 알림을 조회할 수 있는 페이지가 별도로 구현되어있었는데, 다이얼로그에서 알림을 클릭해 상세 페이지로 이동할 때에는 문제가 없었지만, 리스트 페이지에서 상세페이지로 이동했을 때, 알림 다이얼로그 페이지는 별도의 페이지로 구현되어 있기 때문에, 해당 이벤트를 인지할 수 없어서 reactive하게 알림 다이얼로그 데이터를 최신화할 수없었다. 요약 주체가 알림 다이얼로그 페이지일 때, 알림 다이얼로그 -> 상세 페이지 인지 가능 알림 리스트 페이지 -> 상세 페이지.. [Vue] 페이지 이동 시 Router state로 객체 전달하기 Vue3 이후, this 및 $router 등에 접근할 수 없음에 따라 useRouter를 사용해서 페이지 전환을 한다. https://router.vuejs.kr/guide/advanced/composition-api.html Vue Router | Vue.js의 공식 라우터 Vue 3에 필요한 최신 공식 라우터 router.vuejs.kr 보통 페이지 전환 시, URL을 통해 넘길 파라미터를 주고 받는다. 하지만 URL에 노출하고 싶지 않은 파라미터나 데이터타입이 객체인 데이터를 주고 받을 때, useRouter 내부 state 에 접근하여 객체를 주고 받으면 된다. params 또는 query로 데이터를 주고 받을 때는 다음과 같이 데이터가 URL에 남는다. 메인.vue 메인 페이지 상세페이지 객체.. [Vue] [Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. 에러 해결 방법 Vue 프레임워크로 프론트엔드 및 퍼블리싱 작업을 진행할 때, 많이 볼 수 있는 경고 메세지다. Vue의 template 안에는 하나의 root 엘리먼트만 존재해야 한다. root element 밖에 어떠한 엘리먼트가 존재하면 발생하는 경고 메세지로, 간단하게 수정할 수 있다. 다음과 같이 소스를 수정해주면 된다. ▼ warning warning 메세지 보고싶다..... good life ... ... ... ▼ 처리 warning 메세지가 안보인다..... good life ... ... ... [Vue] 라디오 버튼 형식의 체크박스 기능 개발하기 체크박스를 라디오버튼처럼 여러 체크박스 중 한가지를 선택할 수 있는 기능을 만들어보려고 한다. 필요해서 만들긴 했지만, Vue를 공부한지 얼마 되지 않아서 이렇게 만드는게 맞는지 싶다. ▶소스코드 const option1 = ref(1); const option2 = ref(2); const option3 = ref(3); const option4 = ref(4); const settings = (type) => { console.log(type + "번 클릭 "); } const emit = defineEmits(['update:selectedCheckbox']) watch(chooseOption, () => { emit('update:selectedCheckbox', chooseOption.value.. [Vue] 컴포넌트 간 파라미터 전달 방법 정리 이직한 회사에서 Vue 프레임워크로 프로젝트를 진행하게 되었다 진행하면서 느낀 것이 리액트와 문법적으로 차이가 있는 편이지만, 기존에 이미 프론트 프레임워크를 접해본 분이라면 난이도가 높은 편은 아닌 것 같다. 해당 포스팅에서는 Vue 페이지 간 파라미터를 넘겨주는 방법을 정리하려고 한다. ▶부모 컴포넌트 → 자식 컴포넌트 → 부모 컴포넌트 코드 index.vue → 자식 컴포넌트 코드 위와 같이 간단히 부모 컴포넌트에서 전달한 값을 자식 컴포넌트가 넘겨 받을 수 있다. defineProps 는 굳이 사용하지 않고, props = [ id ] 형태로 전달 받을 수 있지만, 넘겨 받을 파라미터를 정의해두고 사용하는 것이 추후에 코드를 볼 때 편한 것 같다. type : 파라미터 형태 required : 필.. [react-native] ChatGPT 사용하기 / Open AI 예제 ChatGPT는 대화형 인공지능 서비스다. Open AI 사에서 제공하는 인공지능 모델 중 하나를 사용하여 서비스를 구축한 것이 ChatGPT다. 일정한 요금만 지불하면, 일반 사용자도 OpenAI의 AI 모델을 시스템에 적용할 수 있다. https://platform.openai.com/overview OpenAI API An API for accessing new AI models developed by OpenAI platform.openai.com Open AI 사이트에서 Node, 파이썬 등 어떻게 인공지능 모델을 적용할 수 있는지 가이드라인을 제공해준다. 이번엔 패치를 통해 직접 API를 호출해봤다. 먼저 위 사이트에 가입 후, 오른 쪽 상단에 [Upgrade] 버튼을 누르면 결제 계좌(카드).. [ReactNative] 리액트 네이티브 공통 모달 팝업 Alert 만들기 리액트 네이티브 환경에서 어플리케이션을 개발할 때, 모든 컴포넌트에서 공통으로 사용할 수 있는 공통 모달 창을 생성해보자 공통 팝업에는 버튼이 2개 존재하고, 버튼의 문구도 컴포넌트의 컨셉에 맞게 구성할 수 있도록 개발할 예정이다. 먼저 공통 컴포넌트를 생성한다. components.js 파라미터 목록 show : 모달창을 보여줄 지 결정 message : 모달창 문구 openText : 두 개의 버튼 중 한 버튼의 문구 closeText : 두 개의 버튼 중 한 버튼의 문구 width : 길이 import Dialog from 'react-native-dialog'; import { StyleSheet, Image, View, Text, TouchableOpacity} from 'react-native.. [RN] 앱 실행 오류, Pod Install 오류 시, 대처 방법 Podfile.lock 파일에 정의된 Pod만 설치하는 명령어 Pod Install 과정에서 다음과 같은 오류가 발생할 수 있음 * BUILD FAILED ** The following build commands failed: …오류 발생 포드 파일들 리액트 네이티브 환경에서 모듈들이 정상적으로 빌드되지 않았을 때, 마치 podfile.lock 파일에 정의되어있는 pod 파일들이 문제라는 식의 엄청나게 긴 로그 파일들이 찍힘 해결 방법 1. yarn install or yarn install -force 2. pod install IOS Build를 진행 해본다. 정상적으로 빌드되면 성공, 혹은 정말 Podfile.lock 파일이 문제일 수 있으니 삭제 후, 위 프로세스를 그대로 해보자 이전 1 2 3 다음
