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에는 올바른 데이터가 포함되는데 모달이 떠도 내부에 데이터가 보이지 않는다. 신기한건 그 페이지의 개발자도구를 키는 순간 데이터가 나타난다는 것.. 뭐 이런 듣도보도 못한 경우가 다 있나 싶었다. ...

2025년 1월 13일 · 1 분 · 배준수

Django Serializer에서 is_valid를 쓰는 이유

Today I Learned 날짜 2025년 1월 10일 금요일 내용 is_valid() 페이스북 로그인을 구현하고 있다. 열심히 API를 만들었더니 처음 보는 오류가 뜬다. “message”: “You must call .is_valid() before accessing .validated_data.” 알아보니.. 시리얼라이저에서 발생하는 오류였다. 1 2 3 4 5 6 7 8 9 10 11 12 def get(self, request, shop_id): try: data = ShopFacebookProfile__Manager.get_by_shop_id(shop_id=shop_id) ... def patch(self, request: Request, shop_id: int): try: serializer = ShopFacebookProfile__Serializer(data=request.data) if not serializer.is_valid(): return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST) ... 두 요청의 차이는 입력 데이터를 직렬화 과정에서 데이터를 검증하는지가 있다. 첫번째 get요청은 데이터를 받아서 별다른 직렬화를 진행하지 않는다. 따라서 데이터가 예상하는 것과 전혀 다른 것이 들어와도 요청 수준에서는 어떤 검증도 하지 않는다. 물론 내부 로직이 진행되는 과정에서 데이터 형식이 달라 함수들이 오류를 뱉는 것은 별개의 문제지만… ...

2025년 1월 10일 · 1 분 · 배준수

Sentry에서 Stack Trace를 추가하는법

Today I Learned 날짜 2024년 1월 9일 목요일 내용 Sentry에서 Stack Trace를 추가하는법 에러가 난 구체적인 코드를 아는 건 서비스의 에러를 해결하는데 정말 큰 도움이 된다. (구) 글로벌팀의 서비스들은 Sentry를 사용하고 있는데 구체적인 에러의 위치가 나타나지 않는다. 이전부터 지속적으로 웹훅에 오류가 발생하고 있는 상황이라 이 기능이 꼭 필요하다. 이걸 Stack Trace라고 한다. 사실 이전에 시도를 했었다. Github Integration을 하면 된다고 했는데, 그 이후에도 보이지 않는다.. 이렇게 추가해줬다. 하지만 에러 메시지가 출력이 안되는데… capture_exception() 을 사용하면 된다는 글을 이제야 봤다. 빠르게 적용해봤다. ...

2025년 1월 9일 · 1 분 · 배준수

데이터베이스 CPU 사용률이 높은 문제

Today I Learned 날짜 2024년 1월 8일 수요일 내용 데이터베이스가 이상하다. 여전히 쇼피파이 웹훅이 주기적으로 크게 실패하는 모양새를 보인다. 저렇게 주기적으로 크게 몰아서 실패하는 모양새다. 오류의 원인은 다양하지만 대개 400: error in update_shopify_product_by_webhook(psycopg2.errors.UniqueViolation) duplicate key value violates unique constraint “shopify_product_pkey” 이렇다. 쇼피파이에서 상품에 붙는 고유 ID를 우리 데이터베이스에서도 unique로 해놨다. 말그대로 고유한 값이므로 전혀 문제될 게 없다. 1 2 3 4 5 6 7 8 9 10 11 12 db_shopify_product = get_shopify_product_by_origin_id_and_service_id( shopify_store=shopify_store, origin_id=data["origin_id"], db=db, ) if not db_shopify_product: res = create_shopify_product( shopify_store=shopify_store, data=data, db=db, ) 코드는 이렇게 되어있다. origin_id 가 쇼피파이에서 붙이는 고유한 값이다. 그 값으로 찾아서 없으면 생성해준다. 애초에 이 웹훅이 “상품 업데이트” 웹훅이기 때문에 없는 상품에 관한 정보가 들어올리가 없다. 들어왔다면 우리 쪽에 문제가 있어 데이터가 유실된 것이니 만들어주도록 작성해놨다. ...

2025년 1월 8일 · 2 분 · 배준수

Mixin in CSS

Today I Learned 날짜 2024년 1월 7일 화요일 내용 믹스인 CSS에서도 공통된 스타일을 적용할 수 있고, 함수처럼 변수를 넣어 특정 스타일을 가변으로 둘 수도 있다고 한다. 믹스인이라는 건데… 1 2 3 4 5 6 7 // 정의 .flex-row (@justify: center, @gap: 0) { display: flex; align-items: center; justify-content: @justify; gap: @gap; } 이런식으로 정의하고 ...

2025년 1월 7일 · 1 분 · 배준수

페이스북 로그인 구현하기

Today I Learned 날짜 2024년 1월 6일 월요일 내용 페이스북 로그인을 구현하자 결국 태그된 게시물을 가져오기 위해, 페이스북 로그인을 추가해주기로 했다. 이전에 해봤던 작업이기 때문에 전체적인 틀이나 방식에 대해선 잘 알고 있다. 페이지와 인스타그램 비즈니스 계정은 1대1 관계라., 계정정보를 저장하는 테이블에 페이스북 페이지 정보와 토큰을 저장하는 필드를 추가했다. 구현하다가 알게된건 이전에 내가 이용했던 것과는 다른듯 하다.. 예전에는 페이스북 API에 접근하기 위한 페이스북 로그인을 구현했었다. 이번에는 인스타그램 API를 접근하기 위한 페이스북 로그인을 구현하기 때문에 조금 달랐다. 실제로 전자는 페이지 정보를 모두 가져와서 유저가 인스타그램 비즈니스 계정이 연결된 페이지를 선택하는 기능을 우리가 직접 만들어야 했는데 후자는 페이스북 쪽에서 제공하는 화면에서 다 처리되서 편하다. 지금에서야 이해가 되었으니 편하지 만들때는 헷갈려 죽을 뻔했지만… ...

2025년 1월 6일 · 2 분 · 배준수

51% 풀스택 개발자 되기

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}`); } }); } } 이렇게 짰는데.. 존경하는 프론트엔드 동료분께 리뷰를 받았다. ...

2025년 1월 3일 · 2 분 · 배준수

범인은 메타였다.

Today I Learned 날짜 2025년 1월 2일 목요일 내용 범인은 메타일지 모른다. 태그된 게시물이 불러와지지 않는다는 이슈가 또 접수되어… 희망 없이 인터넷을 맴돈지도 일주일이 넘은듯 하다. 이세상에 나와 같은 이슈를 겪는 자는 정말 없을까… 현재 서비스 이용자 전체를 조회해보니 700개가 넘은 인스타그램 계정 중에 239개만 태그된 게시물을 불러올 수 있고, 539개 계정에선 불러와지지 않는다. 대체 이게 무슨일이람… 도저히 진척되지 않는 상황에 지쳐서 GG를 쳤고 다른 서비스에서는 잘 되는지 확인해보았다. 정말 내 문제인지, 메타의 문제인지… 그런데 거기서도 우리랑 똑같은 오류가 뜬다. 진짜 메타에서 제대로 안주는 게 원인일 지도 모른다는 의미다! ...

2025년 1월 2일 · 1 분 · 배준수

권장하지 않는 방법과 편한 방법

Today I Learned 날짜 2024년 12월 31일 화요일 내용 권장되지 않는 방법은 해도 될까? 네이버 상품 상세정보에서 내가 추가한 태그를 확인해야 한다. 어떤 경우에 어떻게 변하는지 확인하기 위해 구체적으로 테스트 케이스를 설정했다. 약간의 배경지식을 더하자면 상품 상세정보 페이지는 HTML로 직접 작성하는 방식과 스마트에디터원을 사용하는 방식 2가지가 이용된다. 스마트에디터원은 HTML을 사용할 줄 모르는 사람을 위한 손쉬운 편집기 느낌이다. 사용자가 스마트에디터원으로 작성한 상품을 API로 수정할 경우, HTML 형식으로 무조건 변경된다. 그리고 HTML을 스마트에디터원으로 변경할 경우, 내용이 반영되지 않고 모두 제거된채 처음부터 다시 작성해야 한다. ...

2024년 12월 31일 · 3 분 · 배준수

되는 게 없는 날

Today I Learned 날짜 2024년 12월 30일 월요일 내용 되는게 정말 단 하나도 없는 닶도 없는 날이다. 네이버 상품 상세정보 조회하기 매주 월요일 오전, 네이버 상품 상세정보에 추가해놓은 이미지를 새로운 것으로 업데이트해야 한다. 이때 사용자가 상품 상세페이지에서 배너 이미지를 지웠다면 업데이트를 진행하지 않고 연동 중지 상태로 멈춘다. 따라서 업데이트 진행은 상품 상세정보에 저번주에 생성한 이미지가 있는 지에 따라 결정된다. 배너이미지의 HTML은 일정한 형식을 가진다. <a> 태그로 둘러쌓여있고, 안에는 <img> 태그가 있다. 이미지의 링크는 S3인데 내부 디렉토리도 정해진 규칙이 있다. 그래서 ...

2024년 12월 30일 · 2 분 · 배준수