본문 바로가기
내일배움캠프/Today I Learned

[TIL 2023.06.16] 후발대 과제 / React counter app 만들기

by 괴코딩 2023. 6. 19.

💻오늘 배운 내용

live share를 이용한 코드리뷰

그동안 조원끼리 코드리뷰를 하면 리뷰를 하는 사람이 화면 공유를 하고

나머지 사람들은 화면을 보고있는 상태에서 리뷰 하는 사람은 자신이 쓴 코드의 로직에 대해

쭉~읽어내려가며 설명하는 방식으로 했었다.

 

그런데 이렇게 하면 코드가 눈에 잘 안 들어오고 이해가 안되는 부분이 있으면 그냥 넘어가게 된다.

오늘 조원 중 한분이 새로운 방법을 알려주셨는데 VScode extension 중 하나인 live share를 이용하는 것

이렇게 하면 공유받은 코드를 같이 보면서 주석을 달거나 질문도 자유롭게 하면서 좀 더 쌍방향의 코드리뷰가 가능하다.

역시 아는만큼 보인다고.. 그동안 나는 너무나 원시인이었던 것.

 

이렇게 같이 코드를 보면서 서로 리뷰를 하고 부족한 부분은 이렇게 고치면 좋을 것 같다고 조언도 받고 

잘쓴 사람 것은 보고 배워가면서 이래서 사람들이 코드리뷰를 하는구나 느낄 수 있었다.

그동안 코드리뷰를 하라고 하니까 했지.. 왜 하는지 어디에 도움이 되는지 이해를 못했는데

이런식이면 확실히 본인에게 엄청 플러스되지.. 오늘도 이렇게 하나 배워간다.

 

공유할 지, 공유받은 주소에 조인할 지 선택 해서 진행한다

 

❓발생한 이슈/고민

후발대 과제로 counter app 만드는 과정을 촬영해서 제출해야한다.

💡해결과정

촬영은 OBS 프로그램을 이용하여 촬영을 진행했다.

 

counter app을 만드는 것은 사실 굉장히 간단하다.

버튼에 onClick 속성을 넣은 다음 useState를 사용해서 setState만 설정해주면 된다.

그런데 이 간단한 개념조차 직접 말로 설명하면서 작성하려니 말문이 턱 막혔다.

그만큼 내가 정확히 모르고 있었다는 소리.

 

강의를 들을 때는 항상 다 알거 같다가도 막상 직접 코드칠 때면 머릿속이 하얗게 백지가 되는 것이 이런 이유였던 것 같다.

스스로 머릿속에 정확한 개념으로 정리되지 않은 것.

 

그래서 말이 꼬이는 부분은 미리 대본을 작성해 보았다.

 

CRA
Create React App
별다른 설정 없이 react 개발환경을 구축해주는 boilerplate.
React 프로젝트를 구성하기 위해서는  WebPack, babel, eslint 등 필요한 것들이 상당히 많은데
CRA를 설치하면 명령어 하나로 환경설정이 가능하다.

 

useState

리액트에서 동적으로 변경될 수 있는 값이나 상태를 state라고 부르고, 

이 state를 변경해주는 함수를 setState라고 하는데, 

이렇게 동적으로 바뀌는 상태를 관리해주는 훅 이라는 기능으로 useState 함수를 이용한다.

 

말도 더듬어 가며 느릿느릿 타자 쳐가며 촬영했더니 카운터 앱을 만드는데 거의 9분 가까이 길어졌지만..

그래도 이번 기회로 적어도 카운터 app을 만들 때 사용한 개념만은 정확히 익히게 된 것 같다.

 

🧐궁금점과 부족한 내용

나는 시간을 참 못 쓰는 것 같다.

과제도 다 제출 하고 강의도 다 듣고 나니 한없이 나태해진다.

 

그래서 어떻게 하면 내가 이 하루를 알차게 쓸 수 있는지. 나 자신 힘내라는 차원에서

저번 특강으로 들었던 학습법 영상을 다시 한번 봤다.

 

거기 강의하시는 PM분이 쓰셨건 시간표를 예시로 보여주셨는데 아주 게으른P인 나에게는 빡빡한 스케줄이었으나,

스스로가 저거보다 잘 작성할 자신이 없다면 저대로 따라하기라도 해볼까 라는 생각을 해보았다.  

시간을 알차게 보내겠다는 목표로 봤을 때 성공한 사례니까?

 

더보기

09:00 - 10:00 알고리즘 문제 풀기 
10:00 - 11:00 알고리즘 코드리뷰
11:00 - 13:00 강의 수강

13:00 - 14:00 점심

14:00 - 16:30 강의 수강한 내용 직접 구현
                   집중코딩시간
16:30 - 17:00 질문할 내용 정리
17:00 - 17:30 질문
17:30 - 18:00 오늘 공부한 내용 정리 및                       
                   팀원들과 공유

18:00 - 19:00 저녁

19:00 - 20:00 특강수강 및 추가학습
20:00 - 21:00 TIL & 내일 할일 정리

이건데....16:30부터 18:00시까지는 좀 수정해서

14:00 - 17:30 집중코딩시간

17:30 - 18:00 질문할 내용 정리 라고 하고 다음주만이라도 고대로 실천해보겠다.

반응형