eastsunyong / clips_project Goto Github PK

Describe Trouble
home페이지 작업간 react-slick 사용했는데 각 order 컴포넌트에서 콘솔 로그 여러번 출력

To Reproduce

1. homeOrderFirst에 아무것도 하지않고 console.log("1")만 적어놔도 2회출력
2. homeOrderSecond에 아무것도 하지않고 console.log("2")만 적어놔도 3회출력

Expected behavior
순차적으로 Carousel컴포넌트 렌더 (콘솔 1회)
Carousel 내부에 homeOrderFirst컴포넌트 렌더되면서 Carousel컴포넌트 리렌더링
(콘솔 1+1회 = 2회)
Carousel 내부에 homeOrderSecond컴포넌트 렌더되면서 Carousel컴포넌트, homeOrderFirst컴포넌트 리렌더링
(콘솔 1+1+1회 = 3회)
같은 식으로 불필요한 리렌더링이 다수 발생하는 것으로 추정

Describe Trouble
IOS환경에서 약속 생성 페이지 자체가 하얀 화면으로 나옴

To Reproduce
어떤 식으로 문제가 발생하는지 단계로 설명

1. 페이지 접속 후 로그인하여 하단 navigation바로 약속 생성 페이지 진입
2. 약속을 생성하고 나면 달력 및 상세 약속이 보이지 않음

Expected behavior
후기 페이지에서는 약속이 보이는 것으로 보아 Calendar 문제로 보임

Smartphone (please complete the following information):
IOS

Describe Trouble
배포 후 로그인 등의 백엔드와 통신해야되는 기능이 작동하지 않음

To Reproduce

1. 페이지 진입 후 회원가입 진행
2. 회원가입이 되지 않고 에러 발생

Expected behavior
콘솔 로그 확인 결과 http://{Back-end IP}/undefined로 확인되었으며 env에 적어둔 환경변수가 적용되지 않고 있음

Describe Trouble
마커를 맵에 등록하면 이전 마커가 삭제 되지 않고 중첩되서 쌓임

To Reproduce
어떤 식으로 문제가 발생하는지 단계로 설명

1. 주소 검색을 하여 선택 카테고리 마커 맵 등록
2. 새로운 주소를 검색하여 선택 카테고리 마커 맵 등록
3. 이전 주소를 재검색하면 기존에 마커가 사라지지 않아 중복으로 쌓임

Expected behavior
Map에 마커 등록 시 HTML Element가 생성되어 맵 Element의 하위 Element로 append 되는데 따로 삭제하는 구문을 적어줘야됨

Describe Trouble
input을 추가하고 삭제하여 real dom에 input이 없어도 register는 살아있어서 submit하면 필드가 보임

To Reproduce

1. 장소 추천 버튼을 누름 => register("city")생성
2. 중간 장소 도출 버튼을 누름 => register("location1"), register("location2") 생성
3. 현 상태에서 submit을 하면 data = {city: "", location1: "", location2: ""} => dom에 input은 두개 보임
4. 중간 장소에서 출발지 추가 => register("location3") 생성
5. 장소 추천으로 이동하여 submit => data = {city: "", location1: "", location2: "", location3: ""} =>dom에 input은 한개 보임

Expected behavior
등록 식으로 작동하는 거같은데 정확하게 모르겠음

Screenshots

사유
맵 기능 고도화(클러스터 적용)간 카카오 Docs의 바닐라JS를 리액트로 변환할 때 작업 시간이 길어져 전체 작업 지연

개선 사항
이전 만들었던 Map 기능을 SDK 변경 및 고도화 적용

Describe Trouble
모바일로 봤을 때 서비스 하단의 navigation바 가 보이지 않음

To Reproduce

1. 페이지 진입하면 서비스 하단에 navigation바가 보이지 않음
2. 손가락으로 드래그를 해 주소창과 하단 tool바를 없애면 navigation바가 보임
3. 이후 드래그하다 주소창과 하단 tool바가 생기면 마찬가지로 가려짐

Expected behavior
서비스의 height가 주소창과 하단 tool바의 높이를 포함하지 않고 측정되어 스크롤 생성

Screenshots

선택지

1. 웹 스토리지

• 스토리지를 선택하게되면 먼저 세션의 경우에는 자동 로그인이 안되니 로컬로
• XSS 공격에 취약

2. 쿠키

• httpOnly, secure 옵션 활용하면 xss공격은 대처가 가능하나 CSRF 공격에 취약
• 하지만 withcredentials 옵션을 서버와 클라이언트 다 열어 줘야됨

3. private variables (리덕스)

• 변수명을 모르면 XSS 공격이 힘듬
• 하지만 새로고침하면 초기화되기 때문에 설계가 조금 복잡할듯

선택 사항

• 로컬 스토리지

선택 이유

1. 이전 프로젝트때 쿠키로 작업해봤으니 코드 경험을 위해
2. React에서 XSS 공격을 어느정도 방어해주기 때문에 보안성이 좀 더 좋을 것으로 생각

Describe Trouble

1. 가변 사이즈(rem)을 사용하고 있으나 px 사용부분 확인
2. 공용 컴포넌트를 사용하지 않아 코드의 가독성 저하 및 유지/보수가 힘듬
3. 기능 및 뷰에 대한 변화가 계속적으로 있는데 아토믹 패턴 미적용으로 전체적으로 수정됨
4. 구현된 기능에 대해 구현만 되어있고 예상되는 에러에 대한 처리가 미흡함
5. icon color를 입힐 때 currentColor를 사용하지않고 fill로 진행하였으나 currentColor 적용본으로 수정하여 개발간 편의성 개선

Describe Trouble
기능 추가와 에러를 고치고 Github Action을 통해 S3로 배포하였으나 배포 사이트에서는 구버전 view가 보임

To Reproduce

1. main에 merge
2. actions에서 빌딩이 완료되는 것 확인
3. S3에 파일 업데이트 확인
4. https로 배포된 도메인으로 접속하면 적용이 되어있지않음
5. http로 배포된 도메인으로 접속하면 적용이 되어있음 확인

Expected behavior
CloudFront에서 어떤 설정을 해줘야 할 것으로 추정