react + ts 로 망고플레이트 개선 클론 프로젝트
https://mukdaejang-3b8e6.web.app/
2022.03.08 ~ 2022.03.31
| 👎 기존 망고플레이트 | 👍 먹대장 |
|---|---|
 |
 |
| 👎 기존 망고플레이트 | 👍 먹대장 |
|---|---|
 |
 |
| 👎 기존 망고플레이트 | 👍 먹대장 |
|---|---|
 |
 |
|
| 👎 기존 망고플레이트 | 👍 먹대장 |
|---|---|
 |
 |
| 👎 이전 먹대장 | 👍 현재 먹대장 |
|---|---|
 |
 |
| 👎 이전 먹대장 | 👍 현재 먹대장 |
|---|---|
 |
 |
 |
 |
공유하기 버튼을 눌렀을때 페이지의 링크가 유저의 클립보드에 저장되도록 하는 기능
기존 firebase.ts에서 모든 것을 처리했었습니다.
request 보낼 때 방식이 2가지였습니다.
firebase.ts에서 기능별로 구조화하여 저장
data를 받아올때 request 받는 방식을 하나로 통일
스타일 작성시 theme의 변수를 사용하는 것이 어렵다.
emotion의 css 대신에 styled를 이용하면 함수식으로 쉽게 사용할 수 있다.
firestore과 연동시키고 posts라는 collection에서 데이터를 가져올 수 있도록 구현
: Modal창 Portal로 만들기
부모 컴포넌트의 스타일링 속성에 제약을 받아 z-index 등으로 번거로운 후처리를 해줘야한다.
Portal을 통해 독립적인 구조와 부모-자식 관계를 동시에 유지할 수 있다면, z-index 등 부모 컴포넌트의 제약에서 벗어날 수 있다.
프로필 클릭 시 최근 본 맛집 , 가고싶다 의 서브메뉴로의 이동이 가능하게끔 구현해야한다.
mock data를 이용해 각 메뉴로 이동했을 때 데이터를 렌더링 하여 화면에 표시해야한다.
검색한 문자열을 엔드포인트에 더해주고, 검색 결과 사이트로 링크시켜준다.
url 해당하는 컴포넌트를 렌더링 시켜주고, 전달된 파라미터 keyword로 검색 결과를 렌더링 시켜준다.
이때, 한글로 검색을 했을 경우 url엔 이상이 없는지 확인.
path를 이용할 것인가? 쿼리스트링을 이용해야하나?
SearchModal에서 클릭이 되었을 시, css를 바꾸기 위해서 DOM 요소에 직접 접근.
이는 명령형에 가깝다. React의 선언적이라는 특징에 맞춰서 로직을 바꿔주기
하나의 상태를 가지고 각각의 상태에 따라 CSS 적용해주기
page link copy button in best restaurant page
star and text(가고싶다)
해당하는 데이터가 없는 경우 데이터가 없다는 화면이 표시되지 않음
data의 길이로 판단하여 빈 data 배열인 경우 표시할 데이터가 없다는 화면을 보여주도록 구현
눌렀을때 회색에서 주황색으로 변하도록 한다
눌렀을때 회색에서 주황색으로 변하도록 한다
review 쓰는 페이지 이미지 추가
이미지가 순서대로 수평으로 보여지도록
css 작업 시 props를 통해 style을 바꿔야 할 경우가 존재하는데 emotion.css 방식으로 작성 시 props 사용에 제약이 있기 때문에 emotion.styled 방식으로 작성 시 props 사용에 용이하다.
기존에 emotion.css 방식으로 구현했던 것들을 emotion.styled 방식으로 구현해야 한다.
검색 결과에 대한 음식점들을 사용자들이 필터를 직접 설정할 수 있게
필터링을 해주는 UI 컴포넌트를 개발.
정렬 순서, 지역별, 음식 카테고리 별
이미지를 배열로 가지고 있으며 삭제 및 추가가 상시 가능해야함
연속으로 동일한 이미지 클릭시 동작 x
연속으로 동일한 이미지 클릭시 동작 x -> input태그의 값이 변경되지 않아서 그렇지 않은가 추측
유저가 리뷰를 작성하고 수정하는 페이지
style component prop error
Property 'background' does not exist on type '{ theme?: Theme | undefined; as?: ElementType | undefined; } & ClassAttributes & ButtonHTMLAttributes & { ...; }'.
styled.button<{ background: string }>
위와 같은 식으로 style component에서 타입을 명시해준다
Search 컴포넌트에서 검색 버튼을 Enter로 눌렀을 때, 두번의 alert가 발생
하나의 alert만 뜨도록 해결하기.
원인을 파악하고 댓글로 남기기.
textarea의 상태에 따른 버튼 변경
텍스트가 입력될경우 버튼 활성화 및 색상변경
tab이 가능하게 태그를 변경하면서 다수의 태그들을 tab이 가능한 태그들로 변경을 했는데,
본래 기능인 Link가 되지 않는 문제가 발생했다. button 태그로 바꾸면서 동작이 끊긴 것 같다.
기존에 사용하던 a 태그를 link component로 변경
기존에 사용하던 a 태그를 link component로 변경
기존의 헤더는 메인페이지인지 아닌지에 상관없이 랜더링이 된다
pathname을 통해서 현재 페이지가 메인페이지인지 아닌지 useState를 통해 상태를 관리한다.
modal 창을 열 때 상태관리를 props를 통해 해주었는데 컴포넌트 depth가 깊어짐에 따라 redux로 상태관리를 하는게 편할 것 같아 redux로 상태관리를 하기로 결정했습니다.
redux로 modal open / close state 관리하기
redux로 user login state 관리하기
Context or Reproduce
상세페이지 내 유저 리뷰 영역 마크업과 스타일링
Checklist
carousel
category
category item
restaurants
restaurant
필터 컴포넌트의 기능이 아직 완전하지 않다. tab이 가능한지 확인하고,
각각을 클릭했을 때, 클릭된 CSS를 적용 시켜주고 데이터를 sort, filter가 가능해야한다.
적용하기 버튼을 만들어줘야 한다.
현재 사용자가 로그인되어있는 사용자이면 사용자의 프로필 이미지를 아이콘 대신 넣어주고 로그인 되어있지 않는 사용자이면 사람표시의 아이콘을 넣어주어야 합니다. 현재 로그아웃 기능이 없으므로 로그인을 했을 때 로그인 버튼을 로그아웃 버튼으로 변경해주어야 합니다.
hook을 통해서 firebase auth에서 현재 사용자가 존재하는 사용자인지 판단하고 로그인 시 사람표시 아이콘 -> 현재 사용자의 프로필사진으로 변경하여 렌더링합니다. 로그인한 사용자가 로그아웃을 했을 경우 프로필 사진 -> 사람표시 아이콘으로 변경하여 렌더링합니다.
템플릿을 develop 브랜치에 올려놓아서 이슈와 풀리퀘스트 템플릿이 적용이 되지 않아
메인 브랜치에 파일을 직접 업로드
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
