기록하는 개발자

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",..

scss에서 색을 지정할 때 rgba형식에서 opacity 적용이 안되는데 아래와 같이 변수로 지정하여 넣어주면 rgba에서 opacity 사용이 가능하다. 결과화면 Main.js import "./main.scss"; const Main = () => { return ( Scss에서 rgba 사용 시 opacity 적용 방법입니다. ); }; export default Main; main.scss $custum-color: #000000; $custum-opacity: 0.5; .container { background-color: rgba($custum-color, $custum-opacity); width: 500px; height: 500px; margin: 0 auto; }

프로젝트를 하면서 modal창을 직접 만들어 쓰곤 했는데 기록한 적은 없었던 것 같아 글을 써본다. React hooks usestate를 사용해 modal창을 만들었다. 클릭 전 화면 클릭 후 화면 폴더 구조 //App.js import React, { useEffect } from "react"; import AppRouter from "./AppRouter"; function App() { return ; } export default App; //AppRouter.tsx import React, { useState } from "react"; import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"; import Home ..