공부하는 비오

작년에 문제가 있어서 리액트 함수 컴포넌트 생명주기에 대해 찾아보고 공부했었는데, 그 문제를 해결하고 나서는 잊어버린채 살고있었다. 그러다가 최근 usePrevious라는 hook을 사용하면서 다시한번 함수형 컴포넌트의 라이프사이클을 공부해보았다. usePrevious는 useInput처럼 흔하게 사용되는 리액트 훅 중 하나이다. 현재 값 말고 직전의 값을 가져올때 사용한다. const usePrevious = (value: string) => { const ref = useRef(); const previousValue = ref.current; useEffect(() => { ref.current = value; }, [value]); return previousValue; }; 이 함수가 작동하는 ..

React 2022. 2. 6. 00:28

그동안 CORS에러가 발생하면 백엔드에서 Access-Control-Allow-Origin을 설정해주고, withCredential 설정을 통해 쿠키 문제를 해결했었다. 그런데 프론트에서 (CRA를 사용했다면 pacakge.json에서, CRA를 사용하지 않았다면 webpack설정에서) 해결할 수 있는 방법이 있었다! 그건 Proxy 서버를 설정해주는 것! CORS가 무엇인지 다시한번 살펴보자. CORS는 Cross-Origin Resource Sharing으로 자신의 출저(도메인, 포트, 프로토콜)와 다른 출저의 리소스를 교환할 수 없는 브라우저 보안 정책을 말한다. 다른 출처의 리소스를 교환하기 위해서는, 다른 출저의 리소스를 제공하는 서버쪽에서 CORS 설정을 헤더를 포함한 응답을 해야하야만 한다...

React 2021. 4. 29. 23:53

손쉽게 날짜를 생성해주는 라이브러리 비슷한 역할을 하는 라이브러리들이랑 비교해보면 moment가 제일 많이 쓰인다. day.js는 점유도는 낮지만 사이즈 면에서 매력적이다. 어쨌든 점유도가 제일 높은 Moment를 사용해보자. 사용방법 moment() : 현재 날짜 moment(post.createdAt) : 인자(게시글생성일)가 알아서 모멘트객체로 바뀜. moment를 사용하지않으면 new Data.getFullYear() + new Data.getMonth() + ... 이렇게 조합해야하지만, format이나 fromNow 메서드 등을 통해 쉽게 표현할 수 있다. Moment.js | Docs moment.relativeTimeThreshold(unit); // getter moment.relativ..

React/React 관련 라이브러리 2021. 1. 13. 14:40

더미데이터가 필요할 때, 하나하나 데이터를 만들어내기가 사실 쉬운일은 아니다. 그럴 때 유용한 라이브러리! 자세한 사용법은 이 웹페이지에서 확인할 수 있다. faker Generate massive amounts of fake contextual data www.npmjs.com faker 설치하기 faker를 불러온다. 영어로된 더미데이터를 생성할 수 있다! faker. 부분이 faker를 사용하여 만든 데이터. 폼은 기본 post state의 모양과 똑같이 만들었다. id는 shorid라이브러리를 사용해 랜덤으로 만들어 주었다. 사실 한국어로도 더미데이터를 만들 수 있는데 한국어로 만들면 글이 엉망진창이다. 한국어 페이커를 쓴 페이지. 성능안좋은 번역기로 돌린 모양새다. 게다가 이름은 성만 한국어할거..

React/React 관련 라이브러리 2020. 12. 17. 14:00

react, redux 에서 사용할 수 있는 라이브러리다. 제목 그대로 immer를 사용하면 알아서 불변성이 유지되도록 코드를 바꿔준다. immer설치 immer를 produce로 import. reducer에서 return produce(state, (draft) => { switch문... }); 을 해주면 된다. 화살표함수이기 때문에 {return .... } 은 생략해도된다. 그리고 state대신 draft 사용. 불변성을 유지하지 않으므로, state를 직접 바꿔준다. immer를 사용한 이유 10줄이 넘는 코드가 5줄로 줄어들었다.^^;; state를 draft로 바꿔줬으므로, 마지막 디폴트값은 그냥 break; break;를 사용하지않으면 뒤쪽 코드가 모두 호출되는 무시무시한 경험을 할 수 ..

React/React 관련 라이브러리 2020. 12. 17. 13:32

프론트 작업할 때, 더미데이터 만들기 요긴한 라이브러리가 있다. 바로 shortid! 겹칠일이 거의 없는 id를 생성해준다. 먼저 설치부터. import해주고, 사용은 shortId.generate() 로 하면 된다. 😀😀

React/React 관련 라이브러리 2020. 12. 16. 23:44

useRef 를 사용하여 선택하고 싶은 DOM의 ref값으로 설정해주면, ref 객체의 .current 값이 선택한 DOM을 가리키게 된다. useRef 를 사용하면 내가 만든 버튼을 클릭해 파일 선택창을 만들 수 있다. input창을 만들고 hidden으로 설정한다. (파일을 선택하는 input창이 보이지 않음) const imageInput = useRef(); useRef를 사용한 변수를 ref 속성으로 적는다. 버튼에는 버튼을 클릭했을 때, 파일창이뜨는(input창을 누른것과 동일한 효과) 함수를 설정한다. useRef 메서드를 사용해, 인풋창을 클릭하게 한다. useRef를 사용할 때 주의해야할 점은, useRef는 순수객체?를 생성하기때문에 리렌더링하더라도 항상 동일한 ref객체를 제공한다는 ..

React 2020. 12. 12. 22:47

Virtual DOM 리액트는 Virtual DOM을 사용하여 컴포넌트에 변화가 있을 때 새로 그려준다. 변화가 있는 UI를 리렌더링하여 Virtual DOM을 생성하여, 실제 DOM과 비교 후, 바뀐 부분만 다시 그려준다. 즉 리렌더링이 일어나는 모든 부분을 다시 그려주는 것이 아니라, 변화가 있는 부분을 다시 그려주기 때문에, 매우 효과적으로 업데이트 할 수 있다. React의 생명주기 Mounting (컴포넌트가 만들어지고 DOM에 삽입될 때) render() : 보통 JSX를 사용하여 생성된 React Element를 반환한다. render함수는 순수함수여야한다. 즉 호출될 때마다 동일한 결과를 반환해야한다. 컴포넌트의 state를 변경하지 않으며, 브라우저와 직접적으로 상호작용하지 않는다. 브라..

React 2020. 12. 11. 00:08