너와 나의 프로그래밍

[React.js] JSX는 무엇인가 JSX는 Javascript XML의 약자로 '자바스크립트에 XML을 추가한 확장형 문법'이다. 가장 큰 장점은 자바스크립트에 HTML 문법을 사용할 수 있어 컴포넌트를 작성하기에 굉장히 확장성이 용이하다. 주로 리액트에서 많이 사용되며 다른 프론트엔드 프레임워크에서도 사용이 가능하다. 확장자는 .jsx, js를 사용 할 수 있으며 Typescript와 호환이 가능해 .tsx로 사용도 가능하다. // JSX의 기본적인 문법. // 자바스크립트에 HTML 태그를 사용할 수 있다!!!! const myelement = React JSX; React에서 JSX를 사용을 권장하는 가장 큰 이유는 다음과 같다. 'React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 J..

Vue.js는 컴포넌트 끼리의 데이터 통신이 가능하다. 보통은 Vuex를 써서 좀 더 효율적으로 상태 관리를 하거나 데이터를 담아 구조적으로 통신을 하나 순수 Vue에서의 Method를 통해 데이터 통신을 할 수 있다. 부모 컴포넌트에서 자식 컴포넌트로 통신 가장 기본적인 단방향 통신 방법으로 'props'와 '사용자 정의 이벤트'를 사용해서 통신을 한다. 부모 컴포넌트는 사용자 지정한 속성으로 값을 보내고 자식 컴포넌트는 부모에서 지정한 속성을 'props'로 받아온다. 간단한 Props를 넘겨주는 예제로 알아본다. (부모 컴포넌트) 먼저 부모 컴포넌트에서 생성한 HelloWorld 컴포넌트에 msg 라는 사용자 정의 속성을 넣고 메세지를 넣는다. (자식 컴포넌트) 자식 컴포넌트에서 props 속성으로..

Vue.js의 '꽃'인 이벤트 핸들링의 대해서 알아보려고 한다. 기존의 Javascript의 'addEventListener' 메서드나 Jquery에서 사용하는 '.on' 메서드 같이 이벤트를 연결하여 사용하는 기능을 DOM Element의 속성안에서 사용할 수 있다. Vue.js의 이벤트 핸들링은 첫 문자가 'v-on' 디렉티브나 '@' 2가지만 사용해서 이벤트 핸들링을 한다. 딱 2가지만 기억하면 쉽게 핸들링을 할 수 있으니 기억하자! 메서드 이벤트 핸들링 메서드 이벤트 핸들링(Method Event Handling)은 컴포넌트의 Method 옵션에 정의되어 있는 메서드 이름을 지정하면 된다. /* testClick이라는 Function을 실행하는 방법. 둘다 동작은 같다. */ 클릭 클릭 위 예제는..

프로그래밍에서 항상 나오는 단골이 for문이 아닐까 싶다. Vue.js에서도 우리가 생각하는 for문을 사용할 수 있다. 하지만 우리가 생각하는 for문과는 조금 다르게 Vue.js에서 사용하는 「v-for」문은 Rendering을 하거나 DOM에서 데이터를 처리할 때도 사용한다. 간단하게 반복적인 DOM을 생성할 수 있어서 Vue.js에서는 꼭 사용되는 디렉티브 중에 하나다. 그리고 v-for를 사용할 때의 중요한 부분은 배열의 대한 유니크한 「key」값을 꼭 설정해 줘야 한다. v-for문의 종류 기본적인 v-for문 Index를 활용한 v-for문(배열) 객체와 Key, Index를 활용한 v-for문(객체만 사용) 리터럴에 직접 적용하는 v-for문 참고 1 : https://kr.vuejs.or..

본론부터 말하면 v-show와 v-if의 가장 큰 차이점은 v-if는 주석 v-show는 display:none으로 처리 된다는 게 가장 큰 차이점이다. v-show와 v-if의 차이는 구현 된 결과물의 따라 '개발자 도구'를 통해 DOM Node의 Element 변화를 확인 할 수 있다. 가끔 어떨때 v-show를 사용해야 하고 어떨때 v-if를 사용하여 분기처리를 해야하는 지 헷갈릴때가 간혹 있다. 그렇다면 둘 다 '안보이게' 처리를 하고 싶은건 맞지만 어떨때 적절한 처리를 하는 것이 좋을까?? (구글에 v-show와 v-if의 코드 정리의 대해 너무 자세하게 설명 되어 있는 것들이 많아 이번에는 예제 코드를 따로 작성하지는 않았다...) v-if(v-else-if, v-else) v-if는 우리가 ..

[TypeScript] 비동기 함수의 동기식 처리 Async/Await Async/Await란?? 자바스크립트 특성 상 '싱글 스레드'에서 실행되는 환경이다 보니 비동기 함수를 사용할 때 가장 고민이 되는 것이 아마 '응답 시간 만큼의 지연 시간이 존재하는 것'이 아닐까 싶다. 그 이유로 인해 원하는 작업을 하지 못하면서 난처한 경우가 많다. 단일 스레드로만 실행해야 페이지를 로딩할 때 보다 더 빠른 속도로 실행 할 수 있을 뿐만 아니라 브라우저의 인터프리터(Interpreter)가 단일 스레드기 때문이다. 지연시간/응답시간이 각자 다른 비동기 함수를 자바스크립트의 싱글 스레드 방식의 처리인 동기화 방식으로 사용을 해주는 Async/Await가 해결책이 될 것 같다. Async/Await는 ES2015에..