⛏️
공부방
  • README.md
  • 프로젝트
    • ft_transcendence
      • 설계
        • 0. 프론트 디자인
        • 1. BackboneJS 뷰 객체
        • 2. API 설계
        • 3. 레일즈 라우팅 구현
        • 4. DB 설계
        • 5. 채널 설계
    • slab-saver
    • react-payment
  • 공부
    • HTML, CSS
      • GRID
      • emmet
      • position
      • CSS Unit
        • 단위 정리
        • 기준을 정해보자
        • em의 정확한 기준은 뭐야?
      • flex
      • NAVBAR 실습
      • 유튜브 화면 만들어보기
    • SQL
      • 이론
        • 1강 데이터베이스
        • 2강 다양한 데이터 베이스
        • 3강 데이터베이스 서버
      • 명령어
        • DB 관리
        • TABLE 관리
        • Constraints
        • SQL 명령어 - 1
        • SQL 명령어 - 2
        • SQL 명령어 - 3
        • SQL 명령어 - 4
        • SQL 명령어 - 5
    • Ruby
      • 루비 객체와 클래스
      • 곡괭이
        • Chapter2. Ruby.new
        • Chapter3. 클래스, 객체, 변수
        • Chapter4. 컨테이너, 블록, 반복자
        • Chapter5. 기능 공유하기
        • Chapter6. 표준 타입
        • Chapter8. 메서드 파헤치기
    • Python
      • 유용한 링크
    • RubyOnRails
      • 아직 정리하지 못한 것들
        • RSPEC 을 이용한 테스트 완전 자동화
        • 레일즈 이니셜라이징 과정
        • 액션케이블 구체적으로 정리하기
        • 웹팩으로 자바스크립트 모듈 관리하기
      • ACTIVE JOB
        • 액티브잡의 기본
        • 실전! 액티브 잡을 이용한 스케쥴링
        • 서버를 껏다 키면 스케쥴링 된 이벤트가 사라진다!
      • ACTION CABLE
        • 액션케이블 Consumer를 이용해서 문제 해결
        • 액션케이블 연결 순서
      • ACTIVE STORAGE
      • 모델
        • validation
          • seeds 데이터 validation 스킵
          • validation 검사가 save, update, create 모든 경우에 일어난다
          • validator 클래스
          • 커스텀Validation
          • validates format(정규표현식)
        • 액티브레코드 find의 다양한 활용
        • 한 레코드에 동시 접속 막자!! with_lock
        • 레일즈 where 사용법
        • 레일즈에서 모델 관련 이슈
        • 모델이름바꿀때명심할것
        • 모델의 includes 메서드
        • 연관 모델을 다른 이름으로 설정하고 가져오기
      • 기본 상식
        • form으로 전달되는 params를 분석해보자
        • StrongParameter 쿼리 배열 받기
        • view helper로 디버깅 하는 방법
        • css 파일을 수정했는데 적용이 안된다?
        • StrongParameter 일반데이터와 객체 데이터 한번에 받기
        • wrap-parameter body가 두 번씩 날라오는 이유
        • 컬렉션 map에서 요소 스킵하는법
        • CASE를 이용해서 정렬(일반적인 정렬 X)
        • 문자열(정규표현식)
        • TIME ZONE 설정하기
        • 커스텀exception
      • RSPEC으로 모델 테스트하기
      • 한 눈에 읽는 루비 온 레일즈
      • Perfect RubyOnRails
        • Chapter1. 소개
        • Chapter2. RubyOnRails 기본
        • Chapter3. 스캐폴딩
        • Chapter7. 라우팅
        • Chapter8. 테스트
    • Javascript
      • var, let, const 차이
      • 브라우저 동작 원리
      • 디바운싱과 쓰로틀링
      • Tagged Template Literal(styled-components)
      • IntersectionObserver 를 사용해서 스크롤 이벤트의 부하 줄여주기
      • EVENT LOOP
        • 자바스크립트에서 어떻게 비동기적인 실행이 가능한걸까?
        • 이벤트 루프의 동작
        • setTimeout이 실행되면 어떤 동작이 일어날까?
        • 블록은 실행이 보장된다
        • 콜스택에 있는 블록이 보장된다는 점을 이용해서 브라우저 죽이기
        • setTimeout 무한반복으로 브라우저는 죽을까?
        • Promise 무한반복으로는 브라우저를 죽일 수 있을까?
        • RAF는 그럼 뭐야?
      • forEach는 반복도중 멈출 방법이 throw 밖에 없다!
      • 임시
        • 정리할 것 목록
          • 자바스크립트 기본 문법
        • 이벤트 임시 정리
      • 유용한 링크
      • arrow function 을 이용한 bind 이슈 해결
      • preventDefault - passive
      • CRITICAL-RENDERING-PATH
      • setInterval에 클로져 개념 사용하기
      • 오디오 문제 이슈
      • 자바스크립트의 식과 문
        • 식과 문이란 무엇인가...
        • 식
          • 1. 기본값과 래퍼객체
          • 2. 참조값과 가비지컬렉팅
        • 식을 조금 더 자세히 알아보자
      • prototype, [[Prototype]] 차이
      • export, import 학습
      • ESlint
      • 아주아주기본
        • Chatper1. 기본
        • Chapter2. 타입
        • Chapter3. 연산자
        • Chapter4. 제어문
        • Chapter5. 배열
        • Chapter6. 함수
        • Chapter7-1. 객체
        • Chapter7-2. 객체
        • Chapter8. 표준객체
        • Chapter9. DOM
      • 이벤트 위임
      • 이벤트가 버블링 되서 root 까지 가다보면... 부모의 부모의 ... 모든 click 이벤트를 발동시키는거 아니야?
      • classList
    • BackboneJS
      • Backbone Model 프로토타입에 메서드 구현하기
      • BackboneJS의 각 요소의 역할과 책임을 확실히 이해하자
      • Window 이벤트를 listenTo로 감시하기
      • 뷰 자신이 자신을 지워야 할 때를 감지하려면 어떻게 해야하는가?
      • 백본 VIEW의 remove와 jquery의 remove 는 다르다!
      • 백본 컬렉션 URL에 쿼리 붙이기
      • index.html.erb와 BackboneJS의 결합
      • 백본 모델과 컬렉션에서 fetch 를 통해 JSON 가져오기!
      • 모델은 urlRoot, 컬렉션은 url
      • ISSUE
      • Absolute Beginner
        • Part1
        • Part2
        • Part3
        • Part4
    • 문제풀이
      • 01. 유효한 팰린드롬(leetcode: 125)
      • 02. 문자열 뒤집기(leetcode: 344)
      • 03. 로그파일 재정렬(leetcode 937)
      • 04. 가장 흔한 단어(leetcode: 819)
      • 05. 그룹 애너그램(leetcode: 49)
      • 06. 가장 긴 팰린드롬 문자열(leetcode: 5)
      • 07. 두 수의 합(leetcode: 1)
      • 08. 빗물 트래핑
      • 09. 세 수의 합(leetcode: 15)
    • BlackCoffeeStudy
      • level1
        • 1주차
    • express
      • Untitled
      • 구글 애널리틱스 연결하기
      • passport를 활용한 로그인
      • express-init 명령어 사용
      • ec2와 DBeaver
      • mariadb 설치
      • sequelize 설치 및 사용법
        • sequelize 설치
        • sequelize-cli 사용법
        • 모델 간 연관관계 맺기
        • Hook 사용하기
      • express-ejs-layout 활용하기
      • Bootstrap
      • npm install로 설치한 모듈 ejs에서 사용하기
      • 미들웨어
    • cypress
      • window.alert 테스트는 어떻게 하지?
      • 상수를 어디에 저장할건가?
      • before()와 beforeEach()
    • aws
      • aws로 프로젝트를 배포해보자!
      • nginx로 리버스프록시 서버를 만들자
      • github actions 로 푸쉬되면 자동으로 업데이트 하는 기능 만들어보기
    • react
      • Drag & Drop 를 이용해서 리스트 요소 순서 바꾸기
      • CRA에서 CRACO 사용하지 않고 절대경로 import(NODE_PATH)
      • useEffect내에서 state의 dependency 문제
      • IntersectionObserverAPI로 무한스크롤 구현
      • react-testing-library
        • 기본
        • react-router-dom 에서의 에러
        • event 발생시키기
        • Integration testing하기
        • async하게 렌더링 되는 요소 잡기
        • Mocking 하기
      • CRA로 만든 앱에서 절대경로로 import 해오기(alias하기)
      • 커스텀 훅 만들기
    • 타입스크립트
      • 조건부타입 (Conditional types)
      • Generics
      • Keyof 타입 오퍼레이터
      • Indexed Access Types
      • 타입 챌린지
        • easy
          • 00. Awaited
          • 01. Concat
          • 02. Exclude
          • 03. First Of Array
          • 04. If
          • 05. Includes
          • 06. Pick
          • 07. Readonly
          • 08. Length
          • 09. Tuple to Object
        • mediun
          • 01. Absolute
    • Firebase
      • 파이어스토어 규칙
    • 기타
      • 협업 프로세스
      • UUID
      • 구글애널리틱스 설치하기
      • 드림코딩 강의
        • 포트폴리오
          • CSS
            • nth-child
            • CSS 팁
          • 자바스크립트
            • 1. 스크롤에 따른 navbar 의 색 변경하기
            • 2. navbar 버튼을 누르면 해당 페이지로 스크롤링 되게 만들자
            • 3. 스크롤 다운 하면 arrow-up 버튼 나오게 하기
            • 4. project 필터링 구현
            • 5. project 필터링에 transition 효과 넣기
      • GIT
        • 기본 사용법 정리
        • git remote update - remote 브랜치 가져오기
  • 기타
    • 이것저것
      • 독서
        • 클린코드
          • Chapter0. 나는 왜 클린코드 책을 읽는가?
          • Chapter1. 클린코드
          • Chapter2. 의미있는 이름
          • Chapter3. 함수
          • Chapter4. 주석
          • Chapter5. 형식 맞추기
      • 용어
      • IDE
        • RubyMine
          • 실전이 중요!
          • 1. Editor Basic
          • 2. Navigation
          • 3. Completion
          • 4. Refactoring
          • 5. Code Assistance
      • MAC에서 살아남기
        • Alfred - Spotlight 업그레이드
        • Vimium
        • BetterTouchTool - 트랙패드
        • 구름 입력기 - ESC, `
        • Spectacle - 화면 분할
    • 원티드 프리온보딩
      • 1주차
        • 월요일
        • 목요일
      • 2주차
      • 3주차
      • 4주차
      • 5주차
      • 6주차
    • 일기장
      • 2020
        • December
          • 20201208(화)
          • 20201209(수)
          • 20201210(목)
          • 20201211(금)
          • 20201214(월)
          • 20201215(화)
          • 20201216(수)
          • 20201217(목)
          • 20201218(금)
          • 20201219(토)
          • 20201221(월)
          • 20201222(화)
          • 20201223(수)
          • 20201224(목)
          • 20201226(토)
          • 20201228(월)
          • 20201229(화)
          • 20201230(수)
          • 20201231(목)
      • 2021
        • January
          • 20210101(금)
          • 20210102(토)
          • 20210105(화)
          • 20210106(수)
          • 20210107(목)
          • 20210108(금)
          • 20210109(토)
          • 20210112(화)
          • 20210113(수)
          • 20210114(목)
          • 20210115(금)
          • 20210117(일)
          • 20210118(월)
          • 20210119(화)
          • 20210120(수)
          • 20210121(목)
          • 20210125(월)
          • 20210126(화)
          • 20210127(수)
          • 20210128(목)
          • 20210129(금)
        • February
          • 20210201(월)
          • 20210202(화)
          • 20210203(수)
          • 20210204(목)
          • 20210205(금)
          • 20210207(일)
          • 20210208(월)
          • 20210209(화)
          • 20210217(수)
          • 20210218(목)
          • 20210219(금)
          • 20210220(토)
          • 20210222(월)
          • 20210223(화)
          • 20210224(수)
          • 20210226(금)
          • 20210228(일)
        • March
          • 20210302(화)
          • 20210303(수)
          • 20210304(목)
          • 20210305(금)
          • 20210306(토)
          • 20210308(월)
          • 20210309(화)
          • 20210310(수)
          • 20210311(목)
          • 20210312(금)
          • 20210313(토)
          • 20210315(월)
          • 20210316(화)
          • 20210317(수)
          • 20210318(목)
          • 20210319(금)
          • 20210322(월)
          • 20210323(화)
          • 20210324(수)
          • 20210325(목)
          • 20210327(토)
          • 20210329(월)
          • 20210330(화)
          • 20210331(수)
        • April
          • 20210406(화)
          • 20210407(수)
          • 20210408(목)
          • 20210409(금)
          • 20210410(토)
          • 20210412(월)
          • 20210413(화)
          • 20210414(수)
          • 20210415(목)
          • 20210416(금)
          • 20210417(토)
          • 20210419(월)
          • 20210420(화)
          • 20210421(수)
          • 20210422(목)
        • July
          • 20210728(수)
Powered by GitBook
On this page
  • 검색 기능은 잘 되는가?
  • 재사용 가능한 코드를 만들었는가?
  • 코드의 품질은 우수한가?
  • 총평

Was this helpful?

  1. 기타
  2. 원티드 프리온보딩

2주차

Previous목요일Next3주차

Last updated 3 years ago

Was this helpful?

2주차 과제의 시작은 의 미션이었다.‌ 이번 과제는 구현 난이도 자체는 어렵지 않았다. 다만 8명이 함께하는 작업이라는게 어려웠다. 나는 이전에 스프린트에 기반한 프로젝트를 경험하고 정리한 적이 있기에 해당 자료를 팀원들에게 공유하고 작업을 시작했다.

팀원 8명은 아래처럼 나눠져서 작업을 했다.

  1. 로그인 / 회원가입

    • 로그인 (2명)

    • 회원가입 (2명)

  2. 어드민페이지 / 전체 레이아웃

    • 어드민페이지 테이블 및 페이지네이션 (2명)

    • 어드민페이지 검색 기능, 어드민페이지에서 유저 추가, 전체 레이아웃, 권한별 라우팅 및 사소한것들... (2명, 내가 참여)

  1. (당연하지만) 기능은 완벽해야한다.

    • 콘솔창에 error 와 warning 은 절대 나와서 안된다.

  2. 코드는 재사용이 가능해야한다.

    • 여기서 말하는 재사용은 해당 프로젝트 뿐 아닌 다른 프로젝트에서도 재사용 할 수 있어야한다.

  3. 코드의 품질은 우수해야한다.

1, 2, 3 기준에 부합하는 코드를 작성하기 위해서는 혼자보다는 같이가 중요하다. 그런 의미에서 이번 페어프로그래밍 방식은 성공적이었던거 같다.

검색 기능은 잘 되는가?

(내 생각에는ㅎㅎ...)잘된다. 처음에는 내용을 입력하고 검색 버튼 을 클릭하면 테이블에 검색 된 내용을 반영하게 만들었지만 이후에 검색창에 입력한 내용을 바로 테이블에 적용하게 수정했다. 성능상에 한가지 신경쓴게 있는데, 입력될 때 마다 테이블에 반영을 하게 되면 비동기관련해서 분명 성능상에 이슈가 있을 수 있으니 debounce 기능을 사용해서 이슈를 해결했다. 디바운스와 쓰로틀에 대해 학습을 하고 정리했다.

재사용 가능한 코드를 만들었는가?

만들었다. 재사용 가능한 코드로 2가지 커스텀 훅 을 만들었다. 하나는 컴포넌트 외부의 클릭을 감지하는 훅이고 두번째는 디바운싱 훅이다. 이 두가지 모두 인터넷에 이미 많이 훅으로 만들어져 있어서 구현 자체는 너무 쉬웠다.

따라서 구현이 아닌 리액트 훅의 동작원리에 대해 학습을 했다. 이전에 리액트 공식홈페이지를 몇번 읽어봐서 다시 읽으니 리마인드도 되고 정리도 쉽게 할 수 있었다.

코드의 품질은 우수한가?

좋은 코드는 뭘까? 완벽한 기능? 재사용 가능한 코드? 누구나 단 한번 보면 이해할 수 있는 코드? 로직 분리가 잘 된 코드? 나열한 4가지 말고도 코드의 품질을 확인할 수 있는 지표는 더 있겠지만 만약 위 4가지 지표로만 따져본다면 이번 프로젝트의 코드 품질은 정말 엉망이다. 엉망도 이런 엉망이 없다. 이유를 생각해보면 프로젝트 팀장이 없었고, 그렇다고 해서 소통이 좋았는가? 소통 또한 좋지 못했다. 나 또한 다른 사람들의 코드에 관심을 신경쓰지도 않았다.

엉망인 요소를 나열해보자

  1. 일치되지 못한 폴더, 파일이름

  2. 파일 구조

  3. 상수를 사용하지 않음, 매직넘버가 너무 많이 쓰임

  4. 10줄짜리 코드를 100줄로 만들어버림

  5. 과제가 진실로 원하는 바를 파악하지 못했음

    • 각 권한 별로 보여줄 수 있는 페이지를 직접 어드민이 설정해줄 수 있어야하는데 그 기능을 넣지 않았다.

    • 예로 들면 선생님이 볼 수 있는 페이지를 어드민이 관리자페이지에서 동적으로 수정할 수 있는 기능!

다른 사람에게 보여주기 부끄럽다. 조금이라도 리팩토링을 해야하지 않을까..

총평

결국 제시간에 제출은 했기에 표면상으로는 성공이지만, 내부적으로는 실패했다고 생각한다. 그러면 다음 프로젝트 때는 어떻게 해야할까?

  1. 프로젝트 팀장을 정하자. 없으면 그냥 내가하자.

  2. 내가 작성한 코드도 다른사람에게 리뷰 받고, 다른 사람의 코드는 내가 리뷰하자.

처음에는 어드민페이지의 검색기능만을 담당했지만, 빨리 끝난 관계로 다른 부분을 많이 맡아서 진행했다. 나는 님이랑 같이 작업을 했다. 다른 팀원들은 개인적으로 작업을 진행한거같은데 페어프로그래밍을 굉장히 좋아해서 양해를 구하고 vscode-liveshare 를 이용해서 진행했다. 구현에 있어 가장 중요시했던건 아래의 3가지다.

나리
2021. 08. 09. 1차 리팩토링 (#144)
디바운싱과 쓰로틀링
커스텀 훅 만들기
자란다
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.Notion
팀원들한테 공유한 내용. 깃 사용법도 정리해놔서 읽어보셨다면 아마 도움이 되지 않았을까 싶다.
디바운싱과 쓰로틀링공부방
디바운싱과 쓰로틀링
커스텀 훅 만들기공부방
커스텀훅을 만들어봅시다!
Logo
Logo
Logo