실제로 throttle 과 debounce 의 경우 debounce 는 검색어 자동완성에 그리고 throttle 은 로딩 모달이 없는 단순 get 요청의 반복 요청의 빈도를 제한하는 정도로 사용된다. 보통은 생성, 수정, 삭제 같은 경우 isSubmitting 플래그로 로딩 모달과 함께 해당 요청의 응답이 없는 동안에는 클릭하지 못하도록 하는 방식을 사용한다. 생성, 수정, 삭제 같은 경우에 throttle, debounce 를 사용할 경우 결국은 이벤트를 두번은 수행하게 되기 때문이다. throttle 과 debounce 그리고 lodash 를 사용하여 실제 React 에 적용하는 법. throttle 은 이벤트 발생 즉시 실행되고 그 다음 지정한 시간 동안 발생되지 못하게 막고 그 시간이 지나면 다시..
https://typeofnan.dev/fix-the-maximum-update-depth-exceeded-error-in-react/ state 를 useEffect 안에서 setState 하면 무한렌더링 일어날 수 있다. [] 가 되도록 views 를 의존성 배열에서 제거하자. function App() { const [views, setViews] = useState(0); useEffect(() => { setViews(views + 1); }, [views]); return Some content; } function App() { const [views, setViews] = useState(0); useEffect(() => { setViews((v) => v + 1); }, []); ret..
결국 React Native 와 Nodejs 서버와의 aes 양방향 대칭키 암호화를 사용하기 위해서는 crypto-js 3.1.8 을 사용하면 된다. react-native-crypto-js 가 아니라 그냥 crypto-js@3.1.8 을 React Native 쪽에 사용해야 한다. node 쪽도 crypto-js 설치. (https://www.npmjs.com/package/crypto-js) 주간 다운로드 수가 500만이 넘어간다. 관련 사항(https://lifeonroom.com/study-lab/react-native-crypto-js/) 실무에 써먹기 좋은 글. crypto 기준. 단방향 암호화 비밀번호 저장을 위한 로직이 구체적으로 잘 나와 있다. https://zinirun.github.i..
여기서 aws route53 hosted zone 에 기본 등록되었던 name server 들 리스트를 확인할 수 있다. 적어두지 않고 삭제하였다면 여기서 확인 후 복원하자. whoisrequest.com/history/ AWS 에서 도메인을 등록 후 네임서버를 디지털 오션 것으로 사용하려면 hosted zone 에서 ns 레코드를 변경하는 것이 아니라 도메인 > 등록된 도메인 에서 이름 서버 부분의 내용을 변경해야 한다.
테스트 json api 제공해주는 것들. mohammedal-rowad.github.io/pollux/#/ jsonplaceholder.typicode.com
redux.js.org/style-guide/style-guide#reducers-must-not-have-side-effects Redux Style Guide [필수] * 상태를 Mutate 하지 말 것. * 리듀서는 Side Effect 를 가지면 안된다. - ajax, timeouts, promises, random, date.now, 리듀서 밖에서 관련 변수 수정 x, 리듀서 밖에 영향을 줄 수 있는 코드가 리듀서 함수에 있으면 x * Non-Serializable 값이 상태나 액션에 있으면 안된다. - Promises, Symbols, Maps/Sets, funtions, class instances 와 같은 것들이 Redux store state 나 dispatched action 에 있으면..
toolkit-saga https://velog.io/@suyeonme/React-Redux-toolkit에서-미들웨어-사용하기 toolkit 설명 https://kyounghwan01.github.io/blog/React/redux/redux-toolkit/#종합-예제 rn 과 toolkit 관련 블로그 https://post.naver.com/viewer/postView.nhn?volumeNo=29438367&memberNo=10070839 redux-toolkit 사용하면 combineReducer 와 devtools 를 사용하지 않아도 이미 적용되어 있다. 하지만 configureStore 에 devTools: process.env.NODE_ENV !== 'production', 이런 옵션으로 넣..
Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImI0YTlhYjYxLWJhZDktMTFlYi05ZTg5LTdiY2Q3ZDNlNWQyOCIsImlhdCI6MTYyMTY3Mjk3Nn0.6yEtyy0L9c9p2RmLQiardzXFd1eX55gp82mX8BYa1lw.U2FsdGVkX1/VJ+g+cOfBprUS47+uvC46T9Y03B2F3/PW3gTl4H/Q+f64bDUdXv5pUeWx6qNAUtfkWK9nNeHQS4nFtk3ynpGpKy6PPnc6g5Q= fullToken: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImI0YTlhYjYxLWJhZDktMTFlYi05ZTg5LTdiY2Q3ZDNlNWQyOCIsImlhdCI6M..
redux toolkit 과 함께 사용하기에는 rtk-query 가 더 좋아보인다. rtk-query-docs.netlify.app RTK Query - Powerful data fetching and caching for Redux | RTK Query RTK Query is an advanced data fetching and caching tool, designed to simplify common cases for loading data in a web application. rtk-query-docs.netlify.app github.com/klis87/redux-requests klis87/redux-requests Declarative AJAX requests and automatic net..
react native 관련 작업 시 패키지 매지저로 yarn 을 사용하면 다음과 같은 경고 문구가 뜰 수 있다. warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. npm 최신 버전의 경우 package-lock.json 으로 패키지의 버전 락을 수행한다. yarn 의 ..
OAuth 2 OAuth 2 의 경우 Resource Owner : OAuth 1 의 User 와 같다. 리소스(가령 페북의 본인 사진 같은 것.) 의 개인 소유주이다. Client : Authorization Server 에 등록되어 사용자와의 상호작용을 위한 것. (페이스북의 앱 같은 것, App Id, App Secret 을 제공해준다. 네이버는 컨슈머라 칭한다.) Authorization Server : 실제 인증 및 인가를 위한 기능을 한다. 이곳에 Client 가 등록을 하고 Resource Owner 가 Client 에게 기능을 위임할 수 있도록 한다. Resource Server : API 를 통한 자원을 획득할 수 있는 실제 서비스 서버. 와 같은 주체들이 있다. Grant Types (..
쿠키란 클라이언트 측에서는 Cookie, 서버 측에서는 Set-Cookie 라는 헤더의 값을 통해 클라이언트와 서버가 정보를 전달하는 방식이다. Authentication 은 Authorization 과 구분된다. 인증 (Authentication) 은 아래의 여기서 설명하고 있는 키값을 통한 로그인을 의미하며 인가 (Authorization) 는 간단히 보면 이렇게 인증된 것만으로 인가여부가 결정될 수도 있으나 여기에 더해서 관리자, 일반사용자 와 같이 role 에 따른 권한 부여 절차까지를 의미한다. cookie session 방식: 세션 쿠키 (만료 시간 지정하지 않은 쿠키) 와 서버측의 세션 저장소를 통한 인증 방식. 서버측으로 인증정보 (아이디, 비번) 을 전송하면 서버에서는 Set-Cookie..
kr.vuejs.org/v2/guide/index.html 시작하기 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org ant.design Ant Design - The world's second most popular React UI framework ant.design echarts.apache.org/examples/en/index.html Examples - Apache ECharts echarts.apache.org
express 는 listen 으로 서버를 시작한다. 그리고 request, response 를 가진 http 요청을 받는 http 처리 서버가 된다. 그리고 기본 서버에 다양한 middleware 가 추가되어 요청을 원하는 방식으로 처리한다. express 의 미들웨어는 일반적인 미들웨어와 맨 앞에 err 를 받는 에러 미들웨어 두개가 존재한다. // 일반적인 미들웨어 function commonMiddleware(req, res, next) { console.log('common middleware') next(new Error('error occurred')) } // 에러 미들웨어 function errorMiddleware(err, req, res, next) { console.log(err.m..
왜 React Native 가 좋은가? Android / Ios Native 를 Java, Kotlin, Swift 를 통해서 개발한다고 생각해보자. 단순히 한 화면에서 다른 화면으로 전환하며 데이터 전달을 한다고 할 때 간단히 보면 아래와 같다. 논리적으로나 복잡도에서나 react native 가 가장 단순하고 논리적이라 할 수 있다. 또한 안드로이드나 Swift 네이티브의 경우 구현을 하려면 꽤나 성가신 것을 알 수 있다. 간단한 화면 전환에서 데이터 전달을 함에 있어 인텐트, 액티비티, 세그웨이, 뷰컨트롤러 등의 고차원적 개념과 이를 각 문법에 맞게 그들 특유의 방식에 맞추어 공을 들여 구현해야 하고 또한 이런 간단한 의도를 코드로 구현하고자 함에 있어 여러가지 고려하고 생각해야할 것들이 많아 상당..
아래 글은 잘못된 판단. 개념 파악을 위한 도움용으로 참고하면 좋음. 이 글에 관련 내용 기재. https://thewavelet.tistory.com/76 즉, React 는 우선적으로 함수형 프로그래밍 방식을 기본으로 사용하고 또한 Javascript 기반으로 하는 Node.js 또한 그렇게 하는 것이 좋아보인다. React 가 함수형 프로그래밍 방식을 가장 잘 적용한 라이브러리라고 보아도 좋을 듯 하다. 명령형 프로그래밍의 if, for, i++ 과 같은 것 보다는 간단하고 틀리지 않을 filter, map, reduce, take, groupBy 와 같은 작은 단위의 순수 함수들을 프로그래밍의 기본 구성 요소로 간주하면서 프로그래밍 하는 사고와 방식. 함수형 프로그래밍 : 1930년대 알론소 처치..
express 와 async await 그리고 error 처리 { const posts = await Post.find({}).populate("author").exec(); response.json(posts) }); } } ================================= [koa2] router.get('/api/v1/auth/intro', requireAuth, async (ctx, next) => { try { await next(); const users = await dao.getUser(ctx.state.user_id); if (!users.length) { ResponseUtil.status(200).body({message: 'no_user', data: ''}).build(..
IntelliJ > preferences > editor > code style > typescript > spaces > within > ES6 import/export braces
react hoc , context api , recompose https://velopert.com/3606 https://velopert.com/3537 https://github.com/acdlite/recompose https://reactjs.org/docs/higher-order-components.html 리액트 에서 가장 기본이 되는 부분이다. 의외로 내용이 좀 난이도가 있기 때문에 많은 개발자들이 간과하고 깊이 있게 읽어보지 않고 넘어간다. 그로 인해 계속하여 소 귀에 경 읽기가 된다. 리덕스니 사이드 이펙트니 미들웨어니 인증이니 스마트 더미 컴포넌트 니 하는 많은 내용들이 있지만 정작 실전 코드에서 고차함수, 고차컴포넌트, 컨텍스트 api 개념을 모르면 코드를 이해하지 못한다. 왜냐하면..
Cookie, Session, Auth, OAuth, 인증, safari 전통적 인증 방법. 만료일이 설정되지 않은 쿠키를 세션쿠키라고 하며 보통 이것으로 세션 id 를 저장한다. 클라이언트가 id, password 를 입력하고 서버로 요청을 보내면 서버는 이 정보가 맞는지 확인하고 맞다면 Set-Cookie 헤더에 session id 값을 넣어서 응답해준다. 클라이언트는 이 Set-Cookie 헤더 값을 자동으로 쿠키에 저장한다. 그리고 매번 서버에 요청시 이 session id 값을 Cookie 라는 헤더에 담아서 요청을 한다. 서버 측에서는 이 Cookie 정보에서 session id 값이 session storage 에 있다면 현재 로그인된 사용자로 간주한다. 이런 방식은 범용적으로 사용되긴 힘들..