분홍분홍 코딩 프로젝트

이 질문을 이해하기 위해선 자바스크립트에서 비동기 처리에 사용되는 객체인 promise에 대해 먼저 정리를 하고 넘어갈 필요가 있다. 항상 공부를 시작 할 땐 '왜'를 생각해보는건 좋은 공부 방법인 것 같다. 여기선 비동기 처리에 기본이 되는 api들이 어떤 이유에서 쓰이는건지 대해서만 다룬다. 순서 Http api 와 REST api XMLhttpRequest Promise Axios Http api 와 REST api 비슷한 의미로 쓰인다. http api는 http를 이용해서 정해둔 스펙으로 데이터를 주고 받는 것. REST api 는 조금 업그레이드되서 제약조건이 추가된 것 이다. 그래서 더 넓은 의미로 쓰인다. REST를 인터넷에 쳐보면 각자 정의한 바가 다르다. 그 중에 가장 와닿았던건 "자원..

fs.readFile 을 통해 database 파일에서 json데이터 뭉치를 가져오려고 하는데 계속 아래와 같은 에러가 떴다. undefiend 상태의 파일을 then으로 읽을 수 없다고 한다. (+경로 뒤에 콜백함수 없이 바로 then을 붙였더니 "콜백은 함수여야 한다"는 메시지도 떴다. ) 앞 뒤 코드를 몽땅 다시 쳐보고 수정도 해봐도 여전히 database에서 받아오는 데이터는 undefiend를 출력한다. console.log(fs.readFile(~)) 을 치면 잘만 나오던데..ㅜ 반전! 해결법은 매우 간단했다. 파일 관련 작업을 하는 모듈을 불러오는 API에서 promise를 반환하게 끔 해주는 promises 메소드를 추가해주니 에러가 아닌 promise를 반환했다. database의 데이터..

클라이언트 요청 처리 방법 중 하나인 get과 post에 대해서 정리해봤다. 마침 만들고 있는 카페 홈페이지에서 get,post 요청을 쓴다! 먼저 주소형태 요청인 GET 방식과 내부적으로 값을 전달하는 POST 방식 두가지 처리를 위주로 설명한다. 클라이언트 요청 GET 가. GET 요청 처리 주소값을 이용해 요청을 하는 방식입니다. 서버로 값을 전달하기 위해서 서버측 주소 끝에 ?(물음표)를 붙이고 key1=value & key2=value2 의 형태로 요청합니다 localhost:3000/?id=login // 예1 http://naver.com/Post.nhn?postId=12312312&cafeId=152342 // 예2 예2를 보면 브라우저를 통해 http://naver.com/Post.nh..

import React, { useEffect, useState } from "react"; import ReactDOM from "react-dom"; function Convert({ onChangeInputValue, value, usd }) { return ( USD BTC ); } function Select({ coins, handleSelectChange }) { return ( Select The Coin {coins.map((coin, index) => { return ( {coin.name}({coin.symbol}): $ {coin.quotes.USD.price}USD ); })} ); } function App() { const [loading, setLoading] = useSta..

null 과 undefined 이 두 타입은 모두 자바스크립트에서 '값이 없음'을 나타낸다. 1. undefined - 변수를 선언하고 값을 할당하기 전의 형태(값)라고 볼 수 있다. (변수에 값이 할당되어 있지 않음.) let a; console.log(a); // undefined undefined가 나오는 경우의 예시 존재하지 않는 객체의 프로퍼티를 읽으려고 할 때 let obj = {}; console.log(obj.name); // undefined 존재하지 않는 배열에 엘리먼트를 읽으려고 할 떄 let arr = [1,2,3]; console.log(arr[100]) // undefined 2. null null은 의도를 갖고 변수에 null을 할당하여 값이 없다는 것을 나타낸다. null이 ..

let 과 const 그리고 데이터 변경 let 과 const를 이용한 원시값 데이터 변경 const a = 1; a = 2; // x 데이터의 변경이 불가하다. let a = 1; a = 2; // o 데이터의 변경이 가능하다. 원시값과 object 데이터를 const를 이용한 변수에 할당 후 변경 const a = 1; const b = a; b = 3; console.log(b); // x 역시나 새로운 변수에 할당 후에도 변경이 안된다. const obj = { name : jane, age : 5 } const obj2 = obj; obj2 ={ name : cindy, age : 5 }// x const니까 역시나 데이터의 변경이 안된다. 하지만 const obj = { name : jane,..

DOM과 Node 대체 뭐가 다른걸까.. DOM을 공부하는데 자꾸 node라는게 뒤섞여 나오는데 봐도봐도 혼란스럽다. 그래서 두 용어의 차이를 글로 정리해보았다. 노드(node) 먼저 검색해서 나온 정의들을 다 적어보았다. 1. Node 객체는 DOM에서 시초 역할을 담당한다. 뿌리. 근본. by 생활코딩 2. Node는 여러가지 DOM 타입들이 상속하는 인터페이스이다. by MDN 3. DOM은 노드라고 불리는 계층적 단위에 정보를 저장하고 있다. by unknown 노드의 상속 다이어그램이다. 브라우저가 자바스립트에서 사용하기 위해 html 정보를 노드 객체로 변환시켰다. 그 다음 어떤 클래스로 변환이 되고 그 클래스들은 어떤 부모 클래스를 상속하는지를 나타내는 다이어그램이다. 아래 그림은 그 구조를..

Javascript에서 객체를 생성하는 방법은 클래스 기반의 객체 생성 방법을 사용하는 java와 C++와 다르다. Javascript 자체엔 class 자체가 없기 때문이다. 그래서 기존의 객체를 복사하여 새로운 객체를 만드는 프로토타입 기반의 언어이다. 객체를 생성 할 수 있는 3가지 방법이 있다. 기본 객체의 생성자 함수 이용(new) 리터럴과 프로퍼티 생성자 함수 이용 코드를 보면서 공부해보자! 기본 객체(Object())의 생성자 함수 이용(new) object 객체를 생성하고 여기에 프로퍼티를 추가한다. new 연산자를 이용해서 생성이 가능하므로 기본 객체를 만들어보자. let user = new Object(); 기본 객체를 생성한 뒤에 필요한 프로퍼티를 추가해준다. user.name = "..

1. Class, Object Class 연관있는 Fields(데이터)와 Method(액션)로 이루어진 것. object를 만들기 위한 가상의 틀이다. Object 실제로 존재하고 만들어지는 것. 일상 속에서 비유하자면 자동차, 의자, 커피 등등. 쉽게 말해 class는 객체를 만들기 위한 틀이고, object는 그 틀 안에서 실제로 만들어지는 할 수 있겠다. 드림코딩의 엘리님께서 이를 붕어빵의 틀과 붕어빵으로 비유를 해주셨다! (늘 좋은 강의 감사드려요) class person{ constructor (name,age){ // field - 생성자(constructor)를 이용하여 object에 필요한 데이터를 전달한다. this.name=name; this.age=age; // 전달된 데이터를 바로 ..

1. 함수의 종류 함수의 종류는 3가지가 있다. 1) 이름이 있는 함수 2) 이름이 없는 함수 3) 화살표 함수 예제와 함께 살펴 보자. (1) 기명 함수 (named function) function greeting(){ console.log("hi"); } greeting(); // hi 파싱하는 단계에서 함수가 호출된다. (2) 익명함수(unanonymous function) var greeting = function(){ console.log("hello"); } greeting(); // hello const greetingAgain = greeting; // 변수 할당 가능 함수의 이름이 따로 없고 변수명에 함수를 저장하는 함수이다. 그러므로 익명함수를 호출시 변수명을 함수명처럼 사용하면 된다..