구현할 기능

express 환경 설정

• [x] 지난 주에 했던 폴더구조/설정대로 세팅하기

화면 그리기

• [x] 원형판 그리기
• [x] 가운데에 화살표 그리기
• [x] 화성 쪽 칸 만들기
• [x] 지구 쪽에도 똑같이 칸 만들기

JavaScript

• [x] 문자를 16진수로 바꿔주는 함수

<aside> 📝 예) HELLO → 48, 45, 4C, 4C, 4F

• 한 글자씩 바꿔야 함
• 즉, 문자열을 쪼개서 배열에 한 글자씩 넣자.
• map 을 이용해 각각을 10진수 아스키 코드로, 다시 map 을 이용해 각각을 16진수로
• 리턴은 하나의 문자열로 합치는데, 요소 사이에 공백을 넣어주기

</aside>

• [x] 16진수를 문자로 바꿔주는 함수

<aside> 📝 예) 48 45 4C 4C 4F → HELLO

• 우선 공백 기준으로 잘라서 배열에 넣어준다. [48, 45, 4C, 4C, 4F] 이렇게 된다.
• map 을 이용해 각각을 10진수로, 다시 map 을 이용해 각각을 문자로
• 리턴은 하나의 문자열로 공백 없이 합치기

</aside>

• [ ] 돌려돌려 화살표 함수

  <aside> ✏️ ‣ 16진수로 바꾼 배열 ‣ 요소 하나씩 순서대로 실행한다. ‣ ↑ 얘가 비동기면 돌려돌려가 진행되는 와중에 다른 일을 할 수 있다는 건데.. 그래도 되는 건가? ‣ 요소 하나를 보면,

  1. 한 글자씩 쪼갠다. 예) '68' → '6', '8' - 뭔가 함수 전역에 prevNum 이런 변수가 있어야 할 듯
  2. 각각을 10진수 숫자로 바꾼다. 각도 계산하기 위해. 예) '6' → 6, 'C' → 12
  3. 각도 구하기 3-1. 10진수 숫자 받는다. 3-2. 시계, 반시계 판단하고 3-3. 판단된 결과에 따라 각도를 조절하여 리턴
  4. 각도를 받아서 화면에 표시 (rotate 속성 바꿔주기)
  5. 화면에 표시된 숫자를 받아서 반짝반짝 5-1. 수신모드에서는 화면에 표시될 때 해당하는 숫자를 <송수신정보> 에 나타내줌 - 이 데이터를 1에서 그냥 받은 걸로 처리해야 하나 아니면 각도를 역계산해서 10진수를 구하고 그걸 다시 16진법으로 바꿔야 하나? 그냥 5에 들어온 숫자 10진수로 바꾸면 되나..?
  6. 이렇게 해서 모든 요소를 다 돌면 발신모드, 수신모드 모두 끝. 지구로 보내기, 화성으로 보내기 버튼 활성화 시키기

  </aside>

  • [x] 한 글자씩 쪼개는 함수
  • [x] 16진수를 10진수 숫자로 바꿔주는 함수
  • [x] 시계, 반시계 판단하는 함수
  • [x] 각도 구하는 함수
  • [ ] 각도를 받아서 화면에 표시하는 함수
  • [ ] 불 반짝반짝하는 함수
  • [ ]

event handler

• [x] 발신정보입력 칸에 입력 이벤트 - 입력하는 순간 바로 16진수로 바꿔서 송수신정보 에 표시

• [ ] 지구로 보내기 버튼 클릭 이벤트

  • [x] 송수신정보에 찍힌 스트링을 배열에 담고, 두 창의 내용을 초기화

  <aside> ✏️ * 배열에 담긴 것은 알파벳 하나를 16진수로 바꾼 것. 예) hey → [68, 65, 79]

  </aside>

  • [ ] 돌려돌려 함수 실행
  • [ ] 화살표 돌리기가 다 끝나면 버튼 다시 활성화

• [ ] 화성으로 보내기 버튼 클릭 이벤트

  • [ ] 송수신정보에 찍힌 스트링을 배열에 담고, 두 창의 내용을 초기화 (지구로 보내기 와 동일)
  • [ ] 돌려돌려 함수 실행 (지구로 보내기 와 동일)
  • [ ]

• [ ] 해석하기 버튼 클릭 이벤트 -