정보전달 목적이 아닌 치열했던(?) 도전과정을 잊지않기위해 그냥 기록하는 글입니다!
한두달 전 쯤 부터 쭉 진행해오던 flex & grid 책 출판 작업이 끝났다!
https://ridibooks.com/books/2773000058
위 링크로가면 내가 집필에 참여한 알잘딱깔센 flex & grid 책을 구매 가능하다!
flex & grid 책은 처음 입문하는 초보자들을 위해 무료 전자책으로 출판됐으니 많은 관심 부탁.. 🤍
이후 간간히 회의해오던 flex & grid 웹페이지 만들기에 집중하게 됐다.
오픈소스 기여라고 해야할지, 협업이라고 해야할지 애매한 느낌이긴한데 우선 이렇게 뭔가 체계적인 협업이 처음이라 정말 신기한것도 많고 배운것도 많았다. 구조 틀 짜는거나 컴포넌트화 하는 것 등.. 정말 신기한 것 투성이였다.
우리가 만들고 있는 홈페이지의 메인부분이다.
나는 여기서 캐러셀 안에 들어가는 컴포넌트 + 자동캐러셀 기능을 맡았는데
컴포넌트는 이전에 미리 만들어두고 간단하게 자동캐러셀까지 구현을 해놨었다.
이렇게 총 3가지 경우의 디자인을 각각 만들고, 다크모드까지 컴포넌트를 구현한 후
자동으로 넘어가는 캐러셀 기능을 구현하기위해 클래스를 조작하여 setInterval을 통해 자동으로 넘어가게 구현했다! 이렇게 이것만 할땐 간단해보이던 자동캐러셀이었는데 말이지..
3000줄의 코드속에서 내가 필요한 코드 찾기..
근데 이게 메인페이지에 코드에디터기능과 합쳐지면서 복잡해져 버렸는데.....
이 에디터 기능이 더해진 컴포넌트를 내가 자동으로 돌아가게 구현을 해야했는데 editor.js파일을 열어보니 코드가 3000줄가까이 됐다
코드에디터 기능의 자바스크립트 파일인데, 에디터기능이 많이 복잡하다보니 코드수가 엄청 길었다..
마지막 줄이 2714.... 내가 잘못본건가? 싶을정도로 어마어마한 코드수,, 아직 아가개발자인 나에게 저만큼의 코드는 너무 너무 낯설었다.
정말 자스 신생아인 내가 이렇게 많은 코드를 어떻게 해석하며.. 또 여기서 나에게 필요한 코드를 찾아야 한다니 정말 막막했다ㅠ
무작정 개발자 도구켜서 실행될 때 어떤 변화가 있는지 캐치하고, 클래스명이 추가되는경우 그 클래스명을 하나하나 검색해보고 또 거기서 물려있는 다른 메소드들을 타고타고 검색하고 검색하고........
몇시간을 그렇게 삽질하고 하루종일 코드만 들여다본 결과 내가 구현하는데 필요한 메소드를 찾게됐다..!!!
저기 _snippetChangeEventListener() 를 사용하면 인덱스에 따라서 코드와 프리뷰가 변화되도록 되어있어 이걸활용해서 이렇게 코드를 짤 수 있었는데, 저렇게만 코드를 짰을 경우 인디케이터 (버튼) 은 움직이지 않았다. 여기서 이 기초코드(?)를 다듬고 인덱스도 내가 임시로 만든게아닌, 이 파일내에서 사용하는걸 찾아서 바꾸며 인디케이터도 함께 변화시키는 코드를 짜게됐다.
아까전의 기초코드를 토대로 업그레이드 시킨 코드,,! 이제 좀 그럴싸해졌다. 인디케이터도 프리뷰,코드와 함께 같이 자동으로 넘어간다 ㅎㅎ
근데 여기서 발견한 문제점 .. 그냥 냅두기만 하면 잘 작동하는 것 같지만, 자동으로 넘어가는 캐러셀을 선택하게 됐을 때 선택된 인디케이터가 2개가되면서 인덱스가 꼬여버렸다..!! 근데 이게 선택했을 때 에디터도 편집을 할 수 있게 해야해서 그냥 인디케이터를 선택하면 자동캐러셀이 아예 멈추게 구현하기로 했다.
setInterval()과 함께 사용되는 clearInterval() 함수를 사용하고, 클릭이벤트 안에 같이 넣어줘서 indicator를 클릭했을때 프리뷰와 코드가 멈추는거는 구현했으나 .. 이게 플렉스와 그리드 둘 다 선택한 경우는 괜찮은데, 하나만 선택했을 경우 인디케이터가 한번 쉰 후 옆에 인디케이터를 따라서 혼자 자동화되는 오류가 생겨버렸다..
(기다리면 움직입니다)
플렉스(보라색)와 그리드(주황색)의 indicator가 index를 공유하고 있어서 그런것 같다 싶어서
분리해봤는데 불가능했따.. 그래서 다시 되돌리기..
왜 안될까 ㅠㅠ
여기서 인디케이터 박스랑 인디케이터 버튼들을 만드는데 같은 이름으로 만들어져서 그런건가? 싶은 생각에
클래스를 추가해보았당 그럼 따로 관리할 수 있지 않을까? 싶어서 추가한 클래스로 이것저것 만져보다 이것도 실패...
그러다 다시 아무래도 인덱스 문제인 듯 해서 다시 분리해보고,, if문도 써보고 이것저것 시도해봤는데 다 실패해버렸다
//플렉스랑 그리드의 클릭이벤트리스너도 분리하고 자동캐러셀도 분리해서
플렉스가 클릭됐으면 플렉스 캐러셀 멈추기, 그리드가 클릭됐으면 그리드 캐러셀 멈추기.. ??이런 가설도 세워보고 클릭이벤트도 플렉스따로 그리드 따로 만들어봤다가 막 이런저런 시도를 많이했는데 될것 같으면서도 안된다.
아마 아직 아가인 내 자스 실력이 문제인 듯 하다....... 속상해 😭
몇시간동안 삽질했지만 결국은,, 원점으로 돌아와버린 내 코드,,
indicator 뿐만 아니라 에디터를 클릭했을때도 자동캐러셀이 멈추는것도 하고싶었는데 3000줄의 코드속에서 이것저것 찾고 활용하기는 터무니없이 부족한 내 실력이 발목을 잡아버렸다.
뭔가 이론상으로는 간단하게 구현이 될 것 같아서 하루종일 이코드 저코드 작성해봤는데 아직 해결법을 찾지못했다.. 꼬박 7시간정도를 정말 코드만 짜는데 쓴 것 같다. 오는 주말을 반납해서라도 더 시도 해보려했는데, 애디터 만드신 분께서 에디터의 자바스크립트 파일이 3000줄이나 되는만큼 너무 복잡하다고 나머지 오류를 대신 해결해주시기로 했다! 감사하면서도,, 약간 아쉽기도하다.
그래도 이 작은 실력으로 3000줄이나 되는 코드를 해석해보려고 도전하고, 그중 내가 필요한 코드를 하나라도 찾아서 적용해본 것에 만족하려구한다~! 좋은 경험이었어.. 🔥
이 어마어마한 에디터 기능을 만드신 대단하신분께.. 꼭 나중에 이문제를 어떻게 해결하셨는지 해결법을 듣고싶어서 같이 협업하는분을 통해 이야기해놨다..ㅎㅎ 몇일동안 꽤 많은 시간을 쏟은만큼 해결방법이 너무너무 궁금해..
+코드리뷰를 해보다..!
뭔가 지금까지 내가 짠 코드를 리뷰해본적이 많지 않았는데, 이번기회에 자바스크립트 코드리뷰를 할 수 있게돼서 너무너무 좋은 경험이었다! 원래 이 자동캐러셀 기능을 나와 다른한분 더 해서 두명이서 각자 짜오기로 했어서 내가 작성해온 코드를 설명해드리는데 내가 짠 코드임에도 뭔가 술술 설명하지 못하는게 느껴져서 '코드리뷰에 내가 아직 익숙하지못하구나'를 느꼈다..! 이런 연습을 많이 해봐야겠다. 그리고 또 내가 저 삼천줄짜리 코드를 완벽히 이해하고 짠게아니라 이거같은데,,? 어 맞네!? 하면서 완성된거라 더 그런 것 같았다. html, css코드는 몇번 코드리뷰를 해봤는데 괜찮았던걸 보면 JS 실력을 더욱 키운다면 해결되지 않을까 싶다 ..!! 앞으로 코드리뷰 열심히 해봐야겠다.
