2020/02(18)
-
React 기본 강좌 정리 - 1~2
다음 강의 내용을 기반으로 정리하고 있습니다. 강의 동영상 강의 깃허브 JSX JSX 가 없는 경우 원래는 아래와 같이 써야한다. 바벨은 자바스크립트의 최신 문법과 JSX 를 사용할 수 있게 도와주는 도구다. const reactElement = React.createElement; render() { reactElement(...); } 태그안에 함수를 직접 입력할 경우 함수가 매번 생기게된다. 가능한 JSX 안의 함수는 클래스안의 메소드로 분리하는 것이 좋다. 프래그먼트 JSX 에서의 렌더의 최상위 컴포넌트는 반드시 하나만 존재해야한다. 일반적으로 ~~ 로 감싸지게 되는데 불필요한 div 태그가 HTML 에 생기므로 불필요한 div 를 원치 않는다면 아래와 같이 빈 태그() 나 프래그먼트() 를사용할..
2020.02.11 -
Mobx
강의 링크 Mobx 데코레이터 @observable 클래스의 프로퍼티에만 달 수 있다. @observer 클래스에 달아서 처리 React의 라이프 사이클이 아니라 Mobx의 라이프 사이클을 타게된다. componentWillReact componentWillUpdate componentDidUpdate @computed observer 와 같은 느낌 getter에만 붙일 수 있다. 관찰하고 있는 값이 ~할 때만 렌더링을 해라. 와 같은 로직을 추가할 수 있다. 내부적으로 최적화를 할 수 있게 도와준다. @action Mobx의 state 를 변경하는 메소드를 action 이라고한다. Store 안에 private 변수가 있을 때에 바깥에서 state 를 변경하려 해도 action 데코레이터를 달아줘야한다..
2020.02.09 -
파이어스토어 + 리액트
파이어 스토어 파이어 스토어에 아이디 지정해서 도큐먼트 생성 firestore.collection(“TODO”).doc(”myCustomId”).set({ … }); 아이디 자동 생성해서 도큐먼트 생성 firestore.collection(“TODO”).add({ … }); 파이어 스토어에서 문서가 없는 콜렉션은 삭제가된다. 파이어 스토어는 기본적으로 아이디에 의해 정렬된다. 배포 리액트를 이용해서 SPA 로 빌드하고 이를 파이어베이스로 배포하기 npm build npm install -g firebase-tools firebase login firebase init React 의 빌드 결과로 SPA 파일이 build 폴더 밑에 생긴다. 따라서 firebase cli 로 배포하려는 폴더를 지정할 때 bu..
2020.02.09 -
자바스크립트 기초
Form에서 데이터를 전달하면 기본적으로 페이지가 리로딩된다. 클래스안의 메소드는 일반적으로 바인딩을 해줘야 가능하지만 아래와 같이 사용하면 자동 바인딩을 해준다.deleteHandler() { // 바인딩이 필요하다. ... }deleteHandler = () => { // 바인딩할 필요가 없다. ... }
2020.02.09 -
Persist vs Merge
Persist : create Merge : update JPA 에서 Save 는 경우에 따라 persist 또는 merge 를 호출하기도한다. Detached 객체를 save 할 경우 Save 시 merge (= update)를 하게된다. merge 의 결과로 update 쿼리가 발생한다. MyClass myClassB = myRepository.save(myClassA); myClassA 와 myClassB는 다른 객체이다. myClassA = myRepository.save(myClassA); 습관적으로 JPA save 한 객체는 반환된 객체를 사용하는 것이 좋다. Detached 객체 = 즉 한번이라도 영속화가 됬었을 법한 객체를 save 할 경우 = Id 가 있는 객체를 save 할 경우 htt..
2020.02.04 -
React + Typescript (0)
(강의 링크)[https://www.youtube.com/watch?v=PFBRhxjIBUM&list=PLV6pYUAZ-ZoHx0OjUduzaFSZ4_cUqXLm0] Webpack2 Babel : ES6 + JSX 로딩 Ts : Babel loader 대신 타입스크립트에서 쓰는 로더 Es lint : 자바스크립트 컨벤션 체크 Ts lint : 타입스크립트 컨벤션 체크 JSX : 태그 기반의 컴포넌트를 그리는 문법 컴포넌트 React 컴포넌트 React.Component Render를 다시 하게 해주는 데이터들 Props 외부에서 주입해주는 데이터 컴포넌트 내부에서 자신의 props 변경 할 수 없다. 컴포넌트 외부에서 주입하는 props가 변경되면 render가 다시 호출된다. State 컴포넌트 안의 ..
2020.02.02