[100자평] 삼거리 양복점

삼거리 양복점 ㅣ 웅진 우리그림책 50
안재선 지음 / 웅진주니어 / 2019년 4월

참 좋은 책입니다.

무슨 상이든 줄 수밖에 없었을 것 같습니다.

[마이리뷰] 우리 글 바로 쓰기 2

우리 글 바로 쓰기 2 ㅣ 우리 글 바로 쓰기 2
이오덕 지음 / 한길사 / 2009년 11월

그런데 우리는 알맞고 편리한 제 겨레말을 두고 엉뚱한 남의 나라 말을 따라 쓰고 있으니 이게 정신 나간 것이 아니고 무엇인가? 발발이 강아지 이름이지 어째서 전쟁이 터졌다는 말이 될 수 있는가? 제 나라 말을 바로 쓰려는 노력조차 하지 않는 사람은 제발 글을 쓰지 말아주었으면 좋겠다. - P43

눈에 띄는 신문이나 잡지에서 보기를 한 가지씩만 들었다. 여기 나오는 *불리는*, *불려온*, *불리워지는* 따위는 모두 ‘-고 하는’으로, *불리던*은 ‘-고 하던’으로, *불렀다*는 ‘-고 했다’로 써야 알맞는 말이 된다. ‘불렀다‘는 말 자체가 문제이지만 더구나 *불렸다*고 해서는 우리 말이 될 수 없다. 대체 어쩌자고 모두 이렇게 쓰는가? - P64

일본말 ’呼よばれる‘를 따라 *불리다*를 먼저 쓴 것은 소설가들이었다. 내가 알기로 이 말이 맨 처음 나온 작품은 1934년에 나온 박태원의 「小說家仇甫氏의 一日」이다. 오염문장의 표본 같은 이 소설에 무엇이 매력이 있었는지, 그 뒤 오늘날까지 한국의 소설가 몇 사람이 똑같은 제목의 소설을 써냈다. 이 *불리다*가 일제시대에는 겨우 몇 사람 작품에 어쩌다가 나왔다. 중국글자말투성이 일본문장을 그대로 옮겨서 논문을 쓰던 임화 같은 사람도 *불리다*만은 안 쓰고 "그것은 문학에 있어서는 시대적 양심이란 개념으로 불러온 것으로"라든지 "문예작품의 진정한 내용은 언제나 형식이라고 불러지는 문학적 협상의 조직으로 은폐되어 있다"(『신문학사의 방법』)고 썼다. 그런데 오늘날에는 소설이고 수필이고 논문이고 신문기사고 모조리 *불리다*를 쓰고 있으니 이래 가지고 우리가 민족문학을 이야기할 수 있겠는가. - P64

여기서 우리가 가장 많이 쓰는 인사말을 생각해본다. 내가 어렸을 때만 해도 *안녕*이란 인사말은 쓴 일이 없다. 아이들은 말할 것도 없고 어른들도 쓰는 것을 듣지 못했다. 헤어질 때는 "잘 가거라"나 "잘 가"라고 하든지, "잘 가요" "편히 다녀가이소" "살펴 가시소" 이랬다. 그러면 대답도 "잘 있거라" "편히 계시이소"로 나왔다. 안녕이란 말은 책에서나 읽었고, 해방 후에는 학교 교과서에 나와 비로소 널리 쓰게 된 말이다. 서울의 ‘양반’들이 쓰던 말은 이렇게 해서 표준이 되어 순수한 우리 말을 쫓아내고 온 나라에 퍼진 것이다.
*감사합니다*도 내가 자라날 때는 집에서고 마을에서고 들어본 적이 없다. 누구든지 "고맙다" "고맙습니다"고 말했다. 그런데 지금은 아이들만 ‘고맙다’를 쓰지 어른들은 모두 *감사합니다*를 쓴다. 머지않아 ‘고맙다’도 아주 자취를 감춰버릴 것 같다. - P83

*안녕*이란 말을 안 쓰면 우리가 만날 때마다 무슨 말을 해야 하나?
"반갑습니다" 하면 된다. "반갑다" "반갑네" 얼마나 좋은 말인가? *안녕*이리나 말보다 뜻으로 따지거나 소리가 주는 느낌으로나 백 배도 더 좋은 말이다. 얼마든 듣기 좋고 말하기 좋고, 인사를 나누는 뜻으로 알맞는 말인가. 이게 바로 우리 말의 자랑이다.
일본말에는 ‘반갑다‘는 뜻을 가진 말이 없다. 그 때문에 일제시대에는 이 말이 지식인들에게 천대를 받았는데, 그런 역사가 아직도 여전히 계속되고 있다. - P83

파이토치 딥러닝 마스터, 지마위린(指馬爲驎)?

71쪽

"말을 얼룩말로 바꾸는 도구는 인류가 수천 년 동안 숨죽여 기다려왔으며" ->

표현이 너무 엄숙, 근엄, 진지해서 원문을 찾아봤더니, "While humankind hasn’t held its breath over the last few thousand years for a tool that turn horses into zebras" [원문에서 "turn"은 "turns"라고 써야 문법에 맞는다]

"has held its breath"였다면 국역본과 같은 번역이 타당할 수 있겠는데,

"has"가 아닌 "hasn't"여서 "인류는 말을 얼룩말로 바꾸는 도구를 개발하기 위해 지난 수천 년 동안 멈추지 않았지만"이 더 정확한 것 아닌가 싶다.

그래도 '숨죽여 왔다'가 느낌은 더 와닿는 것 같기도...

아무튼 저자들이 말하는 '인류의 수천 년 숙원'을 받들어... 책에 나오는 코드로 다양한 말들을 얼룩말로 바꿔 봄...

말들아, 줄 그어서 미안해!! ㅠㅠ

연습문제에 나오는 대로 골든 리트리버 이미지도 넣어 봄...

개들아, 미안해!! ㅠㅠ

(음... 나뭇잎도 얼룩나뭇잎이 되어버렸네...)

덧. 원본 이미지는 royalty free 사이트에서 받았음(https://pixabay.com/images/search/horse/, https://pixabay.com/images/search/golden+retriever/)

알라딘 장바구니 (심히) 유감 2

앞의 글 https://blog.aladin.co.kr/SilentPaul/14856526 에 이어서 쓴다.

이번에는 범위를 좀 더 넓혀서 판매자별 장바구니의 html 코드를 ChatGPT에 분석하게 하였다. 코드가 길어져서 나누어 입력했다.

---------- ChatGPT가 제시한 문제의 원인 ----------

입력하신 (1), (2), (3), (4) 코드를 기반으로 페이지가 다운되는 원인에 대한 여러 가능한 원인을 제시하겠습니다:

1. 스크립트 충돌: 입력하신 코드 내에는 여러 `javascript:void(0);`와 같은 JavaScript 코드들이 있습니다. 다른 스크립트와의 상호작용 중 충돌이 일어날 가능성이 있습니다.

2. HTML 구조 문제: 코드를 빠르게 보았을 때 일부 HTML 태그들이 완전하게 닫히지 않거나, 일부 태그들의 순서가 잘못되었을 수 있습니다. 예를 들어, `</ul>` 이나 `</div>` 등의 태그가 필요한 위치에 없거나, 불필요한 위치에 있을 수 있습니다.

3. 이벤트 핸들러 문제: `onmousedown`이나 `onclick` 같은 이벤트 핸들러에 연결된 JavaScript 함수(예: `QtyApply_Layer`, `BasketDelete`, `SafeKeepSingle_Add` 등)가 정의되지 않았거나, 오류를 발생시킬 수 있는 코드를 포함하고 있을 수 있습니다.

--> 코드를 옮겨 붙이다가 받은 인상으로는, 이 3.이 문제인가도 싶다.

4. 외부 리소스 문제: `img` 태그를 통해 로드하는 외부 이미지나 다른 외부 리소스들이 존재하지 않거나 접근이 불가능할 경우, 페이지 로딩에 문제가 발생할 수 있습니다.

5. 서버 측 코드 문제: 표시된 HTML이 서버 측 코드로 생성될 경우, 해당 서버 코드에서 문제가 발생할 수 있습니다.

6. 브라우저 호환성 문제: 일부 브라우저에서는 특정 HTML 구조나 JavaScript 코드를 잘 처리하지 못할 수 있습니다. 여러 브라우저에서 테스트를 해보는 것이 좋습니다.

7. CSS 문제: 코드에 포함된 `style` 속성이나 외부 CSS 파일에 문제가 있을 수 있습니다. 특히 Internet Explorer와 같은 오래된 브라우저에서는 일부 CSS 속성이 제대로 동작하지 않을 수 있습니다.

이러한 원인 중 하나 혹은 여러 원인이 합쳐져서 페이지 다운의 원인이 될 수 있습니다. 디버깅을 위해 개발자 도구의 콘솔 탭에서 오류 메시지를 확인해보는 것이 도움이 될 수 있습니다.

알라딘 장바구니 (심히) 유감

알라딘이 책 판매를 넘어서는 어떤 비전을 가지고 있는지는 모르겠지만,

자주, 정기적으로 접속하는 여러 사이트, 서비스 중에 알라딘 장바구니처럼 자주 다운되고 불안정한 페이지는 없는 것 같다.

장바구니에서 책 한 권을 지우려 해도 거의 항상, 매번 페이지가 다운된다. 수십 분씩 다운되는 일이 허다하다. 영 돌아오지 않을 것 같을 때는 '작업관리자'를 켜서 강제 종료시키는데, 오늘은 작업관리자 창마저 거듭 다운시켜 버리는 위력에 기가 찼다. 이 글을 쓰는 데도 몇 시간이 걸렸는지 모르겠다. 내 컴퓨터 사양이 아주 떨어지는 것도 아닌데 말이다.

책 한 권 한 권마다 아래와 같은 코드를 쓰고 있는데, 평소 장바구니에 책을 많이 넣어두는 사람에게는 너무 무거운 것 같다. 군더더기와 이미지 개수를 줄이고, 개별 이미지도 크기를 가볍게 했으면 좋겠다. 이미 장바구니에 넣었는데, 굳이 책 이미지를 볼 필요가 있나도 싶다. 사용자가 장바구니에 책 이미지를 표시할지 말지 고를 수 있게 해도 좋을 것 같다. 장바구니에 책을 담는 것까지는 괜찮은데, 삭제 등 장바구니 관리가 너무너무 어렵다. 페이지 전체에 정보가 너무 많다. 아무튼 무게를 확 줄여야 한다.

덧붙여, 책 검색도 너무 경직되어 있다. 아주 조금만 검색어가 어긋나도 검색 결과를 전혀 돌려주지 못한다. ChatGPT에 Clova X에 시대가 어떻게 변하고 있는데 이렇게 맹탕이다.

아마존 같은 테크 기업이 되는 건 기대도 안 한다.

대안이 마땅치 않아 의존하고는 있지만, 아무튼 심히 불만스럽다.

---------- 알라딘 장바구니의 책 한 권마다 들어가는 html 코드 ----------

&lt;tr id="CartTr_189641292"&gt;

    &lt;td align="center" width="46"&gt;

        &lt;input type="checkbox" checked="" name="chkCart.K972635587" class="ShopCode_Basket_Check basket_CheckBox" pricesales="26100" qty="1" mileage="1450" dcprice="2900" itemid="189641292" onclick="BasketSalseSummary(0);"&gt;

        &lt;input type="hidden" name="hidCart.K972635587" value="189641292"&gt;

    &lt;/td&gt;

    &lt;td width="48" bgcolor="#ffffff"&gt;

        &lt;a href="https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=189641292" title="밑바닥부터 시작하는 딥러닝 2"&gt;

            &lt;img src="https://image.aladin.co.kr/product/18964/12/covermini/k972635587_1.jpg" style="width:48px;"&gt;

        &lt;/a&gt;

    &lt;/td&gt;

    &lt;td width="*" bgcolor="#ffffff" align="left"&gt;

        &lt;span class="basket_tit"&gt;

            &lt;a href="https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=189641292" style="color:#386DA1;"&gt;[국내도서] 밑바닥부터 시작하는 딥러닝 2&lt;/a&gt; - 파이썬으로 직접 구현하며 배우는 순환 신경망과 자연어 처리

        &lt;/span&gt;

        &lt;a href="https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=189641292" target="_blank"&gt;

            &lt;img src="//image.aladin.co.kr/img/common/btn_newwindow.gif" style="vertical-align:sub;"&gt;

        &lt;/a&gt;&nbsp;

        &lt;a href="http://www.aladin.co.kr/events/wevent.aspx?EventId=179240"&gt;

            &lt;span class="label_deduct"&gt;소득공제&lt;/span&gt;

        &lt;/a&gt;&lt;br&gt;

        &lt;span&gt;

            &lt;table cellpadding="0" cellspacing="0" border="0" width="100%"&gt;

                &lt;tbody&gt;

                    &lt;tr&gt;

                        &lt;td&gt;

                            &lt;span class="expDeliveryItem"&gt;* 내일 밤 11시 잠들기전 배송&lt;/span&gt;

                        &lt;/td&gt;

                    &lt;/tr&gt;

                &lt;/tbody&gt;

            &lt;/table&gt;

        &lt;/span&gt;

        &lt;font color="#f26122"&gt;스프링 분철 선택 가능&lt;/font&gt;

        &lt;div id="btn_189641292" class="button"&gt;

            &lt;a class="button_small" href="javascript:void(0);" onclick="BasketOptionLayer(2, 189641292, 0);"&gt;변경&lt;/a&gt;

        &lt;/div&gt;

    &lt;/td&gt;

    &lt;td width="130" bgcolor="#ffffff" align="left"&gt;

        정가 : &lt;s&gt;29,000&lt;/s&gt;원&lt;br&gt;

        판매가 : &lt;span class="p1"&gt;26,100&lt;/span&gt;원&lt;br&gt;

        마일리지 : &lt;span class="p2"&gt;1,450&lt;/span&gt;원 (&lt;span class="p2"&gt;5%&lt;/span&gt;)

    &lt;/td&gt;

    &lt;td width="90" align="center" bgcolor="#ffffff"&gt;

        &lt;div class="ordernumber_box"&gt;

            &lt;div class="Hleft2"&gt;

                &lt;div class="number1"&gt;

                    &lt;input type="text" size="2" value="1" name="OrderQty.K972635587" class="input1" onkeydown="QtyApply_Enter(event, 'K972635587', 0);" onfocusout="QtyApply_Focus('K972635587', 0);" onclick="QtyLayerOpen('K972635587');" autocomplete="off" spellcheck="false" data-ms-editor="true"&gt;

                    &lt;img id="Arrow_K972635587" src="//image.aladin.co.kr/img/order/2019/icon_arrow_down_order.png" onclick="QtyLayerOpen('K972635587');" align="absmiddle" style="float:right;margin:6px 0px 0 0;cursor:pointer;"&gt;

                    &lt;div style="clear:both"&gt;&lt;/div&gt;

                &lt;/div&gt;

            &lt;/div&gt;

            &lt;div id="QtyLayer_K972635587" class="list1" style="position:absolute; z-index:99;top:27px;left:5px;display:none;"&gt;

                &lt;ul&gt;

                    &lt;a href="javascript:void(0);" onmousedown="QtyApply_Layer('K972635587', 0, 1);" style="color:#222"&gt;

                        &lt;li&gt;1&lt;/li&gt;

                    &lt;/a&gt;

                    &lt;a href="javascript:void(0);" onmousedown="QtyApply_Layer('K972635587', 0, 2);" style="color:#222"&gt;

                        &lt;li&gt;2&lt;/li&gt;

                    &lt;/a&gt;

                    &lt;a href="javascript:void(0);" onmousedown="QtyApply_Layer('K972635587', 0, 3);" style="color:#222"&gt;

                        &lt;li&gt;3&lt;/li&gt;

                    &lt;/a&gt;

                    &lt;a href="javascript:void(0);" onmousedown="QtyApply_Layer('K972635587', 0, 4);" style="color:#222"&gt;

                        &lt;li&gt;&4lt;/li&gt;

                    &lt;/a&gt;

                    &lt;a href="javascript:void(0);" onmousedown="QtyApply_Layer('K972635587', 0, 5);" style="color:#222"&gt;

                        &lt;li&gt;5&lt;/li&gt;

                    &lt;/a&gt;

                    &lt;a href="javascript:void(0);" onmousedown="QtyApply_Layer('K972635587', 0, 6);" style="color:#222"&gt;

                        &lt;li&gt;&6lt;/li&gt;

                    &lt;/a&gt;

                    &lt;a href="javascript:void(0);" onmousedown="QtyApply_Layer('K972635587', 0, 7);" style="color:#222"&gt;

                        &lt;li&gt;&7lt;/li&gt;

                    &lt;/a&gt;

                    &lt;a href="javascript:void(0);" onmousedown="QtyApply_Layer('K972635587', 0, 8);" style="color:#222"&gt;

                        &lt;li&gt;8&lt;/li&gt;

                    &lt;/a&gt;

                    &lt;a href="javascript:void(0);" onmousedown="QtyApply_Layer('K972635587', 0, 9);" style="color:#222"&gt;

                        &lt;li&gt;&9lt;/li&gt;

                    &lt;/a&gt;

                    &lt;a href="javascript:void(0);" onmousedown="QtyApply_Layer('K972635587', 0, 10);" style="color:#222"&gt;

                        &lt;li&gt;10&lt;/li&gt;

                    &lt;/a&gt;

                &lt;/ul&gt;

            &lt;/div&gt;

        &lt;/div&gt;

    &lt;/td&gt;

    &lt;td width="90" align="center" bgcolor="#ffffff"&gt;

        &lt;table cellspacing="0" cellpadding="1" border="0"&gt;

            &lt;tbody&gt;

                &lt;tr&gt;

                    &lt;td align="center" width="48"&gt;

                        &lt;div class="button_gray"&gt;

                            &lt;a class="button_small" href="javascript:void(0);" onclick="BasketDelete(189641292, 0);"&gt;삭제&lt;/a&gt;

                        &lt;/div&gt;

                    &lt;/td&gt;

                &lt;/tr&gt;

                &lt;tr&gt;

                    &lt;td align="center"&gt;

                        &lt;div class="button_gray"&gt;

                            &lt;a class="button_small" href="javascript:void(0);" onclick="SafeKeepSingle_Add('756067871','K972635587','False')"&gt;보관&lt;/a&gt;

                        &lt;/div&gt;

                    &lt;/td&gt;

                &lt;/tr&gt;

            &lt;/tbody&gt;

        &lt;/table&gt;

    &lt;/td&gt;

&lt;/tr&gt;

이왕 쓴 김에 ChatGPT가 제안한 해결책도 써둔다(내가 전문적으로 판단할 역량은 없지만, 답변 결과를 일부 수정하였다). + 답변 내용 수정, 추가

---------- ChatGPT가 제안한 해결방안 ----------

제시해주신 HTML 코드를 바탕으로 문제와 최적화 방안을 정리해보겠습니다.

1. JavaScript 함수 호출: 해당 코드에서는 여러 자바스크립트 함수가 호출되는데, 특히 삭제 버튼을 클릭하면 BasketDelete(189641292, 0); 함수가 실행됩니다. 이 함수는 삭제 기능을 처리하는 것으로 보이는데, 문제가 발생하면 해당 함수를 첫 번째로 살펴보아야 합니다.

2. 서버 응답: 삭제 버튼을 클릭하면 서버에 요청을 보내 해당 아이템을 장바구니에서 삭제하는 요청을 처리하게 될 것입니다. 서버의 응답이 느린 경우, 혹은 서버에서 오류 응답을 반환하는 경우 문제가 발생할 수 있습니다.

3. 코드 복잡성: 주어진 코드는 하나의 책에 대한 정보와 연관된 버튼, 이미지 등의 세부 요소를 표현합니다. 코드 자체는 복잡성이 크게 높지 않으나, 이런 형식의 코드가 1,000번 반복된다면 전체 HTML 문서의 크기가 커져 로딩 속도에 영향을 줄 수 있습니다.

3-1. DOM 구조: tr 태그 안에 있는 각각의 td는 장바구니의 한 아이템에 대한 정보나 기능을 나타냅니다. DOM의 구조나 스타일이 복잡하면 이로 인해 페이지의 반응 속도가 느려질 수 있습니다.

4. 이미지 로딩: 코드에 포함된 이미지 링크들(책 표지 이미지, 새 창 아이콘, 화살표 아이콘 등)은 페이지 로딩 시간에 큰 영향을 미칠 수 있습니다. 각 이미지의 크기가 크거나, 이미지의 수가 많을 경우 로딩 시간이 증가합니다.

해결 방안:

1. JavaScript 최적화:

  - 'BasketDelete'와 같은 관련 자바스크립트 함수의 동작을 확인합니다.

  - 필요한 경우 개발자 도구의 Network 탭과 Console 탭에서 오류나 경고 메시지를 확인합니다.

  - JavaScript 함수는 외부 파일로 분리하여 필요할 때만 로드하게 합니다.

  - 비동기 로딩: 필요한 부분만 AJAX, Fetch API, async, defer 등을 이용해 동적으로 로드합니다.

  - 이벤트 위임을 사용하여 동일한 이벤트 핸들러를 여러 요소에 적용하는 대신 상위 요소에 한 번만 적용합니다.

cf. 추가 질문 내용 보충

 (1) AJAX (Asynchronous JavaScript and XML):

   - 웹 페이지를 다시 로드하지 않고도 서버와 비동기적으로 데이터를 교환할 수 있는 방법입니다.

   - XMLHttpRequest 객체를 사용하여 구현합니다.

   - 주로 XML 혹은 JSON 데이터 형식으로 데이터를 주고 받지만, 다른 형식도 가능합니다.

   - 페이지의 일부만 업데이트 할 때 주로 사용됩니다.

  (2) Fetch API:

   - 서버와 비동기적으로 통신하는데 사용되는 모던한 API입니다.

   - XMLHttpRequest의 대체제로 생각될 수 있으며, 보다 간결하고 유연한 API를 제공합니다.

   - Promise 기반으로 동작하며, async/await와 함께 사용하여 가독성 좋은 코드를 작성할 수 있습니다.

  (3) async (attribute in script tag): 

   - HTML에서 script 태그에 사용되는 속성입니다.

   - async 속성이 있는 스크립트는 페이지의 파싱과 동시에 다운로드되며, 다운로드 완료 즉시 실행됩니다.

   - 페이지의 파싱을 막지 않기 때문에 비동기적으로 로딩되는 효과가 있습니다.

  (4) defer (attribute in script tag):

   - HTML에서 script 태그에 사용되는 속성입니다.

   - defer 속성이 있는 스크립트는 페이지의 파싱과 동시에 다운로드되지만, 파싱이 완전히 끝난 후에 실행됩니다.

   - 스크립트의 순서가 중요할 때 유용하게 사용됩니다. (즉, 여러 개의 defer 스크립트는 순서대로 실행됩니다.)

요약하면, AJAX와 Fetch API는 웹 페이지와 서버 간의 비동기 통신을 위한 방법이며, async와 defer는 script 태그의 다운로드와 실행 방식을 제어하는 속성입니다.

2. 서버 응답 문제: 삭제 버튼을 클릭했을 때 서버에서 적절한 응답을 하지 않거나 지연될 수 있습니다.

  - 서버의 로그를 확인하여 오류 메시지나 원인을 찾습니다.

  - 서버의 처리 속도가 느릴 경우, 백엔드 최적화를 고려합니다. 데이터베이스 쿼리 최적화, 서버 설정 최적화 등을 통해 서버 응답 시간을 줄입니다.

  - 서버에서 HTML을 미리 렌더링하여 클라이언트에게 전송함으로써 초기 로딩 속도를 향상시킬 수 있습니다.

  - CDN 사용: 이미지나 스크립트 파일을 분산된 서버에서 로드하여 로딩 속도를 향상시킵니다.

3. 코드 간소화, 캐싱: HTML 구조를 간단하게 만드는 것이 중요합니다.

  - 불필요한 div 또는 span 태그를 줄이는 등 불필요한 중첩된 태그 구조나 스타일을 최소화합니다.

  - CSS 스타일은 가능한 한 외부 파일로 분리합니다(이미 분리되어 있다면 중복 스타일 제거).

  - 웹페이지의 정적 리소스(CSS, JS, 이미지 등)에 대한 캐싱 정책을 설정합니다.

  - 데이터베이스 쿼리 결과에 대한 캐싱을 고려합니다. 

4. 이미지 등 페이지 성능 최적화:

  - 이미지의 크기와 해상도를 줄입니다.

  - 이미지의 포맷을 웹에 최적화된 형식으로 변경하여 로딩 시간을 줄일 수 있습니다. 예를 들면, JPEG나 PNG 이미지를 WebP 포맷으로 변경하는 것이 효과적일 수 있습니다.

  - 페이지 로딩 시 모든 이미지를 한 번에 로드하는 대신, 사용자의 스크롤 위치에 따라 필요한 이미지만 로드하는 Lazy Loading을 적용하여 초기 로딩 속도를 개선합니다.

  - 데이터 페이징: 1,000권의 책을 한 번에 표시하는 대신 페이지별로 나누어 표시합니다. 사용자가 필요한 부분만 로드하여 전체 로딩 시간을 줄입니다.

결론적으로, 웹 페이지의 성능 문제는 다양한 요인에 의해 발생할 수 있습니다. 따라서 개발자 도구의 Network 탭이나 Performance 탭을 사용하여 웹 페이지의 로딩 속도를 분석하고, 구체적인 문제점을 파악하는 것이 좋습니다.

---------------------------------------------

다음은 순서대로, (장바구니에서 책을 삭제하였을 때) 개발자 도구의 Network 탭, Performance 탭 캡쳐 화면(서재에 이미지를 첨부하려니 해상도가 떨어진다)

나도 알라딘을 이루는 일원이라는 생각이 있고, 애정이 있으니 쓴 글이다.

부디 알라딘 관계자가 진지하게 읽어주기 바란다.

읽어주시는 분들께서도 공감하시면 "좋아요" 눌러서 올려주시면 감사하겠습니다.