기록하는 개발자

react로 개발을 해본 사람이라면 babel과 webpack에 대해 들어본 적 있을 것이다. 그렇다면 이 babel과 webpack 두 녀석은 정확히 무슨일을 하는걸까? webpack Webpack은 여러개 파일을 하나로 합쳐주는 모듈 번들러이다. Webpack은 '빌드'라는 과정을 통해 프로젝트에서 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜준다. 자바스크립트 코드 뿐 아니라 이미지, CSS등도 같이 빌드한다. 번들러를 사용하면 여러개 파일을 하나로 묶어주기 때문에 네트워크 접속의 부담을 줄여 더 빠른 서비스를 제공할 수 있다. Babel 바벨은 코드를 재작성해주는 대표적인 트랜스파일러(transpiler) 프로그램으로, 모든 브라우저가 최신 기능인 ES6의 기능을 제공하지 않기 때문에 ES..

javascript의 비동기 처리 두번 째, Promise에 대한 글이다. 첫 번째 Callback에 대한 정리는 아래 링크에서 볼 수 있다. https://mingmeng030.tistory.com/257 [Javascript] 비동기처리 - 1. Callback javascript의 비동기 처리 방법에 대하여 callback , promise , async/await 세 파트로 나누어 정리를 해보려 한다. 그 중 첫 번째 Callback에 대한 글이다. Callback 아래 함수는 일반적으로 parameter를 받아 만든 mingmeng030.tistory.com 위 포스팅에서 Callback 의 문제점으로 '콜백 지옥'을 얘기하면서 이의 해결책으로 promise 또는 async/await를 사용한다..

javascript의 비동기 처리 방법에 대하여 callback , promise , async/await 세 파트로 나누어 정리를 해보려 한다. 그 중 첫 번째 Callback에 대한 글이다. Callback 아래 함수는 일반적으로 parameter를 받아 만든 객체를 return한다. userInfo라는 변수에 함수 getUserInfo 의 return 값을 저장하여 console에 print 한다. 아래는 위 함수에 callback 함수를 적용하여 동일한 결과가 나오도록 수정한 코드이다. getUserInfoCallBack 함수는 두 번째 인자로 cb라는 callback 함수를 받는다. 9번째 줄에서 getUserInfoCallBack 함수를 호출하면서 익명함수를 callback 함수로 넣어주었고,..

↓이전 글 https://mingmeng030.tistory.com/244 [vanillaJs] 프레임워크없이 SinglePageApplication 만들기-1. 라우팅 설정하기 폴더 구조 1. frontend 폴더 내부에 index.html 파일 생성 후 아래와 같이 구성 // index.html SPA with no framework Home Posts Settings - url 이동에 사용하게 될 a 링크들에 대하여 data-li.. mingmeng030.tistory.com https://mingmeng030.tistory.com/245 [vanillaJs] 프레임워크없이 SinglePageApplication 만들기-2. 라우팅 페이지 구성 https://mingmeng030.tistory.co..

DOM Document Object Model DOM(문서 객체 모델)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소, 요소의 속성, 그리고 텍스트를 각각의 객체로 만들고 이들 객체를 부모-자식 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다. DOM은 W3C의 표준 객체로, 아래와 같이 계층 구조로 표현되며, 네 종류의 노드로 구성된다. 문서 노드(Document Node) 트리의 최상위에 존재하며 다른 모든 노드에 접근하기 위해서는 반드시 문서 노드를 통해야 한다. 따라서 DOM tree에 접근하기 위한 entry point 이다. 요소 노드(Element..

: comfirm 이 발생하고 확인을 선택하면 해당 tweet 이 삭제된다. - 수정 form을 보여준다. - 내용 수정 후 update tweet을 클릭하면 수정 내용이 반영된다. - cancel 선택 시 form이 사라진다. (수정 취소) import React, {useState} from 'react'; import { deleteDoc, updateDoc, doc } from '@firebase/firestore' import { dbService } from "fBase"; const Tweet = ({ tweetObj, isOwner})=>{ const TweetTextRef = do..

cloue firestore 의 database는 NoSQL database 이다. -규칙이 적고 유연하다는 장점이 있으나 이로 인해 sql의 자율성에 비해 제한사항이 있다는 단점 존재 특징 -collection 이라는 것을 가진다. 이는 컴퓨터의 폴더와 같은 역할 -document : 컴퓨터에 있는 문서와 비슷하며 필드, value, uid 등을 가진다. import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; import { getFirestore } from "firebase/firestore"..

- 앞으로 우리가 render 시킬 routes 는 우리의 로그인 여부에 따라 달라진다. 1. routes 폴더 생성 2. terminal 창에서 react router dom 설치 > npm i react-router-dom import React from 'react'; const Home=()=>Home; export default Home; import React from 'react'; const Auth=()=>Auth; export default Auth; import React from 'react'; import AppRouter from "./Router"; function App() { return ( ); } export..