profile
코드로 소통하기 위해 힘쓰는 프론트엔드 개발자 입니다.

React 랜더링 최적화 7가지 방법 (Hooks)

부모에게서 전달받은 props가 변경될 때부모 컴포넌트가 리렌더링 될 때자신의 state가 변경될 때useMemo 공식문서(https://ko.reactjs.org/docs/hooks-reference.html어떠한 값에 변화가 있을때만 새로운 값을 할당해주고

2022년 6월 28일
·
0개의 댓글

0607 TIL

aria-required : true로 지정하여 사용자에게 해당 요소가 필수적으로 입력되어야 함을 전달aria-describedy: 아래와 같이 작성하면 div reference의 내용을 input의 추가 설명으로 사용해준다.이제 Link to에서의 props 전달

2022년 6월 15일
·
0개의 댓글
post-thumbnail

0605 TIL

꾸준하게 써오지 않았고 쓸 자신이 없으면 오히려 공개 안하는게 좋음오히려 독이 될 수도 있다스쿼시 머지 : 커밋이 하나로 합쳐져서 피쳐에 대한 커밋을 관리하기 편해짐리베이스 머지 : 메인 브랜치 최상단에서 부터 하나씩 쌓아가는 방식자신이 어떤 부분을 맡았고 어떤 문제가

2022년 6월 15일
·
0개의 댓글
post-thumbnail

0603 TIL

일단 짜긴 했는데 너무 가독성이 떨어져보인다.. 교체를 할 필요가 있어보인다.새로 고침시에도 유지되도록 설정할지,, 적용여부를 생각해봐야겠다Atom Effects | Recoil오후 한시 = 03시까지 데이터만 나옴10시간 이전의 데이터까지만 나옴 start부분 RF

2022년 6월 15일
·
0개의 댓글
post-thumbnail

0601 TIL

앱 내의 잠재적인 문제를 알아내기 위해 한번 더 랜더링…데이터가 매우 많으니 50개 정도만 자르기interval옵션 = 24h, 1d, 7d, 14d, 30d, 90d, 365dHourly 1h, 2h, 3h, 6h, 12h (현재 날짜로부터 7일 이전의 데이터만 가능

2022년 6월 15일
·
0개의 댓글
post-thumbnail

0531 TIL

테이블 디자인 변경뭘 만들어 볼까 한참 고민했다. 재밌는 api가 없나 찾는데 이틀은 쓴 것 같다..그래도 뭔가 만들어 보고 싶었고, 코치님이 항상 띄워서 보여주시는 가상화폐 거래소 사이트를 보니 나도 만들어보면 재밌을거 같았고. 아마 그만큼 더 대차게 까일것이 많겠지

2022년 5월 31일
·
0개의 댓글
post-thumbnail

0530 TIL

하이라이트를 반절 정도만 먹이기아름다움의 근원 : 1. 글꼴 2. 색상 3. 정렬정렬인풋 옆에 버튼이 있다던가 하는 상황인풋과 버튼의 높이를 통일합니다.border-radius를 통일합니다.그림자를 사용할 경우 가능한 한 연하게 사용인풋의 내부 패딩은 가로만 주고 세로

2022년 5월 30일
·
0개의 댓글
post-thumbnail

0529 TIL

애플 비주얼 디자인 가이드Color - Visual Design - iOS - Human Interface Guidelines - Apple Developer애플에서 주로 쓰는 색상들

2022년 5월 29일
·
0개의 댓글
post-thumbnail

0528 TIL

labels labels를 이용하면 그래프의 데이터를 라벨에 표현해 줄 수 있음. Specifying x and y data 위와 같이 작성하면 x,y형태로 되지 않은 데이터도 chart에 써줄 수 있다

2022년 5월 29일
·
0개의 댓글
post-thumbnail

0527 TIL

💡새로 배운 내용 검색결과를 테이블로 나타내주는 컴포넌트를 작성중 filter에 여러 조건을 적용시켜서 가독성 좋게 사용할 순 없을까 라는 생각이 들었고 아래와 같은 방식으로 구현했다. 사실 이렇게 써도되는건지 모르겠어서 코치님께 한번 여쭤봐야할 것 같다 안티패턴이거나 구린 코드라면 더 나은 코드로 발전 시킬 수 있도록 Filter에...

2022년 5월 29일
·
0개의 댓글
post-thumbnail

0525 TIL

원래는 내가 맡아서 해야했던 부분인데 구현을 못해서 팀원분이 해결해주셨다.잊지 않고 나중에 써먹기 위해 기록한다ps. 왜 안됐는지 이유를 보니 after태그를 안쓰고 그냥 position을 썼기 때문에.. 안됐었다 ㅠ

2022년 5월 29일
·
0개의 댓글
post-thumbnail

0524 TIL

다른 곳에서도 공통으로 쓸만한 것. global한 애들만단, 한 페이지에서만 쓰는 컴포넌트는 그 페이지 안에 넣을 것데이터 셋은 코치님도 이제 사용하시기 시작.다행이다! 좋은 습관 하나 있어서적합한 태그? 클릭받는건 다 button 태그map을 돌리면 대부분 li태그테

2022년 5월 27일
·
0개의 댓글
post-thumbnail

0523 TIL

dayjs를 이용해서 현재날짜와 기간 , 그리고 그 기간만큼의 저번 주의 날짜를 구하는 hook을 짜봤다사실 이걸 훅으로 짜도될까.. util로 빼야할까 많이 고민했는데 hook이 맞을것 같아서 훅으로 둬본다.코드에 보이는 반복되는 부분을 줄여야할 노력이 필요할것 같다

2022년 5월 23일
·
0개의 댓글
post-thumbnail

0522 TIL

핵심 코드리뷰 스타일 파일은 소문자로 시작할것 리액트 쿼리 사용법 명확하게 체크 if 깊이는 깊게 가져가지 말 것 케밥케이스 (kebab-case) 라는것도 있다는 정도만 알아두길 하위 컴포넌트 한 뎁스 정도만 내려줄때는 props로 내려주는게 좋다 inline

2022년 5월 22일
·
0개의 댓글
post-thumbnail

0519 TIL

추가적인 정보를 더 띄워주고 싶어서 질병 정보 서비스 api 를 사용해보려던 중오랜만에 CORS에러를 마주쳤고 다시 한번 정리하기 위해 기록한다.해결 방법proxy 설정withCredentialHttp-Proxy-Middleware설치./src/setupProxy.ts

2022년 5월 19일
·
0개의 댓글

0517 TIL

✅ 할 일 x] [검색 영역 클론 코딩 [ ] 개인과제 리팩토링 마무리 [ ] 개인 과제 개선 사항 및 추가 구현 구상 🗒 메모 손목 건강 챙기기.. 💡새로 배운 내용 핵심 키워드 💡 프론트엔드는 무조건 가독성이 최우선 1. React svg

2022년 5월 17일
·
0개의 댓글
post-thumbnail

0516 TIL

리팩토링 redux toolkit 공부Stylelint 저장시 자동으로 정렬해주는 세팅스크린샷 2022-05-17 오전 3.48.23.png리액트로 작업중 마운트가 두번되는 현상이 발생되는것을 확인했다.. 이유를 도통 몰라서 헤매고 있었는데react

2022년 5월 16일
·
0개의 댓글

0515TIL

axios.get등으로 간단하게 쓰기require 절대 쓰지말기 (import로 쓰기)HTML sementic 하게 써야함 꼭 꼭 꼭 엄청 중요함onError (이미지에 사용가능)모달 배경에 backdrop fliter 사용하기webpack autoprefixtext-

2022년 5월 16일
·
0개의 댓글
post-thumbnail

0513TIL

모달 형식에서 페이지 전환 방식으로 리팩토링 ( 모달 방식이 맞는거 같아서 진행하지 않기로 함 )react transition group\[REACT] react transition group /리액트 라우터에 애니메이션 주기, 슬라이드 애니메이션, 특정 페이지에만

2022년 5월 13일
·
0개의 댓글
post-thumbnail

0511 TIL

onScroll 이벤트Intersection observer API무한스크롤 구현시 onScrollIntersection Observer API타겟과 viewport 사이의 intersection 변화를 비동기적으로 관찰하는 방법LazyLoadingInfinite-sc

2022년 5월 11일
·
0개의 댓글