728x90 반응형 📱 웹(Web)17 [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. [Javascript] 대시보드 메모리 누수 해결하기 (memory leak troubleshooting) 대시보드 화면의 지속적인 메모리 누수로 일정 시간이 지나면 Out of Memory로 화면이 다운되는 현상이 발생하여 해결하는 과정 Memory Leak이란?메모리 누수(memory leak)는 프로그램이 더 이상 필요하지 않은 메모리를 해제하지 않고 계속 점유하는 현상으로 시간이 지남에 따라 이런 메모리가 계속 축적되어 시스템의 전체적인 메모리를 소모하게 된다. Out of Memory(OOM)란?시스템이나 애플리케이션이 사용할 수 있는 메모리가 부족할 때 발생하는 현상이다. 프로그램이 할당 가능한 메모리보다 더 많은 메모리를 요청할 때 발생하며, 이로 인해 프로그램이 죽거나 시스템의 성능이 저하될 수 있다. 이렇게 강제로 Memory Leak을 발생시키면 OOM으로 웹사이트가 죽게된다. OOM이 발.. 2024. 7. 9. [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. 이전 1 2 다음 728x90 반응형
