FrontEnd
-
[Vue] 튜토리얼1. Vue.js란 무엇일까요?FrontEnd/Vue 2021. 11. 25. 22:37
Vue 란? Vue는 사용자 인터페이스를 만들기 위한 Progressive Framework 입니다. Progressive Framework: Data 모델이 바뀌면 View(HTML)가 자동으로 업데이트 되는 Framework Vue는 요즘 떠오르고 있는 핫한 프론트엔드 프레임워크입니다. 하단의 사진을 보면 Vue.js의 사용량 척도는 해가 갈수록 증가하여 2020년엔 50퍼센트에 육박한 것을 볼 수 있습니다. Vue는 Angular의 특징인 양방향 바인딩, React의 특징인 Virtual DOM 렌더링 방식을 가지고 있습니다. 양방향 바인딩: Vue의 directive중 하나인 v-model을 말합니다. Data Model View 가 서로에게 데이터를 주고받고 영향을 미치는 구조입니다. Data ..
-
[javascript] javascript 개발자가 알아야 할 핵심 개념 33가지 - (2)FrontEnd/Javascript 2021. 7. 10. 15:17
본 내용은 https://github.com/leonardomso/33-js-concepts#11-javascript-engines 의 내용을 다루고 있습니다. 해당 레포는 현재 40k가 넘는 star를 가진 레포입니다. https://kevinkim95-dev.tistory.com/15 [javascript] javascript 개발자가 알아야 할 핵심 개념 33가지 - (1) 본 내용은 https://github.com/leonardomso/33-js-concepts#11-javascript-engines 의 내용을 다루고 있습니다. 해당 레포는 현재 40k가 넘는 star를 가진 레포입니다. 1. Call Stack Javascript를 실행하면, java.. kevinkim95-dev.tistor..
-
[javascript] javascript 개발자가 알아야 할 핵심 개념 33가지 - (1)FrontEnd/Javascript 2021. 7. 6. 03:01
본 내용은 https://github.com/leonardomso/33-js-concepts#11-javascript-engines 의 내용을 다루고 있습니다. 해당 레포는 현재 40k가 넘는 star를 가진 레포입니다. 1. Call Stack Javascript를 실행하면, javascript에 존재하는 함수들이 스택에 쌓이게 된다. 쌓인 함수들은 스택에서 pop하듯이 맨 위에서부터 실행이 완료되고 stack에서 빠져나가게 된다. call stack이 쌓이고 없어지는 모습 python과 같은 언어에서 재귀호출 시 1000번이 넘어가면 max recursion depth가 생기듯이, javascript의 call stack에 일정량 이상의 함수가 쌓이면 maximum call sctack size ex..
-
[react] 튜토리얼1. 프로젝트 생성 및 구조 확인하기FrontEnd/React 2021. 7. 3. 21:05
프로젝트 생성 먼저 npm에서 제공하는 react 프로젝트를 생성하는 명령어를 실행해야 한다. 해당 명령어는 최초 1회만 실행하면 그 후 실행할 필요는 없다. npm install -g create-react-app 다음은 프로젝트를 생성한다. 설치한 create-react-app 과 함께 본인이 생성할 프로젝트 이름을 함께 적는다. 연습용 프로젝트이기 때문에 임시로 self-practice라고 이름을 지었고, 저 자리에는 어떤 문자열이 와도 상관없다. create-react-app self-practice 시간이 좀 걸리는데, 기다리고나면 성공적으로 프로젝트가 생성되었을 것이다. 프로젝트의 디렉토리 구성은 우측과 같이 나오게 된다면 성공한 것이다. 생성이 완료되었다면, app 자체는 생성한 프로젝트 폴..
-
[Javascript] 튜토리얼 (1) - HTML 파일에서 Javascript 사용하기FrontEnd/Javascript 2021. 6. 17. 15:05
Javascript 사용법1 - Inline 으로 사용하기 In(안) + line(줄) : 한 줄 안에서 끝내기! HTML 파일의 태그 안에서 Javascript 함수를 attribute로 사용하는 것을 말한다. 이 예시의 설명을 위해서 alert 함수(메시지와 함께 알림 모달을 띄우는 것)를 이용하였다. 11번째 줄과 12번째 줄의 h1은 둘다 같은 h1이지만 밑의 h1은 onclick이벤트를 Inline으로 사용하였다. 따라서 같은 h1이지만 둘째 줄의 h1만 클릭했을 때 alert가 뜨게 된다. 장점 아주 단순하게 javascript 효과를 넣을 수 있다. 단점 태그 안이 복잡해진다. 같은 효과를 갖는 개체가 많아지면 일일히 추가해줘야하므로 복잡하다. 유지보수가 어렵다. Javascript 사용법2..