코드로 대화하기

.env 프로젝트를 하다 보면 google, kakao api key값 같은 민감한 정보를 관리햐야할때가 있습니다. 해당 정보를 그대로 노출하면 보안에 문제점이 생기기 때문에 이번 시간에는 env에 대하여 알아보겠습니다. 환경변수 설정 위 경로에 .env파일을 만들어줍니다. src폴더 안에 만드는게 아닙니다! .env파일 안에는 원하시는 정보를 적으시면 됩니다. 꼭 REACT_APP_으로 시작해야 합니다 REACT_APP_KAKAOMAP_API_KEY=---- 활용 jsx안에서 사용하는 방법과 html안에서 사용하는 방법이 있습니다. 먼저 jsx같은 경우 아래와 같이 process.env. 뒤에 사용합니다. {process.env.REACT_APP_KAKAO_API_KEY} html같은 경우 %%사이에 ..

지금까지 memo와 useMemo를 알아보았는데요 마지막으로 useCallback에 대해 살펴보겠습니다. 개념 공식문서입니다. useMemo는 값을 저장했던 반면 useCallback은 함수를 반환합니다. memoization이란 반복되는 결과값을 저장해서 다음에 같은 결과가 나올 때 빨리 실행하는 코딩 기법입니다. 형태는 두 번째 배열 안에 있는 값이 변할 때 첫 번째 콜백 함수를 반환합니다. 예시 실제 코드를 보며 더 자세히 알아보겠습니다. // App.jsx function App() { const [value, setValue] = useState(""); const [count, setCount] = useState(0); const returnSumCount = () => { return c..

이전 글에 이어서 이번에는 useMemo를 소개해 드리겠습니다. 개념 공식문서입니다. 문서에서 보면 알 수 있듯 메모이제이션값을 반환해 줍니다. memoization이란 반복되는 결과값을 저장해서 다음에 같은 결과가 나올 때 빨리 실행하는 코딩 기법입니다. const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 형태를 위와 같습니다. useEffect와 동일하게 첫 번째 인자로 콜백 함수를 받고 두 번째 인자로 배열을 받습니다. 배열 안에 있는 값이 변경될 때마다 함수가 렌더링 됩니다. 예시 // App.jsx function App() { const [a, setA] = useState(0); const [b, setB] =..

안녕하세요! React 최적화 방법 중 하나인 memo에 대하여 알아볼 겁니다. 사실 memo를 굳이 사용하지 않아도 웹은 잘 돌아갑니다. 하지만 프론트엔드 개발자라면 렌더링 성능 최적화에는 관심이 있어야 하고 조금이라도 더 나은 사용자 경험을 줄 수 있어야 한다고 생각합니다. 본격적으로 들어가기에 앞서 개념 하나만 정리하겠습니다. react-hook은 jsx를 반환하기 위한 함수입니다. 즉 리턴문을 불러오기 위하여 함수안에 있는 모든 변수, 함수를 매번 다시 선언합니다. memo는 이러한 불필요한 렌더링을 줄여줍니다. 개념 부모에서 이벤트가 일어나면 자식 컴포넌트는 props가 달라지지 않았음에도 리렌더링 현상이 일어납니다. memo()로 함수를 감싸주면 부모에서 전달받은 props가 바뀌지 않는 이상..

React에서는 배열이나 객체를 직접적으로 수정하면 안되고 불변성을 지켜주면서 업데이트해 주어야 합니다. 오늘 소개해 드릴 내용은 불변성을 쉽게 관리하기 위해 만들어진 Immer 라이브러리입니다. 들어가기에 앞서 immer를 자주 사용하면 오히려 사용하지 않았을 때보다 속도가 더 느려진다고 합니다. 개인적으로는 스프레드 연산자(...)를 활용하는 것을 추천합니다. 저는 react-redux에서만 사용합니다 기존 방식 (스프레드 연산자) 스프레드 연산자를 사용하면 아래와 같은 방식으로 데이터를 추가했었습니다. const data = { a: 1, b: 2 }; const newData = { ...data, c: 3 }; // 혹은 const data = { a: 1, b: 2 }; let newData ..

안녕하세요! 크롬에서 개발하고 다른 브라우저에서 테스트를 할 때면 다양한 이유로 터질 때가 있습니다. Polyfill 호환되지 않는 문법들을 사용가능하게 만들어줍니다. npm i react-app-polyfill로 설치해주세요. index.js상단에 polyfill을 불러옵니다. // IE9 import 'react-app-polyfill/ie9'; import 'react-app-polyfill/stable'; // IE11 import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; js & css javascript 내장함수나 css 중 일부는 크로스 브라우징이 안될 때가 있습니다. 그럴 때 저는 접속하고 있는 브라우저를 판단하여 분기..