DevYoon

1️⃣ Store import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from 'vuex-persistedstate' Vue.use(Vuex) export default new Vuex.Store({ plugins:[ createPersistedState() ], state: { todos:[ ] }, getters: { isdone(state){ return state.todos.filter(todo => { return todo.done === true }).length }, isnotyet(state){ return state.todos.filter(todo => { return todo.done === false })..

Vuex 1️⃣ Vuex란? Vue 상태관리 라이브러리 state(상태)를 전역 저장소로 관리할 수 있도록 지원 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 상태가 예측 가능한 방식으로만 변경 컴포넌트의 공유된 상태를 추출 ➡️ 전역에서 관리 컴포넌트는 커다란 view가 되며, 모든 컴포넌트는 트리에 상관없이 상태에 액세스하거나 동작을 트리거 할 수 있음 2️⃣ Props&Emit VS Vuex Props&Emit props&Emit은 단반향 흐름, 부모 ➡️ 자식 간의 전달만 가능 장점 : 데이터의 흐름 직관적으로 파악 가능 단점 : 컴포넌트 중첩이 깊어지면 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우 데이터 전달이 매우 복잡해짐 단방향 데이터 흐름 state : 앱을 작동하는 원본 소..

🔥 주요 Keypoint ❕ 상위 컴포넌트 - 하위 컴포넌트 연결 / props & emit 1️⃣ App App.vue 💫 searchBar로부터 이벤트 청취 ➡️ 입력값과 API KEY로 params 구성 ➡️ axios로 요청 💫 요청 결과 전달 받은 영상들을 videos 배열에 넣어주기 ➡️ 하위 컴포넌트인 VideoList에 props로 전달 💫 VideoList로부터 이벤트 청취 ➡️ 선택한 비디오 props로 VideoDetail에 전달 2️⃣ searchBar 검색 💫 input 박스에 작성 후 엔터 ➡️ 부모 컴포넌트(App)에게 이벤트로 입력한 값 전달 3️⃣ VideoList VideoList 💫 VideoListItem의 이벤트 청취 ➡️ App으로 이벤트 전달 💫 하위 컴포넌트인 ..

1️⃣ App.vue 라우터 경로 설정 Lunch | Lotto 🔥 router-link to = '/lunch' 🔥 router-link :to = '{name:'lunch'}' ➡️ Named Routes 2️⃣ index.js routes 설정 const routes = [ { path: '/lunch', name: 'lunch', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: lunch }, { path:'/lotto/:lottoNum', name: 'lotto..

completed = forms.BooleanField(label='Completed', label_suffix=' : ', required=False, widget=forms.widgets.CheckboxInput()) label_suffix : 라벨과 위젯 사이에 들어갈 컨텐츠 required : 체크박스를 체크하지 않고(False 상태) 넘겨줄 수 있게 하기 위해 required를 False로 두었다. 만약 required=True가 된다면, 체크박스를 체크해야만 넘겨줄 수 있다. 3️⃣ 체크박스 : widget에 CheckboxInput()을 사용

SQL 1️⃣ SQL 1️⃣-1️⃣ SQL이란? 관계형 데이터베이스 관리시스템의 데이터 관리를 위해 설계된 프로그래밍 언어 1️⃣-2️⃣ 분류 DDL 데이터 정의 언어(Data Definition Language) 관계형 데이터베이스 구조(테이블, 스키마)를 정의하기 위한 명령어 CREATE, DROP, ALTER DML 데이터 조작 언어(Data Manipulation Language) 데이터를 저장, 조회, 수정, 삭제 등을 하기 위한 명령어 INSERT(삽입), SELECT(조회), UPDATE(갱신), DELETE(삭제) (시험에 나옴) DCL 데이터 제어 언어(Data Control Language) 데이터베이스 사용자의 권한 제어를 위해 사용하는 명령어 GRANT, REVOKE, COMMIT,..

DB 1️⃣ Database 1️⃣ Database란? 체계화된 데이터의 모임 몇 개의 자료 파일을 조직적으로 통합하여 자료 항목의 중복을 없애고 자료를 구조화하여 기억시켜 놓은 자료의 집합체 논리적으로 연관된 하나 이상의 자료의 모음 ➡️ 내용을 고도로 구조화하여 검색과 갱신의 효율화 2️⃣ 데이터베이스로 얻는 장점 데이터 중복 최소화 데이터 무결성 ➡️ 정확한 정보를 보장 데이터 일관성 데이터 독립성 (물리적, 논리적) 데이터 표준화 데이터 보안 유지 1️⃣-1️⃣ RDB 1️⃣ RDB란? Relational Database 키와 값들의 간단한 관계를 표 형태로 정리한 데이터베이스 2️⃣ RDB 용어 스키마(schema) : 데이터베이스에서 자료의 구조, 표현방법, 관계 등 전반적인 명세를 기술 (M..

Django Template 1️⃣ DTL (Django Template Language) Django template에서 사용하는 built-in template system 조건, 반복, 변수 치환, 필터 등의 기능을 제공 Python처럼 일부 프로그래밍 구조(if, for 등)를 사용할 수 있지만, 해당 python 코드로 실행되는 것은 아님 DTL Syntax 1️⃣ {{ Variable }} render()를 통해 views.py에서 정의한 변수를 template 파일로 넘겨 사용하는 것 변수명은 영어, 숫자, 밑줄(_) 조합으로 구성될 수 있으나 밑줄로는 시작 불가능 공백이나 구두점 문자 사용 불가능 (.)를 사용하여 변수 속성에 접근 가능 {{ 변수명.속성 }} render()의 세 번째 인..

Django 요청과 응답 1️⃣ URLS HTTP 요청(Request)을 알맞은 View로 전달 init.py ➡️ 앱의 모든 것을 패키지처럼 쓸 수 있게 해줌 from import views trailing comma : 마지막에 ,을 써주는 것으로 장고에서 권장되는 작성 형식. 이후에 바로 새로운 것을 입력할 수 있도록 써줌 path('admin/', admin.site.urls), 2️⃣ View 클라이언트의 요청 객체가 넘어옴 urls.py를 호출했을 때 템플릿을 렌더링 해줌 def index(request): return render(request, '.html(템플릿 경로)') 3️⃣ Template 템플릿 생성 : 앱 안에 templates 폴더 생성(일종의 약속..

Django 시작 1️⃣ 가상환경 생성 및 활성화 1️⃣-1️⃣ 생성 python -m venv 1️⃣-2️⃣ 활성화 방법 1 source /Scripts/activate 방법 2 Ctrl+Shift+P ➡️ python select interpreter ➡️ 터미널 껐다 켜기(Ctrl+`) 2️⃣ Django 설치 requiremets가 없을 때 pip install django==3.2.12 requirements 있을 때 pip install -r requirements.txt 3️⃣ 프로젝트 생성 프로젝트 = Application의 집합 하나의 프로젝트는 여러 앱을 가짐 django-admin startproject 옵션 . : .을 붙이지 않으면 프로젝트 폴더 안에 프로젝트 생성 .을 붙이면 폴..