SimCoding

[React] 전역 스타일링 - createGlobalStyle 안녕하세요. 이번 포스팅에서는 Styled-Components에서 제공하는 함수인 createGlobalStyle 함수에 대해 알아보겠습니다. 리액트에서, - 전역적으로 CSS를 사용하고 싶을 경우, - 기존 CSS를 덮어쓰고 싶을 경우 ( 컴포넌트 자식Class의 CSS 변경할 때 등 ) createGlobalStyle을 사용해서 전역적 스타일링, CSS덮어씌우기 등의 작업을 할 수 있습니다. 예시 코드를 통해 사용방법을 알아봅시다. 예시 코드에서는 createGlobalStyle을 사용해서, Slick컴포넌트의 자식Class인 slick-slide의 CSS를 덮어 씌어주고 있습니다. import Slick from "react-slick..

[REACT] input[type="file"] 디자인 커스텀 하는 방법 , 파일이나 이미지를 업로드 하기 위해서 을 사용해야한다. 하지만 의 경우, 기본디자인이 정해져 있고 직접적으로 커스텀을 할 수 없다. 그렇다고 아이에 방법이 없는 것은 아니다. 직접적으로 커스텀 할 수는 없지만, 약간의 편법을 사용해서 간접적으로 디자인을 한 것처럼 보이게 할 수 있다. 과정은 다음과 같다. 1) input 태그를 안보이게 숨긴다. 2) 버튼으로 사용할 태그를 하나 만든다. 3) 버튼을 클릭 했을 때, input태그에 클릭 이벤트를 발생시킨다. 4) 버튼 디자인을 커스텀 해준다. 이게 무슨 말인지 코드를 통해 좀 더 자세히 알아보자. import React, { useRef } from "react"; const ..

NEXTJS 환경 REDUX 초기셋팅 코드예시 Redux 관련 라이브러리 설치. npm i next-redux-wrapper redux react-redux redux-devtools-extension 초기상태 및 리듀서 설정 // reducers/index.js import { HYDRATE } from "next-redux-wrapper"; const initialState = { user: {}, post: {}, }; const rootReducer = (state = initialState, action) => { switch (action.type) { case HYDRATE: console.log("HYDRATE", action); return { ...state, ...action.payl..

프론트개발 진행중에 쿠키가 받아지지 않는 경우 해결방법 : axios 예시 백엔드와 프론트엔드의 도메인 주소가 다른 경우, 쿠키 전송이 되지 않아 당황스러운 경우가 있다. 이를 해결하기 위해서는 withCredentials 를 설정해주어야 한다. axios를 사용할 경우 아래와 아래와 같이 작성해주면 된다. axios.get(주소, { withCredentials: true }); axios.post(주소, 데이터, { withCredentials: true }); 위와 같이 설정했음에도, 쿠기가 받아지지 않는다면 백엔드단에서 설정이 잘못되어 있을 수 있다.

리액트 Customhooks 만들어서 반복되는 코드 줄이기. 커스텀 hook을 만들어서 반복되는 코드를 줄여줄 수 있다. 훅을 사용하지 않는다면 보통 Input의 onChange이벤트를 관리하기 위해 아래와 같이 코드를 작성 할 것이다. const [password, setPassword] = useState('') const onChangePassword = useCallback((e) => { setPassword(e.target.value); }, []); const [id, setId] = useState('') const onChangePassword = useCallback((e) => { setId(e.target.value); }, []); const [name, setName] = use..

* useCallback 하는일 > 함수를 memoization한다. > 의존값이 바뀌었을 때만 함수를 생성하고, 값이 바뀌지 않았다면 함수를 생성하지 않는다. > 의존값이 바뀌지 않았을 경우, 이전에 저장해둔 함수를 사용한다. * useCallback 를 사용하는 이유와 주의점 > 사용이유 : 렌더링시에 불필요한 함수생성을 막아줌으로써, 성능을 최적화 해준다. > 주의점 : meoization과정 자체에서 리소스가 발생하므로, 부적절하게 사용할 경우 오히려 성능을 악화시킬 수 있다. * useCallback 예시코드 // const memoizedCallback = useCallback(callback(), [depth]); // 의존값을 depth에 넣어준다. const add = useCallbac..

[React] useMemo 사용이유와 코드예시 * useMemo 가 하는일 > 연산결과를 memoization한다. > 의존값이 바뀌었을 때만 연산을 실행하고, 값이 바뀌지 않았다면 연산을 실행하지 않는다. > 의존값이 바뀌지 않았을 경우, 이전에 저장해둔 값을 사용한다. * useMemo 를 사용하는 이유와 주의점 > 사용이유 : 렌더링시에 불필요한 계산을 막아줌으로써, 성능을 최적화 해준다. > 주의점 : meoization과정 자체에서 리소스가 발생하므로, 부적절하게 사용할 경우 오히려 성능을 악화시킬 수 있다. * useMemo 예시코드 // useMemo(callback,[depth]) 의존값을 depth에 넣어준다. // depth의 값이 바뀔때 마다, 이전에 캐싱된값과 비교해 값이 다를경우..

[Redux] reducer에서 immer를 이용한 불변성관리 예시코드. 리덕스에서 새로운 state를 반환해주기 위한 함수로 reducer를 사용한다. reducer에서는 한가지 지켜줘야하는 것이 있는데, 바로 불변성이다. 불변성을 지키기 위해서는 이전상태를 변경하지 않고, 이전 상태를 참조해 새로운 상태를 반환해 줘야된다. 이때, 주로 얕은 복사를 이용한다. 얕은 복사를 이용해서 충분히 불변성을 유지할 수 있지만, depth가 깊어질수록 코드가 길어지고 가독성이 떨어지는 문제가 발생한다. 이를 해결하기 위해 등장한 것이 immer이다. 예시 코드를 통해 immer를 이용해 불변성 관리하는 방법을 확인해보자. @ immer const { produce } = require('immer'); const ..