기록하는 개발자

DOM(Document Object Model 문서 객체 모델) HTML 또는 XML 문서에 접근하기 위한 인터페이스로, HTML element들을 Tree 형태로 표현한 것이다. 우리의 IDE에서 작성한 HTML이 아닌, 작성 된 HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 Node Tree가 DOM이다. DOM tree안에는 각 element에 상응하는 Node가 들어있고, 이러한 DOM은 API(getElementById, querySelector 등)를 제공하여 Javascript로 해당 문서에 노드 추가, 삭제, 변경, 이벤트 처리, 수정 등을 가능하게 한다. IDE에 HTML을 작성해도 최종적으로 결과 화면을 보기 위해서는 브라우저가 필요하다. IDE에 작성된 HTML은 단순..

javascript의 비동기 처리 세번 째, async/await 에 대한 글이다. 첫 번째 Callback과 Promise에 대한 정리는 아래 링크에서 볼 수 있다. https://mingmeng030.tistory.com/257 [Javascript] 비동기처리 - 1. Callback javascript의 비동기 처리 방법에 대하여 callback , promise , async/await 세 파트로 나누어 정리를 해보려 한다. 그 중 첫 번째 Callback에 대한 글이다. Callback 아래 함수는 일반적으로 parameter를 받아 만든 mingmeng030.tistory.com https://mingmeng030.tistory.com/258 [Javascript] 비동기처리 - 2. Pro..

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/255 [vanillaJs] mongoDB, node.js, fetch api로 crud page 만들기-1. backend 구성 mongoDB와 node.js, 그리고 javascript의 fetch api를 사용하여 crud가 가능한 페이지를 만들어 보았다. react가 역시 편하다는 것을 또 깨닫는 과정이었다.. mongoDB를 사용하고 nodejs로 restful API를 만들어 본 것 mingmeng030.tistory.com 완성 화면 index.html Add new Post Title Content Add Post main.js const postsList = document.querySele..

mongoDB와 node.js, 그리고 javascript의 fetch api를 사용하여 crud가 가능한 페이지를 만들어 보았다. react가 역시 편하다는 것을 또 깨닫는 과정이었다.. mongoDB를 사용하고 nodejs로 restful API를 만들어 본 것도 새로운 경험이라 재미있었다. 완성 화면 db에 저장된 데이터 '_id'와 '__v' 는 데이터를 저장할 때 사용하는 save() 함수가 실행될 때 자동으로 생성된다. (__v는 문서의 내부 개정판을 설명하는 버전키, default value=0 ) server.js const express = require("express"); const mongoose = require("mongoose"); const { MONGO_URI } = req..

- 카테고리를 선택하면 해당 카테고리를 tag로 가진 영화들이 화면에 보이게 된다. - 현재 선택된 카테고리를 보여주기 위해 font-weight를 style로 적용했다. //Card.js const movieData = [ { title: "Sing Street", date: "2016", image: "https://m.media-amazon.com/images/M/MV5BMjEzODA3MDcxMl5BMl5BanBnXkFtZTgwODgxNDk3NzE@._V1_.jpg", tags: ["all", "music"], }, { title: "Tenet", date: "2020", image: "http://img.movist.com/?img=/x00/05/32/55_p1.jpg", tags: ["all",..

자바스크립트에는 HTTP Requests를 위한 방법으로 Fetch와 Axios있다. 두 가지를 모두 사용해보면서 장점과 단점을 느꼈었는데 정확히 어떤 점이 더 낫고 다른지 자세히 알아보자! Fetch ES6부터 들어온 JavaScript 내장 라이브러리다. Promise 기반으로 만들어졌기 때문에 데이터를 다루기가 쉽다. fetch("https://localhost:3000/dashboard/post", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: "mingmeng030", title: "fetch and axios", description : "what's the differe..