javascript

자바스크립트 공부 초반에 이벤트루프 강의를 듣는데 몬소리인지 알아 듣지 못했다...ㅎㅎ 아 그래,,모 그렇게 돌아가는구나,,이정도만 알고 있다가 다시 개념정리를 위해 공부를 해봤다. 혹시나 나처럼 이벤트루프가 아직까지도 몬소리인지 모르겠다면 어느정도 비동기 실습을 해보고 공부해보길 추천한다. 자바스크립트는 싱글스레드 언어 이다. 싱글스레드란 한 번에 하나의 명령만 실행할 수 있는 스레드다. 한번에 하나의 동작만 처리하고 다른 동작이 완료될때까지 기다려야하는 것. 그.런.데 웹사이트 여기저기 돌아다녀도 자바스크립트가 싱글스레드라고?? 라고 믿기 힘들다 왜냐 한눈에 보기엔 한번에 여러 동작을 하고있으니까. 예를 들어 쇼핑몰 페이지만 들어가봐도 여러 상품의 데이터들을 불러오고 있다. 이것들을 가능하도록 해주게..

TodoItem컴포넌트 props item에 type을 정의해줬는데 Property 'item' does not exist on type 'ITodoItem'. 라고 error가 났다. 그니까 ITodoItem 인터페이스에 porps item에 대한 type이 존재하지 않는다 뭐 이런 오류인거 같은데.. 분명 타입 정의를 해줬는데 왜 안되지 하면서 별의별 시도를 해보다가 원인을 알게됨. TodoItem컴포넌트에서 props item이 빈객체로 인식되기 때문에 프로퍼티에 type이 없다~~~이렇게 에러를 내뿜는것.. List컴포넌트에서 TodoItem컴포넌트에 props를 넘겨줘야 객체 프로퍼티가 들어오기 때문에 빈객체인게 당연했다. interface ITodoItem { [key: string]: any..

자바스크립트에서 typeof는 변수의 유형을 알아볼때 주로 사용했었다. 하지만 typescript 안에서는 살~짝 다르게 쓰이는거 같아 알아보았다. let x = "hello world"; console.log(typeof x); 기본적으로 ts에서 js에서 변수의 유형이 뭔지 도출하는 기능은 같다. 추가적인 기능이 있는것! let s = "hello"; let n: typeof s; // n: string 공식문서의 예제로 살펴보겠다. 변수 n에 typeof를 사용하여 기존 변수 s의 type을 복사할 수 있다 자스랑 헷갈렷던게 타입을 복사한다는 개념이 헷갈렸었다..🥲 ts에선 새 변수에 기존변수의 타입을 typeof로 복사 가능하다는 거!! let x = 20; let y = "공작새"; type P..

자바스크립트에서 연산자를 활용하면 코드를 간결하게 바꿀 수 있다. if문으로 여러줄 되어 있는 코드를 한줄로 가능하다는 말씀! 잘 사용하지 않았던 연산자 위주로 포스팅 해보았다 1️⃣ 논리합 연산자 && 앞에 값이 true이면 뒤에 값을 실행. true && true // 앞에 값이 true 니까 뒤에꺼 true 실행 false && false // 앞에 값이 false 니까 false (뒤에 값 실행x) true && false // 앞에 값이 true니까 뒤에 값 false 실행 앞에 값이 true false 냐 에 따라 boolean 값을 반환 해준다. 논리합 연산자를 활용하여 예제를 활용해보자 클릭1 버튼을 클릭하면 p에 num값이 증가되는 코드를 간단하게 짜보았다. if문으로 클릭버튼에 text..

자바스크립트에서 일반함수와 화살표함수 두가지의 함수가 있다. 이 두 함수는 기능이 다르다. 차이점을 알아보자 ⭐1. this 1) 일반함수 - 일반적으로 함수를 호출할 경우 global 객체를 가리킨다(기본적으로 window 객체) function func1() { console.log(this); } func1(); // window object - 메소드함수를 호출할 경우 메소드를 소유한 객체를 가리킨다 const obj = { name:'공작새', method() { console.log(this.name); // 공작새 } }; this가 obj객체 이기때문에 method() 호출시 obj.name의 값이 콘솔에 찍힌다 - 생성자를 호출할 경우 새 인스턴스를 가리킨다 function funcFac..

이벤트를 등록할때 내가 생각하지 못했던(?)대로 이벤트가 적용될때가 있습니다. 바로 이벤트 버블링과 캡처링 때문인데요. 어떻게 이벤트가 흐름을 타는지 알아봅시닷! 1️⃣ 이벤트 버블링(event bubbling) 이벤트가 발생했을때 하위요소(자식) -> 상위요소(부모)로 이벤트가 전달되는 현상 클릭 결과 위의 코드를 보면 div랑 button요소가 중첩되있어요. 보통 이렇게 요소가 중첩되어 동일한 이벤트가 발생할때 이벤트 버블링이 발생합니다. div가 부모고 button이 자식인 상태에서 두 요소에 이벤트를 할당해주었습니다. 그러면 어떤게 먼저 호출될까요? 바로 자식인 child의 이벤트가 호출됩니다. 이벤트 버블링 때문이죠! 버튼을 클릭하면 버튼이 하위요소이기 때문에 child가 먼저 호출되고 부모인 ..

객체를 다루다보면 복사를 하고 싶은 경우가 생기는데요 복사에도 두가지의 개념이 있어요. 깊은복사(Deep copy) 얕은복사(Shallow copy)! 그 전에 자바스크립트에서 원시타입과 참조타입에 대해서 알고 있어야 합니다. 간단하게 알아보고 넘어가죠 자바스크립트에서 원시타입엔 Number, BigInt, String, Boolean, Null, Undefined, Symbol 7 개의 타입이 있고 그 외는 객체(참조)타입으로 이루어져 있습니다. 🔹원시타입은 변수에 값 자체를 할당 num변수에 100을 할당하면 변수 메모리 공간에 값 자체가 할당이 되요 그렇기 때문에 num2에 num 값을 대입하고 num의 값을 바꿔도 num2는 그대로 값 100을 유지합니다 🔹참조타입은 변수에 참조값(메모리 주소)을..

자바스크립트 좀 공부해봤다 하면 나오는 클로저! 클로저를 처음 접하게 되면 너무 헷갈리는 개념인거 같아요. 클로저란 ? 외부함수가 반환된 후에도 내부함수가 외부함수의 변수와 파라미터에 접근할 수 있다! 라는 걸 의미합니다. 접근?? 뭐 어떻게 접근한다는건데 !!! 라는 생각을 가지고 예시를 봐봅시다. function OuterFunction() { var outerVariable = 100; function InnerFunction() { console.log(outerVariable); } return InnerFunction; } var innerFunc = OuterFunction(); innerFunc(); // 100 변수 innerFunc에 외부함수(OuterFunction)를 호출하면 리턴 ..