공부하는 비오

git clone 후, 바로 npm start 했을 때 떴던 오류. 오류를 읽어보니 node_modules 폴더가 없어서 생긴다고 한다. 기본적으로 node_moduels는 깃허브에 올라가지않게 설정되어있기 때문. 해결방법은 터미널에서 npm update를 해주면 된다.

Error 2020. 12. 2. 13:16

리액트를 사용해서 어느정도까지 직접 웹어플리케이션을 만들수는 있지만, 뭔가 부족한게 느껴졌다. 만들기는 하지만 뭔가 붕- 떠있는 기분. 중심에 대한 이해가 부족한 느낌이었다. 그래서 다시 시작하는 이론공부. (feat. 생활코딩) ​ ​ 1. WEB ​ 웹어플리케이션을 만드는 입장이니, 웹이랑 인터넷을 구분해보자. ​ - 인터넷: 전세계에 있는 컴퓨터들이 연결되어 있는 네트워크. 이 네트워크를 통해 컴퓨터들이 파일을 주고받을 수 있다. - 웹: 인터넷을 활용해서 HTML언어로 만든 웹페이지를 컴퓨터가 주고 받을 수 있도록 고안된 서비스. 웹이 제일 유명한 인터넷서비스여서 웹과 인터넷을 혼용하여 많이 사용하지만, 인터넷은 웹보다 더 큰 개념이다. 인터넷 안에 Web, FTP, email 등등 여러 서비스들..

이론공부 2020. 11. 29. 23:46

하지만 이름을 바꾸어도 위쪽 Nav의 이름은 변경되지 않는다. 그 이유는 user id를 가져오기 위해 모든 컴포넌트마다 firebase.auth().currentUser(이후 authService라 칭함)을 불러온 것이아니라, 최상위 컴포넌트에서 한번 불러온 다음 props로 전달해줬기 때문이다. 즉, 여기에 사용된 user id는 react 내부에서 연결되어있다. 그렇기 때문에 프로필 컴포넌트에서 id를 변경하더라도, Nav컴포넌트에서는 id변경을 감지하지 못한다. (서버의 store에 연결되어 있는것이 아니기 때문) 새로운 정보를 적용하거나 상태의 변화가 있을때, react는 새로운 정보를 인식한 후 모든 요소들을 다시 렌더링해준다. 그러므로 Profile에서 user id를 변경했을 때 Nav도 ..

Firebase 2020. 11. 27. 12:37

firebase.user에 있는 updateURL 메서드를 사용하여 프로필을 업데이트하려고 한다. 공식문서를 읽어보면 displyName과 phtoURL이라는 속성을 가지고 있다. user가 가지고 있는 이름과 사진을 state로 설정한다. 이전에 했던거 복습 겸 숙제였던 항목. text input 설정 및 file input 설정 file input API를 이용해서 url을 받아오고, 웹에서 받은 url을 newPhoto에 넣는다. 그리고 사진 변경 취소 버튼 설정. 업데이트 프로필 클릭 시 동작할 코드 newPhoto가 있다면, 즉 input을 통해 사진을 넣었다면, storage의 사용자id/profile/폴더에 phto라는 파일명으로 사진을 업로드한다. 그리고 photoURL은 store에 있는..

Firebase 2020. 11. 27. 11:46

firebase.firestore().collection()에는 where이라는 메서드가 있다. where는 filter같은 역할을 해 주는데, where을 사용하여 내가 원하는 정보만 새롭게 query로 만들어 가져올 수 있다. firebase.firestore.collection('컬렉션 이름').where(비교할 path, 비교연산자, 비교할 값); where의 조건에 해당하는 쿼리만 반환한다. nweets 컬렉션 안에있는 파일들의 creatorId와 userObj.uid(현재 사용자)가 같은 파일들만 반환. orderBy는 createAt순으로 정렬하기위해 사용했다. 하지만 콘솔에서 이런 에러를 확인 할 수 있다... 하지만 저기 링크를 따라가면 만들수 있어, 라고 친절하게 알려준다. 링크를 따라..

Firebase 2020. 11. 26. 16:56

firebase.storage에는 delete라는 메서드가 있다!!! 이걸이용하면 멘션을 지웠을 때, 관련 파일들도 삭제할 수 있음 :) 삭제하기위해서는 reference의 위치가 필요하다. reference의 위치는 이전 글에서 /사용자id/랜덤id(uuid)로 지정했었다. ^^ 랜덤 id를 모르지만... 이럴 경우를 대비한 API가 또 있다. refFromURL 메서드를 사용하면 URL의 reference로 반환된다. 즉 다음과 같이 사용가능. firebase.storage().refFromURL(storage 파일 url).delete(); 만약 사진을 첨부하지 않을 경우 오류가 발생하므로(작동에는 문제없으나 콘솔에서 오류발생) 예외처리를 해줌.

Firebase 2020. 11. 26. 15:35

웹에 사진 업로드하기 및 썸네일 image만 업로드가능한 input태그를 사용. 업로드한 사진 정보를 받아올 state인 sttachment 정의. web API를 사용하여 사진 정보(result)를 attachment에 저장. attachment를 사용하여 사진을 선택했을 때 썸네일이 화면에 나타나도록 한다. (아직 store에 저장되지 않았으므로, 이 url을 사용) Clear을 누를 경우, 파일업로드가 취소되도록 attachment를 초기화한다. storage에 사진 업로드 우선 storage를 import, export 해준다. 우선 Reference를 살펴보자. reference는 storage에 업로드다운로드등등 할 수 있다. 파일에 대한 reference를 만들고, 파일을 reference에..

Firebase 2020. 11. 26. 14:37

Example: Showing thumbnails of user-selected images function handleFiles(files) { for (let i = 0; i < files.length; i++) { const file = files[i]; if (!file.type.startsWith('image/')){ continue } const img = document.createElement("img"); img.classList.add("obj"); img.file = file; preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed. const rea..

JavaScript 2020. 11. 26. 10:40