본문 바로가기

Solution & What I learn

 (9)
Today I am
Chrome 브라우저에서의 transition 속도 저하 이슈 issue safari 웹과 모바일에서는 속도 저하 문제가 나타나지 않았다. 처음에는 react-spring 라이브러리의 고질적인 문제인 줄 알았는데 해당 라이브러리 공식 문서와 깃헙 이슈 탭에서 같은 문제가 있는 사람이 있는지 찾아보았는데 전혀 없었다.. 결국 알게 된 사실은 단순히 chrome에서만 발생하는 이슈였다. - chrome에서만 속도 저하 문제(버벅거리는 현상)가 발생 transition 시간을 줄였을 때, 해당 타겟에서 버벅거리는 현상이 생겼다. transition: '0ms ease-out' - 하단 스타일 코드 추가시 버벅거리는 현상이 생기지 않고 부드러운 애니매이션을 구현할 수 있었다. backfaceVisibility: 'hidden', perspective: 1000, * 참고자..
Heroku로 react 프로젝트 배포하기 (json-server 포함) json-server가 프로덕션 전용이 아닌 것을 알지만, 백엔드 서버가 없기 때문에.. 프로젝트 배포 시 json-server도 같이 배포하기 위해 여러 배포 서비스를 찾아봤다. 그전에 가장 쉽게 접근 가능한 gh-pages으로 배포해봤는데 역시나 json-server는 배포되지 않았다.. 그래서 이번에는 heroku를 사용해보았다. 1. json-server가 없는 경우 / 정적사이트 배포 create-react-app으로 만들어진 react 프로젝트 배포 방법을 찾았다. heroku settings 탭에서 BuilPack 에 mars/create-react-app build pack을 추가해주어야 배포 후 정상 작동한다. (아래 링크 주소를 복붙 하면 된다.) mars/create-react-app..
[React - Project] movie | Issue & Solution 🎬 tmdb API를 활용하여 영화 추천 사이트 Movie movie4e8f82.netlify.app 📚 Stack - React - styled-components - react-icons - react-responsive - react-router-dom - Redux-thunk - 배포 : netlify 📚 구조 & 기능 - 오늘의 영화 Top 10 추천 - 선택한 장르별 영화 Top 20 추천 - 영화 선택 저장 - 선택순, 추천순, 인기순 정렬 📚 Problem & Solution ▶ 구현시 고민한 부분 1. GenreList Component - 체크박스 기능 컴포넌트 작성 시 고민한 부분 function GenreListComponent({ data }) { const dispatch = u..
[JS - Project] ecommerce-website | Issue & Solution 자바스크립트로 구현한 쇼핑몰 기능을 담은 프로젝트 - mock data를 json으로 직접 만들어 진행 - localStorage로 데이터 저장 ShoesMall Goods Choose the product you like All Color Black Blue Brown Green Grey Pink Purple Red White Yellow heeyeonjeong.github.io 📚 구조 & 기능 📌 Home header - (mobile) sidebar menu - scroll시, nav-menu 상단 고정 new-section - new goods section - 가로 scroll - goods 클릭 시, Detail-Page 이동 goods-section - mock data 받아와서 동적으로 ..
[React, TypeScript - Project] 독서 기록 서비스 구현하기 | Issue & Solution - response된 book 데이터 타입지정 Instantly parse JSON in any language | quicktype app.quicktype.io - 위 사이트에서 response된 데이터 타입을 추론하였다. 📚 problem & Solution 1. edit container에서 클릭된 book 데이터 받기 - api에서 직접 book 데이터를 받아오지 않고 (불필요) url의 params를 얻어서 해당 book의 id를 이용하여 전체 데이터인 book에서 find 메서드로 book 데이터를 출력했다. 2. error 주소 - to={`/${url}`} => 작성 시 오류는 없어졌지만 원하는 동작은 /뒤에 url이 붙어야 하는 코드가 아니기 때문에 이 방법은 포기 - to={url |..
[React, Redux - Project] 댓글 서비스 구현하기 | Issue & Solution 📚 issue & problem 1.remove action을 실행했을 때 URL에 [object%20Object] 가 찍히는 현상 case REMOVE_COMMENT: return { ...state, comments: state.comments.data.filter( (comment) => comment.id !== action.id ), }; - reducer를 잘못 작성했었던 것 같다.. 2. 수정누르면 클릭한 해당 데이터가 form 컴포넌트로 이동해야 한다. getComment api로 수정 버튼이 클릭된 데이터를 불러온다. export const getComment = async (id) => { const response = await axios.get(`http://localhost:400..
[React - Project] 지출 기록 서비스 구현하기 | Issue & Solution 📚 구현한 기능 1. 오늘 날짜 표시 2. 지출 등록 3. 등록된 지출 삭제 4. 현재까지 등록된 지출의 총합 표시 5. 카테고리별 정렬 📚 Issue & Problem & Solution 1. item출력 시 category명이 select value로 받아와서 영어로만 출력되었다. → category 데이터 별 label을 지정하여 따로 데이터를 관리하기 const options = [ { label: '식사', value: 'meal' }, { label: '식료품', value: 'food' }, { label: '교통', value: 'traffic' }, { label: '생활', value: 'life' }, { label: '의료', value: 'medical' }, ]; export d..
[Project - A] 레이아웃과 구성요소 | Issue & Solution & Review - 웹 프로젝트를 진행하면서 생긴 Issues와 Solution기록 - Review 내용을 정리하고 Refactoring Project A-1 (레이아웃 만들기) 🙌 Reviews - flex는 IE 하위 브라우저 크로스브라우징 이슈가 존재해 웹 프로젝트 사용엔 조심스럽다. 참고사항 - ':hover' 는 클릭 가능한 요소에 선언하여 태그에 바로 :hover를 선언하는 것이 좋음 Project A-2 (구성요소 만들기) 🤷‍♀️ Issues 1. table의 thead와 tbody사이에 알 수 없는 여백이 생김 - thead인 구분과 tbody인 미국남아를 보면 border가 묘하게 두껍게 나타났다. ✅ 해결 - 알고보니 table의 caption 문제였다. 공통요소를 묶어서 소제목은 h4로 마크업하기 ..

티스토리툴바