캡틴테크의 실전 기술서

Firebase v9 를 이용해서 React 프로젝트 로그인/가입/로그아웃에 대해서 아래 글에서 살펴봤었는데요. 혹시 안보신분은 빠르게 봐주시고, 오늘은 Firestore의 컬렉션과 문서를 다루는 몇가지 주요 케이스에 대해서 다뤄보도록 하겠습니다. https://hero-space.tistory.com/104 React 와 Firebase 인증서버 연동하기 웹을 제작하면서 가장 기본적으로 로그인 기능을 구현하기 위해서 사용하는 것은 구글에서 제공하는 firebase 입니다. 일정 사용량 까지 무료기도 하고 sdk도 여러가지 언어로 제공되고 있어서 쉽 hero-space.tistory.com React에서 Firestore를 다루려면? 워낙 많은 분들이 Firebase를 사용하고 있고, Firebase에서..

여러분들은 React 웹을 만들기 위해 가장 처음 무엇을 하시나요? 보통 npx나 yarn으로 프로젝트를 제일 처음 생성하게 될 텐데요. 이후 몇가지 초기 프로젝트 셋업 과정들이 잘 잡혀져 있어야 개발을 좀더 용이하게 할 수 있습니다. 이를 테면 자동완성 기능이랄지, 들여쓰기랄지, 싱글따옴표인지, 더블따옴표 인지 등 하나로 통일하게 하면 전체적으로 코드도 간결하고 불필요한 코드 정리 시간도 줄어들 수 있어서 좋습니다. 여러가지 방법들이 많지만 그 중에서 제가 세팅하는 방법을 소개해 드릴까 합니다. 프로젝트 생성 프로젝트 생성은 yarn으로 진행하도록 합니다. yarn이 npm 보다 훨씬 좋다는 명확함은 없으나, npm 에서 버전 이슈로 짜증이 나는 일이 종종있었고, 리서치하다보면 npm과 yarn은 동등..

React로 웹을 만들면 필연적으로 서버와 접속하게 됩니다. 이 때 서버는 직접만든 서버일 수도 있고 외부에서 제공한 서버 일 수도 있는데요. Public게 오픈되어지는 서버라면 상관없지만, 유효한 유저의 요청일 경우만 반환하는 것이 일반적입니다. 날씨정보를 가져오더라도 유료화 모델의 경우 특정 유저는 더 많은 API를 사용할 수 있도록 권한을 부여한다던지 하는 것도 이러한 Role 기반의 비즈니스 모델이지요. 오늘 제가 소개해드릴 것은, 직접만들 서버에 요청하는 API는 반드시 유효한 인증정보를 담고 있어야 하고, 그 인증정보가 유효한지 서버에서 체크한 뒤 만약 유효한 유저라면 그에 상응하는 응답을 하는 기본적인 로직구현을 해보도록 하겠습니다. 아마도 이 부분은 리액트에서 API 부를 구현하는 분이 모..

오늘은 리액트에서 컴포넌트간 Property 전달 매개체의 역할인 Recoil에 대해서 알아보도록 하겠습니다. 리액트를 하면서 가장 중요한 부분인데요 여러가지 컴포넌트에서 전달받아야하는 값들을 어떤 메커니즘으로 하느냐에 따라 코드의 복잡도나 후에 유지보수등의 난이도가 좌우되어질 수 있기 때문에 잘 정립하는 게 좋습니다. 물론 아주 작은 프로젝트에서 굳이 이런거를 써야하나 싶은 생각도 들 수 있지만 한번 써보면 괜찮은 매커니즘익구나 하는 생각이 들테니 믿고 따라와 주시면 좋겠습니다. Recoil 의 개념 Atom : 하나의 작은 상태로, 일반적인 리액트의 상태로 컴포넌트 구독이 가능합니다. atom에는 value를 저장할 수 있고 서로 다른 atom들을 생성합니다. useRecoilState : atom의..

리액트로 사이드프로젝트를 진행하기위해 리서치를 해나가면서 프론트앤드가 서버랑 통신할때 사용하는 Axios 라이브러리 외에 효과적으로 통신한 데이터를 관리하는게 네트웍비용을 줄이는 중요한 요소이며, 서버의 데이터가 변경되었을때 바로바로 프론트에서 보여주는 동적인 기능들이 중요한데요. 오늘은 그런 요구사항들을 커버해줄 수 있는 리액트의 매커니즘인 React-Query에 대해서 살펴보고자 합니다. Reference 리액트 쿼리를 도일을 위해 고민을 한 사람이 자세하게 내용 정리한 블로그 React-Query 도입을 위한 고민 (feat. Recoil) - 오픈소스컨설팅 테크블로그 - 강동희 React-Query 도입을 위한 고민 (feat. Recoil) - 오픈소스컨설팅 테크블로그 - 강동희 Web Fron..

프론트앤드는 하나의 클라이언트로서 서버와 통신을 통해 데이터를 받아오고 이를 시각화 하는 역할을 보통합니다. 서버는 사용서버일 수도 있고 자신이 만든 서버일 수도 있는데요. 리액트에서 어떤 API 리퀘스트 라이브러리를 사용하는지 리서치해보고 제가하려는 사이드프로젝트에서는 어떤 것을 쓰는게 적합한지 보도록 하겠습니다. AXIOS vs FETCH 검색하면 크게 2가지로 사용하는 것을 볼수 있는데 하나는 axios이고 나머지는 라이브러리라기 보단 이미 브라우저에 내장되어있는 함수를 사용하는 방법입니다. 그러다 보니 장단점이 있겠죠? 내장된 것을 사용하다보면 별도의 라이브러리 설치 없이 바로 사용할 수 있는 반면에 REST API를 사용하다보면 단순한 콜이 아닌 파라메터도 넣고, 몇번 리트라이 할 것인지도 정하..

리액트로 사이드 프로젝트를 진행하기로 하면서 리서치를 진행하는 과정에서 빼놓지 않을 것이 개발 툴과 주요 라이브러리 인데요. 아무래도 개발 하다보면 항상 시간에 쫓기게 되기 때문에 조금이라도 시간을 줄일 수 있는 방법을 미리 마련해 두는 것이 나중에 그 시간을 더욱 아낄 수 있는 길입니다. 그 중에서 오늘 몇가지를 소개해볼까 합니다. 개발 툴 VSCode : 대세이며 플러그인들도 많고 무료버전이라 선택의 이견이 없다. https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linu..

웹을 제작하면서 가장 기본적으로 로그인 기능을 구현하기 위해서 사용하는 것은 구글에서 제공하는 firebase 입니다. 일정 사용량 까지 무료기도 하고 sdk도 여러가지 언어로 제공되고 있어서 쉽게 연동할 수 있는데요, 사이드프로젝트를 본격적으로 시작하기 전에 리서치 겸해서 Firebase을 연동하여 로그인하는 것을 리액트로 만들어 보도록 하겠습니다. 프로젝트 생성+firebase 프로젝트 연결 $ npm create-react-app newitter $ cd 프로젝트 이름 생성시 느낌보면 아시겠지만 노마드 코드 무료강의를 참고하며 클론코딩을 진행하고 있습니다. firebase 설치 후 프로젝트 정보 가져올 것 $ npm install --save firebase firebase 프로젝트 정보는 .env..