언어(Language)(44)
-
event.preventDefault();
form에서 버튼을 눌렀을 떄 원래는 얘가 하는 일이 페이지를 한 번 리프레쉬 시킨다. 그렇게 되면 state가 없어져 버림. 그래서 리프레쉬 시키는 것을 막아준다.
2023.04.04 -
js bind()
bind() ● js 함수 호출 시에 사용할 수 있는 함수 ● bind() 사용 시 새로운 함수를 반환 ● call(), apply()처럼 this를 지정할 수도 있고 또한 원하는 인자를 전달할 수도 있다. 문법 function.bind(thisArg, [arg1, arg2, ...]) ● thisArg - this가 가리킬 객체를 지정 ● setTimeout 내에 콜백 함수를 만들 때, thisArg로 전달된 원시 값은 객체로 변환 ● [arg1, arg2 ...] : 함수의 인자로 전달되는 값 예제 바인딩된 함수 생성 ● bind()의 가장 간단한 사용법은 호출 방법과 관계없이 특정 this 값으로 호출되는 함수를 만드는 것이다. ● 초보들의 흔한 실수는 객체로부터 메서드를 추출한 뒤 그 함수를 추출..
2023.03.13 -
js 비동기 처리(promise, await&callback)
자바스크립트는 동기적인 언어? ● js는 동기적인 언어이고, blocking이며, single-threaded한 언어이다. 하지만 이것은 한 번에 한 번의 작업만 진행할 수 있다는 특성을 의미한다. 하지만 js의 모든 것에서 이러한 특성을 의미하지는 않는다. 만약 많은 양의 데베를 요청해야 한다면 어떻게 할까? 동기적으로 처리한다면 하나의 작업에 대한 요청을 하고 응답을 기다리는 동안 다른 작업은 대기해야 할 것이다. 시간이 굉장히 오래 걸린다. ●js는 이러한 이슈를 해결하기 위해 해결책을 제시했다. 사람들이 js가 비동기적 언어라고 오해하는 이유가 js를 비동기적으로 동작하도록 할 수 있기 때문이다. 자바스크립트의 비동기 처리 ● 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를..
2023.03.10 -
동기(Synchronous) & 비동기(Asynchronous)
데이터를 처리하는 방식 => 동기, 비동기 처리 동기와 비동기 ● 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉 A작업이 모두 진행 될 때까지 B작업은 대기해야한다. ● 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다. 즉 A작업이 시작하면 동시에 B작업이 실행된다. A 작업은 결과값이 나오는 대로 출력된다. 동기적 처리(Synchronous) console.log("1st"); console.log("2nd"); console.log("3rd"); 위와 같은 코드를 작성하고 실행해 보면 예상되는 결과는 1st, 2nd, 3rd일 것이다. '1st' '2nd' '3rd' 예상했던 것처럼 1st, 2nd, 3rd가 차례대로..
2023.03.10 -
[코딩앙마] 자바스크립트 중급 강좌 : 140분 완성 60-
구조 분해 할당(Destructuring assignment) : 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 나머지 매개변수, 전개 구문(Rest parameters, Spread syntax) ... arguments 1. 함수로 넘어 온 모든 인수에 접근 2. 함수 내에서 이용 가능한 지역 변수 3. length / index 4. Array 형태의 객체 5. 배열의 내장 메서드 없음(forEach, map) 전개 구문(Spread syntax) : 배열 클로저(Closure) 어휘적 환경(Lexical Environment) Closure 1. 함수와 렉시컬 환경의 조합 2. 함수가 생성될 당시의 외부 변수를 기억 3. 생성 이후에도 계속 접근..
2023.03.04 -
[코딩앙마] 자바스크립트 중급 강좌 : 140분 완성 41-60
[Array] arr.splice(n, m) : 특정 요소 지움 n은 시작, m은 개수 arr.splice(n, m, x) : 특정 요소 지우고 추가 arr.splice() : 삭제된 요소 반환 arr.slice(n, m) : n부터 m까지 반환 arr.concat(arr2, arr3 ..) : 합쳐서 새배열 반환 arr.forEach(fn) : 배열반복 arr.indexOf/arr.lastIndexOf arr.includes() : 포함하는지 확인 arr.find(fn)/arr.findIndex(fn) : 함수 연결 가능 첫 번째 true값만 반환하고 끝 만약 없으면 undefined를 반환 arr.filter(fn) : 만족하는 모든 요소를 배열로 반환 arr.reverse() : 역순으로 재정렬 a..
2023.03.03