너와 나의 프로그래밍

[TypeScript] 비동기 통신 Promise Promise의 대해 예전에는 비동기 처리를 하기 위해 Ajax를 많이 사용했으나 콜백 함수를 사용하는데 있어 코드의 가독성이나 자칫 잘못 구현하면 콜백 지옥을 맛볼 수 있는 경우가 많았으나, 최근에는 Promise 객체를 사용함에 있어 비동기 처리를 더욱 쉽게 처리할 수 있게 되었다. TypeScript에서의 비동기 처리는 기본적으로 ES6의 Promise로 처리한다.(axios도 괜찮지만 일단...) Promise Pattern은 IE11/오페라 미니 외 브라우저에서는 지원하지 않는 단점이 있다. 하지만 컴파일 할 때 'ES5 + 프로미스' 조합으로 컴파일을 하면 모든 브라우저에서 동작이 가능하다. tsc promise.ts --lib ES2015.P..

자바스크립트라면 Element에 addClass나 setAttribute를 줘서 Class Attribute를 Control 할 수 있는 쉬운 방법이 있지만 Vue나 React 같은 경우에는 DOM에 직접적으로 접근하는걸 지양하지 않는 탓에 script 처리를 통해 Attribute를 넣는 다는 것이 참 어렵게 느껴진다. 마침 회사에서 개발 도중 이러한 기능을 처리하는 도중에 아주 괜찮은 예제가 있어서 가져와 보았다. 위 예제는 Element를 클릭하면 background가 Yellow로 바뀌는 예제다. Background로 설정할 부분에 :class 디렉티브를 쓰고 item.id와 selected로 같으면 class를 적용하는 코드다. 클릭은 @click 디렉티브로 클릭이벤트를 받고 seleted를 i..

1. input 박스에서 Blur와 Enter키를 동시에 사용하고 싶을 때. 2. el-input 박스에서 Blur와 Enter키를 동시에 사용하고 싶을 때. 참고 : https://stackoverflow.com/questions/52645011/vue-js-enter-key-and-blur-events-together

1. beforeCreate : 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클. 특징 : 화면 요소에 접근 불가능. data 속성 또는 method 속성이 아직 인스턴스에 정의되어 있지 않음. 2. created : beforeCreate 다음으로 실행되는 단계. 특징 : data 속성 및 methods 속성의 접근 가능. 아직 DOM 객체 접근 불가능(template 속성 접근 x) 3. beforeMount : created 단계 이후 template 속성에 지정한 마크업 속성을 render() 함수로 변환 한 후 el 속성에 지정한 화면 요소(DOM)에 인스턴스를 부착하기 전에 호출되는 단계 특징 : render() 함수가 호출되기 직전의 로직을 추가하는 것이 좋음. 4. mount..

1. 기존 CSS를 적용하는 방식 CSS 파일을 만든 후 그 후 CSS 클래스를 작성해 적용하는 방식으로 엘리먼트에 "className"이라는 속성을 추가해서 작성한 클래스를 넣는 방식. (className 속성의 대한 참조 : https://ko.reactjs.org/docs/dom-elements.html#classname) 2. 스타일 객체를 만들어 스타일링 리액트 방식의 스타일링은 주로 "인라인 방식"의 스타일링을 선호한다. 그 이유는 비주얼 컴포넌트의 재사용성을 더욱 높이는 방법이다. 스타일을 객체로 사용할 때는 JSON형식으로 객체 생성을 하고 작성은 기존 CSS의 사용하던 대시(-)를 빼고 기존 대시(-)로 연결된 대시 다음에 있는 문자를 대문자로 사용해 카멜 표기법(Camel Case)로 ..

React를 공부하면서 가장 마음에 든 것중에 하나가 라이프사이클 메서드가 있다는 것이다. 라이프사이클은 간단히 말해서 어플리케이션이 실행 될 때의 '순간 순간'이라고 생각하면 쉽게 이해할 수 있을 것 같다. 보통 로딩이나 로딩 후 제어라든지, 또는 값을 불러오기 전과 후의 처리를 명확하게 해줄 수 있는 메서드가 있다는건 아주 명확하고 큰 장점이라고 생각한다. 예전에 공부했던 Android도 라이프사이클 메서드가 있어서 굉장히 편리했던 생각이 든다. 아마 요즘 최신 프론트엔드 개발 방식에서도 라이프사이클 메서드가 있다고는 생각한다.(잘 모르겠지만...ㅎㅎ) 라이프사이클 메서드의 종류. 1. getDerivedStateFromProps - 컴포넌트를 마운트 하거나 props를 변경할 때 호출 2. comp..