[Vue.js] 클래스 바인딩과 스타일 바인딩 차이 1. 클래스 바인딩 (:class)CSS 클래스 자체를 변경하는 방식입니다.✅ 장점: CSS에서 미리 스타일을 정의해 두면 가독성이 좋고 유지보수가 편리함.❌ 단점: CSS에 정의되지 않은 개별 속성은 직접 변경할 수 없음.예제: computed를 이용한 클래스 바인딩 {{ message }} ✅ reviewClass가 "best", "good", "worst" 중 하나를 반환하며, 태그에 해당 클래스가 적용됨.2. 스타일 바인딩 (:style)CSS 속성을 직접 지정하는 방식입니다.✅ 장점: 특정 스타일을 동적으로 변경할 때 유용함.❌ 단점: 스타일을 하나하나 지정해야 하므로 코드가 길어질 수 있음.예제: computed를 이용한 스타일 바인딩 {{ message }} ✅ reviewStyle이 { .. [JavaScript - 비동기 시리즈 4] Async & Await Async & Await: 비동기 함수를 간편하게 사용하도록 함promise를 한 단계 감싸서 더 보기 편하게 만들어 주는 문법!prominse chaining 의 복잡한 chaining 없이 마치 동기적인 코드를 작성하듯 훨씬 간편하게 쓸 수 있다 Async: 비동기 함수를 정의할 때 사용하는 키워드. function 키워드 앞에 async를 붙여주면 비동기 함수로 변신한다이때 async 키워드가 붙은 함수는 항상 promise를 반환하고, 함수 내에서 어떤 값을 리턴해주면 이 값은 promise로감싸져서 반환된다 (우리 눈에는 보이지 않지만, 내부적으로 promise를 사용하는 것임) getUser로부터 반환된 user는 promise가 된다 // Asyncasync function getUser().. [JavaScript - 비동기 시리즈 3] Promise promisepromise : 비동기 처리에 사용되는 자바스크립트 객체, state(상태)와 result(결과물) 두 속성을 가진다비동기 작업이 맞이할 성공 혹은 실패를 나타냄 비동기 작업이 진행중일 때는 비어있다가, 작업이 완료되면 그 작업에 대한 결과물로 promise 상자가 채워진다= 비동기 작업의 상태(성공 혹은 실패)를 나타내는 상자 promise 상자에 붙은 딱지가 state, 상자 안에 들어가는 결과물이 result이다 promise의 3가지 상태 (Pending, Fulfilled, Rejected)1. Pending - 대기 Pending state : 비동기 작업이 진행중일때 객체는 pending state를 갖고있음 작업이 아직 성공하지도, 실패하지도 않은 대기상태기 때문. 이때 p.. [JavaScript - 비동기 시리즈 2] 비동기 Callback https://chaenilog.tistory.com/92 더 다양하고 의미있는 일을 하기 위해 매개변수 또는 인자라고 하는 입력값을 전달받을 수 있다->> 함수는 여러가지 입력값을 전" data-og-host="chaenilog.tistory.com" data-og-source-url="https://chaenilog.tistory.com/92" data-og-url="https://chaenilog.tistory.com/92" data-og-image="https://scrap.kakaocdn.net/dn/l3Dvd/hyYvif6rP9/vRkEXAdbyFpfkZHLp2LmVk/img.png?width=512&height=512&face=0_0_512_512,https://scrap.kakaocdn.n.. [JavaScript - 비동기 시리즈 1] 동기 VS 비동기 동기 프로그래밍동기적 수행 : 한번에 하나씩, 순서대로동기 프로그래밍 : 코드를 작성 순서대로 동기적으로 수행하는 방식직관적이고 이해가 용이하지만, 오래걸리는 작업을 할 경우 blocking 현상이 나타날 수 있다 => 비동기 프로그래밍으로 문제 해결 가능 ! 비동기 프로그래밍비동기 프로그래밍 : 코드를 비동기적으로 수행하는 방식해당 작업이 끝날때까지 기다리지 않고 바로 다음 작업으로 넘어가는 방식 setTimeout(callback, 3000) : 브라우저에서 제공하는 비동기 함수, callback함수와 지연시간을 나타내는 밀리초 단위의 인자를 전달받음console.log('1');setTimeout(() => {.. [JavaScript] Callback 함수 function main(param) {} 함수 - 어떤 특정한 일을 하는 코드의 묶음-> 더 다양하고 의미있는 일을 하기 위해 매개변수 또는 인자라고 하는 입력값을 전달받을 수 있다->> 함수는 여러가지 입력값을 전달받을 수 있다. 숫자, 문자열, 객체 등 ->>> 함수는 또다른 함수를 인자로 전달받을 수 있는데, 이렇게 다른 함수의 인자로 전달되는 함수를 콜백함수라고 부른다function main(param) { param()} 콜백함수는 콜백함수를 전달받은 함수에 의해 호출된다 function main(x) { x();}function cat() { console.log('냥');}main(cat); // 출력 : 냥 function main(x) { x();}main(() => { con.. parseInt() parseInt() 함수 설명parseInt() 함수는 JavaScript에서 문자열을 정수(integer)로 변환하는 내장 함수입니다. 문자열의 시작 부분부터 숫자를 파싱(parsing)하여 정수를 추출합니다.작동 방식:문자열 파싱: parseInt() 함수는 문자열의 시작 부분부터 숫자를 파싱합니다.정수 추출: 숫자로 변환될 수 있는 문자를 만나면 정수로 변환하여 반환합니다.변환 중단: 숫자로 변환될 수 없는 문자를 만나면 변환을 중단하고 지금까지 파싱된 정수를 반환합니다.NaN 반환: 문자열의 시작 부분이 숫자로 시작하지 않으면 NaN (Not-a-Number)을 반환합니다.사용법:JavaScript parseInt(string, radix);string: 정수로 변환할 문자열입니다.radix: (.. isNaN() isNaN() 함수 설명:역할: isNaN() 함수는 주어진 값이 NaN (Not-a-Number)인지 확인합니다.작동 방식: 인수를 숫자로 변환하려고 시도합니다. 변환에 성공하면 false를, 실패하면 true를 반환합니다.주의사항: 문자열 "123"과 같은 경우에도 false를 반환합니다. 따라서 문자열에 숫자가 포함되어 있는지 확인하려면 parseInt() 함수와 함께 사용하는 것이 좋습니다.예시:JavaScript 이름 : ! 추가 : v-if="!/\d/.test(textName)" --> 이름에는 숫자를 포함할 수 없습니다. 결론:hasNumber 메서드와 isNaN() 함수를 함께 사용하면 문자열에 숫자가 포함되어 있는지 효과적.. /\d/, test() /d/.test(textName)에서 test는 정규 표현식(Regular Expression) 객체의 메서드입니다. 이 메서드는 주어진 문자열(textName)이 정규 표현식 패턴(/\d/)과 일치하는지 확인하고, 일치하면 true를, 그렇지 않으면 false를 반환합니다.test() 메서드의 역할:정규 표현식 패턴 매칭: test() 메서드는 정규 표현식 객체와 주어진 문자열을 비교하여 패턴 매칭을 수행합니다.일치 여부 반환: 문자열이 패턴과 일치하면 true를, 일치하지 않으면 false를 반환합니다./\d/.test(textName)의 의미:/\d/: 숫자(digit)를 나타내는 정규 표현식 패턴입니다..test(textName): textName 문자열이 /\d/ 패턴과 일치하는지 확인합니다.v.. [JavaScript] this와 bind this -> {} : 어떤 객체를 가르키는 키워드, this가 가리키는 객체는 상황에 따라 바뀐다. this는 함수를 호출한 객체이다1. 전역 문맥전역적 문맥에서 this에 접근하면 this는 윈도우 객체가 된다.( 엄격모드 활성화 ( 'use strict'; ) 시에도 상관 없이 윈도우 객체를 가리킨다 )if (true) { // 1 console.log(this);}console.log(this); // 2'use strict'; // 3console.log(this); 함수 내부의 this : 함수 호출 방법에 따라 값이 달라짐 1) this : 윈도우 객체전역적으로 함수를 호출하는 것은 window.main();과 같음>> "this 는 함수(main).. [JavaScript] 일반함수 vs 화살표 함수 + this 비교 일반 함수 vs 화살표 함수 1. 화살표 함수 문법화살표 함수 : 항상 익명함수다! 1) 코드가 한줄인 경우 중괄호({})와 return 생략 가능 !! function add(a, b) { return a + b}add()function (a, b) => a + badd() 2) 매개변수가 단 하나라면 소괄호도 생략 가능 (매개변수가 하나도 없을때 또는 여려개일 때는 모두 불가능!)const print = (text) => console.log(text)print("hi")const print = text => console.log(text)print("hi") 3) 객체 리턴 시 소괄호로 묶어주기(문법에 혼란이 올 수 있음)const getObject = () => { return { name:.. [HTML] 04 HTML5 입력 양식 태그와 구조화 태그 입력 양식 태그▶ 입력 양식 개요- form 태그로 영역을 생성하고, form 태그 내부에 input 태그를 넣음. 데이터 입력 후 submit 버튼을 누르면 지정된 방식으로 지정된 장소에 데이터를 전달 속성내용method입력 양식에 입력한 데이터를 전달하는 방식,폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드를 명시action입력 양식에 입력한 데이터를 전달하는 장소,폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시 - 전송 방식으로 GET , POST 방식 사용> GET 방식 : 주소에 데이터를 입력해서 전달, 크기가 한정됨> POST 방식 : 주소를 변경하지 않고 비밀스럽게 데이터를 전달, 용량 제한X** GET.. 이전 1 2 3 다음
