개발/FRONT (27) 썸네일형 리스트형 [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 파일이 문제일 수 있으니 삭제 후, 위 프로세스를 그대로 해보자 [JS] Jquery Input 태그에서 달력 가져오기 datepicker Jquery UI에서 제공하는 기능 중, datepicker 라는 달력 모듈을 제공하고 있다 Input 태그를 이용해서, 클릭했을 때 사용자가 선택할 수 있게끔 달력을 가져오는 예제다 아래 링크에서 Jquery UI CDN을 받아서 script 태그를 삽입해주면 된다 https://releases.jquery.com/ui/ jQuery UI – All Versions | jQuery CDN jQuery UI – All Versions jQuery UI - Git Builds UNSTABLE, NOT FOR PRODUCTION jQuery UI 1.13 jQuery UI 1.13.2 - uncompressed, minified Themes base black-tie blitzer cupertino dark.. [JS] Jquery 상단 바 고정 하는 법, 상단 고정 스크롤 헤더 사용하기 하단으로 스크롤을 할 때, 상단에 붙어있는 메뉴 바를 고정시켜 아래로 스크롤 해도 메뉴 바는 고정되어 상단 메뉴에 접근을 용이하게 할 때, 사용하면 된다 아래 코드 참고 Scroll down Home About Services Team Contact $(document).ready(function(){ $(window).bind('scroll', function() { var navHeight = $( window ).height() - 70; if ($(window).scrollTop() > navHeight) { $('nav').addClass('fixed'); } else { $('nav').removeClass('fixed'); } }); }); * {margin: 0; padding: 0;} a.. [Jquery] 데이터 탭 메뉴 (탭 바) 구현하기 jquery를 이용하면 탭 메뉴를 아주 쉽게 구현할 수 있다 웹 개발을 진행할 때, UI를 효율적으로 사용하기 위해 탭 메뉴가 자주 사용되곤 한다. 제이쿼리 문법을 통해 재사용할 수 있는 탭 메뉴를 만들어보자 1. cdn 참조 Jquery 3. 6 Jquery-ui (참고) 예제 1 JSP Insert title here Number 1 Number 2 Number 3 Number 4 탭 영역 1 탭 영역 1 탭 영역 1 탭 영역 1 Colored by Color Scripter cs 2 Javascript 2.1 기본적으로 탭 메뉴는 1번으로 초기화 된다 (원하는대로 설정하면 됨) 2.2 탭 메뉴를 클릭했을 때 이벤트 $(document).ready(function() { // 탭 메뉴를 1번으로 초기.. [Javascript] Url 파라미터 가져오는 방법, 새로고침 파라미터 수정 추가 방법 자바스크립트로 웹 페이지를 개발했을 때 데이터 통신 이후, 새로 고침을 이용하여 데이터를 다시 불러올 때가 있다 이번 포스팅에서는 새로고침을 했을 때 이전 페이지의 데이터를 가져올 필요가 있거나, 이전 데이터에 접근하는 방법을 포스팅할 예정이다 url파라미터를 이용하면 쉽게 구현할 수 있다 다음은 예제이다 먼저 URL 객체를 선언해서 url 데이터에 접근한다 url.searchParams.get(key) : url 파라미터 중 key 값을 통해 value에 접근한다 url.searchParams.set(key) : url 파라미터 중 key 값을 통해 value 값을 설정한다 var url_href = window.location.href; var url = new URL(url_href); // UR.. 이전 1 2 3 4 다음
