글쓰는 개발자

VS 코드에서 하나의 윈도우를 사용할때 comman + click 혹은 control + click으로 해당 라인이 정의된 파일을 열어주는 기능을 사용할수 있다. 해당 기능을 사용해 정의된 파일로 이동할때 이미 해당 파일이 열려있으면 내가 열어둔 파일창으로 이동한다. 하지만 만약 분할창(split window)를 사용하고 있다면 분할창에 열려있는 파일을 무시하고 내 현재 창에 새로운 창이 열린다. 왼쪽에는 react 컴포넌트창, 오른쪽에는 스타일창을 열어두고 작업하는 입장에서 불편하지 않을 수 없다. 그럴때 VS code에서 File - Properties - Settings에 들어가서 아래 옵션을 true로 바꾸어주면 split 윈도우에 열린 창까지 검사해서 이미 해당 파일이 열려있으면 해당 파일로 ..

리액트에서 useState 함수를 사용하면 value와 set 함수 두개를 얻을 수 있다. const [value, setValue] = useState('초기화값'); 이때 setValue를 통해 값을 변경하면 value값은 리렌더링 되어 UI에 표시된다. 근데 이 value에 들어간 값이 int나 string 같은 값이 아니라 오브젝트 혹은 array일 경우에는 그 값을 변경하고 set함수를 호출해도 UI에 값이 변경되지 않는다. const [array, setArray] = useState(['a', 'b']);array.push('c');setArray(array); // 여전히 화면에는 a와 b밖에 보이지 않는다. React는 useState로 만들어진 변수들을 계속 감시를 하고 변경을 감지하면..

[앱스토어 배포] 앱 심사 정보 손쉽게 입력하기 - 1. iOS 미리보기 및 스크린샷앱 심사를 위해서는 디스플레이별 스크린샷과 프로모션 텍스트, 설명, 지원 URL 등이 필요하다. 1. iOS 미리보기 및 스크린샷iPhone의 경우 6.7 디스플레이, 6.5 디스플레이, 5.5 디스플레이별 이미지gran007.tistory.com 앱스토어 배포를 위해서는 지원 URL 즉 앱 홍보를 위한 홈페이지가 필요하다. 보통 개인은 블로그에 앱 홍보 페이지를 올려두고 URL 연동을 시키기도 하지만 개인 블로그가 지저분해 지기 때문에 따로 관리할 방법이 있으면 좋다. 필자는 노션에 홍보페이지를 언어별로 작성한 뒤에 공유를 통해 각각 외부 홈페이지를 만들어서 연결시켰다. 아래처럼 영문, 한국어, 일어 각각 페이지를 만든..

기존 react 단일사용을 할 때는 react-localization을 사용해서 영문 국문 프로파일을 나누고 이를 불러서 사용하면 브라우저 언어를 인지해서 영문 국문을 자동으로 구분해서 출력해주었다. nextjs에서 해당 방법을 사용하면 충돌이 발생해서 next js에 맞는 방식의 다국어 지원방법을 찾아야 한다. nextjs에는 App Router를 사용한 다국어 지원 방식을 제공하는데 도메인 뒤에 kr 이나 en을 붙이면 해당 언어로된 홈페이지가 보여지는 방식이다. 사용방식은 매번 업데이트 되기 때문에 만약 아래 글을 따라했는데 동작을 하지 않는다면 해당 링크를 참고해보자.https://next-intl-docs.vercel.app/docs/getting-started Next.js internatio..

https://gran007.tistory.com/entry/Reactreact-native-Redux-%EC%89%BD%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-23 [React/react-native] Redux 쉽게 사용하기 (2/3)https://gran007.tistory.com/entry/Reactreact-native-Redux-%EC%89%BD%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-12 [React/react-native] Redux 쉽게 사용하기 (1/2)React의 상태관리는 useState를 사용해 이루어 진다.import { useState } frgran007.tistory.com 리듀서 자동화 ..

https://gran007.tistory.com/entry/Reactreact-native-Redux-%EC%89%BD%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-12 [React/react-native] Redux 쉽게 사용하기 (1/2)React의 상태관리는 useState를 사용해 이루어 진다.import { useState } from 'react';function Home() { const [text, setText] = useState('hello'); return ({text})}하지만 useState를 사용한 상태값의 경우 해당 페이지를 상속하gran007.tistory.com 이전 포스팅에서 이야기 했듯이 redux에 상태값을 추가하고 사용하는 ..

React의 상태관리는 useState를 사용해 이루어 진다.import { useState } from 'react';function Home() { const [text, setText] = useState('hello'); return ({text})}하지만 useState를 사용한 상태값의 경우 해당 페이지를 상속하는 페이지까지만 해당 변수를 공유할수 있으며 모든걸 컴포넌트화 시켜서 관리하는 React의 특성상 이러한 변수를 여러개 만들어 아래로 계속해서 변수를 넘기게 되면 개발 복잡도가 기하급수적으로 늘어날 수 밖에 없다. 따라서 페이지 최상단에 몇개의 변수를 등록해 두고 이를 사용하는 곳에서 값이 변경될 때마다 페이지를 리로딩 할수 있도록 redux등의 상태 관리 방식을 개발했다. 유일한 상태..

React Native로 이미지를 로딩하는 방식은 간단히 두가지로 나뉘다. 1. 이미지를 각 사이즈별로 Android, iOS에 프로젝트에 각각 등록하고 uri로 로드해서 사용2. react-native 프로젝트 내부에 파일을 두고 source attribute로 불러서 사용 이미지를 각 해상도별로 나뉘어 관리를 하면 이미지 생성이나 폴더별 파일 관리등 관리에 수고는 많이 들어갈지 몰라도 해상도별로 깔끔한 이미지가 제공되므로 기업에서 서비스하는 앱의 경우 아래와 같이 이미지를 여러개 만들어 프로젝트 자체에 등록해 두고 사용하는 방식이 선호된다.위 이미지는 안드로이드 해상도별 이미지 사이즈에 대한 정보이다. 하나의 이미지를 해상도별 5가지 파일로 만들어 안드로이드 프로젝트의 리소스 폴더에 drawable..