[teo 스프린트 3기] TYPO SAURUS CODE 회고록

해달·2022년 2월 19일

🦖TYPO SAURUS CODE⌨️

📍 게임하기

완성 된 게임! (노래도 나온다구요!)

구글스프린트 3기 회고,

teo의 프론트엔드 오픈채팅방에서 진행했던 구글스프린트 3기 에 참여하게 되었다!
5일동안 진행했던 스프린트를 잘 마무리하고 기간동안 배웠던 내용들과 아쉬웠던 내용들을 토대로 회고록을 작성해 보려고한다 😁

기간 : 02.09(수) ~ 02.13(일) , 5일
멤버 : 혜심쓰, 곤이, 민민, 비비, 빈츠, 웹린이, 폴, 해달

teo 프론트엔드 오픈채팅 : https://open.kakao.com/o/gNxDSCLd

Day1 (02/09 수)

피그잼을 이용해 테오와 팀원 8명과 함께 주제에 맞춰서 각자 포스트잇을 붙이고 발표하는 시간을 가졌다.

각자 📚과제(?)로 준비해온 아이디어를 공유하고 투표와 회의를 통해 의견을 모았다.

의견을 나눌때는 게더타운에서 팀별로 나뉘어져서 대화를 하면서 진행하면서 하루가 마무리 되었다.

자기소개에서 원활한 커뮤니케이션을 잘한다고 자신있게 말했는데 그만큼의 대화를 못한거 같아서 조금 아쉬웠다 🥲

다양한 사람이 모인만큼 시너지가 다양하게 나올거 같아서 기대가 된다
각자의 시간을 내어서 참여하신 만큼 나도 주어진 시간에 최선을 다해서 열심히 하고싶다는 생각을 했다!

Day2 (02/10 목)

테오가 매일 오전에 전날 나누었던 얘기들을 정리해서
🔥숙제 와 함께 메일로 공유를 해주었다. 🥲 ~~체력왕 테오..~~

📨메일 덕분에 그날 무슨 대화를 준비해갈지 쉽게 정리할 수 있었고
어제 우리가 이런 대화를 했었지! 하고 복기할 수 있었다.

둘째날은 아이디어를 구체적으로 정하는 시간을 가졌고 아래의 순서대로 이루어졌다.
우리의 아이디어는 개발자가 즐길 수 있는 타자게임 이였다.

의견 나누기 순서 →

우리 아이디어의 궁극적인 목표

개발자스러움 , 재미 두개의 키워드

목표를 질문으로 바꿔서 생각해보기

어떻게하면 개발자스러움을 보일 수 있는지 ?

어떻게해야 개발자스러울까 ?

질문을 해소하기 위한 자료수집

개발자 밈 모으기

서비스 지도 만들기

마지막으로 아이디어 다시 확인하기

내가 찾은 밈 🤣

아이디어로 의견을 나누는 과정에서 키워드나 테마를 가볍게 던지면서 얘기를 할 수 있었고,
제시 된 의견을 좀 더 구체화하며 얘기를 하니까 프로젝트의 방향이 맞추어지는 과정이 너무 재미있었다.

Day3 (02/11 금)

셋째날은 각자 생각해 온 화면 디자인을 공유하면서 스케치하는 날이였다.

화면 : 초기화면, 닉네임정하기, 게임시작직전, 게임중, 결과보기

이 당시에는 팀원들이 대결구조로 많이 생각하셨었는데
나는 대결구조가 생각보다 와닿지않아서 개인전 게임화면 위주로 스케치를 그렸다 👀

미리 준비해갓던 스케치

손으로 스케치를 그리기 전에!
아이스 브레이킹으로 외계인에게 자기 직업소개하기에서 그림을 그렸다 ㅎㅎㅎ

내가 그린 기린 그림.jpeg

셋째날은 프로젝트의 구체화의 날이였다

화면과 기능을 정하고 페어프로그래밍을 통해 팀별로 구현하고싶은 기능을 맡아서 진행했다 ㅎㅎ

나는 빈츠와 페어가되어서 게임중인 화면을 구현하기로 결정!

새벽3시까지 장장 길어진 회의에서 의견조율에 시간을 많이쏟기도 했지만 사이좋게 잘 마무리했다 :)

우리팀은 Slack으로 소통을 하기로 결정 😆 !

Day 4 (02/12 토)

주말동안은 코딩을 하며 실제로 구현해야하는 시간이였다
정해진 정규회의시간은 없었으나 시간대를 정해놓아서 참여가능한 인원들끼리 회의를 하며 하루를 보냈다 ㅎㅎ

우리팀 구현사항

코드입력사항
1. 입력해야 할 텍스트가 전제로 보여진다
2. input창에 입력 시 현재 머물고 있는 line에 text가 덧붙여진다.
3. 만약 오타가 발생할 경우에는 line에 틀렸다는 화면을 보여준다.

초기 구현사항을 기준으로 빈츠와 함께 의견을 나누면서
\n 기준으로 라인을 바꾸며 화면을 띄워주려 했는데 !

오타가 난 경우에는 글자마자 표시를 해줘야 했기 때문에
{ value : 'a' , istrue : true} 모양과 같이 객체로 관리하여서 화면을 랜더링 해주기로 하였다

알게 된 내용

객체 setState 덮어쓰기

객체의 값을 업데이트 시키려면 스프레드 문법으로 바로 변경시켜주지 않고
내부로직에서 값을 바궈 준 다음에 덮어쓰기를 해야한다
const typoHandler = (e) => {
   ...,
  if (조건) { /* 오타가 아닐 경우*/
    setCode((prevState) => {
	  prevState[curIdx].isCorrect = true;
	  return [...prevState];
    })
  }

다들 현생을 챙겨가면서 코드를 치자고 했지만.. ^^.. 모두 열정이 넘쳐서
아침부터 새벽까지 같이 코드를 작성했다 ㅎㅎㅎㅎㅎ ~~(힘들었지만 신기하게도 재미있었다)~~

중간에 코드구현방식이 바뀌게 된 경우도 다른팀과 의견을 나누면서,
내가 잘못알고 있던 부분을 다시 설명해주셔가지고 원래 작성하기로 했던 로직대로 구현할 수 있었다!

Day 5 (02/13 일)

이제 마지막날이 되면서 내일이면 결과물을 내놓아야 하는 날이었기에
모든 팀원들이 진행과정을 다시 한번 확인하고 마지막까지 열심히 코드를 작성했다 :) ...

중간중간 막히는 부분이 있으면 다른팀에게 의견을 묻기도 해서 문제 사항을 해결하기도 했다!

마지막 날이여서 다들 정신없이 코드를 작성했는데 정말 열정열정열정꾼들 밖에 없어서
주어진 짧은시간 내에 완성할 수 있었다 ㅜ-ㅜ

공부 한 내용

useRef

최대 콤보의 값을 유지하거나 증가시키기위해서 state로 값을 관리했는데
그렇게된다면 값이 바뀔때마다 계속 랜더링이 되어 효율적이지 못했고, 마지막 콤보가 적용되지 않는 문제점이 발생되었었다.

//웹린이 :
" setState하다가 다들헷갈려야하는건데 여기서 set스테이트로 콤보를 +1 하고 "
" 조건문이 다섯번 되기전이고 랜더링 이전의 값을 가지고 비교하게되기때문에 리랜더링할대 콤보 올라가야되는데 안올라감 "

갓린이(웹린이)가 maxCombo를 useRef로 관리하는 방식을 얘기해줬는데
만약 let 과 같은 변수로 관리를 하게된다면,
함수컴포넌트가 새로 실행되기때문에 변수가 계속 선언되어서 리랜더링 될때마다 계속 랜더가 되고

useRef로 관리하게된다면, 같은 참조를 가지는 객체를 계속 반환해주기때문에
리랜더링이 일어나도 값이 유실되지않고 state와 달리 가지고 있는 값이 바뀌어도 리랜더링이 발생하지 않기때문에 더 좋은 방법으로 값을 관리할 수 있다고 해서 useRef로 값을 관리하게 되었다.

const maxCombo = useRef(0);

  if (combo >= maxCombo.current) {
    maxCombo.current = combo;
  }

useRef값은 current라는 프로퍼티에 들어있어 있어서 값을 계속 가지면서 랜더시키지 않기때문에 제일 적합한 값 관리방법이라고 생각되었다.

useRef를 사용해본 적이 없어 이론적인 부분만 알고 있었는데 웹린이의 설명덕분에 코드를 작성해보면서 한층 더 이해할 수 있게되었다.

⚙️ 새롭게 사용해 본 기술

💬 tailwind

내가 느낀 장점 : 클래스명을 안정해도 된다
내가 느낀 단점 : 클래스명이 이름이 길어 질 수 있다, 사용하고싶은 단축키를 검색해야 써야된다

tailwind는 한번도 써보지 않았던 처리기였는데, 첫인상은 이게 편할까? 였다.
하지만, 클래스네임에 고통받았던 날들이 사라지면서 굉장히 긍정적으로 다가오게되어서
열심히 사용을 했었던거 같다 😆 단축키들을 검색하면서 사용해가는데 마지막즈음엔 재미가 들렸다(?)

<div className='flex flex-col	pl-6 box-content mr-3'>
  <div className='p-2 text-green-dark absolute bottom-0 right-5'></div>
</div>

💅🏻 Styled-Component

스타일드 컴포넌트는 새롭게 사용한 스택은 아니지만,
익숙했던 SCSS만큼 잘 사용하지 못하는 스택 중 하나였다.
회의하면서 초반에 어떤 CSS처리기를 사용하냐에 대한 얘기가 있었는데,
tailwind 와 Styled-Component로 얘기가 나왔다.

초반에는 모든 컨테이너들을 tailwind로 작성하였다가 다른팀들이 컨테이너 베이스코드로
styled-component를 사용하는 것을 보고 새벽에 혜심쓰와 코드를 전체적으로 수정했었다.

그러는 과정에서 조금 더 익숙해지게 사용할 수 있게 되었고, props 문법도 사용을 할 수 있었다!

//props를 이용한 애니메이션 구현
animation: ${(props) => props.isDark && `${fever} 0.5s ease-in-out infinite;}`}

animation: ${(props) => props.isDark && `${fever} 0.5s ease-in-out infinite;`}

vite

항상 CRA로 프로젝트를 만들었었는데 (누구 의견인지는 기억이..) vite가 CRA보다 가볍다는 의견이 나와서 vite로 작업을 하게 되었다.

마지막에 배포를 vercel로 배포를 진행하였는데 속도가 어마무시했다 🥶
깊게 알고 사용한 것은 아니지만 사용한 것에 의의를 두게 된 vite..🙂 !

Day 6 (02/14 월)

주말 이틀 열코딩을 통해 드디어 목표했었던 프로젝트가 마무리 되었다 😭

팀원 각자마다 성격도 다 달랐지만, 추구하는 목표가 같았고 코딩에 대해 열정이 다들 넘쳐서
정~말 코드를 치면서 재밌고 행복했던 시간이 아니였나 싶다 ㅎ_ㅎ
다른분들의 코드를 보면서 새로운사실도 발견할 수 있었고, 써보지 않았던 기술들을 쓰면서
스스로의 발전도 한거같아 정말정말정말 너무 좋은시간이였다.

이 날은 밤 11시에 모여서 teo에게 우리가 완성한 프로젝트를 보여주며 마무리하는 날이였는데,

4L

마지막 날인 만큼 피그잼에 다같이 모여서 회고를 작성했다.
아래에 있는 4L을 프로젝트,팀,개인,스프린트 에 대해 작성하며 진행되었다.

Liked(좋았던 것)

Learned(새롭게 배운 것)

Lacked(아쉬웠던 것)

Longed for(다음에 해보고 싶은 것)

다같이 떠들다보니 마지막까지 남은 멤버로써,, 곤이랑 새벽 4시까지 같이 수다를 떨었다. 🥰

정말 하면서 느꼈던 부분은 소통은 정말정말 중요하다 라는 사실을 다시 한번 더 깨닫게 되던 시간이였다.

우리팀은 정말 소통이 너무 원활하게 잘되었다.

자신의 의견과 다른의견이 나올 때에도
1. 먼저 경청을 해주고
2. 본인은 왜 그렇게 생각하지 않는지
3. 이렇게 하면 어떨지
를! 상대방이 기분 나쁘지 않도록 대화 어투에도 엄청 신경을 쓰며 대화했기 때문이지 않을까싶다.

배려왕 3기 !! 나도 중간에 이해가 되지않는 부분에서 여러번 질문을 했었는데,
정말 그 누구하나 귀찮은 내색없이 열정적으로 설명해주셔서 감동을 받았다.🥺

일요일에 두시간정도 자리를 비우는 일이 생겼었는데,
잠깐 자리를 비웠다고 새로운코드가 많이 늘어나 있었는데 코드를 보다 이해가 가지 않는 부분을
웹린이에게 물어봤는데 프로젝트가 마무리되면서 귀찮았을 수도 있었겠지만
친절하게 마지막까지 설명을 정말 잘해주어서 너무 고마웠다.

아무래도 스프린트는 하고싶은 사람(?) 들이 신청을 하니까 누구하나 나태해지지않고,
서로 응원하면서 짧은시간안에 좋은 결과물을 낼 수 있지 않았나 싶었다.
정말 너무 즐겁고 좋은사람들을 만날 수 있었던 기회였기 때문에 다른분들도 참여를 하고싶다면 강추한다.

3기 최고~ ❤️‍🔥

마지막 KPT

Keep

구현방식을 서로 다르게 이해하고 있는 부분을 대화를 통해 해결한다.

모르는 부분이 있을 때는 대화를 하며 해결 책을 찾아본다.

대화의 흐름을 잘 따라가고 의견을 서로 주고 받는다.

Problem

코딩치는데 시간을 너무 많이 소요해서 (~~아침~새벽~~) 마지막에 코드가 거의 눈에 들어오지 않는 상태가 되었었다.

중간에 다르게 이해한 로직이 있어서 코드를 한번 갈아 엎었었다.

Try

이해하고자 하는 부분을 정확하게 인지하지 못했을 경우에는 다시 물어보자

컨디션 조절하면서 코딩하자!

~~개인적으로 일이 생겨서 글 작성이 너무 늦어져서 약간 글 내용이 뒤죽박죽이다 T_T~~

팀원들 회고 보러가기

teo (스프린트 주최자!) : https://velog.io/@teo/google-sprint-3
Vintz : https://onlydev.tistory.com/132
bibi : https://www.borachoi.dev/blog/google-sprint

해달

이전 포스트

[React] setState 알고쓰자

다음 포스트

[teo 스프린트 3기] TYPO SAURUS CODE 회고록

🦖TYPO SAURUS CODE⌨️

📍 게임하기

구글스프린트 3기 회고,

Day1 (02/09 수)

Day2 (02/10 목)

의견 나누기 순서 →

Day3 (02/11 금)

미리 준비해갓던 스케치

내가 그린 기린 그림.jpeg

Day 4 (02/12 토)

우리팀 구현사항

알게 된 내용

객체 setState 덮어쓰기

Day 5 (02/13 일)

공부 한 내용

useRef

⚙️ 새롭게 사용해 본 기술

💬 tailwind

💅🏻 Styled-Component

vite

Day 6 (02/14 월)

4L

마지막 KPT

팀원들 회고 보러가기

[React] setState 알고쓰자

chakra Modal + next.js 모달 2개 띄우기

0개의 댓글

관련 채용 정보