Get started with Bootstrap · Bootstrap v5.3 (getbootstrap.com) Get started with BootstrapBootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.getbootstrap.com  이 링크를 CDN(Content Delivery Network)라고 함 grid: 반응형 웹페이지도 지원

bind() ● js 함수 호출 시에 사용할 수 있는 함수 ● bind() 사용 시 새로운 함수를 반환 ● call(), apply()처럼 this를 지정할 수도 있고 또한 원하는 인자를 전달할 수도 있다. 문법 function.bind(thisArg, [arg1, arg2, ...]) ● thisArg - this가 가리킬 객체를 지정 ● setTimeout 내에 콜백 함수를 만들 때, thisArg로 전달된 원시 값은 객체로 변환 ● [arg1, arg2 ...] : 함수의 인자로 전달되는 값 예제 바인딩된 함수 생성 ● bind()의 가장 간단한 사용법은 호출 방법과 관계없이 특정 this 값으로 호출되는 함수를 만드는 것이다. ● 초보들의 흔한 실수는 객체로부터 메서드를 추출한 뒤 그 함수를 추출..

react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다. 사용하는 이유 ex) 서버로부터 값을 가져오거나 업데이트 하는 로직을 store 내부에 개발하는 경우가 많다. 그렇다보니 store는 클라이언트 state를 유지해야 하는데, 어느 순간부터 store에 클라이언트 데이터와 서버 데이터가 공존하게 된다. 그리고 그 데이터가 서로 상호작용하면서 서버 데이터도 클라이언트 데이터도 아닌 끔찍한 혼종이 탄생하게 된다.(예를 들면 서버에는 이미 패치된 데이터가 클라이언트에서는 패치되기 전 데이터가 유저에게 사용되고 있는 것이라고 볼 수 있다.) 그래서 react-query를 사용함으로 서버, 클라이언트 데이터를 분리한다. 이 ..

create-react-app을 설치하였을 때 자동으로 설치되는 React의 파일 중 React의 중요한 파일 3가지 1. index.js 2. App.js 3. index.html 1. index.js src 폴더의 하위폴더 메인 프로그램이라고 할 수 있다. 여기에서 html 템플릿 및 js의 컴포넌트를 조합하여 렌더링하고 실제 표시한다 2. App.js src 폴더의 하위폴더 이것은 컴포넌트를 정의하는 프로그램이다. 실제로 화면에 표시되는 내용 등은 여기에서 정의된다. 3. index.html public 폴더의 하위폴더 메인 프로그램인 index.js에 대응되는 것으로, html 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 일어 와서 렌더링된 결과가 표시된다. *..

자바스크립트는 동기적인 언어? ● js는 동기적인 언어이고, blocking이며, single-threaded한 언어이다. 하지만 이것은 한 번에 한 번의 작업만 진행할 수 있다는 특성을 의미한다. 하지만 js의 모든 것에서 이러한 특성을 의미하지는 않는다. 만약 많은 양의 데베를 요청해야 한다면 어떻게 할까? 동기적으로 처리한다면 하나의 작업에 대한 요청을 하고 응답을 기다리는 동안 다른 작업은 대기해야 할 것이다. 시간이 굉장히 오래 걸린다. ●js는 이러한 이슈를 해결하기 위해 해결책을 제시했다. 사람들이 js가 비동기적 언어라고 오해하는 이유가 js를 비동기적으로 동작하도록 할 수 있기 때문이다. 자바스크립트의 비동기 처리 ● 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를..

데이터를 처리하는 방식 => 동기, 비동기 처리 동기와 비동기 ● 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉 A작업이 모두 진행 될 때까지 B작업은 대기해야한다. ● 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다. 즉 A작업이 시작하면 동시에 B작업이 실행된다. A 작업은 결과값이 나오는 대로 출력된다. 동기적 처리(Synchronous) console.log("1st"); console.log("2nd"); console.log("3rd"); 위와 같은 코드를 작성하고 실행해 보면 예상되는 결과는 1st, 2nd, 3rd일 것이다. '1st' '2nd' '3rd' 예상했던 것처럼 1st, 2nd, 3rd가 차례대로..