코드로 대화하기

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

이전 글에서 Array.prototype.slice.call()을 하다가 여기까지 왔는데요 하나를 제대로 알기 위해서는 그와 관련된 여러 가지를 알아야 하는 것 같습니다. 들어가기 전에 원시값과 참조값에 대하여 간단하게 설명드리겠습니다. 이것 또한 깊이 들어가면 들어갈 수 있지만 이 글에서는 다루지 않겠습니다. 원시값은복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 복사를 하더라도 서로에게 영향을 미치지 않습니다. 아래 코드와 같이 a를 b변수에 복사하고 b를 변경한다 하더라도 a가 변경되는 것은 아닙니다. const a = 1; let b = a; b = 2; console.log(a); // 1 console.log(b); // 2 * 원시값은 String, Number, Boolean, un..

vanila javascript 프로젝트를 하다가 "Array.prototype.slice.call()" 코드를 보았을 때 당황했지만, 무언가를 한 가지 더 배울 수 있다는 생각에 행복했습니다. 이 글은 해당 코드를 자세히 분석해보았으며 연관되어있는 코드/이론 또한 다루고 있습니다. NodeList 0 1 2 // js let itemEls = document.querySelectorAll(".item"); console.log(itemEls) // NodeList(3)[div.item, div.item, div.item] 콘솔로 itemEls를 찍어보면 " NodeList(3)[div.item, div.item, div.item] "이 찍힙니다. 배열과 비슷하게 생겼지만 배열은 아닙니다. documen..

개념 웹뷰(Webview)란 앱에서 웹 화면을 띄우는 것을 말합니다. 앱 특성 상 웹보다 한계가 많기 때문에 개발을 하다 보면 종종 사용합니다. 또한 웹앱을 만들때로 사용합니다. 설치 npm install react-native-webview 활용 앱은 RN, 웹은 React를 활용하여 보여드리겠습니다. RN 쪽 코드입니다. import 한 WebView 컴포넌트를 return 문안에 사용합니다. onMessage={}를 통하여 웹뷰에서 보내는 데이터를 받습니다. source={}는 웹 경로를 적는 곳입니다. localhost일 경우 자신의 ip를 적습니다. (같은 네트워크를 사용해야 합니다.) ex) http://localhost:3000 -> http://000.00.0.00:3000 import R..

이번 포스팅은 그림 설명이 많습니다!! 본격적으로 CSR과 SSR을 들어가기에 앞서 TTI와 TTV, SEO의 간단한 개념만 먼저 알아보겠습니다. * TTV (Time To VIew) 사용자가 웹사이트를 보는 것을 의미합니다. * TTI (Time To Interact) 클릭 이벤트 같은 인터랙션이 가능한 상태를 의미합니다. * SEO(Search Engine Optimization) 구글, 네이버와 같은 검색엔진들이 올라와져있는 html을 분석하여 검색 결과를 보여주는 것을 의미합니다. 이 개념을 가지고 앞으로 나올 내용을 보시면 도움이 될 것 같습니다. :) CSR (Client Side Rendering) CSR은 클라이언트 측에서 화면을 구성하는 것을 말합니다. 차근차근 순서를 살펴보겠습니다. 1..

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

휘발성이 강한 데이터나 임시적으로 저장해야 하는 데이터를 서버에 계속해서 저장하게 되면 불필요한 서버통신을 계속해서 해야 합니다. Local Storage와 Session Storage를 사용하면 위와 같은 데이터들을 관리할 수 있습니다. Local Storage 특징 데이터를 사용자 로컬에 저장합니다. js로 저장, 삭제 등 조작이 가능합니다. 최대 5mb까지 사용 가능합니다. 도메인과 브라우저별로 저장됩니다. 값은 문자열로 저장됩니다. key, value로 저장되어야 합니다. 여러 탭/창이 있을 경우 서로 데이터가 공유됩니다. 활용 // 데이터 저장 localStorage.setItem( "dataName", --- ); // 데이터 가져오기 let localData = localStorage.get..

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

모바일로 웹에 접속하여 input을 터치하였을 때 줌 인되는 것을 방지해 주는 코드입니다. html에 meta 태그를 추가해 줍니다. react 같은 경우 index.html에 추가합니다. 정리하자면 이렇습니다. initial-scale=1.0 // 초기 크기를 설정합니다. user-scalable=no // 확대 기능을 사용하지 않습니다. maximum-scale=1 // 최대 배율, 크기를 설정합니다. width=device-width // 화면이 표현하는 사이즈를 디바이스 사이즈에 맞춥니다.

오늘은 양방향과 단방향 데이터 바인딩을 알아보겠습니다. 데이터 바인딩 (Data binding) 먼저 데이터 바인딩이란 뷰와 모델에 있는 데이터를 동일하게 만들어주는 것을 의미합니다. 만약 js에서 데이터가 변경되어도 html에서 변경되지 않는다면 사용자는 잘못된 데이터를 보게 됩니다. 데이터 바인딩은 이러한 문제를 해결해줍니다. vanila javascript로 예를 들어보겠습니다. Hello const data = "song"; function changeText(){ const view = document.querySelector("#view"); view.innerText = data; } js에 있는 데이터를 화면상에 보여주기 위해서는 아래의 과정들이 있습니다. 1. document 선택자로 D..