분류 전체보기

[React] React와 Firebase Firestore 연동하여 CRUD 구현하기

우선, Node.js Express로 Firebase Firestore DB와 연동하기 + CRUD 와 유사한 부분이 많으니 보다가 이해가 안된다면 참고하면 좋을 것 같고, Firebase 프로젝트 생성 등에서 어려움을 겪는다면, 본문 하단 Reference 부분의 유튜브 영상을 참고하여 따라하면 좋을 것 같다. 1. Firebase 프로젝트 생성 생성해주고.. 2. Firebase Web App 추가 Firebase 프로젝트에서 웹 앱 추가. SDK 정보를 다른 곳에 저장해놓자. 아래에서 이용함. 이미 창을 닫았더라도 프로젝트 설정 > 일반 > 내 앱 > SDK 설정 및 구성 에서 확인 가능하다. 3. React 프로젝트에서 Firebase SDK 설치 $ npm install firebase 로 re..

[React] React에서 모바일, PC버전 각각 다른 페이지로 라우팅하기

React로 작업하던 중, PC와 모바일에서 다른 형식으로 화면을 띄우고 싶어서 찾아봄! $ npm install react-device-detect 일단 패키지부터 설치. 이거 쓰면서 알게됐는데 npm 5버전부터는 --save 옵션이 기본 적용이라 쓸 필요가 없더라. 그리고 App.js 상단에 import { BrowserView, MobileView, isBrowser, isMobile, } from "react-device-detect"; 이거 추가해주고.. function App() { return ( ); } 원래 이랬던 애들을 function App() { return ( if(isMobile) { } else { } ); } 이런 식으로 바꿔주면 된다. 이용해서 해도 되고... 그건 알아서...

[React] React에서 dotenv 사용 시 오류. (Module not found: Error: Can't resolve 'fs' in '/Users/~/Desktop/React/~/node_modules/dotenv/lib')

React 프로젝트에서 dotenv로 환경변수를 관리해주려고 할 때 생겼던 오류. .env파일은 루트 폴더 위치에, 환경변수를 사용하는 파일은 src 폴더 내에 존재할 때. Error Message ERROR in ./node_modules/dotenv/lib/main.js 1:11-24 Module not found: Error: Can't resolve 'fs' in '/Users/~/Desktop/React/~/node_modules/dotenv/lib' ERROR in ./node_modules/dotenv/lib/main.js 3:13-28 Module not found: Error: Can't resolve 'path' in '/..

[HTML/CSS] 마우스 오버 시 커서 스타일 변경

태그 안에 sytle= 로 스타일 추가해주면 됨 커서 종류는 아래 링크 참조. Reference : MDN Web Docs

Github에 로컬 폴더 연결하기 (원격 저장소에 로컬 저장소 연결)

가장 쉬운 방법은.. GitHub(원격 저장소) 에서 Clone해 오는 것. Clone해오면 원격 저장소에 로컬 저장소가 자동으로 연결된다. 그러나 이미 로컬에 폴더가 생성되어 있는 상태에서, 이 폴더를 github과 연결하고 싶을 때. $ git init 폴더에 이미 .git 파일이 생성되어 있어서, 로컬 저장소가 활성화되어 있는 상태라면 git init은 할 필요가 없다. $ git commit -m 'first commit' commit 메시지는 자유롭게 작성. $ git branch -M master $ git remote add origin https://github.com/(유저명)/(Repository명).git remote(원격) 저장소를 origin이라는 이름으로 등록. 뒤..

[React] React 설치하기. (M1 Mac 환경에서 React 설치)

1. Node.js 설치 Node.js를 LTS버전이나 최신 버전으로 우선 설치해주자. 나는 Latest(최신) 버전인 18.2.0 으로 가보겠다. 2. 작업 폴더 생성 알아서 폴더 생성해주고, VSCode에서 폴더 열어서 시작. 3. React 프로젝트 생성 터미널에 $ npx create-react-app [프로젝트명] 입력하면 쫘라라라라락 하고 프로젝트가 생성된다. (시간 좀 걸림) Test라는 프로젝트를 생성하고 싶으면 npx create-react-app Test 라고 입력하면 됨. 4. 폴더 다시 열기 [프로젝트명] 으로 생성된 프로젝트 폴더를 다시 VSCode에서 열어준다. 안 해도 되는데.. 터미널에서 명령어치고 이것저것 하기에 이게 편함 ^ㅁ^ 5. 끝! 이게 끝이다. React 설치 왤..

소소식탁 (홍제동)

소소식탁 2022.05.16 술집가기 전에 가볍게 저녁먹으러 떠난 우리동네 맛집...이라고 하는 음식점 홍제동에 맛집은 솔직히 문화촌초밥 말고 잘 모르겠는데.. 암튼 뭐 나쁘진않음 여기도 저번엔 뭐먹었더라.. 카츠먹었나.. 기억안나는데 오늘은 사케동먹음. 러시아쉑들 땜에 가격이 13000원으로 올랐어요 또. 규동 부타동은 8천원인데 얘만 뭐 13000원이야. 동네에서 먹는것치고 너무 비싸지않니... 2월까지만 해도 8500원인걸 봤는데. 8500원이였으면 솔직히 가격때문에 완전 맛있게 먹었음 ㅋㅋ 근데 뭐 또 맛있게 먹었구요... 일단 간장이 전혀 안뿌려져 나와서 취향껏 뿌려먹으면 되는데.. 난 이게 오히려 맘에 안 들었음. 적당히 밥에 배어있어야 그게 참된 맛인 것을 으이? 그리고 장국이 짰다... ^..

쉐이크쉑 용산 아이파크몰점 (쉑쉑버거 용산점)

쉑쉑버거 용산점 2022.05.15 ㅋㅋ 쉑쉑버거 드디어먹는다 ㅋㅋ 여태 한 번도 안 먹어봄 근데 기회가 왔으니 덥석 물었다. 누구 만나러 간 거긴 한데.. 사실 그것보다 쉑쉑버거에 더 관심이 있었음 ㅈㅅㅋㅋ 일단 용산역 1출로 나가서 에스컬레이터 쪼로록 타고 내려가서 뒤돌면 이런 풍경을 볼 수 있습니다. 저 안으로 들어가서 1층에서 요래조래 잘 찾아보면 쉑쉑버거 나올거임. 길치는 잘 못 찾을 수 있을듯? ㅋㅋ 뭐.. 쉑쉑이니까.. 메뉴는 안올려줘도 되죠? 대충 스모크쉑이랑 감자튀김이랑 사이다 시킴. 쉐이크에 감튀찍먹이 국룰이라던데 난 그 도전보다 탄산의 청량함이 없으면 목막힐거같았음. 아니 무슨 감튀에 햄버거 먹는데 쉐이크로 목이 뚫리겠냐??? 그래서 맛있게 잘 먹었습니다. 케첩이랑 마요네즈가 셀프인건..