🌟 이번주는 영화 마션에 나오는 마크와트니 통신을 구현해 보았습니다 🌟
이번 코드의 주된 핵심은 promise였으나 아직까지 비동기를 완벽하게 이해하지 못한 저는 promise로 구현을 할 수 없었습니다.
그래서 선택한 것은 setTimeout과 setInterval이였죠...😭
하지만 저는 포기하지 않고 공부해서 이번 주말동안은 꼭 하나의 기능을 promise로 구현해볼 계획입니다 😄
canvas VS figma
canvas
저번 CS를 공부할땐 canvas로 차트를 그리는 연습을 하였었다. 하지만 그때도 그렇고 이번 공부를 할때도 그렇고 느낀것은 확대를 할경우 이쁘지않다.
즉, 화질이 깨진것과 같은 현상이 발생하였다. 이유는 canvas는 px단위이기 때문이다. 😭
또한 아직까지 내가 제대로 사용할 줄 모르는 것일 수 도 있지만 각도를 하나하나 내가 계산해서 그려주어야 하기 때문에 그러한 점이 조금 불편하였다.
따라서 이번은 figma를 통한 SVG를 이용해 보기로 하였다. 😄
figma
figma는 이번 공부를 하면서 처음으로 알게되었다. 피그마 또한 캔버스 창에 우리가 원하는 도형을 올려놓고 재조합하거나 그림을 그리는 형식이지만 최종적으로는 PNG, JPG, SVG, PDF 등으로 export 할 수 있다.
여기서 선택한 것은 SVG이다.
SVG는 벡터를 기반으로 그래프를 그리고, 벡터 기반의 그래픽은 각 요소의 path를 조합하여 나타내게 된다.
이러한 이유 때문에 작은것 부터 큰것까지 해상도가 변하거나 확대하더라도 선명하게 표시된다. 단, 도형이 복잡해지거나 커지게 되면 그에 따른 path도 증가하게 된다. 그렇게 된다면 좌표의 수가 너무 많아져 애니메이션 같은 요소를 사용하기 힘들어지게 된다. (캔버스로 애니메이션을 많이 구현하는 이유이다.)
따라서 그래픽을 많이사용하는 경우에는 canvas를 이용하고,
그래프나 지도를 사용하는 것은 SVG가 적합한것 같다.
또한, 이번 공부를 통해 가장 큰 장점으로 느낀것은 path에 id 또는 class를 추가할 수 있다는 것이였다.
이렇게 된다면 💥addEventListener을 통해 각각의 요소들을 제어할 수 있게된다.💥 이것이 figma를 이용하게 된 가장 매력적인 요소였던 것 같다.
이제부터 하나하나 알아보도록 하자
figma에서 SVG, path 사용하기
위와 같이 path에 하나하나 class를 부여할 수 있다.
DOM을 이용하여 document.querySelectorAll(".blink_list")를 변수에 지정하고 index 번호 EX) lists[0],lists[1] 로 하나하나 스타일을 추가해주면 된다.
이 방법은 추후에 화살표가 번호를 가르켰을때 깜빡임:bulb: 효과를 주는데 유용하게 사용되었다.
일단 구현장면을 하나하나 보도록 하자 👊👊
지구에서 화성으로 ✉️ 전송하기
예시로 hello를 치고 Enter를 누르면 전송하기 키가 나타나게 설계하였다.
위의 사진처럼 .send_button_off class를 add, remove 하는 방식으로 button의 display 조절하였다.
화성에서 수신 확인하기
전송하기 클릭시 화성은 깜빡이게 됩니다.
animation으로 blink효과를 주었고 setTimeout으로 2.4초 후에 클래스가 제거되어 깜빡이는 animation을 제거하였습니다.
해석하기
지구에서온 메세지가 16진수로 변환되어 화살표가 하나하나 가르치면 그것을 적어주게된다.
setInterval로 2.5초마다 한번씩 동작되게 만들었습니다.
이 부분에서 함수의 각각의 동작에 setTimeout를 해주다보니
아 ❗️❗️ 이곳에서 promise를 이용해야 되겠다! 라는 생각이 들게 되었다. 아직은 리펙토링을 완벽하게 하지 못하였지만 promise를 사용하여 하나의 기능은 꼭 동작하도록 만들어 볼 계획이다.
돌림판에서 출력된 16진수의 값을 받아와 str변수에 하나씩 저장하고 입력된 값과 같을경우 한글자씩 16진수를 string로 바꾸어주어 다시 hello가 출력되게 하였다.
회고
이번 공부를 하면서 내가 원하는 기능을 구현해보는데 중점을 두었다. 결과적으로는 내가 만들고싶은 기능들을 만들 수 있는 좋은 기회였지만 한편으로는 promise를 사용해보지 못한점이 아쉬운 점으로 남았다.
프론트앤드 개발자로서는 꼭 알아야할 비동기 개발 기술이기 때문에 지금당장은 내것으로 만들지 못하더라도 계속해서 공부해 꼭 내것으로 만들고 앞으로의 나의 코딩에 적용시킬 계획이다.
