라쿤의 끄적끄적

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Preivew Image (File Upload) firebase console의 storage 기능에서 bucket은 파일을 넣는 곳임 트윗할 때 사진을 첨부하기 위해서 트윗하는 방법을 바꿔야함 Hooks attachment hook은 업로드하는 file를 표시할 수 있는 string 형식의 dataURL 값을 가짐 default 는 null 값으로 둠 import Rweet from "components/Rweet"; import { dbService } from "fBase"; import React, { useEffect, useState ..

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Delete and Update 지금 까지 진행했던 실시간 데이터 update는 정말 좋은 기능이지만 원하지 않을 때도 너무 실시간으로 실행이 됨 예를 들어, 트위터에서 누군가가 추가시키고 지우는게 나타나고, 댓글들이 생성되는 것은 보고 싶지만 실시간으로 수정되고 사라지는 모습은 사용자에게 불편함(물론, 실시간 채팅 앱에서는 필요하지만) 트윗 Component 분리와 사용자와 작성자 일치에 따른 delete, edit 버튼 표시 Rweet Component 생성(분리 관리) 효율적인 관리를 위해서 트윗을 하는 부분을 따로 component화 시킬 ..

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Getting the Rweets rweet useState가 값을 입력하여 Database에 넣는 것이라면, rweets useState는 Database에서 값을 가져오기 위한 useState이다. rweets는 빈 배열 형식을 띄고 있다. 그렇기 때문에 database collection의 Document를 하나씩 가져와서 배열안에 넣어 저장하고 화면으로 불러올 것이다. database에서 document를 가져오기 위해서는 collection에서 get method를 사용한다. Database에서 data를 가져오는 함수(firebase) ..

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Social Login signinwithpopup signinwithredirect GoogleAuthProvider 소셜 로그인 기능을 사용하기 위해서는 signinwithpopup 또는 signinwithredirect를 활용 할 수 있다. Auth : Social Login 해당 Social Login 버튼을 눌렀을 때 처리 할 onSocialClick 함수를 만든다. 로그인을 하려면 signinwithpopup에 해당 provider를 넣어 처리 한다. provider에는 google, facebook, github 등이 존재하는데 전에 ..

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Creating Account Provider Auth provider EmailAuthProvider createuserwithemailandpassword : 사용자의 새로운 계정을 생성 할수 있게 email, password를 받아 User Account를 생성시키고 바로 로그인 하며, 나중에 Account를 가지고 로그인 할 수 있음 (계정이 이미 존재하거나, 타당하지 않은 값인 경우 fail을 return) newAccount라는 useState를 사용한 hook을 생성해서 Account를 가지고 있는지 확인해서, newAccount 가 ..

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Authentication (인증) Absolute Imports import시에 dot을 쓰는 상대 경로는 지저분 하므로 절대 경로를 사용하는 import 기준을 만듦 Absolute imports by create react app 이처럼 최상위 dir에 jsconfig.json 파일 만들면 아래처럼 src 기준으로 import path를 써도 됨 // 절대 경로 기준이 src로 시작됨 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } firebase web api 둘러보기 Fir..

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Firebase Firebase Site Firebase는 그냥 데이터베이스 였음, 구글에 속하지도 않았다가 구글에 인수되면서 확장되었음 이 프로젝트에서는 Firebase를 통해서 데이터 베이스이자 백엔드인 Cloud Firestore를 사용함(데이터베이스 관련 코드없이 데이터베이스를 사용하게 해줌!) Cloud Firestore : Detail Fireabase : products Firebase ML : 머신러닝 기능 제공 Cloud Functions : serverless function 기능 제공 (AWS, Lamda 같은것임) Cloud ..

생활코딩 생활코딩 : Node.js 수업 생활코딩님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Node.js Node.js App - 모듈의 활용 lib 폴더 : library를 뜻하고 재사용 가능한 작은 조각의 로직, 프로그램을 말함 module.exports 를 바로 해당 object에 줘도 되고, 아니면 나중에 module.exports = template 형식으로 줘도 된다. // lib/template.js // 바로 module.exports 주는 경우 module.exports = { html : (title, list, body, control) => { return ` WEB ${list} ${control} ${body} `; }, l..

생활코딩 생활코딩 : Node.js 수업 생활코딩님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Node.js App - 글 수정 - 수정 링크 생성 해당 페이지에 들어감 -> 글을 수정할 수 있는 버튼 클릭 -> page 연결 단, home에서는 update버튼은 없음 template 수정 기존의 버튼이 있던 부분은 control이라는 매개변수를 줌으로 써 조건을 걸어줄 예정(Home vs 기타 페이지) const tmeplateHTML = (title, list, body, control) => { return ` WEB ${list} ${control} ${body} `; } HOME 페이지 control로 받을 인자로 create만 있고 updat..

생활코딩 생활코딩 : Node.js 수업 생활코딩님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Node.js Node.js 동기와 비동기 그리고 콜백 (Synchronous & Asynchronous) 동기 & 비동기(Sync & Async) 동기 : 직렬적(순서대로) 처리 (비효율적이지만 덜 복잡함) 비동기 : 병렬적으로 처리 (효율적이지만 복잡함) nodejs에서는 기본적으로 모두 async 임 그래서 따로 Sync관련 함수가 존재함 // nodejs/sample.txt = 'b' const fs = require('fs'); // readFileSync console.log('a'); const result = fs.readFileSync('nod..

생활코딩 생활코딩 : Node.js 수업 생활코딩님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Node.js APP - 홈페이지 구현 현재 pathname으로는 각각의 페이지를 구분이 불가함 그러면 home 인 경우 즉, queryData(queryString)이 없는 경우에 표시하고자 한다. 구조 : if pathname을 통해서 구분하고 -> 내부에서는 if queryData.id을 통해서 pathname만 있는 상황과, 그외의 queryString이 있는 상황의 조건을 걸어 표시되는 화면을 다르게 구성함 var http = require('http'); var fs = require('fs'); var url = require('url'); var..

생활코딩 생활코딩 : Node.js 수업 생활코딩님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Node.js Node.js의 시작 HTML을 일일이 수작업으로 모두 바꿔 수정해줘야 했다. -> 반복적인 일 모든 사람에게 HTML 파일을 수정 가능하게 하면 위험해서 웹 소유자만이 컨텐츠 추가가 가능했다. HTML 작성을 기계에게 해줄 순 없을까에 대한 욕망의 시작 JavaScript에 익숙한 웹 개발자들이 다른 언어를 배우지 않고 자동으로 웹페이지를 만드는 SSA(Server Side Application)를 할수 있게 하고 싶어 지면서 -> Node.JS가 탄생한다. 웹의 변화 : 문서 -(javascript의 탄생)-> 앱(사용자와 상호작용 함) ->..

33 Concepts Every JavaScript Developer Should Know (by leonardomso) Github : 33 Concepts Every JavaScript Developer Should Know (by leonardomso) Nomadcoder's lectures 예전에 유튜브 영상을 보다가 나중에 봐야겟다하고 저장해둔 영상을 이제서야 발견해서 공부하고자 한다. Call Stack Call Stack : 자바스크립트가 함수 실행을 핸들하는 방법 중 하나. 책을 쌓는 것 처럼 자바스크립트 함수를 스택위에 올리고 함수를 다 실행하면 제거 함 일반 함수인 경우 함수를 return이 나와야 끝나는 것임 크롬 개발 툴 sources의 call stack을 확인해 보면 anonym..

함수형 프로그래밍 드림코딩by엘리 : 함수형 프로그래밍 vs 객체지향 프로그래밍 드림코딩by엘리 유튜브 함수형 프로그래밍에 대한 영상을 보고 정리하였다. 지난시간에 Hooks를 만들면서 함수형 프로그래밍을 해보았는데 조금더 함수형 프로그래밍에 대해서 알아보려고 하던 찰나에 영상이 업로드 되어서 시청하였다. 프로그래밍 패러다임 절차지향 프로그래밍 객체지향 프로그래밍 함수형 프로그래밍 함수형 반응형 프로그래밍 프로젝트의 목표에 따라서 적절한 방법과 기법을 사용 함 함수형 프로그래밍 함수형 프로그래밍 언어들(Functional Programming Languages) Haskell, F#, OCaml, Erlang 함수형 프로그래밍을 지원하는 언어들(Support Functional Programming) J..

React Hooks 노마드코더 : React Hooks 노마드코더의 React Hooks 강의를 듣고 작성 함 지난 시간 지난 시간에는 React의 hook중에서도 useEffect, useRef에 대해서 알아 보았고 그것을 통해 만든 nooks (nico's hooks) 중에서 useTabs, useTitle, useClick을 알아보았다. usePreventLeave & useConfirm (nico's hook) useConfirm 과 usePreventLeave는 사실 hooks가 아님 (useEffect, useState를 사용하지 않기 때문) 하지만 이를 통해서 좋은 함수형 프로그램이 어떤건지 알수 있음 useConfirm 사용자가 무언가 하기전에 확인 하는 것으로서 사용자가 버튼을 클릭하는..

React Hooks 노마드코더 : React Hooks 노마드코더의 React Hooks 강의를 듣고 작성 함 지난 시간 hook은 기본적으로 react에서 제공하는 hook이 있고 개인이 custom 하여 만들 수도 있다. 지난 시간에는 React hook인 useState와 nico's hook(Nooks)인 useInput을 공부하였다. 이번에는 useState를 사용하는 nooks useTabs를 알아볼 예정 그리고 기본 hook인 useEffect와 useRef와 이를 활용한 여러 nooks를 알아볼 예정 useTabs (nico's hook using useState) useState hook로 만들어진 useTabs 은 객체가 들은 배열 : [{},{},..]과 배열안의 객체..