웹 프론트72 Vue.js [강좌 3-1강정리] 웹펙의 사용이유 인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# 웹펙의 사용이유 웹펙 관리의 어려움보다 스크립트 관리의 어려움이 커질때 웹펙이 필요하다. 웹펙을 사용하려면 노드를 사용해야하는데, node 홈페이지에서 LTS node버전을 받는 것을 추천한다. 노드를 설치하면 npm을 사용할 수 있는데, 이는 남이 작성한 자바스크립트 라이브러리를 사용할 수 있도록 도와준다. npm init을 하면 package.json파일이 생기는데 이는 내가 사용한 남의 자바스크립.. 2020. 2. 4. Vue.js - 전역 component / template / vue data / props / [강좌 2강정리] 인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# (2-1강) Vue 컴포넌트의 사용 이유 컴포넌트 사용은 데이터가 중복되는 것을 피하고 동일한 내용을 반복하고자 할때 사용한다. 컴포넌트를 사용하지 않게 되면, 코드가 지저분하고 중복이 되게 된다. 반복되는 부분을 Component로 만든다. Vue 컴포넌트는 다음과 같이 작성한다. (파스칼 케이스나 케밥케이스를 사용) Vue.component(‘word-replay’); Vue 에서 알아두면 좋은 변.. 2019. 12. 17. Vue.js - v-if v-else 디렉티브 / 보간법 / v-model / ref [강좌 1강정리] 인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# 1-1강 ( cdn으로 Vue 사용해보기) Data를 바꾸면 알아서 뷰 화면이 바뀐다. 화면과 데이터를 일치시키는 것이 중요하다. 데이터만 관리한다. => 생각하는 방식을 데이터중심으로 바꾸는 것이 중요하다. 즉 데이터를 바꾸면 View가 바뀐다. 해당 cdn으로 vue.js를 이용할 수 있다. 1-2강 (data와 v-if, v-else) onclick => v.on:click 뷰에서 통제하는 메서드.. 2019. 12. 3. Redux - redux-thunk란? [리덕스 미들웨어] redux-thunk 란? 리덕스를 사용하는 어플리케이션에서 비동기 작업을 사용할때 가장 기본적인 방법으로는 redux-thunk를 사용하는 것입니다. 해당 미들웨어는 리덕스를 개발한 Dan Abramov가 만든 것으로 redux 공식 메뉴얼에서도 해당 미들웨어를 이용하여 비동기 작업을 다룹니다. 해당 방법은 매우 직관적이고 간단하다는 장점이 있습니다. 그렇다면 thunk 란? thunk란 특정 작업을 나중에 하도록 미루기 위해서 함수형태로 감싼 것을 칭합니다. 예를들어서 1 + 1을 한다고 가정했을때 아래와 같이 코드를 작성하게 됩니다. 다음과 같이하면 어떨까요? 이렇게 하면 1 + 2 연산이 코드가 실행될 때 바로 이뤄지지 않고 나중에 foo() 가 호출되어야만 이뤄집니다. redux-thunk는 무.. 2018. 11. 26. React - defaultProps 사용해보기 리엑트에서 상태값 저장하기 리엑트에서는 상태값을 저장하는 2가지의 종류가 있습니다. State : 컴포넌트 내부에서 선언되는 값입니다. 내부에서 값을 변경할 수 있습니다. Props : 부모가 자식에게 주는 값입니다. 자식컴포넌트에서는 Props를 받아오기만 하고 직접 수정할 수 없습니다. defaultProps를 통한 예외처리 실제로 코딩을 하다보면 가끔 실수로 props를 빼먹을 때가 있습니다. 또는 특정 상황에 props를 일부로 비워야 할 때도 있는데요. 이러한 경우에 props의 기본 값을 설정해 줄수 있는데 그것이 바로 defaultProps입니다. 위의 예제는 MyName이라는 컴포넌트를 부모 컴포넌트인 App에서 렌더링 하고 있는 예제입니다. name이라는 값을 props로 넘겨주고 있는것.. 2018. 11. 21. React - JSX를 사용할때 몇가지 주의사항 정말 기초적인 내용이지만 처음에 조금 헤멜 수 있는 주의사항입니다. JSX 태그 내부에 변수를 넣는 방법 {value} 의 형태로 사용합니다. ex) const msg = {item} - {value}원 JSX 태그의 속성 값에 변수를 넣는 방법 (x) JSX를 작성할 때의 주의사항 return에서 오류 발생하는 구문, => 자바스크립트 내부에 html을 작성해야 하기 때문에 발생합니다. return 이또한 지나가리라 ==> (x) return ( 이또한 지나가리라 ==> (o) ) 2018. 11. 12. React - virtual DOM의 개념 React를 위한 DOM개념 DOM이란 (Document Object Model)의 약자로 객체를 통해 구조화된 문서를 표현하는 방법입니다. DOM은 트리형태로 되어 있어서 특정 node를 찾을 수도 있고 수정하거나 제거 할 수 있습니다. DOM은 동적인 UI에 최적화가 되어 있지 않기 때문에 JQuery를 사용하여 동적인 효과를 줄 수 있습니다. 하지만 큰 규모의 웹 어플리케이션(ex) 트위터,페이스북) 에서는 스크롤을 내리다 보면 정말 수많은 데이터가 로딩이 되고 각 데이터를 표현하는 요소도 많아지게 됩니다. 이와같은 요소의 갯수가 몇백개 몇천개 단위로 많아진 상태에서 DOM에 직접 접근하여 변화를 주다보면 성능상 이슈가 발생하게 됩니다. 이는 DOM자체가 javascript엔진에 비해 느려서 그런 .. 2018. 10. 28. text-indent 속성 CSS text-indent text-indent 속성을 들여쓰기 효과를 지정합니다. 즉 문단의 첫번째 줄을 지정한 길이만큼 들여쓰기 한다고 생각하시면 됩니다. 2018. 10. 1. PWA란? PWA의 특징 PWA란? 구글 크롬 엔지니어 알렉스 러셀이 2015년에 고안한 개념입니다. 궁극적으로 앱 수준과 같은 사용자 경험을 웹에서 제공하는 것이 목적입니다. Progressive Web App은 웹의 장점과 웹의 장점을 결합한 환경입니다. PWA의 특징 이것은 사용자가 브라우저 탭을 맨 처음 방문할 때부터 유용하고, 설치가 필요 없다는 장점이 있습니다. 시간의 흐름에 따라 사용자가 앱과의 관계를 점진적으로 쌓아갈수록 성능이 더욱 강력해질 것입니다. 이 웹앱은 느린 네트워크에서도 빠르게 로드되고, 관련된 푸시 알림을 전송하며, 홈 화면에 아이콘이 있고, 최상위의 전체 화면 환경으로 로드됩니다. 즉 PWA는 확장성이 좋고 깊이 있는 앱같은 웹을 만드는 것을 지향합니다. 모바일을 중심으로 하는 인터넷 서비스는 크게.. 2018. 9. 28. React의 개념, 역사 간단한 정리 React의 역사? React는 facebook의 소프트웨어 엔지니어 Jordan Walke에 의해 만들어 졌습니다. React는 Facebook, AirBnb, Dropbox, Twitter, Evernote Uber등 수많은 사용자들이 사용하는 Facebook이 만는 자바스크립트 라이브러리 입니다. React는 PHP의 Html컴포넌트 프레임워크인 XHP의 영향을 받았고 2011년 페이스북에 처음으로 개시하였고 2012년에 인스타그램에 배치 이후 2013년 5월 미국 JSConf에서 오픈소스로 제작 되었습니다. 2017년 4월 18일에 페이스북은 사용자 인터페이스를 위한 React 프레임워크 라이브러리 알고리즘인 React Fiber을 발표하였고 계속 발전중입니다. React 간단한 정리 react는.. 2018. 9. 16. 이전 1 2 3 4 5 6 7 8 다음
