본문 바로가기
반응형

패스트캠퍼스/수업내용정리29

React 두번째 수업 React의 큰 특징들 Facebook이 개발 단방향 바인딩 ( 부모에서 자식으로 이동) 가상 DOM JSX라고 하는 리액트만의 문법이 있다. return ( Counter Example Add {this.state.counter} Minus ); fragment로 감쌈으로써 엘리먼트요소를 하나 이상 쓸 수 있다. 만약 쓰지 않으면, 엘리먼트요소는 한개밖에 쓸 수 없음. return ( Counter Example ex ); 위처럼 쓰면 오류남. 화살표함수의 this는 상위스코프를 가르킨다. 는 특성을 이용해서 React에서는 화살표함수를 써준다. (만약, 화살표함수를 쓰지 않는다면 일일히 this를 바인드 해주어야함) *** Chrome의 개발자도구 Audits를 통해서 SPA의 성능을 볼 수 있고 어.. 2019. 7. 20.
2019-07-10 Angular routing & navigation 1. SPA와 SEO 그리고 Angular SEO : 검색엔진 최적화 검색로봇이 24시간 365일 전세계 사이트를 뒤지고 다님(수백,수천 대 일 수 있음 구글은) 상세 페이지별로 검색하면서 다님. 페이지의 HTML구조를 시맨틱하게 사용해야하는 이유가 태그의 이름을 보고 이 페이지가 뭐하는 페이지인지를 추측한다. SPA는 기본적으로 Ajax통신을 사용한다. Ajax 주소창이 변하지 않는 약점이 있다= 모든 페이지가 주소가 하나. -> 검색엔진이 이 페이지가 하나인지 여러개인지 알 수가 없다. -> 모든 페이지마다 고유한 url을 갖는 방법으로 해결 (Angular의 router기능을 활용한다면 해결가능하고 SEO를 일부충족 시킬 수 있다. 하지만, 완전충족을 하려면 서버가 페이지를 제공해줘야하며 SSR(서.. 2019. 7. 10.
2019-07-08 Angular NgModule 1. 모듈 SPA의 단점은 초기로딩속도가 느리다는 점이 있다. 초기로딩속도를 그래서 상승시키기 위해서는 루트모듈을 분할 하는 것과 lazy loading을 사용하는 것 Lazy loading : 초기로딩때 모듈을 다 부르는 것이 아니라 페이지에서 필요할때 모듈을 부르는 것 기능(Feature) 공유(share) 코어(core) 크게 위 3가지 모듈로 나뉜다. 기능은 관심사가 유사한 구성 요소로 구성한 모듈, 특정 화면을 구성하는 구성 요소 공유는 애플리케이션 전역에서 공유할 구성 요소들로 구성한 모듈로서 기능 모듈에 의해 임포트된다. 애플리케이션 전역에서 사용하는 컴포넌트, 디렉티브, 파이프 등 코어는 애플리케이션 전역에서 공통 사용할 구성 요소들로 구성한 모듈로서 루트 모듈에 등록하여 싱글턴으로 사용한.. 2019. 7. 8.
2019-07-03 Angular forms, template-driven forms, reactive forms 1. Angular forms HTML 표준 폼을 앵귤러에서는 2가지로 나뉜다. template-driven forms : 템플릿이 복잡해지는 단점이 존재, 간단한 form에서 유리 reactive forms : form이 여러개이다 싶으면 이 형태를 쓰는게 적절 Form이란? 사용자의 데이터를 입력받는 인터페이스 이다. 굉장히 친절하게 만들어져야하고, 사용하기 쉽게끔 만들어져야한다. 폼 데이터가 기대한 데이터 형식에 부합하는지 아닌지 체크가 필요한데 이것을 유효성 검증(form data validation) // Rest api를 사용하고 있네, path를 지정하고 있으므로 //반드시 타입이 submit이여야함. package.json default로 만드는 CLI npm init -y package... 2019. 7. 3.
반응형

티스토리툴바