본문 바로가기

개발(Development)273

[안드로이드] "Google Play 정책: 데이터 보안 양식 잘못됨" 해결 방법(Feat. 애드몹) # Google Play 정책을 준수하지 않음 - "데이터 보안 양식 잘못됨" 해결 방법 애드몹(AdMob) 광고를 탑재한 안드로이드 앱을 서비스 중에 구글 플레이에서 아래와 같은 메일을 받았다. 조치 필요: 앱이 Google Play 정책을 준수하지 않음 발견된 문제: 데이터 보안 양식 잘못됨 Play Console에서 앱의 데이터 보안 양식을 검토한 결과 데이터 보안 양식의 내용과 앱의 사용자 데이터 수집 및 공유 방식이 일치하지 않음이 확인되었습니다. 모든 앱은 데이터 보안 양식을 정확하게 작성하여 데이터 수집 및 공유 관행을 공개해야 합니다. 이 요구사항은 앱에서 사용자 데이터를 전혀 수집하지 않는 경우에도 적용됩니다. 앱의 데이터 보안 양식에서 수집하는 사용자 데이터임을 명시하지 않은 사용자 데.. 2022. 9. 18.
[Puppeteer] M1 맥북 Chromium Error: Failed to launch the browser process 해결 방법 # M1 맥북 puppeter 실행 불가 문제 현상(feat. Chromium) 애플 실리콘 칩이 탑재된 M1 맥북에서 Puppeteer 를 사용하려 하면 아래와 같은 에러가 발생할 수 있다. Error: Failed to launch the browser process Chromium.app/Contents/MacOS/Chromium: No such file or directory: Chromium.app/Contents/MacOS/Chromium cannot execute: No such file or directory The chromium binary is not available for arm64 혹은 아래와 같은 팝업이 발생할 수 도 있다. ‘Chromium’은(는) 손상되었기 때문에 열 수 .. 2022. 8. 25.
[Next.js] 환경변수 사용 방법: .env파일 (development, production, local) # Next.js 환경변수(Environment Variables) 사용 방법 Next.js는 아래의 3가지 방식으로 환경변수 기능을 지원한다. 1. process.env.NODE_ENV : 구동환경 체크용 환경변수 2. .env 파일 : 구동 환경별 환경변수 적용 파일 3. NEXT_PUBLIC_ : 브라우저에서 참조하기 위한 Prefix 각각의 기본적인 사용법을 정리해 본다. 1. process.env.NODE_ENV : 구동환경 체크 변수 - Next.js는 자동으로 process.env.NODE_ENV 변수를 생성하고, 구동 환경에 따라 아래의 3가지 값을 주입해 준다. 1) development : 개발 환경(npm run dev로 구동한 경우) 2) production : 배포 환경(npm r.. 2022. 8. 25.
[React-Query] Query data cannot be undefined 에러 해결 방법 # Query data cannot be undefined 에러 발생 이유 React-Query에서 useQuery를 아래와 같이 사용하면 에러가 발생할 수 있다. const { data, status} = useQuery(['todo', id], () => { fetchByParam(id); }); 만약 이런 에러가 발생 했다면... Error: Query data cannot be undefined at Object.onSuccess .... 이유는 useQuery에 등록한 함수가 Promise를 반환하지 않아서이다. 분명히 Promise 를 반환하는 fetch나 axios 함수를 썼겠지만, 호출만하고 리턴은 하지 않았을 수 있다. # Query data cannot be undefined 해결 방법.. 2022. 8. 24.
[React] Next.js + ReduxToolkit + TypeScript 설정 방법 (next-redux-wrapper HYDRATE 사용 이유) # Next.js와 Redux 설정에 대하여 Next.js와 Redux를 연동하는 것은 생각보다 간단하지 않다. 왜냐하면, 본질적으로 Next.js 와 Redux 의 출신성분이 다르기 때문이다. 단순하게 정리하면, Next.js는 서버에서 돌아가고, Redux는 클라이언트(브라우저)에서 돌아간다. 여러 브라우저들에서 제각각 돌아가는 Redux의 전역상태를 서버에서 돌아가는 Next.js 에서 사용하려면 일이 복잡해진다. 이 글에서는 이에 대해 좀더 자세히 알아보고, 실제 설정하는 방법을 정리한다. (Next.js + Redux-Toolkit + TypeScript 연동 코드는 하단에 따로 정리해두었다. ) # Next.js 와 Redux의 관계 1. Next.js 는 "서버" 프레임워크다. 1) Next.. 2022. 8. 23.
[Meta태그 og] 카카오톡 링크 공유 미리보기 반영 안될 때, 캐시 초기화 방법 # Meta 태그 OG(Open Graph) 속성 HTML Meta 태그에 오픈그래프(og) 속성을 설정하면, 카카오톡, 페이스북 등에 링크 공유시, [제목, 설명문, 이미지] 등을 미리보기 할 수 있게 해준다. - 위의 html 링크를 카톡 공유시, 아래와 같이 이미지, 제목, 설명, url이 미리보기로 노출된다. 그런데 가끔 Meta 태그의 og 속성 값을 변경해도, 카톡에서 반영이 되지 않을 때가 있다. 원인은 카카오톡 내부에서 OG 정보를 캐시해두고 처리하기 때문이다. 카카오톡은 OG 캐시를 초기화하는 방법을 제공해준다. # 카카오톡 공유링크 OG 캐시 초기화 방법 아래 사이트에 접속하여, URL 을 입력하고 초기화 버튼을 눌러주면 된다. 즉시 카카오톡 OG 캐시가 삭제되고, 변경사항이 바로 반영.. 2022. 8. 23.
[VS Code] Enter 개행 다음줄 들여쓰기 간격(Indent) 문제 조정 방법 Visual Studio Code 에서 Enter를 치고 다음 행으로 내려가면 앞에 특정 간격(Indent)으로 들여쓰기 된다. 이 때 간혹 아래의 2가지 문제가 발생하는 경우가 있다. # VS-Code 들여쓰기 간격 문제 ▶ 1번째 문제: Indent가 사라진다. - 엔터를 치면 간격이 생기는데, - 방향키로 커서를 위로 올리면 간격이 사라진다. ▶ 2번째 문제: indent 간격이 안 맞는다. - 엔터를 치면 간격이 생기는데, - 설정한 값과 불일치하는 다른 탭 간격이 적용된다. * 탭 간격 설정은 Preference>Setting의 Editor: Tab Size, 혹은 prettier 사용시 printWidth 등으로 할 수 있다. 이런 사소한 문제가 코딩의 생산성과 효율성에 영향을 미칠 수 있으므.. 2022. 8. 21.
[Next.js] Link 컴포넌트에 속성 설정 방법(className, target, rel 등) # Next.js의 Link 태그에 속성 설정 방법 Next.js 에서 태그는 새로고침없이 페이지를 이동하는 client-side navigation을 위해 사용된다. 만약 컴포넌트에 className, target, rel 등의 속성을 주고 싶다면, 컴포넌트에 직접 주는게 아니라, 태그 하위에 태그를 삽입하여 속성을 설정 주면 된다. import Link from 'next/link' export default function LinkAttr() { return ( // Link 태그 내부에 a태그를 삽입하고, a태그에 속성을 설정한다. 링크 ) } * 참고 : rel 속성으로 noopener noreferrer 를 설정해줘야 보안상 유리하다. 참고로 공식문서의 원문을 첨부한다. If you need .. 2022. 8. 21.
[Next.js] pages 라우팅 파일명, 컴포넌트 이름 작성 방법 Next.js 는 File System Routing 을 제공한다. 즉, pages 경로에 위치한 폴더 및 파일명 자체가 접속 경로로 라우팅된다. 1. pages/파일명.tsx : /파일명 접속 라우팅 2. pages/폴더/파일.tsx : /폴더/파일 접속 라우팅 3. pages/폴더/[쿼리].tsx : /폴더/모든경로 접속 다이나믹 라우팅. useRouter().query 로 경로 취득 * index.tsx 는 파일명을 제외한 / 경로로 인식. * 타입스트립트 확장자는 tsx, 자바스크립트 확장자는 js를 사용 그런데 라우팅되는 파일의 파일명과 컴포넌트 명은 달라도 상관없다. 이 글에서는 이에 대해 간략하게 정리한다. # pages 라우팅 파일명, 컴포넌트 이름 작성 방법 - pages 경로의 라우팅 .. 2022. 8. 21.