[코드 스테이츠] 59일차, React 개인 프로젝트 시작해야겠다.

 

  스프린트 리뷰에서 충격적인 소식을 들었다. 오늘이 React 마지막 스프린트 리뷰였다는 거였다. ...벌써요???? 진짜 벌써요??? 내일부터는 Redux 에 대해서 기초부터 배우기는 하는데 어라? 나 지금 리액트 걸음마 뗀 거 맞나...? 내가 벌써 부트 캠프에서 더 React를 듣지 않아도 된다고?? 아닌데..? 당혹감이 너무 컸다. 물론, 그렇다고 지금까지 배운 것들이 별 거 없었다는 얘기는 아니다. 엄청 배웠다. 뒤돌아보니 지금까지 React로 한 과제들도 꽤 있었다. 처음 컴포넌트 만드는 것부터 시작해서 서버 불러 오기, 스타일 꾸미기 등 생각보다 React를 많이 쓴 것 같다. 하지만 어... 안 돼.. 이건 아니야 ㅠㅠㅠㅠ 아직 더 배워야할 게 많은 것 같은데 역시 6개월 풀 스택 커리큘럼이라 그런지 전문적으로 많이 들어가는 것 같진 않다. 그러면 이제 남은 React 공부 몫은 전적으로 나에게 있다.

 

React 개인 프로젝트 하면서 공부해야겠다. 

---

[ 오늘의 TODO ]

1. 코드 스테이츠) Pair-Programming
   // Styled-Component 로 더 예쁘게 꾸며보기
2. 패스트 캠퍼스) 인강 3개 이상 듣기 // optional
3. 스터디 그룹) 프로그래머스 문제 풀기
   // 가장 먼 노드 
   // dfs 로 엄청 오래 풀었으나 시간 초과... bfs가 답이었다.
4. 생활) 물 1L 이상 마시기
5. 생활) 1시간 이상 걷기
6. 개선) 페어 프로그래밍할 때도 혼자 있을 때처럼 침착하게 오류 대처하기
   // 막힘 없이 술술 CSS를 만졌던 것 같다.

---

[ 오늘의 해결 ]

  CSS 를 하면서 깨달은 것이 하나 있었다. 단축 속성들은 옵션이 겁나 많다

1. box-shadow의 inset

  예전에 내가 컨테이너나 박스들를 꾸밀 때 입체적으로 파인 것처럼 꾸민다거나 튀어나온 것처럼 꾸민다 하면 border를 이용했다. style 옵션을 사용하던가 border-top, left 를 사용해서 꾸몄다. 그런데 오늘 새롭게 사용한 게 있었으니, 바로 box-shadow 의 inset 속성이었다.  inset 을 가장 처음에 작성하고 나머지는 box-shadow 일반적인 옵션 순서와 동일하게 사용하면 된다. 그런데 이렇게 사용하고 보니 굉장히 깔끔하고 예뻤다. 굳이 border를 사용하지 않아도 더 깔끔하게 blur 속성으로 처리할 수 있었던 것 같다. 내가 왜 이걸 몰랐을까 하고 봤더니 인터넷 익스플로러에서 지원 안 하는 옵션이었다. 아무래도 내가 예전에 CSS 개념을 들었던 강의는 2019년도 강의였다보니 호환성을 강조하시느라 이걸 사용하지 않고 border 를 배운 것 아닐까 싶다. 아무튼 이번에 개념을 다시 정립할 수 있어서 매우 좋았다.

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

box-shadow - CSS: Cascading Style Sheets | MDN

---

[ 오늘의 교훈 ]

1. 리액트는 재밌고 편리하기에 그만큼 지금보다 더 알아야 할 것 같다.

  지금 내가 개인 프로젝트로 진행하고 있는 작업은 예전에 만든 오버워치 캐릭터 선택창을 사용해서 우리 스터디 그룹 조를 짜는 JS 파일과 묶어서 가시적으로 보이게 하는 것이다. 새롭게 리팩토링하는 과정 중에 DOM 조작을 하고 CSS 도 새로 입히고 하다 보니 깨닫게 되는 것은 리액트가 정말 편리하다는 것이었다. 자바스크립트에 대한 기초적인 지식이 뒷받침되지 않으면 라이브러리들을 깊이 있게 다룰 수 없다는 건 명백하지만 자바스크립트를 좀더 편하게 사용하기 위해 라이브러리가 등장한 것이니 리액트로 표현하고 싶다고 생각하는 것은 틀린 생각은 아닌 것 같다. 

 

  그렇게 편리한 리액트를 오늘 스프린트를 마지막으로 다시 코드 스테이츠에서 배울 수 없다고 하니 좀 아쉬웠다. 아직 더 배우고 싶은 것도 많고, 더 많은 Hook 들을 사용해보고 싶은데 이렇게 끝난다고 하니 좀 안타까웠다. 그래서 이제는 혼자서라도 열심히 개인 프로젝트를 하며 배워야할 것 같다. Section 3 는 백엔드 지식이 주를 이루는데, HA 테스트를 통과해서 Section 3에 탑승하게 된다면 서버 때문에 머리가 터질 것 같아도 React 감 떨어지지 않게 혼자서라도 조금씩 만져봐야 겠다.