Posts

Today I Learned 날짜 2024년 11월 26일 화요일 내용 HTML 검사 네이버 배너 이미지의 실 사용 상태를 스프레드시트에 업데이트 해준다. 거의 대부분(80~90%)가 미연동상태로 표시된다. 미연동 상태라 함은 우리 어드민에 접속해 배너이미지 삭제하기 버튼을 누르진 않았지만, 유저 본인이 네이버 상품 수정 페이지에서 우리 이미지를 삭제했다는 뜻이다. 우리 서비스를 이렇게 안 쓸리 없다는 희망을 품고 실제 미연동상태인 데이터들을 확인했다. 역시 실제로는 쓰는데, 미연동 상태로 표시되는 것들이 대부분이었다. 배너 이미지는 매 주 자동 업데이트 및 업로드 되는데 미연동상태로 처리되어 업데이트조차 되지 않았다. 뭔가 로직에 이상이 생겼다. ...

Today I Learned 날짜 2024년 11월 25일 월요일 내용 코드 정리하기 아름다운 사람은 머문 자리도 아름답다 카더라. 국내에서 개발을 어느정도 마치고 마무리하고 있다. 나중에 기능을 완전하게 활성화 할 때, 내 코드를 보는 사람이 누구더라도 알아 볼 수 있도록 했다. 엔드포인트 정리하기: 사실 이제와서 바꾸면 프론트 입장에서 화딱지가 나겠지만, 그렇다고 더러운 엔드포인트 이름은 두고 볼 수 없다. 처음부터 제대로 했으면 된다고? 생각이 안나는걸 어떡함? 함수 쪼개기: 코드가 기~인 함수는 보면 함수부터 나온다. 기능에 따라 최대한 나누어줬다. 인스타그램에서 데이터를 받아온다고 가정하면 받아오기 ⇒ 있는지 조회하기 ⇒ 저장하기 쯤으로 나눌 수 있겠다. 각주 적기: 클린 코드의 저자는 각주를 적을 필요가 없을 만큼 깔끔한 코드를 작성할 생각을 하라고 하셨다. 난 어느덧 그럴 수 없으니 각주를 적는다. 클래스 다시 확인하기: 코드를 쓰면서 종종 피어나는 클린 코드 독자로서의 자부심은 열심히 클래스를 정의하도록 만들었다. 정신차리고 보면 클래스에 온갖 잡다한게 다 들어간 강아지 장난감 보관함같다. 기능 별로, 작동하는 테이블명 별로 잘 나눠주자. 회고 PR 올리고 도망가려다가 코드리뷰에 붙잡혔다. 오랜만이라 무섭다. ...

Today I Learned 날짜 2024년 11월 22일 금요일 내용 장고에서 요청 본문 설정하기 인스타그램에서 게시글을 가져오고 있다. 이것저것 만들면서 엔드포인트를 만들어야 하는데.. 내가 원하는대로 되질 않는다! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 class InstagramFeed__InstagramFeedPostSerializer(serializers.ModelSerializer): class Meta: model = ... fields = "__all__" class ...View(BaseAPIViewMixin, APIView): def get_serializer_class(self): return ..._Serializer @extend_schema( operation_id=..., description=..., tags=..., ) def post(self, request: Request, shop_id: int): try: account_data = .. instagram_posts = ... serializer = self.get_serializr(instagram_posts, many=True) return Response( { "result": True, "detail": serializer.data, } ) except Exception as e: return Response({"result": False, "detail": str(e)}) 이렇게 해놨는데.. 저 InstagramFeedPost 가 반환되는 형태라고 가져다 놨더니 요청의 본문 바디에 저게 들어가고 앉았다. FastAPI에선 직렬화와 역직렬화는 신경쓰지 않아도 됐었다보니, 제대로 못쓰고 있는 것 같다. 게다가 응답도 객체 배열이어야 하는데, 그냥 객체로만 처리되고 있다. ...

Today I Learned 날짜 2024년 11월 21일 목요일 내용 장고 하이 국내 알파리뷰에 인스타그램 게시글을 가져와 위젯으로 만들어줘야 한다. 그동안은 FastAPI만 쓰다가 처음으로 장고를 쓰고 있는데.. 진짜 GPT 없었으면 큰일날 뻔했다. 미리미리 공부도 하고 질문도 좀 했는데, 막상 또 해보려니 쉽지 않다. 그나마 다행인건, 현재 국내 앱이 각 기능별로 잘 나눠져있다는 점이다. 내가 만드는 기능을 위해 내 디렉토리 내에서 모델, 직렬화, 뷰, 피쳐등을 생성하면 되니 다행이다. 그리고 기능 자체가 기존과 엮일 일이 많지는 않아 이미 존재하고 사용하고 있는 코드에 짜맞출 필요도 없고… 내 맘대로 하면 된다! ...

7장 순수 하이퍼미디어 설계 왜 HTML인가? HTML은 세상에서 가장 인기 있는 하이퍼미디어 유형이다. HTML의 기능 텍스트 문서의 중첩 구조를 표현할 수 있다. 택스트 콘텐트와 기타 태그를 표현할 수 있다. 하이퍼미디어 컨트롤 HTML은 다음과 같은 하이퍼미디어 컨트롤을 내장하고 있다. <link>, <a>, <img>, … 플러그인 애플리케이션 의미 체계 HTML은 사람이 이해할 수 있는 문서를 다룬다. HTML은 원래의 용도 외의 목적으로 사용하기가 매우 쉽다. HTML4는 세 가지 일반 속성을 더 가진다. rel : 연결되는 리소스와 지금 리소스 사이의 관계를 정의 id : 문서 내 한 요소를 식별하는 고윳값 class : 태그의 애플리케이션 의미 체계를 전달하는 용도(속하는 클래스를 정의) 마이크로포맷 hCard같은 마이크로포맷은 HTML에 추가적인 애플리케이션 의미 체계를 더하게 해준다. hMaze 마이크로포맷 새로운 hCard같은 마이크로포맷을 정의하는 것은 쉽다. 몇개의 클래스의 의미만 정의하면된다. 마이크로데이터 마이크로데이터는 HTML 5용으로 마이크로포맷을 다듬은 것이다. 다섯 개의 새로운 속성이 있다 itemprop : 마이크로포맷이 class 속성을 사용하던 방식으로 사용 itemscope : boolean. 태그에 마이크로데이터가 있는가를 표시 itemtype : 해당 마이크로데이터의 의미를 확인할 수 있는 곳 itemid itemref 마이크로포맷을 사용할땐 class=hCard 가 붙은 태그 내부가 모두 hcard 포맷임을 알 수 있다. 마이크로데이터는 그렇지 않다. itemscope 내부는 itemtype 이 가리키는 문서로 작성되어 있다고 표현된다. 예시 1 2 3 4 5 <div itemscope itemtype="https://www.naver.com/..."> <div itemprope="cell"> ... </div> </div> 마이크로포맷은 rel로 연결 관계를 정의할 수있지만 마이크로데이터는 그렇지 않다. itemtype 문서에는 나타날 것. 리소스 상태 변경하기 스위치를 누르면 리소스의 상태와 관계가 변경된다고 해보자 이 스위치를 조작하는 요청은 하이퍼미디어로 어떻게 구현될까? 폼에 애플리케이션 의미 체계 추가하기 rel 속성은 두 리소스 사이의 관계를 나타낸다. ‘리소스 상태를 변경하라’는 의미를 가진 rel 값을 만들 수 있을까? 리소스들이 나열되고 그 리소스를 요청하는 것은 GET 요청이다. 하지만 리소스 상태 변경은 GET 요청을 쓸 수 없다. POST를 써야한다. 이때 HTML이 정의한 하이퍼미디어 폼을 사용하면 된다. 대신, rel 속성은 지원하지 않는다. 이 switch 클래스도 hMaze 마이크로포맷에 추가할 수 있겠다. 1 2 3 <form action="/switches/4" method="post"> <input class="flip" type="submit" value="Flip it!"/> </form> 하이퍼미디어의 대체재는 미디어다 요즘 API 문서들에는 많은 메서드가 개별 API 호출로 노출되고, 상세하게 문서화되어 있다. 이는 다시 말해, 사람이 읽을 문서를 하이퍼미디어 대체재로 사용하고 있다는 것이다. 사람 대신, 이 정보를 받도록 의도된 대상(소프트웨어)에 맞춰 작성해야 한다. 스위치를 나타내는 두 버전을 살펴보자 1 2 3 4 스위치를 조작하려면 다음 주소로 POST 요청을 보낸다. https://api.example.com/swithches/{id}?action=flip {id}는 스위치 ID다. 스위치가 있는 셀에 있을 때에만 스위치를 조작할 수 있다. 1 2 3 4 5 6 7 <div class="swithch"> <span class="position">down</span> <form action="/swithches/4" method="post"> <inpuit class="flip" type="submit" /> </form> </span> </div> 애초에 하이퍼미디어 컨트롤을 사용할 수 있을 때만 제시되므로, 셀에 있을때에만 조작할 수 있다는 경고문구는 제공할 필요도 없다. HTML의 제약 기술적으로 HTML은 일반 하이퍼미디어 포맷이 아니라 도메인 특화 표준이다. 여기서 발생하는 한계들이 있다 PUT, DELETE는 HTML 하이퍼미디어 컨트롤로는 표현할 수 없다. HTML 4의 폼은 두 가지 종류의 엔티티 바디만 만들 수 있다. application/x-www-form-urlencoded multipart/form-data HTML 4는 JSON과 달리 숫자와 문자열을 구분하지 않는다. HTML 4는 날짜를 표시할 방법을 정의하지 않는다. HTML5가 문제를 해결해 줄까? 보완점 날짜 문제 ⇒ time 태그로 해결 숫자 문제 ⇒ 일반적으로 동작하지 않음 몇 가지 컨트롤을 더 정의하나, 여전히 유용하지 않음 input 태그 검증을 위한 방법 정의 일부는 보완되나, 하이퍼미디어 포맷으로서의 HTML을 급격히 변화시키지는 않는다. 하이퍼텍스트 애플리케이션 언어 웹 API에 특화되어 설계된, HTML의 기본 개념인 하이퍼링크만 가져온 HAL(Hypertext Application Language)가 있다. HAL은 두 가지 방식으로 제공된다. XML(application/hal+xml) JSON(application/hal+json) HTML과 HAL의 차이 HTML에는 여러가지 경우에 따라 <a>, <img>, <form> 을 사용한다. ...

Today I Learned 날짜 2024년 11월 20일 수요일 내용 Alembic revision FastAPI에선 Postgresql 의 마이그레이션을 위해 alembic을 사용한다. Django 처럼 프레임워크에서 제공하는 ORM이 없다보니 SQLAlchemy 를 사용하는데, 이 SQLAlchemy에서 제공하는 도구다. alembic revision --autogenerate 라는 명령어로 데이터베이스 변경 내역을 스크립트로 만들고, alembic upgrade head 명령어로 입력한다. 네이버 상품 상세페이지에 추가되는 이미지에 이제는 인스타그램 게시글도 추가되도록 만들었다. 오늘이 실서버 배포날이라 실서버에서 마이그레이션을 적용하는데 이런 오류가 떴다. 1 2 3 4 File "/usr/local/lib/python3.12/site-packages/alembic/script/revision.py", line 245, in _revision_map down_revision = map_[downrev] ~~~~^^^^^^^^^ KeyError: 'eea2e21515bc' 이게 무슨소리인고 찾아보니 이전 스크립트가 없다는 의미다. 이해를 위해 revision에 대해 알아보자. ...

Today I Learned 날짜 2024년 11월 19일 화요일 내용 크론 총 점검 네이버와 쇼피파이에서 제공하는 서비스에는 여러 크론이 돌아간다. 우선 현재는 매일 인스타그램 계정, 미디어, 댓글 상태를 업데이트 매일 인스타그램 미디어 URL이 만료되면 최신화 매일 네이버 배너이미지에 포함될 댓글을 최신화 매주 월요일 네이버 배너이미미지를 상품 상세페이지에 업로드 구글 스프레드시트에 현재 사용 데이터를 업로드 가 돌아간다. 이 중 1,2는 같이 돌아가는데 미디어 데이터와 댓글 데이터가 워낙 많아서 그런지 벌써부터 4~5시간 씩 걸린다. 서비스가 더 커지기 전에 조치를 내려야겠다 싶어 QA 기간에 이것저것 수정했다. ...

Today I Learned 날짜 2024년 11월 18일 월요일 내용 HTML 엔티티 매주 월요일, 네이버 상품 상세페이지를 조회하여 지난 주에 추가해둔 게 잘 있는지 확인한다. 상품 상세페이지는 HTML로 작성되어있어서, 이미지 태그를 추가해놨다. <img src="...../상품명" 이 친구를 찾으면 되는데, 분명히 있는데도 없다고 뜬다… 뭔가 싶어 상세페이지 전체를 확인했다. 왜 &가 & 로 바뀌어 있나 했더니 HTML 엔티티라고 한다.특수문자가 HTML 엔티티로 바뀌는 이유를 친구에게 물었다. 1 2 3 1. HTML 엔티티는 특수문자를 안전하게 표현하기 위한 표준 방식입니다. 2. <, >, & 등의 문자는 HTML 구조를 깨트릴 수 있기 때문에 엔티티로 변환됩니다. 3. 자동 변환된 HTML 엔티티는 html.unescape() 또는 브라우저의 파서를 통해 원래 문자로 복원할 수 있습니다. 더 자세히 말해달라고 했다. ...

Today I Learned 날짜 2024년 11월 15일 금요일 내용 순서의 중요성 유저가 진입하여 인스타그램 계정을 연동하면 관련 데이터를 불러온다. 기존에 로직은 포스트 데이터 불러오기 → 각 포스트마다의 댓글 불러오기 이후 배너이미지를 생성할때 선정된 게시글의 댓글들만 GPT로 평가 였다. 초기 스토어들이 각 게시글마다 댓글이 거의 없는것을 알게 되었고, 개선작업에서 계정에 있는 모든 댓글에서 적합한걸 불러와주기로 했다. 따라서 댓글을 처음 가져와 저장하는 시점에 점수를 판정해야 한다. 또 바뀐건, 포스트를 가져오는 로직이다. 기존에는 첫 로그인시 50개를 가져온 후, 그날 밤 크론을 통해 모두 다 불러와줬다. 이걸 바꾸어서 첫 로그인시 그냥 다 가져와주기로 했다. 따라서 로그인하면 모든 게시글을 불러오고 모든 댓글들을 불러오고 모든 댓글들을 검사해야 한다. ...

Today I Learned 날짜 2024년 11월 14일 목요일 내용 인스타그램 미디어 URL의 만료시간 인스타그램 미디어는 일정 시간이 지나면 URL이 바뀐다. 따라서 위젯으로 만든 사진이나 비디오, 썸네일은 모두 엑박으로 변해버린다.. 이게 변하는 시간도 정확히 알수가 없어서, 현재는 하루에 2번이나 모든 미디어의 링크를 다시 인스타그램에서 받아온다. 그런데 개발민수님에게 꿀팁을 들었다. 링크 끝에 시간을 나타내는 값이 있다고한다. https://scontent-ssn1-1.cdninstagram.com/v/t51.29350-15/459768583_1048138156946599_8516737515[…]64gm1R92wFZfLsMr7Ut1kMJCpkn1VbHdC2m6uY7A&oe=66FBE2F9 링크는 이렇게 생겼는데, 끝에 oe값이 시간을 나타낸다고 한다. 이 66FBE2F9 를 10진수로 바꾸면 1727783673 가 나온다. 이건 epoch 라는 타입의 시간인데, 실제 우리가 볼 수 있는 시간대로 변환하면 ...