Personal Posting 썸네일형 리스트형 React Hook 정리 - 컴퍼넌트 최적화 (React.Memo) 어떤 한 컴퍼넌트에 다른 하위 컴퍼넌트를 포함하고 있을 때 상위 컴퍼넌트가 값(props)이 변경되어 재 렌더링되면 부득이하게 값의 변경 없는 하위 컴퍼넌트도 불필요한 렌더링을 할 수 있다. 이럴 때 React.memo를 사용한다. React.memo는 React에서 제공하는 HOC(High Order Component) 고차 컴퍼넌트이다. 고차컴퍼넌트란 어떤 컴퍼넌트란 어떠한 컴퍼넌트를 인자로 받아 새로운 컴퍼넌트를 반환하는 컴퍼넌트이다. React.memo라는 HOC에 컴퍼넌트를 넣으면 UI나 기능적으로는 동일하나 최적화된 컴퍼넌트를 반환하는 것이다. https://ko.legacy.reactjs.org/docs/higher-order-components.html 고차 컴포넌트 – React A Ja.. 더보기 React Hook 정리 - useReducer useState와 같이 상태 관리하기 위한 또다른 Hook 여러개의 하위값을 포함하는 복잡한 state를 관리할때 useReducer를 사용하면 코드 관리가 용이하다. useReducer는 아래 3가지 요소로 이루어져있다. 1. Reducer - State를 update해주는 역할. Component의 state는 반드시 Reducer를 통해 update해야한다. 2. Dispatch - 사용자가 Reducer에게 요청하는 행위. 3. Action - Dispatch를 통해 요청하는 내용. Dispatch (Action) ---------> Reducer(State, Action) -> Update State /* * userRecuder는 배열을 반환한다. like useState * 반환되는 배열 요.. 더보기 React Hook 정리 - useCallback 지난 번 useMemo와 함께 Memoization 기법을 활용해 컴퍼넌트를 최적화시켜주는 훅이다. useMemo의 경우 값을 Memoization하여 재사용할 수 있다면 useCallback은 함수를 재사용할 수 있게 해준다. const plusone = (num) => { return num + 1; }; const plusone = useCallback((num)=>{ return num + 1; }, [item]) 위 코드와 같이 plusone을 useCallback으로 함수를 감싸서 사용하면 된다. useCallback()은 2개의 인자를 받는다. 하나는 우리가 Memoization해야 할 콜백함수, 두번째는 의존성 배열이다. 즉, 의존성 배열의 값이 변경되지 않는 이상 다시 초기화되지 않는다... 더보기 땡땡기호 라임이 숙제를 도와주던 중 중복기호 (〃) 일명 땡땡표시를 알려주었다. 나: 똑같은 답을 쓸 때는 이렇게 땡땡 표시를 해도돼. 라임: 근데 왜 이게 똑같다는 뜻이야? 호기심이 많은 어린이들의 대표적인 공격인 와이어택 (Why Attack) 을 당한 순간 나도 궁금해졌다. 근데 진짜 왜 저게 그런 의미로 사용될까? 해서 위키랑 ChatGPT를 통해 아래와 같이 정리해보았다. 우선 중요한 것은 대한민국에서는 이 기호를 공식적으로는 문장 부호로 인정하지 않기 때문에 따로 정해진 이름은 없다는 것이다. 다만 흔히 '중복 부호'나 '중복 기호', '상동 기호' 등으로 부른다고한다. 미국 등의 영어권 나라에서는 '디토(ditto)' 또는 '디토 마크(ditto mark)'라고 부르며, 일본에서는 '노노텐(ノノ点)'.. 더보기 StoryBook의 개념과 Figma와의 공존 얼마전 있었던 LG CNS 웨비나에서 언급되었던 스토리북에 대해 정리할겸 작성한 포스트 우선 StoryBook이란 Frontend 개발자가 UI 컴포넌트를 개발하고 테스트할 때 도움이 되는 도구로서 개별 컴포넌트를 격리하여 다양한 상황에서 시각적으로 테스트 및 문서화 할 수 있다. 주요 개념은 아래와 같다. Component: UI 컴포넌트, 예를 들어 버튼, 폼 필드, 헤더 등과 같은 것들. Story: 특정 컴포넌트의 특정 상태나 사용 사례를 설명하는 코드 조각. 예를 들어 버튼 컴포넌트의 "일반", "활성화", "비활성화" 상태를 보여주는 스토리를 만들 수 있다. Addon: Storybook에 추가 기능을 제공하는 확장 프로그램, 예를 들어 시각적 스냅샷 생성, 스타일 가이드 자동 생성 등. St.. 더보기 React Hook 정리 - useMemo 컴포넌트 최적화를 위해 사용되는 대표적인 Hook인 useMemo, useCallback 중 useMemo에 대해 정리해보려고 한다. 우선 useMemo를 사용하기에 앞서 아래 용어를 알아야한다. Memoization: 동일한 값을 리턴하는 함수를 반복적으로 호출할 경우 처음 계산된 값을 메모리에 저장하여 이를 재사용하는 기법 함수형 컴포넌트를 사용하는 코드에서 컴포넌트가 렌더링된다는 의미는 해당 컴포넌트 함수가 호출된다는 의미이다. 즉, 호출될때마다 함수 내의 모든 내부 변수를 그때 그때 초기화 한다는 의미이다. 일례로 아래와 같은 코드가 있다고 가정하자. function Component() { const value = heavyTask(); return {value} } function heavyT.. 더보기 Android 앱 빌드 후 API 호출 문 회사 출퇴근 앱을 브라우저에서 WebView로 사용하다가 안드로이드 앱으로 사용하고 싶어 APK를 생성 후 설치하였다. 그런데 앱을 실행하니 아래 화면에서 동작을 하지 않는 것이다. 로그인 실패, API 호출 시 발생하는 에러에 대해 예외처리가 모두 되어 있던 상태라 저렇게 홀딩이 걸리는 이유를 판단하기 어려웠다. 그러다 API 호출조차 되지 않은 경우가 있지 않을까라는 생각까지 미치게 되었다. 검색을 해보니, 릴리즈 모드에서는 API 호출 시 인터넷 권한 문제로 에러가 발생할 수 있다고 한다. 이 결우, 매니페스트에 권한을 주면 해결된다. 이외에도 각각의 기능에 맞는 안드로이드 권한 종류가 있으며 필요 시 위와 같이 권한 허가를 넣어주어야 한다. ex) 외부 저장소 읽기/쓰기 권한 자세한 내용은 안드로.. 더보기 Android apk 빌드 시 앱 아이콘 변경 Flutter로 안드로이드 빌드를 하여 apk 생성 시, 아이콘을 변경하는 방법에 대해 설명한다. 1. 앱 아이콘 이미지 준비: 먼저 원하는 앱 아이콘 이미지를 준비한다. 이미지 크기는 다양한 해상도를 지원하기 위해 다음과 같은 크기로 준비한다. mipmap-mdpi: 48x48 픽셀 mipmap-hdpi: 72x72 픽셀 mipmap-xhdpi: 96x96 픽셀 mipmap-xxhdpi: 144x144 픽셀 mipmap-xxxhdpi: 192x192 픽셀 2. 앱 아이콘 이미지 추가: 준비한 앱 아이콘 이미지를 앱 프로젝트의 android/app/src/main/res 폴더 내에 각 해상도 별로 적절한 디렉터리에 추가한다. 예를 들어, mipmap-mdpi 디렉터리에 ic_launcher.png, mi.. 더보기 이전 1 2 3 4 5 6 7 8 다음
