Developer/React 17

[firebase] 구글/깃허브 로그인/로그아웃 (+그냥 로그인/로그아웃)

그냥 이메일, 패스워드를 활용한 로그인/로그아웃이 있는가 하면 google, github, facebook 같은 소셜 로그인이 있다. 어드민 같은 경우에는 소셜 로그인을 할 필요는 없을 것 같다고 판단했고, 작업은 이메일과 패스워드로 Create Account를 해서 해당 Account가 firebas Authentication User에 남도록 하는 목표로 수정하였다. 그래도 소셜로그인 테스트도 진행해보았다. 최종코드 : github.com/jayounglee92/react-firebase 1. 선행작업 자세한 선행작업은 스킵하겠다. CRA로 프로젝트 생성 : https://ko.reactjs.org/docs/getting-started.html react-router-dom 설치 : https://r..

Developer/React 2020.09.15

[firebase] 백엔드없이 firebase로 리액트 프로젝트 만들기

매번 하드코딩으로 마크업하던 걸 좀 자동화하기 위해서 회사에서 간단한 어드민을 개발하려고 하는데, 백엔드까지 혼자서 손보기에는 시간과 힘이 너무 들기에,,,,😥 파이어베이스로 백엔드 프로세싱을 하고 프론트만으로 개발할 수 있다는 걸 알게 되서 시작한 프로젝트이다. 혼자서 깃허브에서 테스팅을 완료했고, 실제 사내에서 이용하기 위한 프로젝트를 개발하면서 블로깅할 예정이다. 매번 혼자서 공부하면서 하려니,,,, 좀 시간이 걸릴 것 같다 😂 아무튼 화이텡....! 최종코드 : github.com/jayounglee92/react-firebase 1. 목표설정 우선! 하고자하는 목표는 아래와 같다. (스타일은 나아중에 추가적인 부분....!) - 소스 관리 : GitLab - 호스팅 : Netlify - 백엔드 ..

Developer/React 2020.09.14

오랜만에 yarn start 또는 npm start 시 나는 오류

TypeError ERR_INVALID_ARG_TYPE: The "path" argument must be of type string yarn start 또는 npm start 시 나는 오류 해결 오랜만에 레파지토리를 작업하려고 git pull을 한 후에 yarn start 를 했는데 아래와 같은 오류가 나왔다. (아래 ....은 생략한 것) TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined at assertPath (path.js:39:11) ...... 구글링해보니 버전 문제로 보이고 아래와 같은 단계로 하니 문제없이 yarn start 가 되었다 :) package.j..

Developer/React 2020.04.21

리액트에서 img 태그 버그 해결방법 : alt 의 중요성

img elements must have an alt prop, either with meaningful text, or an empty string for decorative i... 위와 같은 형식으로 이미지 태그를 작성 했더니 아래와 같은 오류나 났다. Windows PowerShell Compiled with warnings. ./src/component/About.js Line 17:29: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Search for the keywords to learn more about each ..

Developer/React 2020.04.21

리액트 프로젝트 레파지토리 받아서 세팅하기

이미 리액트 빌드 되어진 저장소에서 프로젝트는 받아서 작업하여 빌드, 배포합니다. 1. 프로젝드받아서 실행하기 프로젝트의 깃주소로 저장소 프로젝트를 로컬에 clone 및 실행합니다. git clone https://github.com/{username}/{repo-name}.git // 예시 cd {repo-name} // 로컬 프로젝트 폴더로 들어감 yarn yarn start 2. 작업 후에 저장소로 커밋, 푸쉬 git add . // 내가 수정한 전체내역을 git commit -m "커밋메세지" // 커밋하고 git push // 푸쉬 3. 빌드 후 배포 $ yarn build $ yarn run deploy

Developer/React 2020.04.21

리액트 프로젝트 만들기

node, npm/yarn, create-react-app 설치, build와 GitHub Pages 배포까지 1. node.js 설치 리액트 작업에 필요한 라이브러리들을 손쉽게 설치하기 위한 node의 패키지 매니저 npm/yarn을 위해 먼저 node.js 를 설치합니다. node.js 사이트 : https://nodejs.org/ko/ 설치가 잘 되었다면 터미널에서 버전확인이 가능합니다. $ node -v v10.15.1 npm은 node.js를 설치할 때 함께 설치되기 때문에 따로 설치할 필요가 없습니다. $ npm -v 6.8.0 2. create-react-app 설치 및 사용 프로젝트들을 담아둘 디렉토리에서 아래와 같이 설치를 하면 "my-app"이라는 폴더가 생깁니다. $ npx creat..

Developer/React 2020.04.21