1. 반응형 상태 설정 script안의data(){} 보관함을 통하여 상태를 선언및 저장한다. (state처럼 this를 통하여 변경가능) export default { data() { return { count: 1 } }, // `mounted`는 나중에 설명할 생명 주기 훅입니다. mounted() { // `this`는 컴포넌트 인스턴스를 나타냅니다. console.log(this.count) // => 1 // 값을 변경할 수 있습니다. this.count = 2 }} 메서드를 통해서 함수를 사용할 수 있다.export default { data() { return { count: 0 } }, methods: { ..
싱글파일컴포넌트 (SFC) - 파일형식이다. => 컴포넌트 정의하고 만든다.Single-File-Component = JAVASCRIPT, HTML, CSS 를 하나의 파일로 묶는다. API스타일- 옵션 API - 회사 예전 코드 옵션으로 되어있음data, method 등을 사용하여 표현(리액트 상의 class로 사용이 가능하고, OOP적 사용으로 this 등이 들어감) - 컴포지션API - 고도화 및 마이그레이션 시 필요한 코드function 등을 사용하여 표현(리액트 상의 함수형 컴포넌트로 생각 할 수 있다.) 1. 여러 속성바인딩 객체안에 id, class 등을 넣고서, v-bind를 사용하여 넣어주면 끝!data() { return { objectOfAttrs: { id: '..
session ID는 서버에 많은 부담을 주기때문에 인가를 하기위해 나온 방식이 Token이다.주로 JWT토큰을 사용하여 처리하는데 -Access token-Refresh token두가지를 가지고있다. (서버측에서) Access token은 짧은 생명주기를 가지고, 서버로부터 승일을 받아 인증이 필요한 모든 HTTP request에 포함되어 간다. 그에반해 Refresh token은 보통 긴 수명 주기를 가지고, DB에 저장되어 access token이 만료되었을때 새로운 access token을 발급해준다. (클라이언트) 받아온 token을 어디에 저장해야할까? local storage, cookies 두가지 방식이있는데 장단점을 봐보자 local storage 장점 - 편리성 pure javascri..
자바스크립트는 객체가 생성되었을 때, 자동으로 메모리를 할당 하고 더 이상 필요하지 않을때 메모리를 자동으로 해제한다. = 가비지컬렉션 메모리생명주기 1. 필요 할때 할당 2. 할당된 메모리 사용 (읽기, 쓰기) 3. 필요하지 않으면 해제 javacript는 값을 선언할때 메모리를 자동으로 할당한다. = 값 초기화 선언 초기화가 동시에 일어난다. 가비지컬렉터가 이제 필요하지않으면 해제해주는 작업을 해주는 아이들인데 어떻게 찾는가..? 정답은 참조에있다. '어떤 다른 객체도 참조하지 않는 객체'를 '더 이상 필요 없는 객체'라고 여긴다. 이 객체를 "가비지"라 부르며, 이를 참조하는 다른 객체가 하나도 없는 경우, 수집이 가능
Blocking: 자신의 작업을 진행하다가, 다른 주체의 작업이 시작되면 다른작업이 끝날때까지 기다렸다가 자신의 작업을 시작하는 것 Non-Blocking: 다른 주체의 작업과 상관없이, 자신의 작업을 하는것 사원이 서류를 작성해서 상사에게 전달을 해야한다. 이때 상사를 blocking상사라고 해보자 blocking상사는 해당 서류를 읽을때까지 기다리라고한다. 이후 다 읽고서 사원에게 돌아가라고한다. 그렇다면 상사가 서류를 읽을때까지 계속 기다려야한다. non-blocking이라는 상사에게 서류를 전달한다고해보자. 읽어볼때니 돌아가세요. 이제 사원은 돌아가서 일을 할 수 있게 된다. blocking, non-blocking의 차이는 다른주체가 작업을할때 자신의 제어권이 있는지 없는지 가 중요하다. syn..
실행컨텍스트 - (레코드-호이스팅 )/(아우터-스코프체인)
자바스크립트 언제 컨텍스트를 생성 언제없앨까? 자바스크립트 엔진은 콜스텍이라는 통에 전역 실행컨텍스트를 담습니다. 만약 전역에서 함수 A를 호출하게된다면, 함수 A의 실행컨텍스트를 담는다. 위에서 내려다봤을때 활성화된 실행컨텍스트 = function A의 실행 컨텍스트 만약 함수 a에서 함수 b가 호출되면? 또 실행 컨텍스트를 담는다. 함수 b종료되면 뒤에서부터 주루룩 다시 사라지게된다. 어제배운 호이스팅과 연관지어보기 console.log(TVChannel); // undefined var TVChannel = 'netflix' console.log(TVchannel); // netflix 호이스팅이되어서, 변수의 선언과 초기화가 개별적으로 일어나기때문에 선언라인 전에도 변수를 참조할 수 있다. 사실..
호이스팅: 선언한 변수, 선언문이 최상으로 올려끓어지는 현상 보통, 함수 선언문 var는 호이스팅의 대상이지만, const, let그리고 함수 표현식은 호이스팅의 대상이 아니라고한다. 선언단계에서 메모리에 저장. 크게 변수호이스팅, 함수호이스팅 이있다. 변수호이스팅 var, const, let 사실상, var const let 모두 호이스팅이되긴한다 하지만 let과 const는 호이스팅 되어 변수를 메모리에 올려놨지만 TDZ라는 지역에 있어 선언한 코드 줄을 지나야 접근 가능한 상태라고 보면 된다. 그래서 const let = '참조에러' 사실상 메모리상에는 const의 값은 있고, let은 undefined, var도 undefined이다. console.log(a()); // 'a' console.l..