[TypeScript] 타입스크립트(TypeScript) 뿌시기 1 (변수 선언)

타입스크립트(TypeScript) 뿌시기 1 (변수 선언) Studying TypeScript 1 변수 선언 ES5 까지는 변수를 선언할 수 있는 방법이 var 선언자를 이용하는 방법 밖에 없었습니다. var 선언자는 아래와 같은 특징을 가지고 있었는데요, 변수가 선언된 위치와 관계없이 스코프(scope)의 최상위로 끌어올림 되어 같은 스코프라면 어디서든 호출되는 특징과, 블록 레벨 스코프(Block Level Scope)가 지원되지 않는 특징입니다. var 선언자의 특징 1 var 선언자의 첫 번째 특징은 호이스팅(Hoisting) 이라고 불리는 녀석입니다. 호이스팅이란 위에서 말씀드렸다시피 선언한 ...

더보기

[Mac/Big Sur] VSCode Terminal 버벅거리는 현상 해결 방법

Fix VSCode Terminal Lagging Big Sur 업데이트? Big Sur 가 나왔다는 이야기를 듣고 바로 업데이트를 하려고 했지만 찾아보니 Big Sur 업데이트 후 맥이 느려졌다는 글을 많이 봐서 업데이트를 최대한 늦추려고 했음 근데 어쩔 수 없이 업데이트를 해야 하는 상황이 와서 결국 업데이트를 해버림.. (not 클린 설치) 업데이트 후 이것저것 둘러봤는데, 다크 모드에서 확인 버튼의 글씨가 잘 보이지 않음 뭔가 상단바가 반투명? 해진 느낌 생각보다 그렇게 느려지지 않은 속도 (체감상 아주 조금 느리긴 함 ㅎ) 정도…… 생각보다 나쁘지 않아서 만족하며 여느 때와 같이 ...

더보기

[Vue] 나도 뷰(Vue) 할 수 있어 - Vue 정리 1

나도뷰 1 Vue? Vue 란 사용자 인터페이스를 만들기 위한 Progressive Framework MVVM 디자인 패턴 MVC(Model, View, Controller) 패턴의 변형으로, View 의 추상화를 만드는 것이 핵심인 패턴 Model App 에서 사용되는 데이터와 그 데이터를 처리하는 부분 비즈니스 로직과 유효성 검사, 데이터를 포함하는 App 의 도메인 모델 View 사용자에게 보여지는 구조, 레이아웃, 형태 등을 정의하는 UI 부분 애니메이션 같은 UI 로직을 포함하되 비즈니스 로직은 포함하지...

더보기

[React] 나중에 보면 부끄러울 수 있는 리액트(React) 정리 2

나.부.리 2 React 정리…. 오늘은 Redux 중심 Spread Operator 정보의 업데이트가 이루어질 때 React 에서 setState 를 할 때, 기존 정보가 새 정보로 업데이트 됨 ... 연산자를 사용해 원래 배열을 유지하면서 다른 요소를 추가할 수 있음 var colors = ['red', 'yellow', 'blue'] // var newColors = ['red', 'yellow', 'blue', 'green'] 와 같음 var newColors = [...colors, 'green'] 함수 인자로 사용할 때 필요한 parameter 의 개수가 정해지지 않...

더보기

[React] 나중에 보면 부끄러울 수 있는 리액트(React) 정리 1

나.부.리 1 React 정리…. React Design Pattern React 의 Component 는 상태, DOM, 이벤트 등 다양한 것들을 관리하는 역할을 함 React 에는 여러 Design Pattern이 있음 Design Pattern? 재사용성과 유지보수성을 높이기 위해 사용 하나의 Component 에서 Data의 Fetch 와 Render 를 같이 표현하면 코드의 중복이 생길 수 있음 따라서, Data를 가져오는 부분 과 가져온 데이터를 뿌리는 부분 을 나눠줄 필요가 있음 Container vs. Presentational Stateful vs. Statele...

더보기

[React] React에서 render가 두 번씩 돼요!

React Component Render Twice React component render twice react 에서 render 가 될 때 마다 console 로 찍는 코드를 작성 중… render() { console.log("render!"); ... 띠용? 렌더링이 두 번씩 되어 출력됨 찾아보니 App.js 에 React.StrictMode 가 있어서 그렇다고 함 // <React.StrictMode></React.StrictMode> 요거.. ReactDOM.render( <React.StrictMode> <Ap...

더보기

[React] React Class Component(클래스형 컴포넌트), Functional Component(함수형 컴포넌트) 3편

React Class Component, Functional Component 리액트.. 클래스형 컴포넌트와 함수형 컴포넌트 알아보기 인프런 생활코딩 강의를 참고했습니다! (인프런 강의 링크) 1편 보기… 2편 보기… Functional 컴포넌트가 class 컴포넌트와 대등할 수 있게 된 계기 state 를 사용할 수 있게 됨 (useState 이용) life cycle 을 사용할 수 있게 됨 리액트의 Life Cycle class 컴포넌트 컴포넌트가 생성이 되면 getDefaultProps(), getInitialState() 라는 메소드를 호출 그 후, componentWil...

더보기

[React] React Class Component(클래스형 컴포넌트), Functional Component(함수형 컴포넌트) 2편

React Class Component, Functional Component 리액트.. 클래스형 컴포넌트와 함수형 컴포넌트 알아보기 인프런 생활코딩 강의를 참고했습니다! (인프런 강의 링크) 1편 보기… state, props 컴포넌트를 사용하는 쪽은 컴포넌트가 제공하는 props 를 통해서 컴포넌트를 이용 컴포넌트를 만드는 쪽은 내부적으로 state 라는, props 와 구분되는 데이터를 통해 내부적으로 작업 props 는 class 와 functional 모두 사용 가능 state 는 class 에서만 사용이 가능했지만, hook 을 통해 functional 에서도 사용이 가능해짐...

더보기