Angular

Today I Learned 날짜 2025년 1월 13일 월요일 내용 초기화되지 않는 컴포넌트 서버에 요청을 보내고 받아온 데이터로 작은 모달을 열어야 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 facebookLogin() { FB.login((response: any) => { if (response.authResponse) { let userData = response.authResponse; this.coreApi.create(`shops/${this.shop.id}/facebook/login`, { facebook_access_token: userData['accessToken'], facebook_user_id: userData['userID'], facebook_profile: '', facebook_username: '', }).subscribe(response => { this.facebook_page_list = response.body.page_list; const dialogRef = this.dialog.open(FacebookPageComponent, { data: { facebookPageList: this.facebook_page_list }, minWidth: '600px', minHeight: '600px' }); } 분명 facebook_page_list에는 올바른 데이터가 포함되는데 모달이 떠도 내부에 데이터가 보이지 않는다. 신기한건 그 페이지의 개발자도구를 키는 순간 데이터가 나타난다는 것.. 뭐 이런 듣도보도 못한 경우가 다 있나 싶었다. ...

Today I Learned 날짜 2024년 1월 3일 금요일 내용 51% 스택 개발자 되기 반쪽자리 풀스택 개발자에서 조금은 진화하는 중이다. 백오피스에 모든 스크립트를 정보를 불러오고, 현재 설치된 스크립트를 불러와 비교한 후 설치된것과 안된것을 구별하는 코드를 작성했다. 1 2 3 4 5 6 7 8 9 10 11 combineScriptLists() { ... 기존 코드 if (appType !== undefined) { ... 진행 로직 ... } else { console.warn(`Invalid appTypeKey: ${appTypeKey}`); } }); } } 이렇게 짰는데.. 존경하는 프론트엔드 동료분께 리뷰를 받았다. ...

Today I Learned 날짜 2024년 12월 12일 목요일 내용 선택적으로 path parameter 받기 쇼핑몰 상세 페이지에서 오른쪽 네비게이션 바를 통해 티켓을 볼 수 있다. 이 티켓을 클릭하면 티켓 페이지를 새창으로 띄워줘야 하고 상세보기에는 해당 티켓이 나타나야 한다. 티켓페이지에선 상세보기도 하위 컴포넌트로 구현되어 있어서 어떤 티켓을 눌러도 중앙 쪽에 있는 돔에만 변화가 생길뿐 나머지는 그대로다. 즉, 티켓 페이지의 최상위 컴포넌트에는 정해져있는 로직에 따라 최초로 상세보기에 띄울 티켓을 선택할 뿐이고 그 외는 없어서 구현해야 했다. ...

Today I Learned 날짜 2024년 12월 11일 수요일 내용 리마인더 알람기능 이것저것 아주 간단한 기능들을 고치거나 만드는 중. 기본 코드가 워낙 보기 쉽게 잘 짜여져있고 로직도 단순해서 큰 어려움은 전혀 없었다. 다만, 리마인더 기능은 조금 고민이 들었다. 티켓에는 리마인더 기능이 있는데, 노션에서 처럼 일정 기간 후 유저에게 알려줘야 한다. 물론 유저가 티켓 페이지에 접속했을 떄만.. 그래서 유저가 티켓 페이지에 들어왔을 때 리마인더를 조회하도록 했다. 설정된 리마인더 시간이 가장 빠른 것부터 보여준다(다시 말하면 알람이 울린지 가장 오래되었다는 뜻). ...

Today I Learned 날짜 2024년 4월 22일 월요일 내용 서비스 비활성화 기능 앱 비활성화 기능을 추가하는 태스크를 맡았다. 비활성화라고 하면, (1) 서비스 내 사용하도록 설정한 옵션들을 모두 끄고 (2) 코어스크립트를 비활성화하도록 안내 해야한다. 프론트, 백 모두 맡아서 기능 단위로 개발하게 됐다. 기존 상태에서 서버는 클라이언트에게 사용중인 서비스의 값들만 제공한다. 무슨 말이냐면, 클라이언트의 요청에 대한 응답으로 use_apps에 [100,300] 만 담아 보낸다면 이 유저는 프로덕트 리뷰와 리스트 디자이너만 사용하는 유저라는 뜻이다. 유저에 따라 이 배열의 길이와 내용은 달라진다. ...

Today I Learned 날짜 2024년 3월 26일 화요일 내용 다 고쳤다고 생각했는데, 이젠 위젯 수정 과정에서 발생한 오류들이… 위젯 수정 후 렌더링 썸네일 렌더링과는 별개로, 처음 위젯을 생성할 때는 상품의 썸네일 이미지도 가져와서 설정하는 로직이 있다. 그런데, 이미 존재하는 위젯을 수정하는 과정에서 상품을 추가할 때는 썸네일을 가져오지 않았다. 추가해주었다. 레이아웃 수정 행,열의 값이나 레이아웃 형태를 변경하면 위젯이 고장나버리는 문제가 있었다. 디자인 옵션은 받은 값을 통채로 덮어씌워져서 개별 값이 문제가 될 리가 없었다. 로그를 확인해보니 currency가 문제가 있었다. 뜬금없이 애는 또 왜…. ...

Today I Learned 날짜 2024년 3월 21일 목요일 내용 Angular 최근 작업한, 앱 내에 서비스 삭제 경로를 추가하는 건 나름(?) 큰 작업이었다. 그동안은 컴포넌트에 변수에 대한 조건을 추가하는 등의 사소한 작업이었는데, 새로운 하위 컴포넌트를 만들어야 했다. 모달 형태로. 기능 자체는 어제 TIL에 작성한 대로 완성했다. 다만, 기존에 작성되있는 방식에 맞추기 위해, 유지보수를 수월하게 하기 위해, 박살난 CSS 수준을 끌어올리기 위해 감사하게도 코드 리뷰를 받을 수 있었다. 이 TIL에 적어내면 참 좋겠으나 아직 내 것으로 받아들이지 못해 쓸 수 없다. 그래도 열심히 받아 적었으니 빨리 적용해보고 내가 몰랐던 부분에 대해 정리해야겠다. 최근 스프린트들이 프론트쪽에 작업이 몰리면서, 내가 프론트를 어느정도 할 수 있다면 팀의 일정에 도움이 많이 되겠다고 느꼈다. 마침 기가 막히게 성장할 환경이 갖추어졌으니 열심히 하기만 하면 될 듯! ...

Today I Learend 날짜 2024년 3월 20일 수요일 내용 앱 삭제하는 경로를 추가했다. 오늘은 백엔드 작업을 많이 했다. 프론트 기존에 우리 서비스에서 사용하는 체크박스 클래스로 바꿔주었다. 앱을 삭제하는 버튼은 고객이 이유를 선택해야만 활성화되도록 구현하기 위해 ngIf 를 사용했다. 1 2 <button *ngIf="uninstallReasons.length > 0" class="btn-enabled" mat-button (click)="onConfirm()">Delete App</button> <button *ngIf="uninstallReasons.length === 0" class="btn-disabled" mat-button disabled>Delete App</button> 각 사유들은 checkbox로 만들었고 체크되면 삭제 사유를 담는 배열에 추가시켰다. 1 2 3 <div class="checkbox-container" aria-label="Select a reason" [(ngModel)]="uninstallReasons"> <alpha-checkbox (change)="updateUninstallReasons($event, 10)">Technical issues</alpha-checkbox> </div> 처음 사유를 추가했을 때, 버튼이 활성화되었다. 하지만 체크를 비활성화하여 다시 사유를 선택하지 않게 되었을 때 버튼이 비활성화되지 않았다. 따라서 uninstallreason의 배열 상태를 추적하는 ChangeDetectorRef를 사용했다. ...

Today I Learend 날짜 2024년 3월 19일 화요일 내용 모달로 기능 추가하기 우리 서비스를 삭제하려면 Shopify 의 shop admin 쪽에서 처리하면 된다. 하지만 이와 별도로 우리 서비스 내에서도 자체적으로 삭제 버튼을 만들기로 했다. 이와 관련된 로직은 아마 내일 처리할 예정이니 내일 TIL에 담길 듯 하다. 오늘은 프론트쪽에서의 기능 구현을 우선으로 했다. 삭제 전 이유에 대한 데이터를 모달을 이용해서 수집해야 한다. 기존 계획으론 모달에서 고객이 선택하고 입력한 데이터를 수집한다. 유저가 확인버튼을 누를 경우 삭제 요청과 함께 이 데이터를 서버로 보낸다. 서버에선 데이터는 저장하고 삭제 로직을 시작한다 모달이 종료된다.. 만약 취소버튼을 누를 경우 그냥 2~3번 과정 없이 모달창을 종료한다. 의 순서로 구성했다. 프론트는 아직 너무 허접한 수준이라 조언을 받았는데, 우리 서비스에서 특별한 예외 케이스가 아니면 모달에서 요청을 보내도록 처리하지 않았다. 모달이 닫히고 기존에 위치해 있던 페이지에서 요청을 보내야 한다. 따라서 ...

Today I Learend 날짜 2024년 3월 18일 월요일 내용 아직 스프린트가 끝나지 않았지만, 프론트 쪽 일정이 진행되는 동안 유지보수 작업을 시작했다. 프론트 쪽이 주 작업인데, 기존에 항상 설정되어 있던 placeholder를 서버에서 받은 세팅값이 False일 경우에는 세팅하지 않도록 한다던가, 현재 우리의 소개페이지(랜딩페이지)에 작동안되는 버튼들을 정리하고 다른 URL로 연결하는 간단한 작업들이 었다. 다만 아직 프론트 코드들은 익숙하지 않아서 기존의 구조를 망가뜨리지 않도록 잘 살펴보면서 하긴 했다. 작성된 리뷰를 보여주는 위젯에는 ‘더보기’ 기능이 있다. 말 그대로 내용이 길 경우 일부만 보여주고 모든 내용을 보기 위한 버튼이어야 정상인데 지금은 이미지만 확대된다. 내용은 아무리 길어도 다 출력된다. 이 기능을 정상적으로 되돌려야 한다. 위젯은 HTML로 서버에서 렌더링하여 제공하는데, 여기에 사용되는 더보기 관련 스크립트가 Shopify 프론트 쪽에 구현되어 있는 것 같다. 이게 맞나..? ...