[우아한테크캠프 3기] 2일차 회고

728x90
반응형

오늘은 우아한테크캠프 수업을 잠실에 있는 회사에서 진행했습니다 

 

규모가 커지면서 회사가 여러 개인 것 같아요 여기도 배민의 특징은 드러나더라구요 녹색의 트랙인 부분도 있었고 

 

카페처럼 생긴 좌석들도 많았습니다 자유로운 업무를 추구하는 곳 👍

 

# 페어 프로그래밍

 

오늘은 주로 페어 프로그래밍으로 진행을 했는데요, 첫 수업은 issue를 생성하고 wiki를 작성해보았으며 

이 과정에서 label을 달아보고 assign을 하기도 했어요 ㅎㅎ 예전에 한 번 해봤는데 다시 해보니까 기록이 새록새록했고 

잘 모르는 부분은 팀원들과 논의하기도 했어요 

 

개선할 서비스 사항에 대한 이슈에 해당하는 wiki 내용에는 오븐으로 만든 프로토타이핑 그림을 올렸습니다 

아무래도 1시간 반? 정도의 짧은 시간에 진행해서 아주 좋은 결과물은 아니었지만 빠르게 역할을 나눠맡고 의논하는 경험을 한 게 좋았습니다

 

 

wiki 예쁘게 꾸밀려고 노력했어요 ㅋㅋㅋㅋ 시간이 부족해서 상세히 하나하나 리뷰하는 시간은 없었지만요 ㅋㅋ 

 

# 2부 페어프로그래밍

 

오후에는 nodeJs 디버깅, net모듈로 서버 통신, oop 자바스크립트 코드 수정하기 등을 진행했습니다

 

node디버깅하면서 툴이 정말 많았고 chrome dev tools 등 잘 쓰면 유용한 것들이 많더라구요

 

평소에 안해봤다면 vscode의 디버깅 툴을 이용해도 보통 충분할 것 같습니다


아래는 제가 디버깅을 공부하면서 정리했던 마크다운 내용입니다 소스코드는 팀원이랑 실습하면서 짰던 코드 써도 된다고 허락받았어용ㅎ 

코드에 함수가 하나 이상은 있도록 작성해야 여러가지로 테스트 가능합니다 (저는 간단히 덧셈 반복문만 돌려서 처음에 뭐가 다르지...??

했었어요)

 

다른 팀들은 디버깅 어떻게 공부했는지 잘 모르겠지만 자유 학습으로 진행되었습니다

 


breakpoints란

  • 디버깅을 목적으로 실행중인 디버깅 대상 프로세스를 멈추게 하는 지점입니다
  • 사용자가 임의로 코드 옆 빈 공간을 클릭하여 breakpoints를 지정할 수 있습니다

- 오른쪽의 빨간 점있는 부분이 breakpoints를 설정한 부분입니다

watch사용법

  • debugging에서 watch 탭의 +를 눌러서 값의 변화를 알고자하는 변수들을 추가합니다
  • 예제 화면에서는 a, b, c를 추가했습니다
  • 아직 선언되지 않은 변수 혹은 메모리에서 제거된 변수는 unavailable이라고 표시됩니다

 

call stack 의 의미

  • 자바스크립트는 싱글 스레드 프로그래밍 언어로 함수 호출시 해당 함수에 대한 정보를 콜 스택에 저장합니다
  • 함수가 중첩되거나 재귀 함수가 실행될 때 실행할 함수가 콜스택에 쌓이고 후입선출로 빠져나가는 것을 볼 수 있습니다.
myFunc() // 가장 먼저 쌓인다

function myFunc() {
  const c = 10
  console.log(c)

  myFunc2() // 두 번쨰로 콜스택에 쌓인다
}

function myFunc2() {
  console.log(1 + 2)
}

 

위 예제에서 함수가 순차적으로 콜 스택에 들어갑니다

  1. 가장 먼저 myFunc가 콜스택에 쌓입니다.
  2. myFunc 내부의 myFunc2가 콜스택에 쌓입니다.
  3. myFunc2가 실행되고 콜스택에서 사라집니다.
  4. myFunc가 실행되고 콜스택에서 사라집니다.

 

call stack 탭에서 함수가 쌓이고 실행이 끝나면 빠져나가는 것을 볼 수 있어요

 

Step over / Step into / Step out

  • step over : 다음 줄에 나오는 명령을 실행하고 다음 줄로 점프합니다. (함수를 무시해버려요 ㅎ)
  • 노란색 화살표 부분이 step over을 한 번 실행한 후의 위치이다

  • step into: 다음 줄에 함수 호출이 포함되어 있다면 Step Into는 해당 함수로 점프하고 첫 줄에서 멈춥니다.

  • step out: 현재 함수의 나머지 부분을 실행한 다음 함수 호출 뒤 다음 명령문에서 일시 중지합니다.


 

개인적으로 net모듈 부분이 어려웠어요 (오늘 처음 들어봤습니다)

 

단순히 서버를 띄우고 client와 통신하는 것은 간단히 구글링해서 짤 수 있었는데 특정 html파일을 렌더링하는 부분을 찾기가 힘들었습니다ㅠㅠ 생각보다 자료가 없었어요 

 

한 팀원분이 찾은 블로그 글에 있는 net모듈 내용에 fs모듈로 html을 불러와서 구현하는 데 성공해서 그 부분까지 완료할 수 있었습니다

아직 제 자바스크립트 실력은 멀었나봅니다 ㅠㅠ ... 개인 프로젝트도 볼 수 있었는데 진짜 잘하시는 분이었어요

저도 빨리 사이드 프로젝트를 열심히 해야지!! 하고 미뤘던 결심을 다잡게 되었습니다 ㅋㅋㅠ

 

집에 돌아와서 저녁먹고 요가도 하니 하루가 후딱 가버리네요 체력이랑 시간을 잘 관리하는 게 저에게는 관건일 것 같아요 ㅎ

 

 

 

728x90
반응형
TAGS.

Comments