본문 바로가기
728x90
반응형
SMALL

Languages

[Vue] Vue2 & Vue3 차이점
Languages/Vue 2022. 6. 20. [Vue] Vue2 & Vue3 차이점 0. Vue2 vs Vue3 Vue3가 공식적으로 출시되고도 여전히 Vue2를 많이 사용한다. 그러나 장기적으로 봤을 때 Vue2에서 Vue3로의 변경을 필연적이다. Vue3가 출시되면서 Vue2로부터 무엇이 바뀌었는지, 어떤 차이점이 있는지에 대해서 알아보자. 공식문서를 바탕으로 작성했으며 그중에서도 중요하다고 생각되는 것들만 정리했다. 전체 내용을 확인하고 싶다면 공식 문서를 확인하는 것을 추천한다. 1. Fragments fragments란 다중 루트 노드 컴포넌트를 의미한다. Vue2에서는 단일 루트 노드만을 지원했으며 이를 위해 사용자는 template마다 안에 div로 한번 더 감싸서 사용했어야 했다. ... ... ... 그러나 Vue3에서는 다중 루트 노드인 fragments를 지원한다. ..
[Vanilla JS] callback과 Promise
Languages/Vanilla JS 2022. 6. 19. [Vanilla JS] callback과 Promise 0. callback과 Promise callback과 Promise의 차이점에 대해서 살펴보고, Promise에 대해서 좀 더 구체적으로 알아보자. 1. callback 비동기 동시성 프로그래밍을 하는 방법 중 과거 많이 쓰이던 방법이 바로 callback이다. callback이란 비동기 통신이 되었을 때, 즉 요청 후 응답이 왔을 때 그 응답(결과)을 전달할 함수이다. plus라는 함수를 만든다. plus는 setTimeout을 통해 의도적으로 비동기적으로 응답하게 만들었다. plus에서 인자로 들어가는 callback은 응답이 왔을 때 (여기서는 의도적으로 1초 지연시키지만) a와 b를 더하여 반환한다. function plus(a, b, callback) { setTimeout(() => call..
[Vanilla JS] map, filter, reduce
Languages/Vanilla JS 2022. 6. 16. [Vanilla JS] map, filter, reduce 0. map, filter, reduce 함수형 프로그래밍 언어인 java script에서 map, filter, reduce는 자주 사용되는 함수들이다. 1. map map은 배열로부터 특정 정보만을 추출하여 새로운 배열로 반환한다. 다음과 같은 배열이 있다고 하자. const people = [ { name: "moz1e", age: "28" }, { name: "moz2e", age: "26" }, { name: "moz3e", age: "20" }, { name: "moz4e", age: "18" }, { name: "moz5e", age: "15" }, ] 위 배열에서 각 사람들의 이름을 추출하려고 할 때 반복문을 활용하면 다음과 같이 표현할 수 있다. let names = [] for (per..
[Vanilla JS] 순회와 이터러블
Languages/Vanilla JS 2022. 5. 17. [Vanilla JS] 순회와 이터러블 1. 리스트 순회 ES5의 리스트 순회는 리스트의 길이와 index를 통해 리스트를 순회한다. const list = [1,2,3,4,5] for(var i=0;i
[Vanilla JS] 함수형 자바스크립트의 기본
Languages/Vanilla JS 2022. 5. 17. [Vanilla JS] 함수형 자바스크립트의 기본 1. 평가와 일급 평가 평가란 코드가 계산되어 값을 만드는 것을 말한다. "1+2"와 같은 코드는 3으로 평가될 수 있으며 "[1,2]"와 같은 코드는 [1,2]로 평가될 수 있다. 일급 일급이란 값으로 다룰 수 있고, 변수에 담을 수 있는 것을 말한다. 일급이란 함수의 인자로 사용될 수 있고 함수의 결과로 사용할 수 있다. 2. 일급 함수 자바스크립트에서 함수는 일급이다. 즉 함수를 값으로 다룰 수 있다. 즉 함수를 변수에 담을 수 있다. 또한 생성된 함수는 값을 담아서 평가된다. const calA = A=> A+10 console.log(calA) //A=>A+10 console.log(calA(10)) //20 함수는 일급이므로 함수의 결과로 함수가 될 수도 있다. 즉 함수의 return이 함수가..
[Vue] Vue Router
Languages/Vue 2022. 5. 17. [Vue] Vue Router 0. Vue Router Vue Router란 Vue에서 라우팅 기능을 구현하도록 지원하는 공식 라이브러리이다. Vue Router는 Vue로 만든 페이지 간의 이동, 즉 라우팅을 가능하게 해준다. Vue Router의 공식 문서를 기반으로 Vue Router의 사용 방법을 정리해본다. 개인적으로 필요한 기능만 정리했기에 추가적으로 필요한 기능들은 Vue Router의 공식 문서를 확인하는 것을 권장한다. 추가로 여기서 정리하는 Vue Router는 3.x 버전이다. Vue Router 3.x가 Vue 2와 호환되기 때문에 Vue Router 3.x를 정리한다. 1. 동적 라우트 매칭 동일한 컴포넌트를 사용하지만 내용이 서로 다른 경우에 사용하다. 모든 사용자에 대해 동일한 UI를 제공하지만 사용자마다 ..
[React] 2-1. State
Languages/React 2022. 1. 8. [React] 2-1. State 0. State 현재 리액트를 통해 버튼을 클릭했을 때 클릭한 횟수만큼 화면에 출력하는 어플리케이션을 만들고 있다. 이를 위해선 당연히 클릭 횟수를 저장하는 공간이 필요하다. 좋지 않은 방법과 좋은 방법이 있다. 좋지 않은 방법부터 살펴보자. 1. Bad 클릭 횟수를 저장하는 변수 counter를 생성한다. React에서는 {}를 통해 변수를 그대로 html에 출력시킬 수 있다. 클릭 시 counter를 증가시키는 countUp 함수도 생성한다. 다음 버튼을 클릭할 때마다 countUp을 실행한다. 그러나 버튼을 아무리 클릭해도 숫자는 증가하지 않는다. 실제로 counter는 증가하고 있는데도 말이다. counter는 증가하지만 화면 새로고침을 하지 않기 때문에 초기화면 그대로 유지되는 것이다. 즉 버튼..
[React] 1. React 기본
Languages/React 2021. 12. 12. [React] 1. React 기본 1. Application with Js React를 본격적으로 공부하기에 앞서 Js와 비교를 통해 React의 강력함을 느껴보자. 먼저 아주 간단한 Js 어플리케이션을 만든다. 버튼을 클릭하면 몇번 클릭했는지 세는 어플이다. 코드는 다음과 같다. Total clicks : 0 Click me 버튼을 클릭하면 몇번 클릭했는지 세어주는 어플이다. UI도 매우 간단하다. 이 어플을 만들기 위해 했던 과정을 "굳이" 일렬로 표시해보자. html에 문자열과 버튼을 생성한다. js에서 클릭 횟수를 세기 위해 counter 변수를 생성한다. button객체를 getElementById를 통해 가져온다. 버튼 클릭 이벤트를 받는다. 클릭 이벤트마다 수행하기 위한 함수를 만든다. span을 querySelector를 ..
728x90
반응형
SMALL

티스토리툴바