-
Notifications
You must be signed in to change notification settings - Fork 74
[team29][FE] 프로젝트 기본 구성 설정 #29
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
위키에 정리된 설계를 잘 확인해보았습니다. 적당히 자세하고, 어떤 의도로 만들려고 하는지 작성이 되면 업무할 때 여러모로 도움이 될 것이니, 코딩하는 것보다 더 신경써서 해봅시다. |
"webpack-dev-server": "^4.7.4" | ||
}, | ||
"dependencies": { | ||
"eslint": "^8.12.0" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 친구도 dev에 들어가야할 것 같은 느낌이? ㅎㅎ
셋팅, 설계, 버그잡기같이 실제 코드를 짜는 것보다 다른 것들이 시간을 많이 잡아먹습니다. 이는 매우 정상적인 것이니, 너무 아무것도 안한 것 같다고 신경쓰지는 마시고 편하게 계속 진행해주세요~ 지금 정하기 애매한 것들은 조금 작업을 해보면서 장단점을 몸소 느끼고 정하는게 좋을 수 있습니다. 리뷰를 마칩니다! |
- 카드 생성 요청에 대해 2xx 응답이 보내지는지 확인
- 인자가 많아 빌더패턴을 사용하였으나, 추후에 많은 변동사항이 생길 것이라 예상됨
- CardService에서 CardCreateRequest를 Card 객체로 변환하도록 함
- create : 생성된 카드를 DB에 저장 - findById : 카드 id로 DB의 카드 조회
- 기존의 DtoConverter의 역할은 DTO에게 위임
* 카드 등록 - 새로운 카드 등록 기능 구현 (#29) * feat: todolist column과 task를 스크립트로 렌더링 list view와 task view를 클래스로 생성하고 db.json의 todolist를 하나의 배열로 묶음 * feat: column add button 칼럼의 추가버튼으로 등록카드 생성,삭제 기능 구현 * feat: task cancle button 등록카드의 취소버튼을 누르면 등록카드를 삭제하는 기능 구현 * refactor: 메인 렌더링 영역을 list에서 main으로 수정 entry point에서 mainInit의 parent를 list에서 main으로 리팩토링 * refactor: input event를 메인에서 task 모듈로 분리 입력창을 autoResize하는 이벤트를 task 모듈로 분리함 * rename: index.js * 카드 등록 - 새로운 카드 입력창 생성 기능 구현(1) (#32) * feat: 등록버튼 활성화 기능 구현 등록카드에 내용을 입력하면 등록버튼을 활성화, 입력할 수 있는 최대 글자수는 500자 * refactor: registration activation을 todoListStore에서 관리 activiation관리를 task에서 todoListStore로 변경 * 카드 이동 - 드래그앤드랍으로 카드 이동 구현(1) (#33) * design: task cursor 변경 * task -> grab * delete button -> pointer * feat: mousedown 시 copyTask 생성 기능 구현 * Task 에 mousedown 이벤트 발생 시 드래그 할 복사본 Task 요소를 생성하는 기능 구현 * feat: index에서 todoList render 후에 dragEvent 등록 기능 구현 * 카드 등록 기능 구현 된 로직에 dragEvent 설정 로직 병합 * 그 외 자잘한 수정 포함 * feat: task 요소 좌표 설정 기능 구현 * 클릭 이벤트가 발생한 좌표로 task 요소의 좌표를 설정하는 로직 구현 * feat: drag 기능 구현 * body에 mousemove 이벤트 등록해서 이벤트가 발생할때마다 해당 이벤트의 좌표로 task 요소를 이동되도록 구현 * feat: mouseup 이벤트 발생 시 드랍 & 복사 task 요소 삭제 기능 구현 * 복사한 task 요소에 mouseup 이벤트 설정 * Design: column task list height, hidden 클래스 추가 * Design: 잔상 처리용 클래스 blur 추가 * feat: drag and drop 기능 구현 * 선택 된 origin task item , 드래그 되고 있는 task item, 이동 된 task item 3개의 요소를 활용 * remove: todolistStore.js * rename: todolistStore -> todoListStore * 카드 이동 - 드래그앤드랍으로 카드 이동 구현(2) (#34) * design: task cursor 변경 * task -> grab * delete button -> pointer * feat: mousedown 시 copyTask 생성 기능 구현 * Task 에 mousedown 이벤트 발생 시 드래그 할 복사본 Task 요소를 생성하는 기능 구현 * feat: index에서 todoList render 후에 dragEvent 등록 기능 구현 * 카드 등록 기능 구현 된 로직에 dragEvent 설정 로직 병합 * 그 외 자잘한 수정 포함 * feat: task 요소 좌표 설정 기능 구현 * 클릭 이벤트가 발생한 좌표로 task 요소의 좌표를 설정하는 로직 구현 * feat: drag 기능 구현 * body에 mousemove 이벤트 등록해서 이벤트가 발생할때마다 해당 이벤트의 좌표로 task 요소를 이동되도록 구현 * feat: mouseup 이벤트 발생 시 드랍 & 복사 task 요소 삭제 기능 구현 * 복사한 task 요소에 mouseup 이벤트 설정 * Design: column task list height, hidden 클래스 추가 * Design: 잔상 처리용 클래스 blur 추가 * feat: drag and drop 기능 구현 * 선택 된 origin task item , 드래그 되고 있는 task item, 이동 된 task item 3개의 요소를 활용 * remove: todolistStore.js * rename: todolistStore -> todoListStore * feat: set drag and drop event * 카드 등록 - 새로운 카드 입력창 생성 기능 구현(2) (#35) * feat: 등록버튼 활성화 기능 구현 등록카드에 내용을 입력하면 등록버튼을 활성화, 입력할 수 있는 최대 글자수는 500자 * refactor: registration activation을 todoListStore에서 관리 activiation관리를 task에서 todoListStore로 변경 * 카드 등록 - 새로운 카드 입력창 생성 기능 구현(1) (#30) * [team-19] Todo-list 1주차 #1 코드리뷰 요청 (#32) * Update issue templates * docs: Update Readme Readme 1차 업데이트 * docs: Update Readme 기술 스택 추가 * Design: reset scss 적용 * HTML, CSS 작업 - Header, Sidebar (#11) * design: header HTML markup Related to: #8 * design: header css style Related to: #8 * design: sidebar HTML markup Related to: #8 * design: sidebar css style Related to: #8 * 메뉴 - 우측 히든 레이어 생성, 애니메이션 구현 (#12) * feat: sidebar 메뉴 버튼 사이드바 메뉴 버튼 클릭시 사이드바 숨김,보임 기능 구현 Related to: #10 * design: sidebar 애니메이션 왼쪽방향으로 나타나고 오른쪽 방향으로 숨겨지는 애니메이션 구현 Related to: #10 * 메뉴 - 우측 히든 레이어 생성, 애니메이션 구현 (#13) * feat: sidebar 메뉴 버튼 사이드바 메뉴 버튼 클릭시 사이드바 숨김,보임 기능 구현 Related to: #10 * design: sidebar 애니메이션 왼쪽방향으로 나타나고 오른쪽 방향으로 숨겨지는 애니메이션 구현 Related to: #10 * feat: action분리 action에 따라 sidebar 리스트의 comment를 다르게 출력함 Related to: #10 * feat: timestamp 기능 구현 현재 시간을 기준으로 투두리스트 작성 및 변경 시간을 보여주는 timestamp 구현 Related to: #10 * feat: 을/를, 으로/로 구분 단어의 마지막 글자 종성에 따라 모음을 다르게 렌더하는 기능 구현 Related to: #10 * HTML, CSS 작업 - Card List (#14) * design: main column list html markup Related to : #9 * move: svg file move to public/svg * 기존 public 에 있던 svg 파일을 svg 폴더 내로 이동 * icon-add.svg 파일 추가 Related to : #9 * Design: font mixin 함수 추가 Related to : #9 * design: column list scss style 작성 Related to: #9 * design: column task list scss style 작성 Related to: #9 * design: task commnet padding 을 margin 으로 변경 Related to: #9 * design: sccs convert to css Related to: #9 * fix: icon svg 파일 경로 수정 Related to: #9 * chore: 빌드환경구성 (#16) babel, webpack 적용 Related to: #15 * 메뉴 - 사용자 액션 리스트 구현 (#19) * feat: sidebar 액션 리스트 히든레이어 영역을 애니메이션 효과와 함께 숨김,보임 기능 구현 Related to: #17 * design: sidebar 액션리스트 애니메이션 Related to: #17 * move: package.json, gitignore * feat: sidebar 스크롤 기능 구현 액션리스트 기록이 많아지면 스크롤을 이용하여 다음 기록을 확인할 수 있음 Related to: #17 * design: 액션리스트 스크롤 구현 Related to: #17 * feature: json server 생성 및 db.json 추가 (#21) * json server 설치하고 db.json 에 필요한 데이터들을 추가함 Related to: #18 * HTML, CSS 작업 - Card (#22) * feat: todo-list 입력창 높이 자동 조절 todo-list를 입력하거나 지울 때 입력창의 높이를 자동으로 조절하는 기능 구현 Related to: #20 * design: column button hover color 칼럼 타이틀의 +,x 버튼을 hover할 때 버튼 색상 변경 Related to: #20 * design: 수정카드 디자인 구현 Related to: #20 * 리팩토링 - 1주차 리뷰 반영 (#24) * refactor: getFinalConsonant 매직넘버 제거 Related to: #23 * refactor: calcTimeForToday 함수 리팩토링 * 매직 넘버 제거 * DayDifference 식 수정 * 몇 년전 조건 추가 Related to: #23 * refactor: writeTime -> timeStamp Related to: #23 * refactor: identifyCategory 함수 리팩토링 * 구조 분해 할당 적용 Related to: #23 * refactor: svg 파일 경로 변수로 분리 * svg 파일 경로를 constants의 imagePath에 변수로 생성해서 관리하도록 변경 Related to: #23 * feat: fetchData 함수 구현 Related to: #23 * chore: bundle.js Related to: #23 * refactor: sidebar model 리팩토링 Related to: #23 * refactor: activationStore import 방식 변경 Related to: #23 Co-authored-by: Hemdi <[email protected]> Co-authored-by: Hemudi <[email protected]> * 카드 등록 - 새로운 카드 등록 기능 구현 (#29) * feat: todolist column과 task를 스크립트로 렌더링 list view와 task view를 클래스로 생성하고 db.json의 todolist를 하나의 배열로 묶음 * feat: column add button 칼럼의 추가버튼으로 등록카드 생성,삭제 기능 구현 * feat: task cancle button 등록카드의 취소버튼을 누르면 등록카드를 삭제하는 기능 구현 * refactor: 메인 렌더링 영역을 list에서 main으로 수정 entry point에서 mainInit의 parent를 list에서 main으로 리팩토링 * refactor: input event를 메인에서 task 모듈로 분리 입력창을 autoResize하는 이벤트를 task 모듈로 분리함 * rename: index.js * feat: 등록버튼 활성화 기능 구현 등록카드에 내용을 입력하면 등록버튼을 활성화, 입력할 수 있는 최대 글자수는 500자 * refactor: registration activation을 todoListStore에서 관리 activiation관리를 task에서 todoListStore로 변경 Co-authored-by: Hemdi <[email protected]> Co-authored-by: Hemudi <[email protected]> * Revert "카드 등록 - 새로운 카드 입력창 생성 기능 구현(1) (#30)" (#31) This reverts commit 7155f85. * merge develop2 * feature: +버튼으로 등록 카드 생성 등록 카드가 이미 생성된 상황에서 다른 탭을 누르면, 기존의 카드가 사라지고 해당 탭에 새로운 카드를 생성 * feature: task에 이벤트 등록 task 인스턴스를 생성할때 이벤트 등록 Co-authored-by: Hemdi <[email protected]> Co-authored-by: Hemudi <[email protected]> Co-authored-by: mogooee <[email protected]>
Contents - Cardcell 레이아웃 수정 - table header 고정시키기 - MainViewController 의 stackview 레이아웃 수정 Todo - 스크롤할때마다 발생하는 Constrains 에러 고치기 - 각 childViewController 에 TableView 넣기
Content - 기존에 있던 세개의 childVC 들을 하나의 VC 로 구현 Todo - Constraint 에러 고치기
Content - CardCell Constraint 에러수정
* Feat: 이벤트리스너, 이벤트위임 처리하는 헬퍼함수 추가 * Refactor: renderer로 객체로 묶었던 함수들을 풀었음 - renderer.item -> renderItem - 좀 더 함수라는 뜻을 명확하게 함 * Refactor: main 엘리먼트를 함수로 렌더링시키도록 변경 * Feat: 이벤트를 등록하고 처리하는 함수를 모은 eventHandler.js 추가
* Chore: utils.js 추가 (#20) on, delegate, emit추가 * Feat: 컬럼에 카드 등록 진행 중 #21 (#22) * Fix: colors 오타 수정 gray4 두개 선언 -> gray5로 수정 * Refactor: utils.js 수정 on 함수 삭제 delegate -> eventDelegate로 이름 변경 eventDelegate 로직 변경: potentialElement가 event.target 대신, event.target.closest(selector)와 같은지 비교 * Feat: 카드 등록 로직 추가, 작업 진행중 * Feat: 초기 렌더링 구현 (#23) * Chore: eventDelegate함수 수정 for로직을 없애고 closest(selector) 존재하면 해당 원소를 this바인딩하여 핸들러를 호출하도록 변경 * Feat: webdb.js 추가 초기 데이터 추가 * Feat: webdb.js 함수 추가 getData: key값으로 로컬 스토리지 데이터 가져오기 getColumns: 모든 todoList 배열 가져오기 columns: todoList localStorage키 배열 * Remove: store.js 삭제 * Chore: devtool 옵션 추가 * Feat: TodoItem, TodoList 추가 * Chore: uuid 패키지 추가 * Chore: webdb 초기상태 업데이트 * Feat: Todo View 추가 * Refactor: index.html 수정 마크업 수정 * Feat: 접속시 렌더링 로직 구현, 카드 추가 구현중 * Refactor: View 이름 변경 (#24) TodoItem -> TodoCard TodoList -> TodoColumn * Style: lint 수정 (#25) * Refactor: 생성자호출할시 매겨변수 전달 (#26) 이전: - 생성자 호출 - init(data) 이후: - 생정자 호출(data) * Refactor: 돔 렌더링 로직 변경 (#28) * Refactor: 매개변수 전달 정리 constructor 내부에서 구조분해 했던 로직을 매개변수로 이동 * Refactor: 로직수정 - $todoColumn, $todoList 생성자에서 초기화 - 변수 네이밍 수정 * Refactor: 로직 변경 - columns -> todoColumns - todoColumns 구성 변경 * Feat: 카드 등록 기능 구현중 (#29) * Fix: 변수 오타 수정 line19: $todoList -> $todoColumn * Feat: setData 추가 * Feat: store 추가 * Fix: textarea의 width값 수정 * Rename: index.js 제거 임시로 생성했던 index.js 제거 * Feat: utils.js에 hasClass추가 클래스를 가지고 있는지 bool로 반환하여 알려주는 유틸 함수 추가 * Chore: eslint 설정 변경 class-method-use-this: this를 사용하지 않으면 스태틱 메서드로 전환하기 룰 비활성화 * Feat: Create Card 기능 진행중 title, desc가 둘 다 채워져 있어야만 등록버튼 활성화 구현 취소버튼 누르면 카드 삭제 구현 최대 1개까지만 등록폼 생성가능 구현 (전역에서 1개일지, 컬럼당 1개일지는 미정) * Feat: textarea auto resize, p <-> textarea 변환 (#31) * Design: todo-item의 title, desc 스타일 적용받는 셀렉터 추가 textarea -> item 등록, 수정시 p -> 그외 _todo-column.scss -> _todo-list.scss로 선언 이동 * Feat: replaceLFWithBrElement 추가 및 템플릿 변경 replaceLFWithBrElement - db에서 읽은 텍스트에서 개행문자를 <br>로 바꾸는 함수 추가 * Feat: replaceParagraphWithTextarea 추가 p엘리먼트를 textarea엘리먼트로 전환하는 함수 * Feat: textarea엘리먼트 autosize기능 추가 * Feat: text의 linebreak와 <br>을 교체하는 함수 추가 replaceLinebreakWithBrElement: \r, \r\n, \n를 <br>엘리먼트로 교체 * Feat: TodoCard에 static method 추가 TodoCard 엘리먼트의 title, desc를 나타내는 엘리먼트를 <p>에서 <textarea>로, 또는 반대로 바꾸는 메서드 추가 * Feat: Modal (#32) * Feat: modal 마크업 * Design: modal * Chore: modal default 디스플레이 hidden으로 변경 * Feat: 카드삭제버튼 누르면 모달창 보여주기 * Refactor: modal 마크업 수정 취소모달 -> 기본 모달 수정모달, 추가모달 등등 다른 내용으로 활용 가능하도록 * Feat: openModal, closeModal utils추가 및 등록 - app.js에서 closeModal 이벤트 위임 - openModal: modal의 컨텐츠를 넘겨 받을 수 있음. * Refactor: app.js에 init함수 추가 DOMContentLoaded이벤트로 init함수 실행 * Chore: modal 마크업 수정 scss: 공백 및 색깔 변수 수정 modal.js 삭제 * Feat: 카드 등록 추가 (#33) * Refactor: 중복 css선언 제거 * Refactor: Modal 분리 * Feat: 등록 버튼 이벤트핸들러 추가 * Feat: 카드 등록 추가 * Style: 메서드 호출 순서, 메서드 선언 순서 변경 (#34) Co-authored-by: YUNHO <[email protected]>
[#29]Refactor: 자잘한 버그 수정 및 관련없는 함수 분리
- Memo 모델 객체 관리를 뷰컨트롤러가 아닌 해당 클래스에서 수행하기 위한 목적으로 생성
- 여러 폴더에 분산되어 있어서 네트워크 관련 파일들은 모두 Network 디렉토리 하위로 이동시킴
- 요청 시에 메소드 내부에서 일일히 지역변수 만들어서 인스턴스 할당하지 않고, 클래스 자체의 MemoUseCase 타입 속성을 사용하도록 수정
- NetworkHandler - MemoManager 간에 네트워크 통신을 하므로 유스케이스 제거
…ype Int로 변경, Memo 모델 클래스에 CodingKey 추가 - MemoStatus로 클래스명 변경 - 서버에서 MemoStatus 관련 값을 Int로 주기 때문에, 해당 열거형의 rawValue도 Int로 수정 - 서버에서 내려주는 응답양식과 맞춰지도록 Memo에 CodingKey 추가
- HistoryEntity, MemoEntity는 사실상 CommonResponseType을 채택한 다른클래스가 역할을 수행하기 때문에 우선 제거했음 - Network 디렉토리 내부의 불필요한 하위 디렉토리는 제거했음 - EndPoint의 경우에는 Network와 관련있기 때문에, 해당 디렉토리 하위로 이동시킴
… MemoRequest가 각각 DTO 와 Entity 역할 수행하도록 분리 - 서버의 응답 데이터와 1:1로 대응되는 Entity와 MVC 계층 간에 교환되는 DTO를 서로 분리하기 위함 - Memo 객체는 RequestEntityConvertible을 채택하여 MemoRequest 객체로 변환 가능(DTO -> Entity) - MemoResponse 객체는 CommonResponseType을 채택하여 Memo 객체로 변환 가능(Entity -> DTO)
- NetworkHandler.request 호출 시에, 성공적인 응답 수신 시 호출할 클로저를 파라미터로 받도록 추가 - NetworkHandler.request 호출 시에, 기존에 파라미터로 받던 Task 타입 인자는 필요 없기 때문에 제거 - JSONHandler.converJSONToObject 호출 시 파라미터로 제네릭 타입 인자의 타입 정보를 받도록 추가
- 서버가 비활성화된 상태이기 때문에, 테스트를 위해 NetworkHandler.mockRequest로 대신 호출하도록 처리했음(기존의 request 호출은 주석처리) - request 호출 시에, 클로저로 응답 수신 성공 시의 로직 실행을 전달하기 때문에 handleSuccess 내부의 switch 구문은 제거 - 임시로 handleFailure 호출 시에는 우선 로그로 에러 내용 출력하도록 처리 - 임시로 생성자에 선언했던 Memo 객체 생성 로직은 모두 제거했음
멤버
cola, dori
진행상황
프로젝트 초기 세팅
Webpack
,Babel
실습.lint
+formatter
설정 실습요구사항 분석
어려웠던 점
웹팩, 바벨 및 린트와 프리티어 설정 등을 공부하고, 오류를 해결하는데 시간을 많이 써서 기능 구현은 하지 못했습니다. 😂
미션을 진행하기 전 Github에 있는 협업 전략 기능들을 실습하였고, 요구사항을 작게 나눠 분석하였습니다.