hojncode 웹개발 공부하기.

React로 컴포넌트를 만들 경우, function 과 화살표 함수를 사용해서 만들때 두가지의 차이점은 무엇일까? function : 화살표 함수 arrow function : 위 처럼 두가지 방법 모두 사용이 가능하고 성능의 차이는 없다. 단 여기서 알 수 있는건 자바스크립의 호이스팅 개념을 공부 해 볼 수 있다. 1. 화살표 함수 2. function 1번의 화살표 함수의 경우 , const 로 선언되기에 const 아래줄에 func() 을 입력해야 동작한다. 2번 function 의 경우, JavaScript는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당하기 때문에, 함수를 호출하는 코드를 함수 선언보다 앞서 배치할 수 있다. (const , let 으로 선언한 변수도 호이스팅 대..

첫번째 괄호는 익명 함수를 감싸 실행 될 함수가 전역 스코프에 불필요한 변수를 추가하거나, IIFE 내부안으로 다른 변수들이 접근하는 것을 막을수 있는 방법. 두번째 괄호는 즉시 실행 함수를 생성하는 괄호, 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행함. https://developer.mozilla.org/ko/docs/Glossary/IIFE IIFE - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN **즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)**은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다. developer.mozilla.org http://chanlee.github.io/20..

콜 스택은 자바스크립트 해석기가 사용하는 메커니즘. (스택 : 데이터 구조 - 후입선출 저장 방식) 여러 함수를 호출하는 스크립트에서 해당 위치를 추적한다. 그래서 자바스크립트가 해당 위치를 알 수 있다. 스크립트가 함수를 호출하면 해석기는 함수를 콜 스택에 추가한다. 그리고 실제로 그 함수를 실행하고 , 함수가 완료되면 콜스택에서 함수를 제거한다. // 개발자 도구 창에 source에서 전체 코드의 실행 순서를 알아볼 수 있다. const multiply = (x, y) => x * y; const square = (x) => multiply(x, x); const isRightTriangle = (a, b, c) => square(a) + square(b) === square(c); console.l..

const test1 = {} test1[Date.now()] = {text:"record", work:true} //{text: 'record', work: true} //test1 == {현재시간 숫자값: {text:"record", work:true} } 이렇게 object로 변수를 선언하면, Date.now()를 아이디로 사용할 수 있어서 편리하다. 하지만 , 리액트에서는 이렇게 사용 할 수 없다 (state 값은 못바꾸는 원칙때문. 따라서 setState를 사용해서 state를 변경해야한다. ) 다음 방법을 리액트에서 사용해 볼 수 있다. Object.assign은 object 를 가져다가 다른 object와 합쳐준다. 그런다음 새로운 object를 리턴해준다. (여기서는 object로 만들었지..

EsNext 자바스크립트 소스코드를 ES5 자바스크립트 코드로 변환시켜주는 트랜스파일러(transpiler) ** 타입스크립트의 소스코드는 TSC(TypeScript compiler) 라는 트랜스파일러를 통해 ES5 자바스크립트 코드로 변환된다. *트랜스파일러란?? 어떤 프로그래밍 파일로 작성된 소스코드를 또 다른 프로그래밍 언어로 된 소스코드로 바꿔주는 프로그램을 말한다. ( 텍스트로 된 소스코드를 바이너리 코드로 바꿔주는 컴파일러 와 구분하기 위해 생긴 용어 )

const a = [1,2,3,4,5] 결과 : undefined a.slice(0,3) 결과 : [1, 2, 3]

function은 내가 계속 반복해서 사용할 수 있는 코드 조각입니다. 코드를 캡슐화 해서 실행을 여러번 할 수 있습니다. function 함수명() { argument(인수) } argument(인수)는 function을 실행하는 도안 정보를 function에게 보낼 수 있는 방법으로, 소괄호 안에 위치합니다. 객체 안에서, 아래와 같이 함수를 선언할 수 있습니다. const player = { name: “hojn”, sayHello: function (otherPersonsName) { console.log(”hello” + otherPersonsName + “good to see you again”) }, }; player.sayHello(”lami”); //결과값 : hello lami good..

Object(객체)는 property를 가진 데이터를 저장해주며, {} 를 사용한다. - property 속성접근자 . 또는 {} 로 객체의 속성에 접근할 수 있도록 해줍니다. 예시) const who = { name:hojn, job:dev, } property를 불러오는 방법은 2가지 입니다. 1. console.log(who.name); => hojn 2. console.log(who["name"]); => hojn property를 바꾸는 것은 가능합니다. ( 선언된 object를 바꾸는 것은 불가능합니다. ) who.job=”cooker”, property를 추가 할 수도 있습니다. who.age=”30”, - 객체와, 배열의 사용 접근 배열안에 필요한 값들을 나열하게 되면 사용하면 관리가 어렵..

배열로 정의된 변수는 배열의 내용물을 변경 할 수 없습니다. const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; 를 daysOfWeek = ["hi"]; 로 바꿀 수 없는데, 이유는 배열 자체의 내용은 변경 할 수 없기 때문입니다. 하지만, 배열안의 내용물들은 추가와 삭제가 가능 합니다. 변수를 선언하면 주소값이 매핑되고 그 주소로부터 데이터가 표시됩니다. 예를 들어 const a = ‘111’; 에서, a는 111이라는 문자열정보가들어있는 메모리 주소를 가르킵니다. (데이터가 저장곳의 위치값) 따라서 const a의 내용은 바꿀 수 없습니다.(const a = 2 ; 를 a = 4; 로 바꿀 수 없습니다.) 배열로 선언한 변수에서는,데이터 메..

true, false, null, undefined 데이터 타입이다 true, false 는 0과 1처럼 반대 값으로 사용한다 null : 컴퓨터에 값이 없음을 의도적으로 알리기 위해 채워진 값이다. undefined : 변수만 만들고 값을 지정하지 않을시, 컴퓨터 메모리에 만들어졌지만, 값이 할당 되지 않은 상태. //console.log 확인하기 const amIBeRich = true; console.log(amIBeRich); // null 은 그 변수에 아무것도 없다를 알려준다(비어있음을 알려준다) const amIFat = null; console.log(amIFat); // undefined는 변수가 메모리에 만들어졌지만(컴퓨터가 이 변수에 대해 인식하고 있지만) , 값이 할당 되지 않음. ..