주간 회고 [220321 ~ 220327]

📓 기초부터 완성까지, 프런트엔드

6장. 자바스크립트 심화 - 실행 컨텍스트

7장 BOM과 DOM

8장 브라우저 렌더링 과정

9장 네트워크 통신

🏨 테마호텔게임

격리하는동안 예전부터 해보고 싶었던 테마호텔게임을 바닐라 자바스크립트로만으로 만들기로 했다.
게임 방식은 설계/고용 버튼으로 원하는 객실이나 시설을 추가하고 직원도 고용할 수 있다. 호텔에 머무는 손님들이 불평하지 않도록 평판을 잘 유지하면서 돈을 모으면 그 다음 단계로 올라간다. 단계별로 새로운 설계 옵션이 생겨서 추가하는 재미가 있었다.

플래시 게임이라 지금은 기존 게임을 실행해볼 수가 없다. 재밌었는데 아쉽다😭

설계

컴포넌트 기반으로 상태 관리를 통해 UI를 업데이트하기로 했다.
화면 하단의 컨트롤러 영역 컴포넌트(Controller.js)
호텔 영역 컴포넌트(Hotel.js)로 영역을 분리하였다.

그리고 Controller의 기능 또는 버튼별로 컴포넌트를 분리하였다.

구현

엔트리 포인트(index.js)에서 Hotel과 Controller를 생성한 모습이다.
Hotel 영역은 설계 기능 테스트를 위해 임시로 설치 가능한 영역의 좌표를 나타나게 하였고 Controller의 각 Control들은 우선 텍스트로만 위치를 나타내도록 하였다.

제일 먼저 구현한 기능은 객실/시설 추가였다.
기존 게임에서는 하단 컨트롤러의 중앙에 위치한 🔨 버튼을 클릭하면 작은 모달창이 나타나고 모달 좌측에는 설치할 유형을 선택할 버튼이 나타나고 각 버튼을 클릭하면 유형에 해당하는 옵션이 우측에 나타난다.

옵션을 클릭하면 모달이 사라지고 Hotel 영역에서 객실을 추가할 수 있는 위치를 클릭하면 객실이 추가된다.

Hotel의 객실 이미지가 없기 때문에 우선 build된 영역은 background-color를 변경하는것으로 임시 구현하였다.

• build 버튼 클릭 시 추가할 객실/시설의 카테고리를 buttonlist로 나열
• 특정 카테고리 버튼 클릭 시 해당하는 설치 옵션들을 buttonlist로 나열
  (Rooms를 선택하면 Standard, Suite, Presidential Suite라는 옵션을 선택할 수 있고, Service를 선택하면 Internet, Laundry등 옵션 선택 가능)
• 옵션 버튼 클릭 후 Hotel 영역에 마우스를 올렸을 때 설치 가능한 칸인지 확인 후 background-color 변경하고, 마우스가 해당 칸을 벗어나면 background-color를 원래대로 복구
• 설치 가능한 영역 클릭 시 background-color 변경
• 옵션별로 background-color를 다르게 표현하기 위해 build 버튼의 상태(state)에서 관리
• 이미 객실이 위치한 자리에는 새로운 객실을 추가할 수 없도록 클릭 이벤트 방지
• 옵션별 size를 관리하여 차지하는 공간을 계산해서 background-color
  (ex. Standard는 size가 1이므로 클릭하는 칸의 bgColor만 변경하면 되지만, Suite는 size가 2이기 때문에 클릭하는 칸과 그 다음 칸의 bgColor까지 변경해주어야 한다. 가장 우측의 칸[x, 9]를 클릭하면 해당 칸과 그 이전 칸의 bgColor를 변경하도록 분기 처리)
• 객실/시설을 추가하려는 칸의 아랫칸이 비어있으면 추가할 수 없음 (건물이기 때문에 아래부터 추가해야함)

🎮 상태관리

컴포넌트와 상태관리 기반으로 만들다보니 상태 관리가 점점 꼬여가는게 보였다. 수정하기 더 어려워지기전에 찾아보다가 컴포넌트와 상태관리를 너무 너무 잘 설명해둔 블로그를 찾았다.

• Vanilla Javascript로 웹 컴포넌트 만들기
• Vanilla Javascript로 상태관리 시스템 만들기
  
• Vanilla Javascript로 가상돔(VirtualDOM) 만들기
  

요약하자면

1. state라는 객체에 상태값을 저장한다. 이 때 객체에는 UI 관련 상태값일수도 있고 UI와는 관련없는 기능을 위한 상태값을 추가할 수 있다.
2. state는 setState라는 함수를 통해서만 변경할 수 있다. 그리고 setState가 실행되면서 state가 변경되면 render를 실행시켜 UI를 업데이트한다.
3. 이벤트 처리는 처음 컴포넌트가 생성될 때에 등록할 수 있게 컴포넌트 자체에 이벤트를 등록하고 이벤트 버블링을 통해 하위 요소들의 이벤트를 수행하도록 한다.
4. 컴포넌트를 기능별 또는 UI별로 분할하고 상태 관리는 중앙에 저장소를 두어 관리하면 편리하다. 단, 이 저장소는 특정 컴포넌트에 종속적이지 않아야 한다.
5. Redux는 React에서만 사용하는 상태 관리 라이브러리가 아니라 JS에서는 항상 사용할 수 있다.

Vanila JS로 가상 DOM을 구현하는 포스트도 읽어봐야겠다.

📚 책

1. 방금 떠나온 세계

단편 소설은 주인공들의 이름과 관계를 외우고 스토리를 이해하면 끝나버린다. 그래서 단편보다는 장편을 선호하는 편이다. 이 책은 SF 단편 소설집인데 단편이라서 다행이고 작가에게 고마웠다.

총 7편의 소설이 실려있는데 전부 다 정말 재밌고 와 어떻게 이런 상상을 하지?하는 장면들이 꽤 많았다.

소설 하나를 읽는데 30분에서 1시간 정도가 걸렸는데 모든 이야기가 짧은 시간에 몰입하게 만들었고 읽은 시간보다 긴 여운을 남겼다. 그래서 하나를 다 읽고 나면 그 다음 소설을 바로 읽지 않았다. 방금 읽은 소설을 정리하면서 인상 깊은 부분을 찾아서 다시 읽기도 하였다.

이전에 김초엽 작가님의 우리가 빛의 속도로 갈 수 없다면도 읽었는데 이 책이 더 흥미로웠다. 그래서인지 우리가 빛의 속도로 갈 수 없다면를 다시 한 번 읽어볼까 싶다.

왜 도서관 갈 때마다 작가님의 책은 늘 대출이 되어 있는지 알 거 같은 책이었다.

2. 프로그래머의 뇌

eletron으로 만들어진 오픈 소스를 분석중인데 규모가 크다보니 이 파일 저 파일 옮겨다니며 코드를 읽고 분석하는게 여간 쉬운 일이 아니었다.

이 얘기를 했을 때 추천받은 책이다.

코드를 작성하고 읽는 과정을 인지 과학으로 접근해서 효율적으로 프로그래밍을 위한 팁을 알려준다. 코드를 읽을 때 혼란이 생기는 이유는 그 프로그래밍 언어 또는 도구에 대한 지식과 정보가 부족하고 코드가 너무 복잡하면 두뇌가 처리할 능력이 부족해서다.
때문에 더 잘 기억하고 더 잘 처리하기 위해서는 비슷한 정보를 묶고 저장해두었다가 잘 호출할줄 알아야 한다.

생소한 코드를 읽을 때에는 내가 읽기 편한대로 코드를 변경해볼줄도 알아야하고, 계산이 복잡할 때에는 중간 중간 계산 값을 기록하는 것도 좋은 방법이다.

또한 코드를 모니터에 띄워서 눈으로만 읽는 것에서 나아가 종이에 프린트하거나 직접 손코딩을 하면서 메서드나 변수별로 표시해가면서 어디서 불러오고 어디서 호출하는지를 파악하는 데 많은 도움이 되었다. 아날로그가 익숙한 나한테 코드를 프린트해서 읽어나가는 방법은 효과가 좋았다.

뒤로 갈수록 인지과학 관련 개념이 깊어져서 어려웠지만 코드를 읽고 작성하는데 도움을 주는 책이라 읽어보길 잘한거 같다.

🐝 차주계획

• Vanilla Javascript로 가상돔(VirtualDOM) 만들기
  
• Redux 공부하기
• Eletron 프로젝트 데이터 호출 분석

🛏 주간 회고 [220314~220320]

코로나 핑계로 주간 회고 생략했음..ㅎ

1. 프로그래머스 데브 매칭의 연습 문제 해석 참고해서 프로그램 구현
2. 테마호텔 게임 설계