공부하는 비오

제로초 노드버드 강의 정리 노트 redux를 사용하여 store로 state를 만들어보자! 기본설정하기(reducer, action 설정) store는 이전 글(next-react-wrapper관련 글)에서 설정완료 /reducer/index.js state 초기값 설정 및 action creator 설정 reducer 설정 Reducer에서 return 값은 history 관리를 위해 불변성(immulity)을 유지하는 것이 중요하다. 객체는 동일한 내용으로 새로운 객체를 만들더라도 같은 객체로 취급하지 않기 때문에, 새로운 객체를 만들어 항상 다른 객체를 리턴해주어야 한다. reducer에서 spread 문법을 사용하는 이유는 직접 할당할 때 보다 메모리 낭비를 막을 수 있기 때문이다. Object ..

Redux 2020. 12. 11. 12:32

Next에서 redux와 함께 사용하기위해서는 next-redux-wrapper를 설치해야한다. (redux와 사용법이 약간 다르다.) redux, react-redux랑 next-redux-wrapper 설치하기 /reducer/index.js rootReducer 만들어서 export . /store/configureStore.js createStore(reducer) 해주기. _여기서의 reducer은 rootReducer. createWrapper(configureStore, { debug: process.env.NODE_ENV === 'development', }) 위와 같이 적어주기. _app.js Next 9버전(10버전도)에서는 Provider를 자체적으로 적용해주기 때문에 사용할 필요가 ..

Next.js 2020. 12. 11. 12:04

useSelector을 사용해 잘 불러온거 같은데 에러가 났다. undefined user... 왜 찾지못하니.... 는 Reducer에서 switch문에 default 값을 작성하지 않아서였다^^;; 리듀서 초기화 할때 실행되는데, default 값이 없으면 return 값이 undefined 가 되기 때문에 오류가 난다. default 값을 작성해주면 정상작동한다.

Error 2020. 12. 11. 11:24

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

React 2020. 12. 11. 00:08

_blank 를 사용할 때 보안문제로 인해 같이 사용해주어야 하는 속성이 있다. 바로 rel="noreferrer noopener" 새창에서 창을 열 경우, referrer(이전페이지)과 opener(누가 나를 열었는지)가 전달된다. 이 정보를 사용하여 보안에 위협이 생길 수 있으므로, 정보가 전송되지 않도록 만드는 것이 이 코드이다. 새창을 누가 열었는지에 대한 정보를 없애기 위해 사용해주는 코드.

HTML & CSS 2020. 12. 10. 22:51

리액트에서 위와 같이 스타일태그를 내부에서 사용하는 경우, 객체를 반환하면 최적화에 도움이 되지 않는다. 리액트는 리렌더링할때, 현재버츄얼돔과 이전 버츄얼돔을 비교해 변화가 있는 부분만 새로 그려주는데, 객체는 동일하다고 인식하지 못하기 때문에 저 부분을 새로그려주게 된다. (콘솔창에 { } === { } 를 작성해보면 false를 반환한다.) 이를 해결하기 위한 방법으로는 외부 스타일 시트를 연결해도 되고, styled-components를 사용하거나 useMemo를 사용할 수 있다. styled-components 위와 같은 경우 div를 원하는 이름으로 바꾸고, 다음과 같이 선언해주면 된다. (클래스 네임 설정한다고 생각하면 편하다. 하지만 어쨌든 변수로 선언하는 것이기 때문에 다른 변수나 함수랑 ..

React/React 관련 라이브러리 2020. 12. 10. 00:02

노드버드 강의를 정리하며 공부하는 글 커스텀훅 (useInput) 회원가입 페이지는 input을 매우매우매우 많이 만들어야 한다. 이렇게 반복되는 것이 많을 때는 커스텀훅을 사용해 중복을 줄여줄 수 있다. hooks 디렉토리를 만들고, useInput.js 파일을 만들어준다. 반복적으로 사용되는 패턴이었던 useState와 setValue를 react hook으로 묶어줬다. return은 value와 setValue를 지정하는 함수를 담은 배열로. 배열에 넣어 이런식으로 사용할 수 있다. 😃😃😃 비밀번호 체크 항목 만들기 비밀번호를 한번 더 입력해서 체크해주는 항목을 만들어보자. 이 항목은 password와 일치하지 않다면 오류를 띄워줄 문장이 추가되기 때문에 아쉽게도 useInput을 사용할 수는 없다..

React 2020. 12. 9. 23:44

styled_components 관련 에러. 콘솔창에 에러가 뜨면서 화면이 스타일대로 출력되지 않는다. 해결방법은 바벨플러그인 설치 및 설정추가. 루트디렉토리에 .babelrc 파일 생성 후 설정. $ npm i babel-plugin-styled-components // .babelrc 설정 { "presets": ["next/babel"], "plugins": ["babel-plugin-styled-components"] } 참고 https://velog.io/@hwang-eunji/Styled-components-nextjs%EC%97%90%EC%84%9C-className-%EC%98%A4%EB%A5%98

Error 2020. 12. 9. 15:20