hubring

Props와 State Props 사용하는 방법 부모 컴포넌트가 자식 컴포넌트에 값을 전달하기 위해 사용. 읽기전용으로 사용 (중요*) 예제) 자식 컴포넌트( 부모로부터 name을 받아 보여줌 ) class MyName extends Component { render() { return ( 안녕하세요! 제 이름은 {this.props.name} 입니다. ); } } 부모 컴포넌트 (자식 컴포넌트에 name 전달) class App extends Component { render() { return ( ); } } 기본값 props 사용하기 (defaultProps) 부모에서 name을 전달을 생략해도 '기본이름'이 나타나게 됨 class MyName extends Component { static def..

Front End 라이브러리란? 웹 돔 관리와 상태값 업데이트 관리를 최소한으로 하고 오직 기능기반 사용자 인터페이스에 집중할 수 있도록 그동안 많은 front end 라이브러리나 프레임워크가 만들어졌다. (react, angular, vue 등..) 3대장 프레임워크 소개 Angular 다양한 기능들이 내장되어 있음. ex ) http client, router, 다국어지원 공식 라이브러리도 지원, 현재는 많은 기업들이 사용하고 있음. Angular2부터 Typesciprt를 표준으로 사용하고 있음 React Component에 집중된 프레임워크가 아닌 라이브러리임. 페이스북에서 나옴, 앵귤러와 달리 View만 신경씀. 다양한 써드파티 라이브러리들이 있음. (공식 라이브러리 없음.) 사용하는 기업이 많..

Vuex Vue.js 애플리케이션에 대한 상태 관리(state management)를 돕는 라이브러리이다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다. Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅 샷과 같은 고급 기능을 제공한다. 상태 관리란? 상태(state)란 뷰 data 속성과 비슷하다. ex) 간단한 Vue 카운터 앱 new Vue({ // 상태 data () { return { count: 0 } }, // 뷰 template: ` {{ count }} `, // 액션 methods: { increment () { this.count++ } } }) 상태 : 앱의 상태를 ..

해당 내용은 Doit! Vue.js 입문 내용을 참고하여 정리하였습니다. Vue 인스턴스 라이프 사이클 라이프 사이클 단계 설명 1. 인스턴스 생성 (Created) BeforeCreate : data, methods 속성이 아직 정의되지 않음, 화면 요소에도 접근 불가 Create : data, methods속정이 정의되어 data,methods 속성에 정의된 값에 접근 가능, 화면 요소 접근 불가 -> 서버에서 데이터를 요청하여 받아오는 로직 수행하기 적절 2. 생성된 인스턴스 화면에 부착 (Mounted) BeforeMount : 지정한 화면 요소에 인스턴스를 부착하기 전에 호출, render() 함수가 호출되기 직전의 로직을 추가 Mounted : 인스턴스 부착 후 호출, template 속성에 ..

1. 아톰 설치 https://atom.io/ A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it. atom.io 2. 아톰 테마 설정 seti-ui 테마 : 직관적 파일 아이콘을 가져 파일 구분이 쉬움, 색조합이 튀지 않음 Window : File -> Settings Mac : Atom -> Preferences insta..

뷰 크롬 플로그인을 이용하면 뷰 개발에 도움을 줌. 뷰로 만든 웹의 구조를 분석하거나 디버깅 가능. 크롬 플로그인 설치 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd Vue.js devtools Chrome and Firefox DevTools extension for debugging Vue.js applications. chrome.google.com github https://github.com/vuejs/vue-devtools vuejs/vue-devtools ⚙️ Browser devtools extension for debugging Vue.js applications. - vue..

http://jeonghwan-kim.github.io/2018/01/25/before-jquery.html jQuery 보다 먼저 알았으면 좋았을 것들 웹개발할 때 난 jquery 부터 사용하기 시작한것 같다. 라이브러리가 주는 편리함 넘어 어떻게 DOM API를 사용하는지는 몰랐다. 앵귤러, 리엑트 같은 프레임웍을 사용할 때도 마찬가지다. 기능을 구현하는데 별다는 어려움은 없었다. jeonghwan-kim.github.io 인프런 강의 듣다가 강사님이 작성하신 좋은 글이 있어 공유합니다.~ 자꾸만 완성만 생각하고 기초를 탄탄하게 쌓지 못하여 불안정한 코드를 만들어 냈었는데 이 글을 보고 다시금 반성의 시간을 가졌습니다..

1. Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node.js란 서버 사이드 자바스크립트로, 서버 측에서 실행되는 자바스크립트 실행 환경 2. 설치 확인 > node --version 3. Editor 개발툴 VScode 설치 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is fre..