Junsik
270
2018-08-03 15:09:26
11
2878

100,000개의 아이템도 거뜬한 셀렉트박스 만들기 (1/2)


안녕하세요.

아래의 링크는 100,000개의 아이템을 넣어도 느려지지 않는 셀렉트박스 컴포넌트를 만드는 것에 대한 글입니다.

원래 사내 게시판에 올렸던 건데 이번에 회사 기술 블로그에 올라갔길래 여기에 공유합니다~

총 2편 중 1편으로.. 많은 데이터에 해당하는 태그들을 생성할 때 느려지지 않도록 성능을 튜닝하는 것에 중점을 두고 있습니다.

스크롤 등을 다룰 2편은.. 언제 쓰게 될지 아직 모르겠네요..;

http://meetup.toast.com/posts/160

누군가에겐 도움이 되었으면 좋겠습니다.

감사합니다.

12
15
  • 댓글 11

  • 거북왕
    28k
    2018-08-03 16:29:55

    좋은 글 잘 보왔습니다.


    이렇게 토스 홍보도 되고

    지식 전달도 되는 군요

    0
  • Junsik
    270
    2018-08-03 17:02:12

    '토스'가 '토스트'를 오타내신 걸 거라 믿겠습니다 ㅎ

    0
  • 서비스지향개발자
    7k
    2018-08-04 20:55:53

    2010년도에 신입때 고민했던 내용이네요. 

    세금계산서 항목을 동적으로 추가해야하는데 1만개는 거뜬히 처리하게 만들고 싶었는데..

    현실은 몇천개가 추가되니 1초이상 걸리며 버벅였습니다.

    그때 스크롤 이벤트를 따라서 조금씩 추가하는 방법을 생각했었는데 

    up스크롤 down스크롤 할때 위치잡고 스무스하게 옮길 방법이 복잡할 것 같아서 포기했었죠.

    그리고 정말 현실은 항목을 100개이상 입력할일이 없다는 것이었지만 이왕이면 성능 좋은 코딩을 하고싶어서

    여러가지 시험을 했었습니다.


    그리고 react와 angular라는 것을 알게되고 그것들은 가상돔을 이용하기 때문에 10만개쯤은 한번에 넣어도 

    빠르다는 것을 알았고 지금은 angular를 하고있습니다. 


    그걸 정보공유 하려고 글을 계속 읽었는데 javascript에 DocumentFragment 라는 가상돔 처리 방법이 등장했군요.

    30개씩 안나누고 한번에 전부 넣어도 될것 같은데 한번 테스트 해보시는게 어떠실까 궁금하네요..

    0
  • 욥욥욥
    892
    2018-08-05 23:03:34

    음.. js 비동기 순차처리의 한 방법으로 참고할게 있긴 합니다만 단순 돔 생성이라는 본래 목적에는 과하게 돌아간 것 같습니다..

    그냥 슥 몇가지 보이는게 있는데 모바일이라;

    아무튼 정성글 잘 보았습니다 ~!


    0
  • AliveDaily
    265
    2018-08-06 03:25:30

    @서비스지향개발자

    몰랐던 정보 알려주셔서 감사합니다. 성능에 관해 관심은 있어도 정확한 수치는 몰랐는데... 리액트를 요즘 많이 눈여겨보고있는데 (기존엔 angularjs 사용했습니다!) 빨리 적용해보고 싶네요!

    0
  • 봄이슬
    198
    2018-08-07 15:55:25

    이런글 너무 좋아요!

    아직 극단적으로 큰 데이터를 다루지 않고 있지만 그래야할 상황이 온다면 꼭 사용해보고 싶네요.


    실제 토스트에서는 이러한 업무를 하시는건가요? 취미로 포스팅하시는건가요?

    0
  • 서노
    128
    2018-08-08 02:40:12
    좋은 글 잘보고 갑니다.
    0
  • 아스키
    9k
    2018-08-12 17:52:17

    아..네이버에 계시는군요...ㅎㅎ

    0
  • nekoko
    21
    2018-08-20 14:25:08

    100000개나 된다면 셀렉트박스에 넣는 화면설계 자체가 잘못된 것이 아닌가 생각했는데

    그런 것도 아닌가보네요

    0
  • ksshim86
    914
    2018-11-01 12:11:32

    좋은 글 감사합니다. 혹시 2편이 나왔나요?

    0
  • Junsik
    270
    2018-11-01 15:26:08

    @ksshim86

    제가 요즘 좀 바빠서 2편을 못 쓰고 있습니다 ㅠ

    0
  • 로그인을 하시면 댓글을 등록할 수 있습니다.