기록하며 성장하기

Class Typescript를 통해 Javascript의 객체지향 코드를 더 안전하고 좋은 코드로 만들 수 있다. 파라미터만 써주면 constructor가 알아서 컴파일된다. 접근제어자를 통해 접근 가능한 범위를 설정해줄 수 있다. class Player { constructor ( private firstName: string, // class 내부에서만 사용 가능 public lastName: string, // 모두 사용 가능 ){} } const jessie = new Player('jessie', 'Y') // 인스턴스 생성 jessie.firstName // 🚨 접근불가 jessie.lastName // 👍🏻 접근가능 Abstract Class 추상클래스는 다른 클래스가 상속받아 사용할 수 ..

Call signature 함수의 파라미터와 리턴값의 타입을 모두 미리 선언하는 것이다. 예를들어 React에서 함수로 prop을 보낼때, 어떻게 작동할지 미리 설계 해놓을 수 있다. type Add = (a: number, b: number) => number // this is a Call signature const add: Add = (a, b) => { return a + b } Overloading 오버로딩은 함수가 여러개의 call signature를 가지고 있을때 사용한다. 이런 경우의 타입을 직접 정의하는 일은 거의 없고, 라이브러리나 패키지들이 오버로딩 개념을 많이 사용하므로 알고있자. type Add = { (a: number, b: number): number (a: number, ..

Types of Typescript 기본적으로는 Implict type으로 변수의 타입을 추측해서 제공하지만, 제대로된 타입스크립트 활용을 위해서는 변수를 선언할때 타입을 명시적(Explicit type) 으로 할당한다. 다음과 같이 변수에 타입을 할당하며, 할당한 타입과 다른 데이터를 재할당 하려고하면 오류를 발생시킨다. let favorite: string = 'Apple' let age: number = 30 let isAdult: boolean = true any는 어떤 타입의 자료든 할당할 수 있도록 한다. Javascript에서는 기본적으로 변수에 any가 할당된 것과 같다. // 명시적 any 타입 지정 let id: any = 123 id = 'text도 할당 가능' // 암시적 any 타..

강의를 들으면서 README 파일에 내용을 기록했으나, 잠깐 vue를 체험하고 오는 사이 낯설어져서 다시 해보는 복습 정리. Why Typescript? 자바스크립트 만으로는 코드의 의도를 명확히 반영할 수 없다. function add (a, b) { return a + b } add('10', '20') 위 코드를 자바스크립트로 실행하는 경우, 의도는 30을 받는 것이었겠지만, 의도와 다른 데이터 타입(string)을 파라미터로 받았기 때문에 1020이라는 값을 받게된다. 이렇게 자바스크립트는 의도치 않은 오류를 발생시키기도 하고, 다 실행되고나서야 잘못된 지점이나 에러를 보여주기때문에 런타임에러(사용자가 만나는 에러)를 발생시킨다는 문제가 있다. 타입스크립트를 활용하면 이런 문제점을 보완할 수 있다..

왜때문인지 prettier 때문에 삽질을 너무 많이했다 🥲 이런 실수 할 사람이 있을까 모르겠지만... 미래에 또 멍청한 짓을 하고있을지 모를 나를 위해서라도 정리 해본다. prettire가 작동하지 않을때 체크해야할 두 가지 vs code에서 cmd + , 를 눌러 setting 화면에 진입한다. 그리고 상단 검색창에서 default formatter 와 format on save를 검색해서 옵션을 바꿔주면 된다. 하지만 나는 왜 계속 안될까... 나는 이걸 다 해서 분명 제대로 작동이 됐었는데.. 어쩌다보면 또 안되고 그래서 삽질을 한참 했다. Why does Prettier not format code in VS Code? In my Nuxt application where ESlint and Pr..

await & async promise가 콜백지옥을 무찌를 수 있는 좋은 방법이지만 그래도 코드가 복잡하기는 하다. 그래서 ES8 문법으로 await 과 async 가 추가되었다. await 과 async 는 promise를 더 깔끔하게 사용할 수 있는 방법이다. 하지만 경우에 따라 더 좋은 방법들이 다르기때문에, 적절히 섞어서 활용하는 것이 필요하다. promise 복습을 먼저 해보자 1초 후 텍스트 출력, 다시 2초후 텍스트 출력, 다시 3초후 텍스트를 출력하는 함수가 있다. function timer(time) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(time); }, time); }); } console.log(..

무작정 시작해보는 리액트 공부 🤨 자바스크립트 초반 이해에 큰 도움을 받았던 니꼬쌤 강의로 시작했다. 일단 리액트가 무엇을 해결하기 위해 만들어진 것인지 이해하자. React.js는 interactive한 화면을 만들기 위해서 페이스북에서 만든 자바스크립트 라이브러리이다. 요소를 잡아와서 이벤트를 달고 함수를 만들어서 붙이는 등의 작업을 훨씬 심플하게 만든다. React 사용 준비 react와 react-dom 링크를 html 파일에 추가해야 한다. react는 interactive UI를 만들어내는 엔진 같은 역할을 하고, react-dom은 만들어진 UI를 HTML에 올려둘 수 있게 하는 역할을 한다. React로 element 만들기 실제로 리액트를 사용할 때는 JSX를 사용해 더 직관적으로 코드를..

개념정리 동기 호이스팅이 된 다음, 작성한 코드들이 차례대로 실행되는 것을 말한다. ( hoisting : 변수, 함수 선언이 가장 먼저 실행되는 것 ) 비동기 코드 순서에 따르지 않고 실행되는 것으로, setTimeout / AJAX / eventListener 등의 처리 시 비동기 처리 된다. 콜백함수 실행할때 다시 call back 해달라고 하는 함수. 함수 안에서 동작하는 또 다른 함수의 형태. 콜백함수로 동기 / 비동기 처리 모두 할 수 있다. Synchronous callback : 함수 내 코드가 바로 실행될 수 있는 코드인 경우 Asynchronous callback : 함수 내 코드가 실행 타이밍을 기다려야하는 코드인 경우 콜백함수의 중첩이 많아지면 가독성이 떨어지고 복잡해지므로, pro..

다른 언어가 동작할때는 코드 윗줄부터 순서대로 작동하지만, 자바스크립트는 아닌 경우가 있다. 그래서 Stack과 Queue, 동기와 비동기, 콜백함수 등의 개념을 이해하고 있으면 도움이 된다. Stack 과 Queue stack은 쌓여있는 코드를 위에서부터 차례차례 실행하고, queue는 먼저 들어온 코드를 먼저 처리한다. 자바스크립트를 읽어올때 브라우저는 stack이라는 공간에 코드를 쌓아둔다. 윗 줄 부터 실행되기 시작하다가 도중에 시간이 필요한 코드를 만나게 되면 그 코드들은 Queue라는 공간으로 일단 보내놓고 바로 할 수 있는 다음 작업부터 실행한다. console.log(1+1) // 첫번째 실행 setTimeout(function(){ console.log(2+2) }, 1000) // 시간..

window.innerWidth //viewport안의 폭을 알려준다 window.innerHeight //viewport안의 높이를 알려준다 window.scrollY //페이지 가장 위에서부터 얼마나 스크롤 되었는지 높이를 알려준다 element.getBoundingClientRect().top //viewport의 가장 위로부터 원하는 요소가 얼마나 떨어져있는지 알려준다.