2021년 4월 20일 코드스테이츠 DAY-16(객체 코플릿) + twittler mock-up 계획(wireframe) + figma 사용법 숙지(인강)

2021년 4월 19일 코드스테이츠 DAY-15(배열, 객체)

 

Checkpoint Solution(Zoom)

코플릿-객체(Pair)

Sprint Review(Zoom)

 

+

 

twittler mock-up준비(wireframe)

figma 사용법 숙지

 

코플릿-객체(Pair)

 

어제 배열(Array)에 이어서 객체(Object)까지 동일한 Pair님과 코플릿을 진행하게 되었는데

 

함께 공부하면서 극강의 재미를 느낌과 동시에 배운점 또한 많아서 기록을 한다. 

 

---

Pair에게 배운 점

 

어제의 포스팅에도 적었지만 배울것이 많은 Pair님과 오늘도 공부를 했다. 

 

나보다 나이가 한살 어렸음에도 알고리즘을 짜는 것에 관하여서는 한참 선배였었음을 인정할 수 밖에 없다.

 

특히 객체 마지막 문제(오늘 다룰 문제이다)를 

 

(문자열을 입력받아 가장 많이 반복되는 문자를 리턴하는

: 가장 많이 반복되는 문자가 다수일 경우, 가장 먼저 해당 횟수에 도달한 문자를 리턴해야함)

 

본인의 지식을 바탕으로 새로운 논리를 구성하여 문제를 해결했는데,

 

마지막 문제와 마지막 이전 문제는 많이 닮아있었기에

 

나는 마지막 이전 문제를 풀었던 경험에 의지하여 그 사고의 울타리에 갇힌 반면,

 

Pair님은  기존 울타리를 벗어나 새로운 사고를 할 수 있었던 것이었다.

 

또한 답을 못찾고 있는 내게 예시와 질문을 통하여 답에 도달할 수 있게 유도해주었다.

(사고할 수 있는 기회를 소중하게 여기는 사람이었다.)

 

둘의 합이 너무 잘 맞았던 탓에 문제를 너무 빨리 풀어버렸는지 시간이 꽤 남게 되었다.

 

남는 시간동안 Pair님과 조금 더 얘기를 나누었는데,

 

어떻게 공부하였기에 그런 방식으로 알고리즘을 짤 수 있었는지 물어보기도하고

 

내가 어떻게 공부하는지도 얘기하며,

 

서로에게 도움이 되는 정보를 공유 했다.

 

 

이번 Pair프로그래밍을 통해 페어로서의 자세란 무엇인지,

 

같이 일하고싶은 사람은 어떤 사람인지 생각할 수 있었고

 

코드스테이츠의 빠른 진도탓에 들어오기 전 쌓았던 지식의 한계가 들어나게된 지금 시점에

 

어떻게하면 더 많은 지식을 미리 축적하여 코드스테이츠에서의 커리큘럼을 더 잘 받아들일 수 있을지 그 방법들을 알게되었다.

---

코플릿에서의 의미도출 

 

위에서 언급한 Pair의 알고리즘 짜는 능력에 쇼크를 받은 문제를 소개하고자 한다. 

 

자 아래를 보자.(abba를 input했을때 함수의 흐름을 주석으로 확인할 수 있다.)

 

function 가장많이등장하는문자(str) { //abba를 대입함으로써 이해를 더할 수 있었다.
  let result = {};//빈 객체를 만들어서 각 문자를 key로, 등장하는 횟수를 key값으로 넣어줄 객체
  let head = {firstNum : 0, firstStr: ''}//result객체 중 가장 많이 등장하는 key와 key값을 보관할 객체

  for(let i = 0; i < str.length; i++){ 
    if(str[i] === ' '){ //문자열 중 ' '는 건너뜀
      continue;
    }
    if(result[str[i]] === undefined){ //result는 빈 객체인데 여기에 property로 a를 넣는다 해도 값이 없으므로 undefined. 조건문 성립으로 {}가 실행되죠
      result[str[i]] = 0; //result라는 빈 객체에 a라는 key값에 0이란 값을 넣어줘요.  
    } result[str[i]] += 1;//왜 1을 더하느냐? letter가 등장할때 1이 되있어야 head를 재할당할 수 있고 또 같은 letter가 등장하면은 +1를 하므로써 비교할 수 있는 기준을 삼을 수 있어요. 
    if(result[str[i]] > head.firstNum){ //여기서 result[str[i]]가 1이므로 head.firstNum인 0보다 큽니다. 그래서 {}가 실행되요. 왜 비교를 하느냐? 
    //head에 가장 큰 값(반복된 회수가 가장 많은 값)을 할당해줘야 나중에 return값으로 활용 할 수 있고 result객체의 다른 key값들과 비교할 수 있어요.
      head.firstNum = result[str[i]]; // 위 if문을 통과 했어요. 그러니 head 객체에 있는 키값들을 할당해줍니다.
      head.firstStr = str[i]; //상동 다시 for문 처음으로 돌아가요.
    }
  }return head.firstStr
}

나의 논리로 풀어지지가 않아서

 

마음이 급해져 차근차근 생각을 못했는데, 

 

pair님께서는 내가 사고할 시간을 기다려주었고 답까지의 경로를 질문으로 내 스스로 사고하게끔 하였다.

 

코플릿을 풀면서 자주 발견하게 되는 패턴이있다.

 

임의의 변수를 만들어 그 안에 비교의 대상이 되는 값이나 배열, 객체를 들어가게하고
반복문으로 그 모든 값들 중에 가장 큰 값을 저장하는 변수와 비교하여 재할당한 후 
이른 return하게 하는...

 

나의 머릿속에서도 이런 답을 꺼낼 수 있음을 pair님 덕에 알게되었다.

 

 

 

twittler mock-up 준비(wire-frame)

 

내일의 일정을 확인해보니 twittler mock-up이 계획되어있는것이 아닌가?

 

기능을 구현하지는 않지만, 비록 껍데기일 뿐이라도 

 

이쁜것이 좋지 않던가!

 

코드스테이츠를 들어오며 이런 프로젝트를 꼭 예쁘게 해내고 싶었다.(계산기도 포함)

 

다급하게 트위터로 들어가서 어떻게 화면이 구성되어있는지 확인했다. 

 

그리고 와이어프레임 작성 시 활용하기 위해 스크린샷을 찍는데

 

내용을 보는 화면은 로그인을 안하면 볼 수가 없던 것이다.

 

부랴부랴 나나의 아이디를 받아서 내용쪽의 화면도 확인하였다. 

 

아래 사진을 참고하자.

 

 

 

내일의 일정을 안보고 마주했더라면 계획도 없이 부랴부랴하느라고 못난 twittler를 만들게 될 것이다.

 

그런거는 너무 싫다. 

 

분명 1페이지를 만드는 것이 코드스테이츠의 계획일 것이지만

 

2가지 화면을 완성해보는 것이 나의 목표이다. 

 

내일의 내용을 쭉 읽어보고있는데 wireframe으로 내가 만들화면의 구성을 잡아야한다고 한다. 

 

이를위한 툴로 Figma를 사용하라고 되어있었다.

 

 

Figma 사용법 숙지

 

코드스테이츠 시작 전 왜인지 모르겠지만 figma를 배워야할 것 같은 생각이 들었었다.

 

그리하여 인강을 신청은 해 놓았는데(듣지는 않았다. ㅠㅠ) 

 

드디어 볼 때가 온 것이다. 

 

모름지기 프론트엔드를 한다면 디자인도 기획도 조금은 할 줄 알아야되겠다라고 생각을했기에 미리 수강버튼을 눌러놨다.

 

오늘 저녁 figma 인강을 들으며 내일의 mock-up을 잘 준비해 봐야겠다.