분류 전체보기 753

[TIL] 20220210 ag grid 필터 저장, 불러오기

ag grid에서 필터 정보 저장하고 불러오는거 성공해서 매우기쁨 [REACT] keep filter and restore on ag grid with react, redux/ ag grid에서 filter, column 정보 저장하고 불러오기 ag grid를 이용하여 그리드 페이지를 제작하는 중! 페이지를 떠났을때 마지막으로 테이블을 변경한 이력이 자동으로 저장되고, 다시 그 페이지를 들어왔을 때 저장된 테이블 변경 상태가 적용된 sso-feeling.tistory.com 역시는 역시! 고려해야하는 사항이 주어졌을때 내가 머리 싸매고 몇시간 동안 생각했는데도 요상한 방법 1개만 생각나거나, 아니면 아예 생각나지 않거나 그럴때. 시니어분에게 물어보면 '이렇게 간단하고 깔끔한 방법이!?!? 대체 왜 이런 ..

TIL 2022.02.11

[REACT] keep filter and restore on ag grid with react, redux/ ag grid에서 filter, column 정보 저장하고 불러오기

ag grid를 이용하여 그리드 페이지를 제작하는 중! 페이지를 떠났을때 마지막으로 테이블을 변경한 이력이 자동으로 저장되고, 다시 그 페이지를 들어왔을 때 저장된 테이블 변경 상태가 적용된 채로 보여지기를 원했다. 이것을 성공하여 기쁜 마음에 글을 쓴다! 1. filter, column state 저장 save 버튼을 만들고 싶지 않았기 때문에 filter와 column state 를 저장하는 방법은 2가지가 있었다. (column state 는 어딘가에 저장하지 않아도 자동으로 저장됨) 1) filter가 변경이 있을 때마다 저장하기 2) 페이지를 떠날때 저장하기 내가 만드는 서비스는 컬럼 수가 거의 20~30개 정도로 많고 filter가 변경될 가능성이 많았기 때문에 2번째 방법을 선택했다. use..

WEB/REACT 2022.02.10

[TIL] 20220208

1. You can only use optional-chaining when the 'optionalChaining' plugin is enabled. commit을 할 때 prettier 설정에 의해 optional chaining을 쓴 부분이 commit 이 안됐다. 그래서 몇시간 동안 찾아봤는데 도무지 모르겠음................................ optional chaining https://stackoverflow.com/questions/59093630/how-to-enable-optional-chaining-with-create-react-app-and-typescript package-lock.json, nodemoudles파일 삭제 devpendencies에서 esli..

TIL 2022.02.08

[REACT] redux-persist를 사용하여 새로고침 시에도 리덕스 상태 유지하기

소개 redux는 새로고침 시에 상태들이 모두 날라가는 반면 redux-persist를 이용하면 로컬 스토리지에 저장이 된다. 그래서 원래 리덕스처럼 사용하는데 새로고침 시에 날라가지 않고 개발자도구에서 삭제 할 때 까지 유지된다. 설치 yarn add redux-persist 코드 store/index.js localStorage에 저장하고 싶으면 import storage from 'redux-persist/lib/storage session Storage에 저장하고 싶으면 import storageSession from 'redux-persist/lib/storage/session 이렇게 설정해주고 원래 쓰던대로 쓰면 됨

WEB/REACT 2022.02.08

[TIL] 20220126 ag grid valueGetter

ag grid 에서 object로 된 데이터 field에 뿌리는 법 놀랍게도 ag grid에는 object 나 배열을 절로 field에 뿌리는 법이 없다... 말이 되냐! 어떻게 해야하나면 valueGetter로 해야한다.. 하나씩 함수를 만들어서.. { "id": 1, "order": { "id": 1, "date": "2022-01-12 11:37:23", "code": "1234", }, ... }, 데이터가 이런식으로 object로 내려오는데 const orderValueGetter = (params) => { console.log(params.data.order.date) return params.data.order.date; } 이렇게 써야한다.

TIL 2022.01.27

[TIL] 20220124 github 2 fa 설정 / 알고리즘 공부

1. github 2 fa 설정 https://www.lainyzine.com/ko/article/github-activate-two-factor-authentication/ GitHub 2단계 인증(OTP) 활성화하는 방법 GitHub에서는 보안 강화를 위해 이중 인증(Two-Factor Authentication)을 지원하고 있습니다. 이 글에서는 Authy 앱과 1Password를 사용해 이중 인증을 활성화하는 방법과 보안 관련 부가 기능들에 대해서 소 www.lainyzine.com 2. 프론트엔드 개발자에게 알고리즘 공부가 미치는 영향 https://velog.io/@teo/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%..

TIL 2022.01.25

[TIL] 20220119 ui/ux 개선에 관한 ?

1. ui ux 개선에 대한 글 https://brunch.co.kr/@plusx/71 UX·UI 분석하고 개선하기_#06 토스증권 플러스엑스UX·UI팀의 Insight Share | Jin | OJT Assignment : 평소 이용하는 서비스의 UX·UI를 Redesign 하라! 올해 플러스엑스 UXUI팀에서는 신규 입사자들을 대상으로 OJT를 진행했습니다. OJT의 일환으로 brunch.co.kr 2. jumbo theme에서 makeStyles 를 사용할때 default에서 끌어오는 법 const useStyles = makeStyles(theme => ({ root: { width: '100%', padding: '1.25rem', }, drawerBtn: { ...theme.typhograph..

TIL 2022.01.20