Angular.js (29) 썸네일형 리스트형 TDD라이브러리 세가지 JEST - www.daleseo.com/jest-basic/ Jest는 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자들로 부터 좋은 반응을 얻고 있는 테스팅 라이브러리입니다. 출시 초기에는 프론트앤드에서 주로 쓰였지만 최근에는 백앤드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있습니다. Jest로 기본적인 테스트 작성하기 Engineering Blog by Dale Seo www.daleseo.com EnZyme - 컴포넌트 테스트용 라이브러리 medium.com/@sangboaklee/react-%ED%85%8C%EC%8A%A4%ED%8C%85-%EC%BD%94%EB%93%9C-%EC%9E%91%EC%84%B1%ED%95%98%EA%B8%B0-1c3719cee5af 테스트 방법 ( jest + Enzyme) describe ('테스트이름' , {} =>{ let wrapper; //테스트가 수행될떄마다 렌더링을 해주는것이 좋은 테스트이기때문에 BeforeEach()를 만듬 //컴포넌트를 불러온다. (mount함수와 shallow함수를 씀) beforeEach( ()=>{ wrapper = shallow ( ) }) //테스트1 if(' TextInput버튼 있어?? ' () => { expect(wrapper.find ('TextInput')). toHaveLength(1); }) //테스트2 if(' Button 버튼 있어? ' () =>{ expect(wrapper.find( 'Button')).toHaveLength(1); }) }) describe ('버튼의 활성화' , {} =>{ props = {.. 비동기 처리 동기처리 ; 순차적으로 일을 처리한다. (코드가 위에서 부터 아래로 진행된다.) 비동기 처리 : 병렬적으로 일을 처리한다. 웹개발 등을 할때 자주 사용하게 되는 ajax 같은 http 통신들은 비동기적으로 작동하게 되어있는데, 이를 동기적으로 처리해야할때가 있다. 예를들어 다음과 같은 로직일때는 동기적 작동이 필수이다. 1. 유저데이터들을 get한다. 2. 특정유저의 아이디로 유저정보를 get한다. 3. 해당 유저의 이메일로 작성된 게시글을 get한다. 위의 로직이 비동기로 처리된다면 3번이 먼저실행될수도있다. 그럴떈, 유저의 email이 undefined 뜨겟지? 그래서 비동기처리가 나온것이다. 이를 처리하는 방법은 기본적으로 CallBack 함수이다. [1] Callback 함수 (비동기함수를 동기적.. Angular.js Routing Parameter전달 다음과 같이 라우팅 Path 를 설정해주고. --- app-routing.module.ts --------- import { AaaComponent } from ' ./ aaa.component ' const routes: Routes= [ { path : 'aaa/:param', component: AaaComonent' } , ] ----------------------------------- 라우팅 시킬 네비게이션메뉴 등에서 다음과 같은 (click) 함수를 쓸것이다. --- nav.component.ts -------------- gotoAaaComp() { this.router.navigate([`/aaa/${this.data}`]); } -------------------------------.. Visual Studio Code 에서 Tab키가 정상작동 하지 않을경우 Ctrl + M 보통의 Tab 키 기능은 들여쓰기가 된다거나. 터미널에서의 자동완성 등이 되어야 한다. 하지만 어느순간부터 Tab키를 누르면 Visual Studio Code 창들을 순회하며 활성화시키는 역할을 하게 되었다. 다음을 이용해서 Tab키의 기능을 변환시키면 된다. Ctrl + 'M' 한번 눌러보시라! Tab키의 기능이 정상작동 할 것이다. Angular http 통신 등의 결과를 subscribe로 받아올때 에러가 return된다면? ======auth.service.ts============== saveOrUpdateUser(access_tokenn: string): Observable { let httpOptions = { headers: new HttpHeaders({ Accept: 'application/json', 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*', }), }; return this.http.get(this.getUrl('saveOrUpdateUser'), httpOptions); } =============================== ======login.component.ts============== saveOrUpdateU.. OAuth2 로그인 scope 여러개 지정하기 복수 아래에 보면 access token을 받아오기 위해 꼭 지정해야하는 네가지가 있다. response_type, client_id, redirect_uri, scope 여기서scope란 인증받은 사용자에게 구글에서 제공해주는 사용자의 정보 범위인데 나는 profile,email둘다를 가져와보고 싶었다. 배열등을 사용해봐도 안되었는데 해결책은 단지, uri두개를 같은 작은따옴표 ' ' 에 띄어쓰기로 구분해서 한번에 적어주면 되던것이었다. 요렇게 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email ', 화이팅 this.queryStr = stringify({ response_type: 't.. 구글 OAuth2로그인 간단한 절차 더보기 전체 코드 const CLIENT_ID = '~~~~~~~~~~~~~~~~~~~~~~~~~~~9s.apps.googleusercontent.com'; const AUTHORIZE_URI = 'https://accounts.google.com/o/oauth2/v2/auth'; @Component({ selector: 'app-nav', templateUrl: './nav.component.html', styleUrls: ['./nav.component.css'], }) export class NavComponent implements OnInit { loggedin: boolean = false; queryStr; loginUrl; initQueryStr() { this.queryStr = stri.. 이전 1 2 3 4 다음
