[React] 왜 React Query를 써야 할까? React Query를 왜 사용할까요?프론트엔드에서 서버 데이터와 상호작용하기 시작하면, 화면이 단순해 보여도 관리해야 하는 요소가 금방 많아져요.로딩 처리, 에러 처리, 캐싱, 중복 요청 방지 등… 이런 것들을 전부 직접 구현하면 코드가 빠르게 복잡해집니다.React Query는 이런 불편함을 상당 부분 자동으로 해결해주는 라이브러리예요.1. API 요청 코드를 간단하게 만들어줘요API를 호출할 때 보통 로딩 상태, 에러 상태, 데이터를 직접 관리해야 하는데요.React Query를 사용하면 아래처럼 한 번에 처리할 수 있습니다.const { data, isLoading, error } = useQuery({ queryKey: ["projects"], queryFn: fetchProjects,});..
썸네일 [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://blog.kakaocdn.net/dna/l3Dvd/hyYvif6rP9/AAAAAAAAAAAAAAAAAAAAAD5T6gC7Gxpm4ia27qJ4OUywwa5s7zY5KcM2OzIYkpzi/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1767193199&allow_ip=&allow_referer=&signature=mzrgSzy5%2FWW0Rl%2Bh4kSblOXZZqc%3D
썸네일 [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:..
라이브러리 브랜드 그룹 | \*△*/

티스토리툴바