Programming-[Frontend] (62) 썸네일형 리스트형 Typescript / 기초 / 설치, 세팅 및 기본 문법 1. Typescript를 사용하는 이유 자바스크립트는 자유도가 높은 대신, 형식이 정해져 있지 않기 때문에 버그가 발생한다거나 팀원간에 코드를 통한 의사소통에 어려움이 생긴다는 단점이 있다. 타입스크립트는 변수와 데이터의 종류를 명확히 지정해주기 때문에 이런 단점들이 보완될 수 있다. 타입스크립트를 통해 작성된 코드는 자바스크립트 코드로 컴파일링 되고, 해당 자바스크립트 코드가 브라우저나 node.js 등의 런타임에서 구동되게 된다. 따라서 타입스크립트는 프로그래밍 언어이자 컴파일러 역할도 한다고 할 수 있다. : Node.js가 Typescript를 이해하지 못하기 때문에 일반적인 Javascript 코드로 컴파일 하는 작업을 해준다. 2. 초기 세팅 설치 타입스크립트를 글로벌로 설치한다. npm i.. Vue.js / 기초 / 5. 인스턴스, 컴포넌트 1. 인스턴스 여러 개의 인스턴스 생성하기 new Vue 명령어를 통해서 Vue를 생성하고, el 객체에서 적용되는 id값만 바꿔서 적용해주면 된다. id=app 과 id=app2인 요소를 2개 만들고, 같은 인스턴스를 만들고 같은 메서드를 적용하되, el객체의 값을 바꿔주었다.(instance.html 파일) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 {{name}} change {{name}} change new Vue({ el: '#app', data: { name: 'charlie' }, methods: { changeName() { this.name = this.name +.. Vue.js / 기초 / 4. 클래스와 스타일 바인딩, v-if와 v-show, v-for 1. 클래스 바인딩 클래스 바인딩은 어떤 요소의 class 이름을 단순 문자열값으로 지정하는 것이 아니라, data 객체 내부의 변수값으로 지정하는 것을 의미한다. 이렇게 함으로써 data 객체의 변수값이 변하면 자동으로 class 이름이 변하도록 만들 수 있다. 이것은 객체 구문, 배열 구문 또는 삼항연산자를 통해 지정할 수 있다. 객체구문 적용 객체 구문으로 적용하는 방법을 통해 클래스 바인딩을 익혀보자.(class-binding.html 파일) class를 객체형태로 지정 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 .red { color : red; } .font-size { font-s.. Vue.js / 기초 / 3. 데이터 양방향 바인딩(v-model), computed, watch 속성 1. 데이터 양방향 바인딩을 통한 텍스트 미리보기 만들기(v-model) input 입력창에 입력하는 텍스트 정보를 미리 볼 수 있는 요소를 만들어본다. v-model.html 파일로 만들어보자. 비슷하지만 코드를 여러 번 쳐보면서 익숙해지자! 태그에 cdn 코드 넣는 것 까먹지 말고... @keyup으로 바인딩 html에는 input 박스와 {{write}} data를 만들어 놓는다. 그리고 input창에 어떤 입력이 오면 추적을 하도록 @keyup 이벤트를 걸어놓는다(@ 는 v-on:의 단축어로 사용되니 기억하자!). 굳이 @keyup 이벤트에 textModifier라는 함수를 textModifier(event)와 같이 실행문에 파라미터를 넣는 방식으로 작성하지 않더라도, keyup 이벤트에서 알아서.. Vue.js / 기초 / 2. Vue 인스턴스 만들기 : 변수, 함수, 바인딩, 이벤트 딱 핵심만 짚고 넘어가자. 그리고 실제로 코딩하고 실행해보자. 처음에는 몸과 머리에 안 익숙하겠지만, 그냥 쭉쭉 넘어가다보면, 오래하다보면 익숙해진다. 1. 기본 구조 및 data 객체 기본구조 및 데이터 바인딩 이해하기 상세한 구조에 대해서는 나중에 알아보는 편이 좋다. 처음에는 src 폴더 내에 index.html 파일에 들어가서 모든 내용을 지우고, html 파일을 다시 만들자. 빈 화면에 !만 입력하고, [Tab]키를 누르면 html 기본구조가 생성되는 것을 확인할 수 있다(안되면 직접 쓰든, 구글링을 하든 방법을 찾아보자). CDN을 통해 빠르게 vue 파일 만들어보기 태그의 가장 아랫부분에 Vue.js의 공식사이트에서 제공하는 CDN 방식의 script 코드를 넣으면 vue를 이용할 수 있게 .. [링크] 자바스크립트 파일 로딩 원리, 주의점 요약 HTML에서 DOM 구조를 파싱하고 있는데 script 파일들이 loading 되면 DOM 구조 파싱 이후 사용자에게 UI들이 표시되지 못한다. 다시말해 DOM 구조 파싱과 script는 동기적으로만 일어난다. 따라서 보통은 태그의 맨 마지막에 script 파일을 넣어준다. HTML의 DOM 구조 생성과 script 파일 다운로드를 비동기적으로 처리하기 위해 async, defer를 사용하며 async는 다운로드가 완료되는대로 실행되고 script 태그간 순서가 지켜지지 않는다. defer의 경우 순서대로 다운로드 되며, HTML DOM 구조가 완전히 파싱되고 나서야 실행된다. 링크 1) 웹클럽 - 브라우저의 역할과 스크립트의 로드 시점 브라우저의 역할과 스크립트의 로드 시점 브라우저는 어떻게 동작.. [요약] v8 엔진, 자바스크립트의 작동원리 정리- V8은 구글에서 주도적으로 개발한, 자바스크립트 파일을 기계어로 변환해주는 엔진이다. 크롬과 NodeJs에서 사용하고 있으며 Mircrosoft Edge도 V8을 이용하겠다고 선언한 바 있다. - C++로 작성되어 있다. 자바스크립트 코드를 받으면, parser와 AST를 거쳐 tree 구조로 코드가 해석되고, 이것이 ignition이라는 interpreter에 의해서 Bytecode로 변환되어 실행된다. -interpreter 방식은 최적화되지 않았으므로, bytecode로 실행되는 동안 TurboFan이라는 compiler를 통해서 컴파일을 하고 최적화된 기계어로 다시 실행한다. 즉, 반복될수록 코드 실행 속도가 빨라진다. :컴파일러는 코드 전체를 읽고 변환하여 실행시키고, 인터프리터는 코드를.. React / Router Router의 필요성 각 URL 주소마다 서버와 통신하여 데이터를 내려다주는게 아니라, Single Page Application(SPA) 형태로 작성된 웹페이지를 서버에서 브라우저로 한번에 내려받고, 사용자의 요청에 따라 URL이 브라우저에서만 바뀌게 해서 서버와의 통신 횟수와 양을 줄여준다. React router : Quick Start 따라하기 설치 create-react-app으로 react 폴더를 만들고, 해당 디렉토리에서 npm install react-router-dom 을 입력하여 라우터 라이브러리를 설치한다. (앱을 위한 react-native 에서는 react-router-native를 이용한다.) 파일구조 App.js 파일의 구조이다. react-router-dom에서 Browser.. 이전 1 2 3 4 5 ··· 8 다음
