728x90 반응형 📱Web16 [Vue.js] v-if & v-show 변경(update)되지 않는 버그 해결하기 v-if 또는 v-show로 지정한 변수의 값을 변경해도 화면에서 조건부 렌더링이 정상적으로 반영되지 않는 문제가 종종 발생한다.. 다양한 원인 및 해결 방법Vue에서 렌더링 버그에는 다양한 원인이 있을 수 있으니 아래의 4가지 방법을 확인하자. 1. Html과 Vue에서 같은 Vue객체를 바라보고 있는지 확인Vue.js를 활용하는 다양한 방식이 있지만 보통 Html, JSP와 같은 화면에 데이터를 바인딩하여 처리한다.데이터 바인딩이 정상적으로 이루어지려면 당연하게도 HtmlVue.js가 같은 데이터 객체를 바라보고 있어야 하는데 종종 Html에서 Vue 객체를 잘못 바라보고 있는 경우가 있다.Hello World위와 같이 사용하고자 하는 변수를 가지고 있는 Vue 객체를 정확하게 선언해주자. 2.. 2024. 8. 27. [Vue.js] v-if & v-show 조건부 렌더링의 차이점 화면에서 데이터 변경 사항이 바로 반영되지 않는 이슈 해결하기,, 우선 이슈에 대해 간단히 설명하자면 화면에서 사용 안함 버튼을 클릭하면 바로 톱니바퀴 모양의 버튼이 사용자가 클릭할 수 없도록 Disabled 처리된 버튼으로 바뀌어야 되는데 사용 안함 버튼을 클릭해도 바뀌지 않는 현상이 발생하였다.이 문제는 테스트 중 사용 안함 버튼을 클릭 후 페이지를 새로고침 하면 정상적으로 변경 사항이 반영되었다. 값에 따라 Disabled 버튼이 보여지는 기능인 Vue.js의 조건부 렌더링 기능인 v-if를 사용 하여 개발되어 있었기 때문에 렌더링 관련 문제인 것으로 파악되어 Vue.js의 조건부 렌더링에 대해 찾아보다 v-show라는 것도 있다는 것을 알게되어 v-if 대신 v-show를 적용하여 쉽게 해결할.. 2024. 6. 27. [Vue.js] Cookie를 사용한 ID 저장 기능 Cookie 활용하여 웹사이트 로그인 시 ID 저장 기능 구현하기 Cookie는 웹 브라우저에서 인증 및 세션 관리, 개인화 콘텐츠, 광고 타겟팅, 장바구니 등 편리성을 위해 다양하게 활용되고 있다. 이런 Cookie를 사용하여 사용자의 ID를 저장하는 기능을 만들 수 있다. 쿠키 생성 (삭제)// 쿠키 생성 (삭제) 함수function setCookie(name, value, days, saveCheck) { var expires = ""; if(saveCheck) { // ID 저장 check 여부 var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); .. 2024. 3. 17. [Vue.js] vue.js 문법과 사용방법 Component : Vue.js에서 컴포넌트는 재사용 가능한 UI 요소를 의미합니다. 각 컴포넌트는 자체적으로 데이터, 메서드, 스타일 등을 포함할 수 있습니다. 컴포넌트를 사용하여 애플리케이션을 작은 조각으로 나누고 각 조각을 개별적으로 관리할 수 있습니다. Vue.component('my-component', { template: '{{ message }}', data: () => ({ message: 'Hello, World!' }) }); Computed : 계산된 속성은 의존하는 데이터의 값에 기반하여 동적으로 값을 계산하는 속성입니다. 계산된 속성은 종속성을 갖는 데이터가 변경될 때만 다시 계산됩니다. new Vue({ data: { message: 'Hello, World!' }, comp.. 2023. 9. 11. [Flask] ChatBot-API 💡 챗봇 [ GPT-3.5 ] goormIDE 컨테이너 환경에서 개발 진행. application.py from utils import Api_key from data import get_data from learning import model_training from flask import Flask, request, jsonify, render_template from flask_apscheduler import APScheduler import sys import openai # key openai.api_key = Api_key.openAI_key application = Flask(__name__) scheduler = APScheduler() # Flask 앱 설정 application.con.. 2023. 8. 20. [Flask] APScheduler 챗봇 API 개발 시 날씨 데이터를 주기적으로 업데이트 해줘야하기 때문에 사용하게 됨. 💡 APScheduler 일정 시간마다 주기적으로 함수를 실행시켜주는 스케줄러이다. pip install Flask-APScheduler from flask import Flask from flask_apscheduler import APScheduler app = Flask(__name__) scheduler = APScheduler() # 작업으로 실행할 함수 def my_job(): print('Scheduled job is running!') # Flask 앱 설정 app.config['SCHEDULER_API_ENABLED'] = True app.config['JOBS'] = [ { 'id': 'my_job'.. 2023. 8. 20. [Flask] Template View 💡 Flask로 페이지 링크 및 파라미터 전송 1. 'templates’이름의 폴더 생성하여 밑에 view파일 생성 2. 함수에서 View를 리턴시키기 위해서는 render_template를 import 해야 함. 3. URL매핑 시 Parameter를 받기 위해서는 request를 import 해야 함. 4. HTML 페이지 리턴 return render_template('home.html') 5. Parameter추출 keyword = request.args.get('keyword') 6. HTML페이지 리턴 시 값을 같이 넘겨줌 return render_template('search.html', keyword=keyword) 7. HTML에서 {{keyword}} 를 이용하여 받은 값 출력 Code.. 2023. 8. 20. [Flask] 기본 사용법 1. flask 모듈 임포트 우선 Flask를 사용하기 위해서는 모듈을 설치하고 import해줘야 한다. # 터미널에서 실행 pip install flask # 코드 작성시 선언 from flask import Flask 2. flask 객체를 app에 할당 Flask()라는 Class를 app이라는 객체에 담아 사용한다. ‘_ name _’이란 python에서 해당 모듈(파일)의 이름을 나타낸다. 즉 Flask클래스에 현재 모듈을 담아서 app객체로 사용한다고 보면 된다. app = flask(__name__) 3. 라우팅(route) 경로 설정 SpringBoot의 @Mapping 태그와 동일 /hello 경로로 오는 요청에 대해서는 hello()메서드가 처리하겠다. @app.route("/hello.. 2023. 8. 20. [Flask] Flask란? 💡 Flask (플라스크) Flask는 Python 기반으로 작성된 마이크로 웹 프레임 워크(Micro Web Framework) 중 하나 이다. 간단한 웹 사이트나 API 서버를 만드는 데에 특화된 Python Web Framework이다. Web Framework 웹 프레임워크는 동적인 웹 페이지나 웹 애플리케이션을 개발할 대 유용하게 사용하는 일종의 틀(frame)이다. 데이터베이스 연동, 템플릿 표준, 세션 관리, 코드 재사용 등의 기능을 포함한다. Python 기반의 웹 프레임워크에는 Django, Flask, Bottle, Pyramid가 있다. 장점 ⇒ 가볍게 배우고, 사용하며 배포할 수 있다. 단점 ⇒ Django에 비해 자유도는 높지만 제공해주는 기능이 비교적 적다. 즉 Flask는 소규.. 2023. 8. 20. 이전 1 2 다음 728x90 반응형
