ionic과 angular 모두에서 뷰 초기화를 해줘야 하나요?

Question

안녕하세요 프론트 개발 중인데 Http 요청으로 데이터를 받은 후에 뷰를 렌더링해야 하는데 ionic 을 통한 뷰 초기화 시점(ionViewDidEnter) angular을 통한 뷰 초기화 시점(ngAfterViewInit) 에서 두 번 http요청을 호출해야 제대로 렌더링이 됩니다. 원래 이렇게 해야하나요? 같은 데이터를 로딩해야 하는데 http요청을 두 번 보낸다는게 좀 이해가 가지 않습니다.(한 쪽에서만 요청하면 제대로 렌더링이 안되네요ㅠㅠ)

WebStorm · Answer

앵귤러는 기본적으로 뷰에 출력되는 변수값이 바뀌면 Change Detector가 변경 감지하고 화면에 자동으로 반영하기 때문에 꼭 ionViewDidEnter 나 ngAfterViewInit에서 http를 호출 할 필요가 없습니다. 원인을 다른부분에서 찾아보셔야 할것 같네요.

kimmminjun · Answer

음 생명주기 초기화를 안하면 값이 제대로 바인딩이 안 되고 끝나버려요..setTimeout으로 0.5초정도 딜레이를 주면 화면에 값이 바인딩되는데..ㅠㅠ 저도 이해가 잘 가지 않네요ㅠhttp Request가 끝날 때까지 기다리는 함수를 제약조건으로 걸어도 요청이 끝날 때 까지 기다리지 않네요ㅠㅠ

WebStorm · Answer

ionViewDidEnter 는 잘 모르겠지만 ngAfterViewInit은 각 생명주기 시점에 발생하는 이벤트일 뿐 생명주기를 직접 발생 시키는 기능은 아닙니다. 타임아웃을 줬을때 된다는것은 비동기인 http 연결이 동기식으로 반영된걸로 보이는데요. 소스를 알수없어서 모르겠지만 다른 방법으론 http 결과 구독 시점에 ngZone.run() 이나 ngZone.tick 을 사용해보셔도 좋을것같고. ChangeDetectorRef 의 .detectChange() 를 호출 해보는것도 좋을듯 합니다. 손해볼건 없으니 한번 시도 해보세요.

kimmminjun · Answer

감사합니다!! 저도 좀 이상해서 찜찜했는데..코드는 이렇습니다. ngAfterViewInit(){ // let result &#61; this.testAsync(); console.log('main 처음 진입 시 리스트 요소 불러오기'); } /* 명확한 이유는 모르겠지만 ionic 렌더링 완료 & angular 렌더링 완료 생성주기 둘 다에 걸어줘야 걸린다 */ async testAsync() { console.log('tst async!!',this.selectedCode, this.selectedType); // loadShamkList 호출 시 // httpService.service 쪽에 진입하지 않고 // 바로 리턴하는 경우 방지 위해서 했는데 // 의미가 있나? // 아니면 지우자. if(this.selectedCode && this.selectedType) { // 메뉴 클릭해서 넘어 온 경우 // console.log('카테고리에서!!'); return await (this.loadShamkList(this.selectedType, this.selectedCode )); } else { //메인에서 넘어온 경우 console.log('메인에서!!'); return await (this.loadShamkList(this.selectedType)); } }

kimmminjun · Answer

loadShamkList함수는 이렇습니다. loadShamkList(type, categoryCd?, infiniteScroll?) { console.log(&#34;order페이지에서 넘어온 파라미터:&#34; &#43; this.navParams.get('registerOk')); //스크롤 로딩이 아닐경우에는 무조건 초기회 if (!infiniteScroll) { this.selectedType &#61; type; this.selectedCode &#61; categoryCd; let data &#61; JSON.stringify({type: this.selectedType, categoryCd: this.selectedCode}); console.log(&#34;호출 데이터:&#34;, data); this.httpService.service('/api/v1/shamk/list/' &#43; this.page, {type: 'POST', data: data}, true) .then((result: any) &#61;> { // http Service 요청 끝난다음 수행하는 부분. console.log('shamk list http test'); if (this.selectedType &#61;&#61; 'U') { $('page-used-main .scroll-content').css('margin-top', 170); } else { $('page-used-main .scroll-content').css('margin-top', 100); } /* 엑박 이미지 처리 */ imgErrorDealFunc(); }); this.afterPurchase &#61; false; console.log('shamk list222'); }

WebStorm · Answer

ngAfterViewInit() 함수 안에서 async await 처리된 함수를 실행했다고 하더라도 라이프 사이클 자체가 지연되지는 않습니다. 음.. 예를들자면 ngAfterViewInit() 함수가 발생하고 ngAfterViewChecked() 이벤트가 발생하는데 testAsync() 가 다 실행될때까지 기다렸다가 ngAfterViewChecked() 가 발생하는건 아니라는거죠. testAsync가 아닌 loadShamkList 함수를 동기 처리 해보시죠.

kimmminjun · Answer

처음에 loadShamkList를 동기 처리 했는데 도 안 되서 저렇게 바꿨는데..제가 동기처리를 뭔가를 잘못한거고 생명주기 문제로 생각하고 있는건 뭔가 잘못 생각하고있는거겠죠?

WebStorm · Answer

아~~~~ 자세히 안봤었네요. ㅎㅎ 동기 함수 내에서 변수값을 바꾸는게 목적이 아니었군요. jQuery로 돔을 직접 조작하려는 거였네요.ㅎㅎ 변수가 바뀐게 아니기 때문에 앵귤러의 변경 감지기가 작동하지도 않았겠네요. jQuery 돔 조작은 돔에 요소가 존재했을때를 전제로 하기 때문에 확실히 돔이 그려진 시점이 아니라면 작동하지 않는게 맞습니다. 그래서 타임아웃으로 지연시간을 벌고 화면이 그려진 다음 에는 적용이 되었던걸로 보이구요. 목적이 .scroll-content 의 margin-top을 상황에 맞게 바꾸는 거라면 html 과 css 를 이용하는 방법이 좋아보입니다.앵귤러에서는 제이쿼리 없이 모든게 가능합니다. 오히려 jquery 사용시 이번과 같은 타이밍 문제가 자주 발생할거에요. html에는

kimmminjun · Answer

정말 감사합니다! 그러면 특정 시점(httpService 끝난 이후) 이후에 css 값을 바꾸려면 주로 어떤 방법을 쓰나요? 지금 엑박이미지 처리를 해야 해서..httpService 요청 끝난 이후 모든 이미지 태그에 엑박처리함수가 실행이 되어야 하거든요

kimmminjun · Answer

엄청 많은 페이지에 엑박처리함수를 걸어야 하는 상황이라 말씀해주신 방법대로 클래스명 & ngClass으로 처리하면 안 될 것 같아요..

WebStorm · Answer

loadShamkList 함수 실행시 바로 this.selectedType 값이 대입되는데 selectedType를 http구독시점에 바꿔주시면 됩니다. this.httpService.service('/api/v1/shamk/list/' &#43; this.page, {type: 'POST', data: data}, true) .then((result: any) &#61;> { // 여기에서 this.selectedType&#61;&#34;대입값&#34;; } ......

WebStorm · Answer

엑박이면 또 다른 함수가 실행되나요? 저는 보통 이미지를 <img 태그 사용하지 않고 div background-url 에 넣습니다. 그러면 엑박도 안생기니까요. 이미지 엑박일때 대체 이미지 넣기도 좋고요

kimmminjun · Answer

음 selectedType값 대입하는거 말고, 이미지 엑박처리하는 함수를 호출하는 부분을 처리 중인데 그 함수는 지금 http 구독 시점에 넣었는데도 동기 처리가 안되네요 ㅠㅠㅠ

kimmminjun · Answer

async loadShamkList(type, categoryCd?, infiniteScroll?) { console.log(&#34;order페이지에서 넘어온 파라미터:&#34; &#43; this.navParams.get('registerOk')); //스크롤 로딩이 아닐경우에는 무조건 초기회 if (!infiniteScroll) { this.page &#61; 1; this.shamkList &#61; []; this.shamkBannerList &#61; []; this.totalEndPage &#61; null; if (typeof this.reActiveInfiniteScroll !&#61; 'undefined') { this.reActiveInfiniteScroll.enable(true); } } this.selectedType &#61; type; this.selectedCode &#61; categoryCd; let data &#61; JSON.stringify({type: this.selectedType, categoryCd: this.selectedCode}); console.log(&#34;호출 데이터:&#34;, data); this.httpService.service('/api/v1/shamk/list/' &#43; this.page, {type: 'POST', data: data}, true) .then((result: any) &#61;> { /* 엑박 이미지 처리 */ imgErrorDealFunc(); }); this.afterPurchase &#61; false; console.log('shamk list222'); } export function imgErrorDealFunc(){ console.log('엑박 처리 함수 호출!!!'); $(&#34;img&#34;).each(function(i, element: HTMLImageElement){ let uri404 &#61; &#34;../assets/img/404image.jpg&#34;; if(element.src !&#61; '' && element.complete &#61;&#61; true && element.naturalWidth&#61;&#61;0){ $(this).attr(&#34;src&#34;, uri404); $(this).attr(&#34;width&#34;,&#34;150px&#34;); } }); }

kimmminjun · Answer

태그에 넣는게 제일 빠른 방법이긴 한데 스크립트로 처리하라고 하셔서..스크립트로 처리중입니다 ㅠㅠ

WebStorm · Answer

제이쿼리로 또 엑박인 이미지를 돌며 찾겠군요.... 그건 상부 방침이니 ㅎㅎ 잘 해결하시길 바랍니다. 존 주말 보내세요 ㅎㅎ

kimmminjun · Answer

일단 ionViewDidEnter와 ngAfterViewInit 쪽에 http요청쪽 함수를 넣고 해결은 된 상태인데왜 되는지를 모르겠어서...? 찜찜한 상태이네요 감사합니다~

ionic과 angular 모두에서 뷰 초기화를 해줘야 하나요?

17개의 답변

Q&A 목록