강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 드디어 4에 들어왔다(한참 남았지만^^;) render 의 return 안에서는 for문과 if를 사용하면 안좋다.(못쓰는 건 아니지만 지저분해지기 때문에 안티패터이될수있다) if문을 보통 삼항연산자로 쓰거나 논리연산자로 사용한다. jsx에서는 아무것도 없다가 null이다. render(){ return( { this.satate.result.length === 0 ? null : 조건 } { this.state.result.lengt !== 0 && 조건 } ); 리액트에서는 jsx의 가독성이 중요하기 때문에 함수로 뺄 수 있다. r..
강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 리액트에서 돔을 컨트롤할때 ref를 사용하여 접근한다. Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다. 리액트는 대체로 돔을 컨트롤 하지 않아야하는데, input에 focus하는 작업등을 위해서 사용할 수 있다. *바람직한 사용 사례는 포커스, 텍스트 선택영역, 미디어 재생을 관리, 애니메이션 직접적 실행, 서드파티 DOM 라이브러리를 React와 사용할때라고한다. jQuery에서는 아래와 같이 작업을 한다. var input = $('.is-input'); input.focus()..
React 기초 학습 4.파일 수정 후 자동으로 빌드되게하자! (Zerocho님 강의 학습 의식의 흐름대로 노트 정리)
강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 여기서 필요한건 react-hot-loader, webpack-dev-server 모듈이다. webpack-dev-server 모듈은 webpack.config.json을 읽어 빌드하고 서버로 유지해주는 역할이라고 한다. 로컬에서 서버를 돌릴 수 있다. react-hot-loader는 실시간으로 변경된 것을 확인할 수 있게 해준다. 모듈 install // cmd npm i -D react-hot-loader npm i -D webpack-dev-server 제로초님 강의에 서버가 공포감을 줄 수 있다고 한다. 나역시도 그랬던 것 같다..
vue.js 기초- 인스타그램 만들어보기 09_vueX (코딩애플 세미나 후기)
EventBus도 힘들다 하면 VueX를 사용합니다. props의 늪에서 벗어나기 위해 사용한다고 합니다만, 저는 큰 프로젝트는 한 적이 없어서 와닿지는 않았습니다. 하지만 실무에서 쓰려면 알아야겠죠.? vueX는 데이터를 저장하는 공간이고 vuex는 데이터를 state라고 부릅니다. 이 방식은 data를 .vue파일에 저장하지 않고 .js파일에서 관리하는 부분입니다. vueX는 4개의 기능을 알아야 합니다. state 데이터 저장공간 getters 저장한 데이터 가져오기 mutations 데이터 업데이트 actions mutations 실행하기 (ajax요청, mutations동작) vuex를 install해줍니다. npm install vuex 서버가 켜져있을때 npm install하면 오류날 때도 ..