오늘은 무엇을 했나요?

Weekly Mission Todolist 페어프로그래밍 기획

이번주는 페어 프로그래밍으로 리액트를 사용하여 To Do List를 만드는 것이 미션이다! 내 페어는 토니 >< 오늘 함께 어떤 기능을 넣을지, 어떤 디자인으로 할지에 대해 고민하며 리스트업하고 디자인 기획까지 완료했다!

• 기능

1. 캘린더 기능 → 캘린더 하나 클릭 → todo list
2. 할일 추가 (카테고리X)
   • Create/Udate/delete
   • 체크 기능 토글
     • 내일 미루기, 세모 등은 추후 구현
3. drag & drop 하기 (우선순위)
4. 카카오톡 공유하기?!

우선 기능을 러프하게 잡았고, 세세한 구현 사항을 리스트업했다!

• 일관된 UI를 위해 주요 색상 4가지를 정했다.

오늘의 나는 무엇을 새롭게 배웠나요?

[1] 함수 선언식과 함수 표현식

함수 선언식

함수 선언식은 function 키워드를 사용하여 함수를 정의하는 방식입니다.

function add(x, y) {
  return x + y;
}

함수 표현식

함수 표현식은 함수를 변수에 할당하여 정의하는 방식입니다. 함수 표현식은 변수 이름으로 함수를 호출하며, 변수의 범위 규칙에 따라 호출됩니다. 함수 표현식은 변수 이름을 생략하고 익명 함수로 정의할 수도 있습니다.

const add = function(x, y) {
  return x + y;
};

const add = function eva(x, y) {
  return x + y;
}; // 이것도 표현식임

차이점

1. 호이스팅 여부
   • 함수 선언식은 스크립트의 어디에서나 호출할 수 있지만, 함수 표현식은 변수 범위 규칙에 따라 호출됩니다.
   • 즉 선언식은 호이스팅이 발생하고, 표현식은 변수의 범위 규칙에 따라 호이스팅 유무가 결정됩니다
     • 함수 선언식
       • 함수 실행

         console.log(sayhi()) //하이
         function sayhi(){ 
         	console.log("하이")}

       • 함수 객체 그 자체

         console.log(sayhi) // 호이스팅, function 출력
         function sayhi(){ 
         	console.log("하이")}

     • 함수 표현식
       • var에서는 변수는 호이스팅 되지만, 안에 값은 undefined

         • 그러니까, 함수를 실행한 것이 아니니까.. 변수를 호출한 것이지

           console.log(sayhi)
           var sayhi = () => { console.log("하이")}
           //undefined

           console.log(sayhi()) //reference error
           var sayhi = () => { console.log("하이")}

2. 스코프의 차이
   • 함수 선언식 : 함수가 선언된 위치에서 호이스팅(hoisting)이 발생하며, 해당 함수는 스코프 내의 어떤 위치에서든 호출될 수 있습니다. 따라서 해당 함수가 정의된 위치의 스코프를 가집니다.
   • 함수 표현식 : 해당 함수가 호출된 위치의 스코프를 가집니다.

[2] 리액트의 Strict 모드

공부하면서 어떤 어려움이 있었나요?

클로저와 스코프가 헷갈린다..

함수 선언식과 표현식의 차이를 공부하면서 클로저와 스코프에 대한 개념이 많이 흔들림을 깨달았다. 복습이 필수일 것 같다! 사실, 내부 슬롯 (실행 컨텍스트)에 대한 개념을 남에게 설명할 수 있을 때까지 완벽하게 연습이 필요한 것 같다. 면접 스터디에서 들어달라고 제안해야할 듯?!ㅋㅋㅋ

페어프로그래밍 범위에 대한 고민..

이번주 Weekly Mission은 페어프로그래밍으로 Todo List를 만드는 것이다. 얼마나 디테일하게, UI 요소를 신경 쓰며 구현을 해야할 지, 그 범위를 정하는 것에 많은 고민이 있었다. 3~4일 남은 기간동안 페어프로그래밍으로 구현할 수 있는 정도를 알고 계획하는 것이 중요한데.. 아직은 어려운 것 같다. 우선 리스트업 해놓은 기능들은 최대한 구현 해보는 것으로!

커뮤니케이션 스킬에 대한 고민🤔

개발자의 가장 중요한 소양 중 하나가 커뮤니케이션 스킬이라고 생각한다. 지금까지 (동기들이랑) 크고 작은 협업을 해오긴 했지만 크게 문제된 적은 없었고, 신경쓰지 않아도 자연스럽게 잘하고 있다고 생각했던 부분이었다!
하지만 요즘, 부쩍 그런 고민을 많이 하고있다.

1. 멘토링 시간이나 피어에게 모르는 것에 대해 질문할 때, 질문의 의도를 한번에 전달하지 못하는 경우가 빈번하다.

   예를 들어 state에 update function을 쓰면 왜 이전 state 값을 가지고오는 지에 대한 동작 과정을 모르겠다. 라는 질문을 했을 경우, 너무 장황하게 이야기를 해서 멘토님이 캐치하지 못하셨다. 어떻게 정리를 해서 잘 물어볼지 가 관건이다.

2. 내 의견을 어필할 때와 의견을 물어볼 때 별 적절한 소프트스킬을 사용하지 못하는 것 같다.
   어떤 의견을 PR할 때 설득하는 말하기를 하는 것과 상대의 의견을 물어보는 것은 다른 범주의 커뮤니케이션이라고 생각한다.

   의견 제시의 말하기는 타당한 근거에 기반해서 설득력이 있도록 이야기해야하는 것은 잘 알고 있고, 그렇게 하고 있다고 생각한다. 하지만 상대의 의견을 물어볼 경우, 지금까지는 "내 의견은 ~~하다. 너는 어떻게 생각해?" 이런 흐름으로 넘어갔는데, 그럴 경우 상대의 의견을 듣기도 전에 내 의견을 먼저 말하기 때문에 생각의 범위를 좁혀버리는 듯한 상황이 종종 온다. 따라서 이 사이의 트레이드오프를 어떻게 해야할지 참 고민인 요즘이다..

   멘토링 때 이런 것도 질문해도 되려나..🤔

내일의 나는 무엇을 공부해야 할까요?

• react-calendar 공부
• 페어프로그래밍
• drag & drop 라이브러리 공부
• swiper 라이브러리 공부
• 리액트 웹사이트 만들기 복습
• 알고리즘 1문제
• 멘토링