201019_TIL - Firebase, Cloudinary 등

오로지 개발/TIL

chacha73 2020. 10. 19. 23:14

Today I Learned

React처럼 SPA(Single Page Application)으로 이루어진 경우

페이지 내에서 한번 로딩되고 나면 사용자가 어떤 클릭을 해도 부분적으로 업데이트 된다.

해당하는 컴포넌트만 바꿔주면서 원하는 데이터를 동적으로 불러와 볼수 있게 해주는 것.

하지만 문제점도 있다.

해당 페이지를 북마크 하고 싶을 때?

뒤로가기, 앞으로가기(히스토리) 하고 싶다면?

이런 문제를 보완하기 위해 SPA로 이루어진 리액트에서 네비게이터 기능도 가능하게 하는 것이 React Router

그럼 라우터는 무엇인가

웹에서 통상적으로 말하는 라우팅이란?

HTTP에서 사용자가 요청하는 url 요청에 어떤 특정한 웹페이지로 연결해줄 것인지를 결정해주는 메커니즘

즉, 사용자의 요청을 어떤 페이지로 연결해줄지 결정해주는 것

=> 라우터는 메인 경로 다음에 어떤 페이지를 보여줄지 결정하는 것

- boolean 타입인 exact를 이용하여 path를 결정할 때 정확하게 일치하지 않는 경로는 다른 경로로 인식하게 해준다.

- inline function으로 component를 전달하는 방식은 매번 새로운 component를 랜더하는 것과 같기 때문에 성능 이슈로 인해 추천하지 않는 방법

- react hook의 useHistory를 이용하면 해결할 수 있다.

2011년 부터 꾸준하게 개발자들에게 사랑받아온 제품인데, 구글에서 인수함

(crashlytics도

Firebase는 엄청 많은 기능을 지원하는데, 그 중에 인증과 realtime database 정도 공부했다.

Java로 공부할 때 로그인 기능 구현에만 시간을 상당히 많이 투자했었는데,

Firebase는 로그인 기능부터 시큐리티까지 한번에 해결해 주기 때문에 유용하다!

예컨데, 최근에 많은 사이트에서 자체적인 회원가입 대신 구글아이디나 페이스북, 또는 깃허브 아이디 등으로 연동하는 것을 볼 수 있다.

실시간으로 정보를 업데이트하는 것을 볼 수 있는 Realtime Database, Hosting,

이 밖에도 사용자가 서비스를 이용하다 에러가 났을 때, 에러가 난 경로나 원인 등을 분석하여 개발자에게 보여주는 crashlytics(crash reporting) 등 유용한 기능을 갖춘 강력한 도구!

사용자의 이미지를 업로드하고 리사이징, 필터링 등 다양한 까지 해주는 서비스

Firebase에도 해당 기능이 있지만 사용자가 업로드한 원본 그대로 저장하는 반면

Cloudinary는 저장할 때 설정한 값으로 조절하여 저장할 수 있기 때문에 보다 효율적으로 저장 공간을 관리할 수 있다.

1G 정도의 저장소까지는 무료로 사용할 수 있기 때문에, 개인 프로젝트시에 적당한 사이즈를 할당해놓으면 좋을 것 같아서 사용해봄

중복적으로 처리하거나 브라우저간의 호환을 위해 CSS 전처리기를 이용하는데,

PostCSS는 다양한 플러그인이 있어서 사용해 보았다.

(사실 create react app에 PostCSS가 있다.)

모듈화를 통해 효율적으로 연결하고 관리할 수 있다.