2020.코딩일지

Update - PUT (수정) 새로고침했을때 상태유지가 된다 오호호홓 fetch(`주소`, {object}) .then((res) => { if(res.ok) { ok일때의액션 }}) object내용은 method: "메소드", headers: {"컨텐츠타입":"어플제이쓴"}, body: {내용} 더보기 📒Word.js 부분수정 function toggleDone() { // setIsDone(!isDone); fetch(`http://localhost:3001/words/${el.id}`, { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ ...el, isDone: !isDone, }), }..

index.js에서 가 정의되어있으면 api call을 두번씩 1️⃣ React App설치(작업폴더simpleroute가 자동생성됨) npx모듈은 기존node.js가 설치되어있어야(1)`node-v`로 확인가능, (2)`npx`로 사용가능한지 확인 `npx create-react-app ` 꺽쇠생략 해당폴더에 들어가서 `npm start` 2️⃣`npm install react-router-dom` component하단 파일의 기본양식 import dummy from "../db/data.json" export default function DayList() { return ( {/*여기에작성*/} ); } map 사용법 App.js에서 루트분기하기. •Routes사용법 import { BrowserRo..

코드스테이츠 블록체인 부트캠프 6기 웹 어플리케이션에서는 HTTP메소드를 이용해 서버와 통신한다. (GET으로 요청하고 POST로 새로운글,데이터전송 DELETE로 삭제) REST API란, 2개이상의 서비스가 인터넷을 통해 정보를 교환할때 사용하는 인터페이스. 요청과 응답을 할 때, '제대로 보내고 받을 수 있는' 일종의 규약. 데이터를 주고받기위한 규약. 약속된 HTTP프로토콜을 사용한다. REST(Representational State Transfer) 로이필딩 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍쳐로 소개 되었다. REST API는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP프로토콜을 통해 요청과 응답을 정의하는 방식을..

코드스테이츠 블록체인 부트캠프 6기 SPA를 만드는 기술 : AJAX란? Asynchronous JavaScript And XMLHttpRequest (핵심기술)JavaScript, DOM, Fetch, XMLHttpRequest, HTML등의 다양한 기술 사용된 '웹 개발 기법' AJAX의 장점1 : 웹 페이지에 필요한 데이터만 비동기적으로 받아와 렌더링 하는데 AJAX기술이 쓰임 **특징** (이전에는 서버에서 HTML을 완성해 보내줘야 화면에 렌더링을 할 수 있었는데, ) ex. 검색창(한글자입력시마다 추천검색어), 무한스크롤(서버로부터 Fetch가져와 업데이트하여 렌더링) •XHR(XML Http Request)의 단점을 보완한 새로운 WepAPI Fetch. Cross-Site이슈 등 XML보다..

코드스테이츠 블록체인 부트캠프 6기 2Tier Architecture 클라이언트: 리소스를 사용하는 앱 (결제기능, 상품조회기능 등) 서버 : 리소스가 존재하는 곳 (상품목록) + DB 추가시 (3Tier) 요청이 있어야 응답이 온다. API란(Application Programming Interface)? 메뉴판! 리소스를 활용할 수 있도록 인터페이스 제공. (그냥막 요청하면안되고 양식에따라) 서버는 리소스 전달을 위한 메뉴판 API문서를 작성해야 클라이언트가 활용가능하다. + Query String으로 파라미터 추가가능 (물음표? 앤드& 기호) 프로토콜이란(Protocol)? 통신규약, 즉 약속 = HTTP (외계어로는 주문불가) 인터넷에 있는 데이터를 요청할 때에는 HTTP프로토콜을 사용하여, 주소..

Node.js란? 비동기 이벤트 기반! 로컬환경에서 자바스크립트를 실행할 수 있는 '자바스트립트 런타임' 브러우저 환경과는 다르게 Node.js환경은 로컬컴에서 직접 실행되므로 파일을 불러오거나(파일열기) 저장하는(파일저장하기) 등의 액션이 가능하다. (비동기상황을 연출하여 연습할 수 있다) Node.js의내장모듈목록 DNS모듈사용법 const fs = require('fs'); //파일시스템 "전체"모듈이 불러옴 const { readFile } = require("fs"); // readFile만 쏙뽑았 const dns = require('dns');//DNS모듈을 불러옴 fs(Filse System)module 파일읽기`readFile` 파일저장`writeFile` fs.readFile(path[..

[BEB 6th]000일차 코드스테이츠 블록체인 부트캠프 6기 👌Async비동기가 좋은 것은 알겠는데.. 순서를 제어하고 싶은 경우엔? ... 🫶최종결론은 `async,await` 비동기예시 더보기 // 비동기씨는 효율적이긴한데, 언제끝날지 예측이 불가하다 const printString = (string) => { setTimeout(() => { console.log(string); }, Math.floor(Math.random() * 100) + 1); }; const printAll = () => { printString("A"); printString("B"); printString("C"); }; printAll(); 콜백예시 더보기 // -----------비동기는 효율적이나, 언제끝날지 예..

코드스테이츠 블록체인 부트캠프 6기 동기적(synchronous) 뒷사람의 시작시점과 앞사람의 완료시점이 같은 상황. blocking발생 더보기 //동기적인 카페에서의 상황😡 function waitSync(ms) { var start = Date.now(); var now = start; while (now - start < ms) { now = Date.now(); } }// 현재시각과 시작시각을 비교하여 ms범위 내에서 무한루프를 도는 blocking함수 function drink(person, coffee) { console.log(person + "는 " + coffee + "를 마십니다"); } function orderCoffeeSync(coffee) { console.log(coffee +..

! 한개는 알겠는데 !! 두개는 무엇인가?? [true, false, 1, 0, -1] (5) [true, false, 1, 0, -1] --- [!true, !false, !1, !0, !-1] (5) [false, true, false, true, false] --- [!!true, !!false, !!1, !!0, !!-1] (5) [true, false, true, false, true] -------------- 문자열조차도 boolean으로 알려주는 친절함!! [!!"0", !!"1", !!"A"] (3) [true, true, true] -------------- [undefined, null, ""] (3) [undefined, null, ''] --- [!undefined, !null, ..

이건뭐..매직아이도아니고 어떻게알아봄....? 제이쓴..나눈이너무아파요😵‍💫 제이쓴뷰어 개발자님, 어디계신가요, 세상고맙💕