(파란별) Index

(파란별) Date

의 회의록 마스터 : 이하령 (대리로 고주형 )

(파란별) Participants

TEAM FIRE (윤영기 고주형 이하령) + 멘토님 (@정원용)

(파란별) Assignment

  1. 페어프로그래밍, XP, TDD 공부

  2. 팀 자기소개 페이지 (리액트 환경 설정[ 이하령 ])

    1. CRA

    2. styled-component

    3. ESLint + Prettier

  3. 페어프로그래밍을 어떤식으로 발전시켜야 대한민국 혹은 사람들이 쓸 수 있을까에 대한 고민

  4. 해외에서 페어 프로그래밍이 잘 도입되었는지 조사

  5. 백엔드 기술 스택 정하기

  6. Jest 익히기

(파란별) Discussion topics

멘토링 내용

아이스브레이킹

자전거 펑크

저번에 하기로 한 것

  • 퍼소나

  • 기술적 진입 장벽

  • 코드 리뷰

바뀐점

페어 프로그래밍 소개

  • 한국에는 페어 프로그래밍이 잘 정착되지 않음

  • 우리가 페어 프로그래밍을 잘 사용할 수 있게하는 역할을 하겠다

피드백 및 질문

테스트 프레임워크

  • Jest

    • 왜 쓸까?

    • 어디에 쓸것인가?

      • 프론트

  • Purperteer

    • 렌더링된 UI 테스트

      • 헤드리스 크롬에서 여러 엔션으로 이벤트 트리거 후 DOM 체크

    • 이것도 Jest내에서 이루어짐

Code 먼저? 개발 코드 먼저?

  • 인터페이스를 먼저 정의하고 테스트 코드를 작성한다

  • 그 테스트를 통과시키기 위해 코딩을 함

실제 멘토님의 경험 사례

기간 내에 일을 끝내지 못하는 사원과 페어 프로그래밍

  • 기획을 이해하지 못한 상태로 코딩

  • 지우는 코드가 더 많았음

결론

페어 프로그래밍은 목적성이 명확해야 할 것이다

TDD 어떻게 해야할까? (주형 질문)

  1. 기능 정의

  2. 작업을 TASK로 만든다

  3. 실제 코드를 작성한다

  • 변동이 생겨도 연연하지 말 것 (나중에 회고할 때 정리할 것)

(Tip) 지식의 저주를 조심해라!

대~한민국 박수를 알게 된 후부터는 그것만 연상된다

처음에 불편한 것이 있을 것

  • 다음부터는 불편함 점이 아니게 될 수 있음

  • 처음 불편했던 것을 잘 적어둘 것!

실제 개발자 중에서도 수요가 있을까? (영기님 질문)

한국 정서와 맞지 않을 수도 있을 것 같다.

수요가 적더라도 확실하게 원하는 사람이 있으면 고!

소마에서도 높은 시장성을 무조건 원하는 것은 아니다.

시장이 보이는지 체크할 것

다횅인 점

  • 리뷰 플랫폼 존재

    • 크몽

예상 시나리오

가설 다 그림이다. 아마 이렇게 흘러갈 것이다.

우리는 발전해 나간다

  • 가설을 세우고 데이터를 수집한다

  • 가설

    • 맞으면 기능으로 추가, 개선

    • 틀리면 수정 혹은 제거

  • 현실성 있는 고민을 하며 발전되어 갈 것

페어 프로그래밍을 왜 안할까?

  1. 개발자의 수가 부족하다

  2. 기업에서는 맨먼스를 많이 따진다

  3. 코로나로 인해서 문화가 달라졌다

    • 온라인으로 가면 우리 서비스가 장점이 될 수도 있을 것

해외에서는 이것이 잘 적용되고 있는지 조사가 필요할 것

사용할 툴

  • Jenkins

    • 지속적으로 테스트 관리해야 유믜미

    • 브랜치 기반으로 Test, Integration

  • Bitbucket

    • Jira를 쓸 때 편하다

    • 리모트를 두개 써도 되는지에 대한 의문

    • GitLab에도 잔디가 있어야 함

프론트엔드 기술 스택

  • React

  • TS

  • NextJS

    • 처음부터 고려해야할 것 있음

    • 필요하다면 처음부터 쓰는 것 추천

  • react-query

    • 필요시 사용

  • Socket.io

    • 사용하게 될 것!

  • Recoil vs Zustand vs Redux

    • 적당한 것 비교해서 사용!

  • StyledComponent

  • Jest

  • MSW

    • 여러가지 데이터 모킹 툴이 있음.

    • 시작할 때 참고용 (프론트, 백 공통) 환경 설정을 만들어서 해보면 좋을 것

  • ESLint, Stylelint, Prettier 필요

  • StoryBook

    • 공부차원에서 쓰면 좋다

    • 더 함수나 컴포넌트의 관심사를 분리시키는 등 신경 쓰게됨

    • 실제로는 초반에 하다가 나중에 안 쓰게 되기도 함

백엔드 기술 스택

  • Docker / K8S

    • 노드 = 싱글 쓰레드
      → 클러스터 구성 필요
      → PM2 모듈 생각중 (고주형)

    • 죽었을 떄 살려줄 친구는?

      • 마스터 프로세스 필요할 것 = PM2

  • AWS

  • Nginx

  • 다음 멘토링까지 구체화 올 것

정리

  • 예상되는 형태

    • saas + 중앙(or Proxy) 서버

  • 다음주까지 많이 바뀔 것

    • 지금 확정지어서 많이 얘기할 수는 없음

    • 페어 프로그래밍 후에 얘기드릴 것

  • 백엔드 아키텍처 그려오기

    • AWS 그림 그리기 기능

내일 워크샵

페어 프로그래밍 진행 방식

  • 기획안을 만들자

  • 화면 갯수 만큼 스토리를 만든다

  • 만든 스토리마다 작업 Issue를 만든다

  • Issue마다 함수수준으로 쪼갠다

  • 각 작업별로 테스트 케이스 작성

드라이버의 역할

  • 함수 하나하나 케이스 통과하게 끔 작업

  • 작업이 너무 크면 중간에 바꿔가며 가능

주의 사항

  1. 처음 시작할 때의 안목으로 Issue를 만들어라!

  2. 목표점을 시각적으로 드러내며 진행하라!

  3. 하면서 느낀 문제점을 적어라!

  • 예를 들어서

    • 기술적인 허들로 인테넷을 검색하는데 귀찮았다

    • 지금 코드의 맥락을 파악하는데 도움이 되는 것이 있었으면 좋겠다 (갈망)

4. 끝나고 회고하라!

  • 아침에 얘기한 모든 Issue가 클리어되어서 원하는 결과물이 나왔는지 체크할 것

서버 구성에 대한 질문 (하령님 질문)

+ 이해하려면 어떤 것을 더 공부해야 할지에 대한 질문

사실상 실시간 채팅 서비스와 비슷하다

  • 동기화 기능이 있을 것

  • 오픈소스 많다

오픈소스 에디터

  • Monaco

    • MS 개발

    • 퀄리티 좋음

  • Ace

    • c9.io

    • AWS가 인수

  • Code warrier

    • 오픈소스로 시작해서 오픈소스로 끝남

코드 쉐어 기능

  • 저 에디터들도 이런 것은 3rd 파티를 사용한다

채팅 서버의 위치

= Code Server가 어디에 위치할 것이냐

On-promise 방식 / 설치형 중앙 서버라면?

  • 공개 서버를 거치게 할 수 없게 하기 위함

  • Proxy서버를 둬서 내부망에 있는 서버를 쓰게 하자

Socket.io에 대한 설명

  • 실체는 “Websocket API”

    • 웹 브라우저에서 커넥션을 가져서 통신하기 위한 API(socket통신)

  • 크로스브라우징 이슈 해결

    • 기존의 방식

      • 클라이언트의 요청 위주

      • 서버가 주도적으로 요청하기 어려움

    • 레거시 브라우저

      • Websocket API 없음

      • 클라가 요청을 보내면 기다린다는 점을 이용

      • http keep-alive를 이용한 long-polling으로 지원

다 구현하기 힘들기 때문에 결국 이것을 쓰게 되어 있댜

멘토링 후 회의

스크럼이라는 용어를 잘못 사용하고 있었다

  • 스크럼

    • 기록을 남기지 않음

    • 오늘 할 것 얘기하는 정도

  • “데일리 스크럼 → 데일리 회의록”으로 수정

  • 지금 기획이라 어쩔 수가 없다

NextJS 공부

  • 프론트엔드 프레임워크

  • 리액트만 쓰는 느낌이라 비슷할 수 있지만 세부적으로 들어가면 알아야 할 것이 매우 많다

  • 일단 핵심인 리액트 위주로 공부

    • 나중에 NextJS 쓰다가 문제 생기면 수습!

내일

  • 일단은 화면 구성 위주로 해보자

  • 기획도 내일 만나서 시작 (준비 X)

  • Jest는 고주형 이 한번 시연?해볼 것

    • 된다면 TDD 경험

    • 사실 저도 처음이라 아는 것 없습니다ㅋㅋㅎㅎ

Cypress

  • Jest가 아닌 Mocha 사용

  • Jest 위주로 가기로 결정

설문조사는 제트브레인 설문조사 참고하면 좋을 것 같습니다