서버에서 검증을 빨리 하는것이 좋은데 네트워크를 소비하지 않도록 클라이언트에서 검증을 해도 좋다. 하지만 서버에서 검증하는 절차는 필수적이다.
유효성 검사를 위해서 expres-validator 를 이용할 수 있다.
Sanitization 이란 ? 유효성 검사 후에 해야 하는데 예를 들어 2 글자 이상의 벨리데이션이 있었다면, 공백만 3글자로 입력해도 통과 됨. 이런것도 다 잡아줘야 함 → 이경우에는 맨 처음 trim()을 사용해서 해결 가능. express-validator 다양한 Sanitization 을 관련 API를 제공한다. ⇒ 데이터를 일관성있게 적용될 수 있도록
validation 관련한 함수는 middleware로 따로 관리한다 controller는 비즈니스 관련 핵심 로직만 관리 할 수 있도록 한다.
Contract Testing: Client-Server 통신시 test, 나중에 공부해보자.
프론트
react-query: server 에 상태를 캐쉬해서 network 비용을 줄일 수 있게 해준다. redux 를 사용하면 client 에 상태는 잘 관리할 수 있지만 server의 상태를 관리하려면 캐쉬등 여러가지 해주어야 할 작업이 있다. 이 책임을 reqct-query 에게 줌으로써 개발자는 다른 것에 집중해서 개발할수 있다.
데이터를 처음 가져올때는 state를 통해 loading, success, error 와 같은 상태를 사용할 수 있고, 두번째로 가져올 때부터는 server 상태와 동기화 되서 다를때만 가져오고 나마저는 캐쉬된 상태를 사용할수 있게 함으로써 사용자 경험을 높인다.
전역 state는 어떻게? → ContextAPI를 사용하여 전역 상태를 관리 할 수도 있다. 요즘은 redux 에 비중을 줄이고 context 와 react-query에 조합을 많이 사용하기도 한다.
리액트 네이티브
react-native-safe-area-context : safe area 나머지 부분에 여백에 관한 설정을 할수 있는 라이브러리
안드로이드에 경우 자동으로 서드파티 라이브러를 불러와서 사용할 수 있지만 ios에 경우에는 cocoapods 의 도움을 받아야 네이티브 모듈의 적용할 수 있다. ios 폴더 이동후 pod install 을 실행한다.
react-native-safe-area-context 의 useSafeAreaInsets() hook을 이용하면 반환 값으로 각 safeArea 구성의 필요한 각 모서리에 공백을 top, bottom, left, right로 받아올 수 있다.
statusBar 의 barStyle props를 전달할 수 있다. dark-content(어두운 내용), light_content(밝은 내용), default(시스템 기본 설정) → 참고로 안드로이드 ios 공통으로 사용할 수 있다.
리액트 네이티브에서 스타일링할 때 크기는 모두 dp로 설정한다. (Density-independent Pixel) → 1인치당 픽셀 밀도에 따라 크기가 일관된 UI를 보여줄 수 있는 단위이다.
dp = px * 160 / ppi
px = dp * ppi / 160
시뮬레이터 디바이스를 변경하는 방법 → xcrun simctl list devices 를 통해 실행 가능한 디바이스 목록을 확인할 수 있고, yarn react-native run-ios- simulator="iPhone 5s 와 같은 방법으로 동작 시킬 수 있다. 안드로이드의 경우에는 Android Virtula Device Manager를 열어서 Create Virtual Device 버튼을 눌러 새 디바이스를 추가하면 된다.
이미지를 리사이즈 해서 실제 이미지와 크기가 달라질때, resizeMode를 설정할 수 있다.
cover: 기본값, 가로 세로 비율을 유지한채로 리사이징, 뷰가 더 작으면 이미지가 잘린다.
contain: 가로 세로 비율을 유지한 체로 리사이징 하며 무조건 영역에 모두 들어오도록 한다.
stretch: 뷰의 크기대로 이미지를 리사이징 한다. 비율이 달라진다.
repeat: 바둑판식으로 이미지를 반복한다.
center: 이미지를 뷰 중앙에 둔다. contain과 마찬가지 이고, 뷰가 이미지보다 크면 이미지의 크기가 커지지 않고 원본 사이즈를 유지한다.