저번엔 Attribute 속성을 추가하는 것을 배웠다. 동일하게 Class와 Style 속성을 Binding 하는 것을 배울 것인데, 속성으로 다루지 않고 나눈 이유는 반응성 Web에서 가장 많이 다루는 속성이기 때문이다. 예를들어, 클릭했을때 새로운 Attr가 생기는 것 보다는 bootstrap의 class 추가 혹은 style의 추가로 반응을 띌 수 있다. front에서 중요한 부분이니 집중해보자!v-bindClass and Style Bindings: class와 style은 모두 HTML 속성이므로 다른 속성과 마찬가지로 v-bind를 사용하여 동적으로 문자열 값을 할당할 수 있다: Vue에서 class 및 style 속성 값을 v-bind로 이용할때 객체 or 배열을 활용하여 on / off 혹..
오늘은 간단하게 Directive의 기본 형태와 어떤 종류가 있는지에 대해 살펴볼 예정이다. 굳이 나눈 이유는... 그만큼 세부사항이 중요하기 때문에 나눠 다루려고 한다. 가보자고Template Syntax: DOM을 기본 구성 요소 인스턴스의 데이터에 선언적으로 바인딩(연결) 할 수 있는 HTML 기반 템플릿 구문을 사용 Text Interpolation: 데이터 바인딩의 가장 기본적인 형태 ( Mustache syntax : 콧수염 구문 ): 다른 언어에서도 많이 사용하는 형태로, 해당 구성 요소 인스턴스의 속성 값으로 대체한다Raw HTML: 변수나 함수를 호출하는 것이 아니라 HTML 자체를 호출 할 수 있는 방법: 콧수염 구문은 데이터를 일반 텍스트로 해석하기 때문에 v-html을 이용하여 ht..
드디어 독립된 Frontend 영역에 들어오게 되었다. Vue가 오래되진 않았지만, 생각보다 쓰기 쉽고 직관적인 프레임워크라 매력적인 것 같다. 사실 이젠 어떤 프레임워크인지 크게 중요하다 생각들지 않고 어떻게 사용하는지가 중요하기 때문에 바로 가보자고.Vue.js: 사용자 인터페이스를 구축하기 위한 JavaScript 프레임 워크 : 선언적 렌더링 (Declarative Rendering)=> Vue 자체에서 표준 HTML을 확장하는 "템플릿 구문"을 사용하여 JavaScript 상태(데이터)를 기반으로 화면에 출력(렌더링)될 HTML을 선언적으로 작성한다 : 반응성 (Reactivity)=> JavaScript 상태(state) 변경을 추적하고, 변경사항이 발생하면 자동으로 DOM을 업데이트한다 : ..
이번에는 참조형 자료중에 객체에 대해 알아보자! 파이썬기준으로 dictionary와 유사한 형태를 갖고있지만 사용 방식이 다양하다. key : value 쌍을 갖고있지만 내부에 메서드를 포함할 수도 있다. Object (객체) : key로 구분된 데이터 집합을 저장하는 자료형 객체 구조 중괄호 '{ } '를 이용해 작성 중괄호 안에는 key : value 쌍으로 구성된 속성(property)를 여러 개 작성 가능 key : 문자형만 허용 value : 모든 자료형 허용 속성 참조 점(' . ', chaining operator) 또는 대괄호('[ ]')로 객체 요소에 접근 ' . ' 의 경우는 변수 혹은 객체 호출시 사용하며 '[ ]' 의 경우는 숫자, 문자열 객체 호출시 사용한다 객체 안에 객체를 접근..
올게 와버렸다. 마치 한국어(Python)를 하다가 외국어(JavaScript) 배우는 기분... 너무 묘한거 같다. 하지만 한국에서는 python 취직이 어려우니 javascript라도 잘해야지.... 화이팅하자 Function 함수 : 함수를 호출해서 실행할 수 있는 재사용 가능한 코드 블럭 `function` 이라는 키워드를 사용하여 정의하고 매개변수를 사용하여 값을 반환할 수 있는 타입 : 참조 자료형에 속하며 모든 함수는 Function object이다. 저번 표를 다시 살펴보자 function 키워드 : 함수 시작 functionName : 함수의 이름 params1, params2 : 함수의 매개변수들 statements : 표현식 return : 반환 값 (return 값이 없다면 unde..
오늘 배워볼 것은 JavaScript를 사용할 때 필요한 문법들을 배워볼 것이다. 3달전에 파이썬 문법 배울때가 새록새록한데 벌써 JS 문법을 배운다니... 정말 많이 배우고 있는 것 같다. 파이썬과 다른 부분이 많다보니 헷갈리는 문법들이 많은데, 그래도 뉘앙스가 비슷해서 이해하기는 쉬웠던 것 같다. 오늘도 화이팅. 아직 공식문서를 보는것이 익숙치는 않은데, 해당 페이지는 한국어로도 잘 해석되어있고 뭔가 귀여워서 보면서 하는게 좋을 것 같아서 링크를 첨부했다. JavaScript Standard Style English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Kor..
이제 웹의 구성을 모두 알게되는 파트다. 정적인 홈페이지에서는 크게 쓰이지 않던 언어가 2015년부터 동적 사이트가 유행하게되면서 필수요소가 되어버렸다. javascript의 역사나 지식은 크게 중요하다고 생각들지 않아서 스킵하고 바로 사용해보자. 나중에 이 언어로 백준을 풀어볼 날이 올까? DOM(The Document Object Model) : 웹 페이지를 구조화된 객체로 제공하여 프로그래밍 언어가 페이지 구조에 접근하는 방법을 제공한다. 이를 통해 문서의 구조, 스타일, 내용 등을 변경할 수 있다. DOM API는 다른 프로그래밍 언어가 웹 페이지에 접근 및 조작 할 수 있도록 페이지 요소들을 객체 형태로 제공하며 그에 따른 메서드까지 제공한다. : DOM에서는 모든 요소, 속성, 텍스트는 하나의..
곧바로 N:1에 대해서 배워보자. 전에 배웠다시피 게시글과 댓글은 N(댓글):1(게시글) 관계를 갖고 있다. 이미 REST API가 아니더라도 다뤄본 내용의 반복이 대부분이기 때문에 쉽게 따라올 수 있을 것이다. 마찬가지로 comment 도 serializer 사용해주어야 한다. 주의해야 할 부분은 ForiegnKey 부분이니 집중해서 따라가보자..먼저 데이터를 load할 예정이기 때문에 모델을 먼저 작성해주려고 한다. 데이터가 없다면 model을 작성 후에 admin으로 작성해주어도 되고, 매크로를 사용해도 된다. 만들어야 할 HTTP request method 구성을 표로 나타내보고 하나씩 클리어 해보자!URLGETPOSTPUTDELETEcomments/댓글 목록 조회..
지난 시간에 이어서 API 서버를 구축하기 위한 초석을 쌓아보자Django-rest-framework: Django를 기반으로 하는 파이썬 라이브러리: rest_framework에서 제공하는 serializer(직렬화)을 사용하기 위함 Serialization (직렬화): 여러 시스템에서 활용하기 위해 데이터 구조나 객체 상태를 나중에 재구성 할 수 있는 포맷으로 변환하는 과정: 어떠한 언어나 환경에서도 나중에 다시 쉽게 사용할 수 있는 포맷으로 변환하는 과정Postman: html이 사라짐으로써 CRUD를 확인하기 어려워 졌기 때문에 프로그램을 이용하여 데이터 조작을 할 수 있다: API를 구축하고 사용하기 위한 플랫폼: API를 빠르게 만들 수 있는 여러 도구 및 기능을 제..
지금까지는 데이터를 출력하기위한 전반적인 과정을 배웠다면, 이제부터는 데이터에 집중하게 될 목차다. 더이상 django만 이용하지 않고 다양한 프로그램을 사용할테니 어지러워도 열심히 배워보자.API (Application Programming Interface): 두 소프트웨어가 서로 통신할 수 있게 하는 매커니즘: 클라이언트 서버처럼 서로 다른 프로그램에서 요청과 응답을 받을 수 있는 체계 공공기관의 제공해주는 데이터를 통해 클라이언트에게 앱, 웹 사이트의 정보 등 다양한 서비스들을 해당 기관의 시스템으로부터 데이터를 요청해서 받아가는 것을 뜻하는데, 와닿는 예시로는 지도, 날씨가 있다. 데이터들을 얻으려면 시스템 별 정보들을 요청하는 지정된 형식을 공식 문서를 통해 사용 가능하며, 지역 ..
- Total
- Today
- Yesterday
- Django
- HTML
- Python3
- SQL
- 중복순열
- Method
- 순열
- vue
- vue3
- views.py
- CRUD
- dfs
- 재귀
- Sequence types
- 연산자
- Serializer
- baby-gin
- basic syntax
- Authentication System
- 백준
- restapi
- CodeTree
- app
- ChatGPT
- 함수
- SQLite
- Database
- JavaScript
- 카운팅정렬
- Python
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |