이제 서론은 거의 쓰지 않을 것 같다. (바쁘자나~)computed(): 계산된 속성을 정의하는 함수: 미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고 불필요한 반복 연산을 줄인다: 읽기 속성(computed로 정의된 변수는 외부에서 변경 불가)을 띈다 위처럼 출력하기 위해 html에서 직접 삼항 연산자를 사용하는 방법도 물론 문제가 되지 않지만, 최대한 가시성 좋게 하기위해서는 연산은 따로 진행하고 출력만 할 수 있게 하는 것이 좋을 것이다. 또, 여러번 연산해야한다면 html 요소가 계속 길어지며 보기 좋지 않다. 이를 위한 방법이 두가지가 있다.지금까지 해왔던 함수 정의를 통해 변수를 직접 전달해주는 방법은 모두 알 것이다. 하지만 computed를 이용한다면 더 효율적이고 직관적인 ..
이젠 서론 쓸 시간도 없다! 바로 본론!v-if: 조건부 렌더링을 수행하는 directive : 표현식 값의 true/false를 기반으로 요소를 렌더링: django html에서 클라이언트의 상태와 요청에 의한 출력 화면과 유사 위처럼 정의했을 때, 클릭할 때마다 isSeen은 !isSeen에 의해 true는 false로, false는 true로 바뀌는 반응형 변수를 활용할 수 있으며, p tag 내부에 v-if와 v-else의 조건에 의해 html에 보이는 화면이 바뀐다. if와 else가 있다면 짝궁인 else-if도 있다. 반응형 변수에 random함수를 입혀준다면 호출 시, 랜덤하게 출력되는 모습도 확인할 수 있다.그렇다면 모든 tag에 v-if를 입혀주어야 할까? 물론 아니다. 전체를 감싸고있..
저번엔 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/댓글 목록 조회..
- Total
- Today
- Yesterday
- CRUD
- Sequence types
- vue
- SQL
- Method
- Serializer
- 연산자
- CodeTree
- Django
- dfs
- SQLite
- Database
- app
- HTML
- Python3
- 백준
- basic syntax
- 함수
- 중복순열
- restapi
- views.py
- 재귀
- baby-gin
- Authentication System
- vue3
- Python
- 카운팅정렬
- ChatGPT
- 순열
- JavaScript
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |