park-moen/emo-v2

🧬 Park-Moen

• Vanilla JS로 Library & Framework의 기능을 직접 구현하는 것을 좋아합니다.
• 신뢰와 자신감 있는 코드를 만드는 것에 큰 노력을 기울입니다.
• 시스템 설계 구조를 통해 통일된 코드 베이스를 만드는 방법에 관한 생각하는 것을 좋아합니다.
• 토론을 통해 여러 사람의 의견을 듣는 것을 좋아하며, 새롭게 배운 기술에 대해 전파하기 좋아합니다.

🛠 skill

📮 post

emo-v2's Issues

[Bug navigation bar rerender Problem]

현재 화면에서 같은 페이지 NavBar로 바로 가기 클릭하면 다시 렌더링되는 문제 발생 (여기서 말하는 렌더링은 서버에서 다시 데이터를 받아오는게 아닌 InnerHTML가 포함된 render function이 다시 실행되는 것을 의미)

Recommend Page의 경우는 새롭게 추천 받기의 필요성을 확인, 그래도 통일적으로 logic을 작성하기 위해서 refresh 버튼을 Recommend Page에 추가할 예정

[Feature CuisinePage]

• Multi Page application로 구현된 로직 Single Page application로 구현하기(Router와 연동)
• JS Extensions => TS Extensions으로 변경 및 Type Error 해결하기
• 정적 HTML file => handlebars file로 변경하기
• 뒤로가기 button route에 연결하여 연동하기

[Feature MemoPage]

• Multi Page application로 구현된 로직 Single Page application로 구현하기(Router와 연동)
• NavBar Route에 Memo Page 연결하기 issue8
• JS Extensions => TS Extensions으로 변경 및 Type Error 해결하기
• 정적 HTML file => handlebars file로 변경하기
• 현재 추가, 하나의 메모 클릭, 모든 메모 클릭, 삭제 기능을 실행할 떄마다 불필요한 네트워크 요청이므로, render function(따로 server와 통식 x)만을 호출하여 문제 해결하기

[Style detail work]

• Recipe Page에서 선택된 재료 외의 재료 button 클릭하면 선택된 재료처럼 색상이 바뀌는 style 기본 색상으로 나두기(혼돈을 줄 수 있는 소재로 기능 삭제)

• 찜하기 기능 button 클릭 시 추가 알람 모달만 띄우는 style을 toggle처럼 추가, 제거 알림을 띄워주는 style 적용

• Ingredient Page에서 재료 선택 후 제거 시 기본 색상으로 바꾸기

• 재료 선택 후 요리 보기로 Cuisine Page로 이동했지만 DB Data가 없는 경우 정보가 없다는 안내문 관련 Style 만들기

• Ingredient Page에서 모든 재료 모음 제목을 open하면 조미료 part가 가려진느 현상 발생

• 전체 height Layout 깨지는 현상 발생

[Feature LoginPage]

• anchor tag(hyperlink)로 연결된 로직 route로 변경하기

[Refactor and Feature RegisterPage]

refactoring

• Multi Page application로 구현된 로직 Single Page application로 구현하기(Router와 연동)
• JS Extensions => TS Extensions으로 변경 및 Type Error 해결하기
• 정적 HTML file => handlebars file로 변경하기

enhancement

• 모든 조건에 충족하는 정보를 기입하면 확인 모달 띄우는 기능 추가
• 확인 모달창 클릭 login page로 이동 및 db에 user 정보 저장 기능 추가
• 모든 조건에 충족하는 정보를 기입하지 않으면 다시 시도하라는 모달창 띄우는 기능 추가

[Unresolved #Issue8]

4개의 바로가기(요리재료, 장보기 메모, 오늘의 요리, 회원 정보) Route 연결

Route 충돌로 모든 page 동작 확인 후 다시 issue reopen할 예정입니다.

[Refactor RecipePage]

• Multi Page application로 구현된 로직 Single Page application로 구현하기(Router와 연동)
• JS Extensions => TS Extensions으로 변경 및 Type Error 해결하기
• 정적 HTML file => handlebars file로 변경하기

[Refactor IngredientPage]

• Multi Page application로 구현된 로직 Single Page application로 구현하기(Router와 연동)
• JS Extensions => TS Extensions으로 변경 및 Type Error 해결하기

Supplement Feature

• EMO server 구축을 통한 Json-Server에서 server와 DB를 동시에 담당한 부분 변경하기
• Test logic 작성을 통한 추후 개선할 logic의 문제점 바로 잡기
• Webpack mode가 development 설정으로 성능 이슈 및 성능 향상에 방해가 되는 문제 해결을 위해 mode를 production으로 변경하고 설정 수정하기

[Unresolved Ingredient Page and Cuisine Page about SessionStorage]

• 재료 화면에서 요리 되돌리기 버튼 클릭하면 재료에 관한 sessionStorage만 지워져야하는데 모든 sessionStorage 지워지는 현상 해결하기(밑의 gif 참고)

• 기존에 가지고 있던 찜하기 목록에서 새롭게 다른 item을 찜하기 누르면 data 2개가 저장되길 기대하지만 기존의 data를 지우고 새로운 data만 sessionStorage에 저장되는 문제 발생
• 찜하기 버튼 클릭하면 sessionStorage에 array로 data가 저장되길 기대하지만 단일 string으로 저장되는 문제 발생 (밑의 gif 참고)

• 처음 재료 선택 후 cuisine page로 이동한 후에 다시 ingredient page로 와서 재료 선택하면 일부 재료 선택 안되는 문제 발생 (밑의 gif 참고)

[Refactor MyinfoPage]

• Multi Page application로 구현된 로직 Single Page application로 구현하기(Router와 연동)
• JS Extensions => TS Extensions으로 변경 및 Type Error 해결하기
• 정적 HTML file => handlebars file로 변경하기

[Refactor RecommendPage]

• Multi Page application로 구현된 로직 Single Page application로 구현하기(Router와 연동)
• JS Extensions => TS Extensions으로 변경 및 Type Error 해결하기
• 정적 HTML file => handlebars file로 변경하기

[Unresolved Recipe about SessionStorage]

#issue21 에서 파생된 bug로 인지

• 기존에 가지고 있던 찜하기 목록에서 새롭게 다른 item을 찜하기 누리면 data 2개가 저장되길 기대하지만 기존의 data를 지우고 새로운 data만 sessionStorage에 저장되는 문제 발생 (밑의 gif 참고)
• 찜하기 버튼 클릭하면 sessionStorage에 array로 data가 저장되길 기대하지만 단일 string으로 저장되는 문제 발생 (밑의 gif 참고)
• 찜하기 버튼 클릭 후 확인 모달 보이지 않는 문제 발생

[Merge Common NavBar]

• 각 Page에서 따로 만들어진 NavBar 중복 로직 및 Route 중복 방지를 위해 하나로 통일

• 4개의 바로가기(요리재료, 장보기 메모, 오늘의 요리, 회원 정보) Route 연결

[Feature make up for missing features]

All Page

• 뒤로 가기 버튼 기능 구현

Ingredient Page

• refresh icon 안보이는 현상 해결하기

Memo Page

• 모든 메모 비체크 상태에서 모두 체크 버튼 클릭하면 가끔 전체 체크가 안되는 현상 발생
• 메모 하나를 클릭 상태에 따라 전체 체크 버튼 상태 자동 변경되게 고치기

Cuisine Page

• 새로고침 후에 다시 찜하기 클릭하면 기존에 가지고 있던 데이터 전부 지우는 현상 해결하기
• icon 상태에 따른 추가,제거 modal 보여주기
• server data에서 받은 img url로 image 보여주기

Recipe Page

• 찜하기 기능 Cuisine Page처럼 icon 삽입하기
• icon 상태에 따른 추가,제거 modal 보여주기
• server data에서 받은 img url로 image 보여주기

Recommend Page

• server data에서 받은 img url로 image 보여주기
• 뒤로가기 버튼 클릭시 이전에 추천한 3개의 Data 보여주기
• 찜하기 기능 Cuisine Page처럼 icon 삽입하기
• icon 상태에 따른 추가,제거 modal 보여주기
• item 클릭하면 Recipe Page 보여주기 기능 구현(Route)

Myinfo Page

• 처음 회원정보 page로 이동하면 카테고리 기본값으로 찜한 레시피 보여주기 button에 active 상태로 만들고 색상 입히기
• 찜하기 목록에 보여지는 동일한 image를 Data에 따라 다르게 보여주기
• 로그아웃 기능추가

[Improve IngredientPage View]

• gif image에서 보이는 것처럼 재료를 선택할떄마다 선택한 재료 창으로 재료가 이동하면서 재료 선택창이 화면을 뒤덮는 상태가 발생.

🔑 해결책: 재료를 선택 여부에 따라서 toggle button(재료가 선택된 경우에만 button 이 보이게 할 예정)을 하단에 생성하여 재료창을 선택적으로 보이게 하는 방식으로 해결

• gif image에서는 재료를 open한 경우 scroll이 발생하여 재료를 모두 보기 할 수 있어야 하지만 scroll이 되지 않아서 화면이 짤리는 현상 발생

• 부제목 icon 보이지 않는 문제 해결하기(CDN 비연결로 인한 문제로 SVG file로 Icon 사용하기)

• 밑에 사진에서 보이는 뒤로 가기 버튼 가려지는 현상 & 사진 보이지 않는 현상 해결하기

[Unresolved #Issue9 & #New Issue]

new issue: Nav Route로 연결 후 다른 Route 이동하면 JS 동작이 멈추는 현상 발생

#issue9: MemoPage에서 전체 체크가 항상 off로 시작하는 문제 발생, 유동적으로 변경할 예정

[Feature IndexPage]

• Login route 구현
• Ingredient route 구현
• Cuisine route 구현
• Memo route 구현
• Myinfo route 구현
• Recipe route 구현
• Recommend route 구현
• Register route 구현
• 각 route and handlebars extension 연결

[Style extract Common Style logic and Fix Broken Layout]

extract Common Style

• main tag를 class atrribute 없이 style하면서 style이 겹치는 문제 발생
• 그 외 공통으로 사용되는 style 통합하기

Fix Broken Layout

Ingredient Page

• 재료 list에 전체 background-color로 덮히는 문제 발생
• 재료 refresh icon 안보이는 문제 발생

Cuisine Page & Recommend Page

• 전체 layout 무너지는 현상 발생
• cuisine list color가 전체 background-color로 덮히는 문제 발생
• 찜하기 icon 안보이는 문제 발생

Memo Page

• Memo Page의 모든 배경 색상이 전체 background-color로 덮히는 문제 발생
• 전체 체크, 전체 삭제 버튼이 식별되지 않는 문제 발생

Recommend Page

• 전체적인 layout 개선 필요(padding, margin, width, height 개선 필요)

Myinfo Page

• 전체적인 layout 개선 필요(padding, margin, width, height 개선 필요)

Register Page

• 전체적인 layout 개선 필요(padding, margin, width, height 개선 필요)
• Register Page의 모든 배경 색상이 전체 background-color로 덮히는 문제 발생

[Refactor Type Consolidation and Cleanup]

• 중복해서 사용하고 있는 타입 통합하기
• VIew에 관련된 Abstract interface 만들기