210215_TIL

Start Think: 
설날연휴 끝나고 산뜻한 월요일이었다.

설날동안 틈틈히 토이도 다시 풀어보고, 리액트 책도 읽어서 그런지 마음의 압박으로 부터 한결 자유로워졌다.

ㅎㅎ

 

그럼에도 갈 길은 아직 멀다.

 

천천히 다시 속도를 올려 페이스를 끌어올려 보려 한다. 핫둘핫둘

🎄오늘 한 일

---

✔️ 1.  (ToyProbem) - TreeBFS() 

• Tree구조로 작성되어 있는 노드들이 존재한다.
  이 중 root노드를 받아서 너비우선탐색(BFS)를 실행하여 각각의 노드를 순서대로 저장된 배열을 리턴하는 함수를 작성하는 문제이다.   
• 이 문제는 BFS탐색을 queue의 개념을 활용하여 푸는 방법으로 접근을 했다면 쉽게 풀어낼 수 있었을 것이다.
  아쉽게도 첫 1시간 동안은 그 핵심 idea를 떠올리지 못하고, 재귀를 통해 구현해보려고 하다가 실패하였다.
  queue의 원리(FIFO)를 아주 간단하게 필요한 만큼만 사용하는 reference 코드를 참고하여 이후 다시 풀 때 막힘없이 풀어낼 수 있었다,

✔️ 2. React 개념관련 CheckPoint

• 지난 주 배웠던 리액트의 기본 개념들에 대해 간단한 퀴즈들을 통하여 점검하는 시간을 가졌다.   
• state와 props 에 대해서는 중요하다고 생각해서 잘 알고 있었지만, 오히려 기본적인 JSX의 개념과 문법들에 대해서 확신이 없는 부분이 많이 있었다. 
  CodeStates의 형우님이 진행을 해주셨는데, 이 시간에 대한서 굉장히 공들여 섬세하게 준비하시고, 침착하게 교육을 이끌어나가시는 모습이 정말 인상적이었다.   

✔️ 3. Recast App 구현(Front-end)

• Recast App 은 가장 심플한 UI와 기능을 가지고 있는 유튜브 클론앱이라고 할 수 있다.
  오른쪽에 동영상리스트가 존재하며, 해당 동영상을 클릭 시 왼쪽의 메인 영역에서 클릭한 영상이 재생되도록 하는 App이다.
• 이번 Sprint 에서는 기본적으로 CSS와 Component는 작성되어 있지만, data의 연결이 되어 있지 않은 상태에서 가짜데이터를 이용하여 컴포넌트들간의 상호작용을 구현하는 것을 목표로 진행되었다.
  YouTube Data API를 통해 받아올 수 있는 data의 형식과 똑같은 FakeData 더미를 이용하여 state로 관리하고, 필요한 컴포넌트들에 적절하게 props를 통해 데이터를 흘려보내주는 것을 집중적으로 연습하고, 코드로 구현하였다.
  
  또한 Stroybook과 React Developer Tools를 이용하여 실제 개발 환경에서 작업효율을 높이는 방법들을 경험해보았다.
  Storybook을 이용하여 컴포넌트 별로 출력하고 점검할 수 있었고, React Developer Tools를 이용하여 컴포넌트의 state와 props를 바로바로 확인할 수 있었다.