Web60 Vue instance MVVM Pattern : 마크업 언어로 구현하는 GUI의 개발을 Back-end 로부터 분리시켜 view가 어느 특정한 모델 플랫폼에 종속되지 않도록 함 View : 우리 눈에 보이는 부분 = DOM Model : 실제 데이터 = JSON View Model (Vue) "서로가 서로를 모름 == 독립성 증가, 적은 의존성" View Model - View를 위한 Model - View와 연결되어 Action을 주고받음 - Model이 변경되면 View Model도 변경되고 바인딩된 View도 변경됨 - View에서 사용자가 데이터를 변경하면 View Model의 데이터가 변경되고 바인딩된 다른 View도 변경됨 View Instance === 1개의 객체 -> 아주 많은 속성과 메서드를 이미 가지고 있.. 2022. 11. 1. JavaScript - 동기와 비동기 동기 (Synchronous) " 모든 일을 순서대로 하나씩 처리하는 것" 순서대로 처리한다 == 이전 작업이 끝나야 다음 작업 시작 요청과 응답을 동기식으로 처리한다면? -> 요청을 보내고 응답이 올 때까지 기다렸다가 다음 로직 처리 비동기 (Asynchronous) " 작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리하는 것 (병렬적) " 시간이 필요한 작업들은 요청을 보낸 뒤 응답이 빨리 오는 작업부터 처리 ex) 메일 전송 버튼을 눌러 놓고 다른 작업을 수행할 수 있음 비동기를 사용하는 이유 == 사용자 경험 "동기식 처리는 특정 로직이 실행되는 동안 다른 로직 실행을 차단하기 때문에 마치 프로그램이 응답하지 않는 듯한 사용자 경험을 만들게 됨" => 비동기로 처리한다면 먼처 처리되는 부분.. 2022. 10. 26. JavaScript 심화 - Event Event : 프로그래밍하고 있는 시스템에서 일어나는 사건 혹은 발생인데, 우리가 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것 ex) 사용자가 버튼을 클릭한다면 우리는 그 사건에 대한 결과를 응답 받기를 원할 수 있음 Event Object : 네트워크 활동이나 사용자와의 상호작욕 같은 사건의 발생을 알리기 위한 객체 - 사용자의 행동이나, 특정 메서드를 호출함으로써 만들어질 수 있음 DOM 요소는 Event를 "받고" 받은 Event를 "처리"할 수 있음 -> Event 처리는 주로 addEventListener() 라는 처리기를 사용해 다양한 html 요소에 "부착"하게 됨 "대상에 특정 Event가 발생하면, 할 일을 등록하자" EventTarget.addEventLis.. 2022. 10. 24. JavaScript 심화 - DOM Browser APIs : 웹 브라우저에 내장된 API로, 웹 브라우저가 현재 컴퓨터 환경에 관한 데이터를 제공 하거나, 오디오를 재생하는 등 여러가지 유용하고 복잡한 일을 수행할 수 있게 함 종류 DOM Geolocation API : 지리정보 WebGL : 그래픽 DOM (Document Object Model) : 문서 객체모델 API 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공 문서 구조, 스타일, 내용 등을 쉽게 변경 HTML 콘텐츠를 추가, 제거, 변경하고, 동적으로 페이지에 스타일을 추가하는 등 HTML/CSS를 조작할 수 있음 - HTML 문서를 구조화 하여 각 요소를 객체 취급 - 단순한 속성 접근, 메서드 활용 뿐만 아니라 프로그래밍 언어.. 2022. 10. 24. JavaScript 기초- Object Object : 객체는 속성의 집합이며, 중괄호 내부에 key와 value 쌍으로 표현 key는 문자열 타입만 가능 -> 띄어쓰기 등의 구분자가 있으면 따옴표로 묶어서 value는 모든 타입 가능 객체 요소 접근은 점(.) 또는 대괄호([])로 가능 -> key 이름에 띄어쓰기 값은 구분자가 있으면 대괄호 접근만 가능 const myInfo = { name : 'Tom', phoneNumber: '123456', 'apple product' : { airpot : 'airpot pro', iphone : '12', }, } console.log(myInfo.name) // Tom console.log(myInfo['name']) // Tom // console.log(myInfo.'apple produc.. 2022. 10. 19. JavaScript 기초 - Array Array : 키와 속성들을 담고 있는 참조 타입의 객체 순서를 보장 주로 대괄호를 이용하여 생성, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능 array.length의 형태로 배열의 길이에 접근 배열 메서드 기초 const numbers = [1, 2, 3, 4, 5] console.log(numbers[0]) // 1 console.log(numbers[-1]) // undefined console.log(numbers.length) // 5 console.log(numbers[numbers.length-1]) // 5 메서드 설명 비고 reverse 원본 배열의 요소들의 순서를 반대로 정렬 push & pop 배열의 가장 뒤에 요소를 추가 또는 제거 unshift & shift 배열의 가장.. 2022. 10. 19. JavaScript 기초 변수와 식별자 식별자는 반드시 문자, $ 또는 _로 시작 대소문자를 구분하며, 클래스명 외에는 모두 소문자로 시작 예약어 사용 불가능 식별자의 정의 1) 카멜 케이스 : 변수, 객체, 함수에 사용 // 변수 let dog let variableName // 객체 const userInfo = { name:'Yuna', age:23 } // 함수 function solve(){} 2) 파스칼 케이스 : 클래스, 생성자에 사용 // 클래스 class User { constructor(options) { this.name = options.name } } // 생성자 함수 function User(options) { this.name = options.name } 3) 스네이크 케이스 : 상수에 사용 (개발자.. 2022. 10. 19. DRF - Single Model JSON : 속성-값 쌍, 배열 자료형 또는 기타 모든 시리얼화 가능한 값 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷 - 파이썬의 dictionary, 자바스크립트의 objectc처럼 C 계열의 언어가 갖고 있는 자료구조로 쉽게 변환할 수 있는 key-value 형태의 구조를 갖고 있음 이제 HTML이 아닌 JSON 데이터를 응답하는 서버만! 구축해보자 - JSON 데이터를 받아 화면을 구성하여 사용자에게 보여주는 것은 Front-end Framework가 담당 Django Serializer를 사용한 JSON 응답 Serialization (직렬화) : 데이터 구조나 객체 상태를 동일 혹은 다른 컴퓨터 환경에 저장하고, 나중.. 2022. 10. 17. URL 웹에서의 리소스 식별 - HTTP 요청의 대상을 리소스라고 함 ( 문서, 사진, 기타 어떤 것이든 될 수 있음) " 각 리소스는 식별을 위해 URI로 식별됨 " URI (Uniform Resource Identifier) : 통합 자원 식별자 - 인터넷에서 하나의 리소스를 가리키는 문자열 1) URL 2) URN : 특정 이름 공간에서 이름으로 리소스를 식별하는 URI URL (Unifirm Resource Locator) : 통합 자원 위치 - 웹에서 주어진 리소스의 주소 = 네트워크 상에 리소스가 어디있는지 URL 구조 1. Scheme (or protocol) : 브라우저가 리소스를 요청하는데 사용해야 하는 프로토콜, 어떤 규약을 사용하는지를 나타냄 https://www.example.com:80/.. 2022. 10. 17. pjt 1. ModelForm 위젯 속성을 이용해서 부트스트랩 클래스인 'form-control' 추가하기 class MovieForm(forms.ModelForm): GENRES = ( ('comedy', 'comedy'), ('horror', 'horror'), ('romance', 'romance') ) genre = forms.ChoiceField(choices=GENRES, widget = forms.Select( attrs = { 'class':'form-select', } ) ) release_date = forms.DateField( widget = forms.DateInput( attrs={ 'type' : 'date', 'class': 'form-control', } ) ) score = fo.. 2022. 10. 7. 이전 1 2 3 4 5 6 다음
