만족

위와 같은 구조로 라우팅을 구성했다면, 가령 /test 같은 주소는 존재하지 않으므로 텅 빈 화면만이 표시된다. 이를 시각화해주는 것이 UX관점에서 좋기 때문에 추가해야 한다. 먼저 로 라우트 컴포넌트들을 감싸준다. Switch컴포넌트 내부에서는 반드시 하나의 Route컴포넌트만이 렌더링 된다. 가령 apple}/> banana}/> 이런 구조로 되어 있다면 apple 만이 렌더링된다. 그리고 를 추가한다. (NotFound 위치에는 렌더링할 컴포넌트를 넣어주면 된다.) 위의 Route패턴과 일치하는 path를 찾지 못했을 경우에 NotFound가 렌더링 된다. 잘 작동한다.

satisfactoryplace.tistory.com/154?category=829221 [React] MobX 개요 MobX란? 상태 관리 라이브러리다. 비슷한 종류의 대표적인 상태 관리 라이브러리로 redux가 있다. 개인적으로 redux의 지독한(...) 보일러플레이트에 깊은 빡침을 느껴 mobx를 사용해보려고 한다. 설명 satisfactoryplace.tistory.com 위 포스트에서 이어지는 내용이다. 이번엔 MobX로 실제로 어떤 것을 해볼 수 있는지를 살펴보자. 우선 observerable state의 위치에 따른(내부/외부) state사용법에 대해 알아볼 것이다. class Timer { secondsPassed = 0 constructor() { makeAutoObservable(th..

MobX란? 상태 관리 라이브러리다. 비슷한 종류의 대표적인 상태 관리 라이브러리로 redux가 있다. 개인적으로 redux의 지독한(...) 보일러플레이트에 깊은 빡침을 느껴 mobx를 사용해보려고 한다. 설명은 공식 문서를 기준으로 설명한다. mobx.js.org/README.html About MobX · MobX mobx.js.org 빠르게 알아보자 import React from "react" import ReactDOM from "react-dom" import { makeAutoObservable } from "mobx" import { observer } from "mobx-react" // Model the application state. class Timer { secondsPasse..

6번의 떨어짐 끝에 드디어 애드센스 합격 통보를 받았다. (육전칠기....) 합격을 받기까지 거친 과정을 소개해 보려고 한다. 1. 사이트 성능 최적화 satisfactoryplace.tistory.com/122?category=829221 [React] React.memo를 이용한 함수 컴포넌트 최적화 https://ko.reactjs.org/docs/react-api.html#reactmemo React 최상위 API – React A JavaScript library for building user interfaces ko.reactjs.org 요즘 클래스형 컴포넌트를 갖다 버리고, 거의 함수 컴포넌.. satisfactoryplace.tistory.com 2. JS 실행을 지원하지 않는 봇(크롤러..

서치엔진이 웹 품질을 판단하는 데는 여러 기준이 있는데, 그 중 하나는 페이지별 적절한 메타 태그가 있느냐다. 리액트에서 해당 스펙을 구현하는 방법에 대해 소개할 것이다. 우선 /public/index.html의 head 태그 내부에 다음 태그를 추가한다. 위 메타 태그는 메신저/검색엔진 등에서 사이트 프리뷰를 표시할 때 사용한다. 가령 카카오톡에서는 다음과 같이 표시된다 이제 페이지 별로 해당 태그의 content를 조작하는 코드를 작성한다. const setMetaTags = ({ title="기본 타이틀", description="기본 설명", imageUrl="기본 사이트 이미지 경로" }) => { //set title document .querySelector('meta[property="og..

내 앱에서 갤러리 앱을 열고 선택한 사진을 내 앱에서 불러오는 기능을 구현한다. 파일 읽기 권한 추가 먼저 manifest.xml에 다음 권한을 추가하고, 마시멜로 이상의 Android 버전을 타게팅하는 경우 사용자에게 권한을 요청하여 받아낸다. 액티비티에서 갤러리 열기 우선 갤러리를 여는 코드부터 작성해 보자 public class SomeActivity extends FragmentActivity{ //... if(PermissionChecker.checkPermission(this, Manifest.permission.READ_EXTERNAL_STORAGE)){ //권한이 확인된 경우 갤러리 오픈 Intent i = new Intent(Intent.ACTION_PICK,android.provider..

앱을 개발하다 보면 디버그 모드에서만 활성화해야 하는 기능이 존재한다. 단적인 예로, 구글 애드몹의 경우 디버그 모드에서 광고를 초기화하는 행위가 누적되면 계정이 정지되기 때문에 디버그 모드에선 그것을 막아두어야 한다. 처음엔 노가다로 디버그 할 때는 주석처리 해두었다가 릴리즈 시 해당 주석을 해제하는 방법을 사용했지만, BuildConfig클래스를 안 뒤로는 손으로 하지 않는다. BuildConfig는 .BuildConfig 위치에 존재한다. 만약 내 applicationId가 com.example.www 라면 com.example.www.BuildConfig 위치에 있다. 해당 클래스로 버전 코드, 디버그 여부 등을 유용하게 쓰고 있었는데 간혹 릴리즈 모드에서도 DEBUG값이 false로 바뀌지 않는..

https://reactnative.dev/ React Native · A framework for building native apps using React A framework for building native apps using React reactnative.dev 리액트 네이티브는 크로스 플랫폼 애플리케이션 제작에 특화된 프레임워크다. 처음 들었을땐 안드로이드/웹을 따로 개발하는 나로써는 놀라움을 금치 못했고, 리액트 네이티브를 배우고 나서 이제 안드로이드 스튜디오는 쓰레기통에 박아버릴 예정이였으나... 시작할 때와는 생각이 많이 바뀌었다. 매도 먼저 맞는게 낫다고, 단점부터 얘기해보겠다. 너무 오래 걸리는 빌드 시간과 너무 거대한 프로덕션 물론 디버그의 경우에는 hot reload기능이 있어..