일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- db
- sqld
- 싸피10기
- 머신러닝종류
- 리액트
- js
- Django
- SQL
- SSAFYcial
- 14658
- 싸피셜
- pwa적용하기
- 싸피
- QuerySetAPI
- 알고리즘
- 셀프넘버
- unionfind
- Python
- VITE
- 플로이드워셜
- PWA
- git
- react
- vitepwa
- 데코레이터
- SSAFY
- TypeScript
- 백준
- Javascript
- queryset
- Today
- Total
목록FrontEnd (64)
Meme's IT
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/oc7to/btszAk5iy7I/CKRluPv7tvkORIOYB0zxK0/img.png)
# v-bind란? 하나 이상의 속성 또는 컴포넌트 데이터를 표현식에 동적으로 바인딩 1. Attiribute Bindings link link v-bind:에서 :만 써도 된다. Dynamic attribute name(동적 인자 이름) 대괄호로 감싸서 directive argument에 JavaScript 표현식을 사용할 수도 있음 JavaScript 표현식에 따라 동적으로 평가된 값이 최종 argument값으로 사용됨 .... ... const dynamicattr = ref('title') // 여기 카멜케이스 안됨 다 소문자로 const dynamicValue = ref('Hello') 2. Class & Style Bindings class와 style도 속성이므로 v-bind를 사용해서 동적..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/0PbiO/btszCueZ34W/44pItOfwhj0kDUcvAqEla0/img.png)
# Directive란? 'v-' 접두사가 있는 특수 속성 Directive의 속성 값은 단일 JavaScript 표현식이어야 함(v-for, v-on은 제외) 표현식 값이 변경될 때 DOM에 반응적으로 업데이트를 적용 v-if가 true면 출력됨 # Directive의 구조 🔹 Arguments 일부 directive는 directive 뒤에 콜론(:)으로 표시되는 인자를 사용할 수 있음 Link ▶ 위의 코드에서 href는 HTML a 요소의 href 속성 값을 myUrl 값에 바인딩 해주는 v-bind의 인자 Button ▶ click은 수신할 이벤트 이름을 작성하는 v-on의 인자 🔹 Modifiers .(dot)으로 표시되는 특수 접미사로, directive가 특별한 방식으로 바인딩되어야 함을 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/MBj3Y/btszCnGXFpf/jAEdJeQXQMzubk2mZVffR1/img.png)
# Template Syntax란? DOM을 기본 구성 요소 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용 = Vue Instance와 DOM을 연결하는 확장된 문법을 제공 1. Text Interpolation Message: {{ msg }} 데이터 바인딩의 가장 기본적인 형태 이중 중괄호 구문(콧수염 구문)을 사용 콧수염 구문은 해당 구성 요소 인스턴스의 msg 속성 값으로 대체 msg 속성이 변경될 때마다 업데이트 됨 2. Raw HTML ... const rawHtml = ref('This should be red.') 콧수염 구문은 데이터를 일반 텍스트로 해석하기 때문에 실제 HTML을 출력하려면 v-html을 사용해야함 3. Attribute Binding..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/brjAr3/btszy6L0Mp3/00fZLEjpeic03Wnc7URwT0/img.png)
우선 한번 냅다 따라 쳐보자 공식문서 참조 {{ greeting }} 누른 횟수: {{ count }} 중간중간 나오는 특이한 문법들은 밑의 글 참고 2023.10.25 - [JavaScript] - [JS] Object(객체) # Vue의 핵심 기능 1. 선언적 렌더링 HTML을 확장하는 템플릿 구문을 사용하여 HTML이 JavaScript 데이터를 기반으로 어떻게 보이는지 설명할 수 있음 2. 반응형 JavaScript 상태 변경 사항을 자동으로 추적하고, 변경사항이 발생할 때 DOM을 효율적으로 업데이트 # Vue를 사용하는 방법 1. CDN 방식 2. NPM 설치 방식 → 우선은 CDN 방식으로 진행해 보자 # Vue의 기본 구조 1. CDN 가져오고 Application instance 작성하기..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/N7omr/btszvg3kuOX/8rhQXR18XMzAnVkFrdLYAk/img.png)
# Front-end란? 웹사이트와 웹 어플리케이션 사용자 인터페이스(UI)와 사용자 경험(UX)를 만들고 디자인하는 것 웹 사이트 + UI + UX → HTML, CSS, JavaScript를 활용해서 사용자가 직접 상호작용하는 부분을 개발 🔹 Client-side frameworks 클라이언트 측에서 UI와 상호작용을 개발하기 위해 사용되는 JavaScript 기반 프레임워크 굳이 써야할까? 웹에서 하는 일이 많아져서 도와주는 역할이 필요함 다루는 데이터도 많아져서 얘네가 도와줌으로써 불필요한 코드의 반복을 피할 수 있음 참고) 웹 애플리케이션: 웹에서 문서만 읽는 것이 아닌, 음악을 스트리밍하고, 영화를 보고 등등의 다양한 역할을 함. 그런 현대적이고 복잡한 대화형 웹사이트를 웹 애플리케이션이라고 ..
Promise의 chaining → 콜백 함수에 비해서는 간결하긴 한데 그래도 너무 복잡하지 않나...? 좀 더 간단하게 하는 방법이 없을까? async와 await를 사용해보자 # async & await Promise chaining의 가독성 문제를 해결하기 위해 등장 일반적으로 try & catch와 함께 사용한다 🔹 async 함수 async 키워드를 함수 앞에 붙여서 비동기 함수를 선언 항상 Promise를 반환한다. async function process() { return result; } 🔹 await 표현식 await 키워드를 async 함수 내에서 사용 비동기 함수의 완료를 기다렸다가, 완료하면 resolve를 통해 전달된 데이터를 반환한다. function placeOrder(men..
Promise가 뭐더라..? # Promise 다음에 할 행동을 약속한다 resolve( ): Promise 객체가 성공할 때 호출되어 결과 값을 전달 reject( ): Promise 객체가 실패할 때 호출되어 결과 값을 전달 then( ): 로직 이행 성공 시 then으로 넘어감(resolve 호출 시) catch( ): 로직 이행 실패 시 catch로 넘어감(reject 호출 시) 간단한 Promise를 이용하는 코드 const myPromise = new Promise((resolve, reject) => { let num = 3 if (num === 0) { resolve('성공') } else { reject('로직 수행 실패!') } }) myPromise.then((result) => { ..
비동기 처리의 단점 Web API로 들어오는 순서가 아니라 작업이 완료되는 순서에 따라 처리됨 코드의 실행 순서가 불명확함 → 콜백 함수를 사용하자 # 비동기 콜백 비동기적으로 처리되는 작업이 완료되었을 때 실행되는 함수 연쇄적으로 발생하는 비동기 작업을 순차적으로 동작할 수 있게 함 근데 이렇게 하다보면 콜백 지옥(파멸의 피라미드)가 생김 → (콜백 안에, 콜백 안에, 콜백 안에....) 그래서 만든게.. # Promise 비동기 콜백과 같은 역할, Axios 라이브러리 = 작업이 끝나면 실행시켜 줄께 then(callback) 요청한 작업이 성공하면 callback실행 이전 작업의 성공 결과를 인자로 전달 받음 실패에 대한 약속 catch() then()이 하나라도 실패하면 callback 실행 ca..