프로그래밍
안드로이드 에러 unexpected element <queries> found in <manifest>
unexpected element found in 빌드 그레이들 디펜던시에 classpath 'com.android.tools.build:gradle:4.0.1'. 추가 4.0.1이 가장 최신인듯? 구 버전에는 queries 문법을 못쓰는듯 하다 android-developers.googleblog.com/2020/07/preparing-your-build-for-package-visibility-in-android-11.html Preparing your Gradle build for package visibility in Android 11 Posted by David Winer , Product Manager One of the central themes for Android 11 has been ..
개인용 RN 배포 매뉴얼
로컬에서 개발 마친 후 배포용으로 할 일 1. 패키지 네임 수정 편법 같지만 편한 방법 app.json, package.json에 이름 수정 // app.json { "name": "stockapp", "displayName": "stockapp" } //package.json { "name": "stockapp", "version": "0.0.1", ios, android 폴더 삭제 www.npmjs.com/package/react-native-eject react-native-eject 설치 후 react-native eject 실행 ios와 android 폴더가 변경한 이름으로 새로 생성된다. www.npmjs.com/package/react-native-rename npx react-native-..
useRef 사용용도
useRef는 주로 DOM 엘리먼트를 직접 조작하고 싶을 때 사용한다. 그것 외의 사용처는 없는 줄 알았는데 useInterval 게시글 보다가 알게됨. (velog.io/@jakeseo_me/%EB%B2%88%EC%97%AD-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85%EC%8A%A4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%97%90%EC%84%9C-setInterval-%EC%82%AC%EC%9A%A9-%EC%8B%9C%EC%9D%98-%EB%AC%B8%EC%A0%9C%EC%A0%90) 훅스에서 ref는 변환가능한 current 프로퍼티를 가지는 순수한 오브젝트를 반환한다. 리액트의 컴포넌트는 리렌더링시에 모든 변수를 삭제하고 다시 생성해서 할당..
리액트 커스텀 훅
리액트 함수형 컴포넌트로 사용자 정의 훅을 만들 수 있다. 보통 리액트에서 input값을 받을 때 state를 만들고 input이 onChange메서드가 실행될 때 state를 수정할 handle함수도 정의해야하는데 커스텀훅을 활용해서 이 handle함수와 상태값을 묶어준다면 코드가 깔끔해진다. 예시 1) 일반적인 Input에 value와 handle 함수를 엮음 //UseInput.js import { useState } from "react" const useInput = () => { const [value, setValue] = useState("") const handleInput = (e) => setValue(e.target.value) return [value, handleInput] } ..
리액트 memo로 리렌더링 관리하기
리액트 컴포넌트의 리렌더링 조건으로는 크게 두가지가 있다. 1) props or state 변경 2) 부모 컴포넌트가 리렌더링 1번의 컴포넌트에서 렌더링해야 할 데이터 값이 변경되었다면 당연히 리렌더링 되어야 하는게 맞지만, 2번의 경우 해당 컴포넌트에선 같은 결과를 렌더링할 때도 리렌더링 해야하는 경우가 생긴다. 클래스 컴포넌트에서는 이를 shouldComponentUpdate()로 설정할 수 있다. 현재 props 또는 state값과 다음에 렌더링해야할 props, state 값을 직접 비교해서 리렌더링 여부를 결정하는 메소드이다. 함수형 컴포넌트에는 React.memo를 사용해서 이를 관리할 수 있다. React.memo(Component, compFunc); 다음과 같이 사용한다. compFunc..
리액트 에러 경계
ko.reactjs.org/docs/error-boundaries.html 에러 경계(Error Boundaries) – React A JavaScript library for building user interfaces ko.reactjs.org 에러경계란? - UI의 일부분에 존재하는 자바스크립트 에러가 전체 애플리케이션을 중단시켜서는 안된다. 리액트 사용자들이 겪는 이 문제를 해결하기 위해 React 16에서는 에러 경계라는 새로운 개념이 도입됨. - 에러 경계는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트이다. 에러 경계는 렌더링 도중 생명주기 메서드 및 그 아래에 있는 전체 트리에서 에러를 잡아낸다. 에러경계는 아..
리액트 네이티브 커스텀 폰트 적용
1. 프로젝트 폴더에 ./assets/font 폴더 만들고 ttf 폰트 파일 넣기 2. 프로젝트 루트 위치에 react-native.config.js 만들고 module.exports = { project: { ios: {}, android: {}, // grouped into "project" }, assets: ["./assets/fonts/"], // stays the same}; 입력 3. npx react-native link 끝
webp 움짤 압축은 용량을 얼마나 줄여주나
IOS 14 업데이트로 드디어 사파리에서도 webp포맷을 지원한다.지금 만들고 있는 사이트가 이미지를 많이 쓰는편이라 트래픽이나 저장공간이 걱정되었는데 모든 이미지를 webp 포맷으로 이용하기로 함. gif의 경우 아이즈원 나경 짤방(gif) 7.5메가 티스토리에 webp가 첨부가 안되서 동영상으로 찍음. 좌측이 일반압축(5.6mb) 으로 25프로 정도의 크기가 압축되었고 우측은 손실압축(1mb) 으로 86프로 정도 크기가 압축됨. 내 눈에는 두 움짤의 품질차이를 크게 못느끼겠음 하지만 86프로 크기 압축은 굉장히 놀랍다. 5.6메가 짜리 겨울왕국 움짤로 해보니 손실압축으로 1.5메가로 70퍼센트 정도 압축이됨. 위 아이즈원 짤방보단 압축률이 낮다. 이건 6.3mb -> 0.73mb로 88프로 손실압축...
DFS BFS
BFS - 너비우선 탐색 큐에 그래프의 정점들을 넣고 앞에서 부터 pop 시키면서 pop된 정점과 연결된 정점을 큐에 push 하여 모든 정점을 탐색하는 알고리즘. 최단경로를 찾을 수 있다. DFS - 깊이우선탐색 한 정점에서 시작해서 재귀적으로 인접노드들을 파고들어 탐색하는 알고리즘 BFS 문제 - (www.acmicpc.net/problem/2178) #include #include using namespace std; int main() { ios_base ::sync_with_stdio(false); cin.tie(NULL); cout.tie(NULL); int n, m; cin >> n >> m; int arr[101][101] = {0}; int d[101][101] = {0}; bool c[..
리액트 Context로 리덕스 대체하기
전역 상태 관리 도구인 리덕스는 내 기준에서 액션, 리듀서, 디스패치에다 state를 컴포넌트에 props로 전달해주는 것 까지 할게 너무 많아서 귀찮다. 리액트 훅스에 context 기능을 알고만 있었지 사용해보진 않고 있었는데 이번에 써보니 너무 좋다. 사용법 - 부모에서 컨텍스트 생성 import "bulma" import "../public/scss/global.scss" import React, { useState, createContext } from "react" import Nav from '../components/Nav' //컨텍스트 생성 export const AppContext = createContext() export default function MyApp({ Component..