여기서는 props와 javascript에서 map메소드를 이용할 것이다 이전글을 보면 props를 이용해서 데이터를 전달하는걸 알 수 있다 이번 블로그 클론에서는 이미 저장된 데이터를 가지고하기 때문에 저장된 데이터를 읽어서 원하는 부분에 보여줄 필요가 있다     프로퍼티 전달 블로그에 사용할 정보를 보기 관리하기 쉽게 한 파일에 몰아 넣...

리액트를 사용해서 처음하는 프로젝트인 만큼 크게 어려운 개념은 이용하지 않았다 리액트의 컴포넌트를 이용해서 최대한 반복되는 부분을 컴포넌트로 작성해서 html작성을 반복하는것을 줄인다 React Router를 사용해서 한 화면에서 화면 전환이 이루어지게 만들어야한다   클론할 블로그 css부분이나 html부분이 클론에서 중요할 수 있지...

자바스크립트에서 배열의 값을 이용할때 이 배열의 요소를 이용해서 리스트를 보여주거나 새로운 배열을 생성할 때가 있다 react 앱 과제 1에서 입력 받은 데이터(배열)를 글 목록으로 보여주고 싶을때 for을 이용해서 배열의 인덱스를 바꿔 수동적으로 처리했다 이때 for을 이용하지 않고 기본 제공되는 map() 메소드를 이용하면된다 Array.ma...

자바스크립트에서 this가 참조되는것은 호출에따라 달라지는데 이것을 this 바인딩이라고 한다 function foo() { const a = 10; console.log(this.a); } foo(); 실행 결과값이 10이 나올줄 알았지만 console에 보이는 값은 undefined 이다 this가 어디에 바인딩되는지 알기위해서 ...

자바스크립트에서 함수의 표현이 여러개가 있다 함수의 표현을 더 간결하게 하면서 표현이 늘어났다     기본 함수 표현 function add(a,b) { return a+b; } var add = function(a,b){ return a+b; } 위 두개의 함수 표현은 자바스크립트에서 기본적인 함수의 표현이다 위 함수와 아래 함수...

컴포넌트란 리액트로 만들어진 앱을 이루는 최소한의 단위이다 컴포넌트는 원래 복잡한 코드를 묶어서 개별적으로 수정 가능하고 재사용 할 수 있게 만든것이다 클래스형 컴포넌트와 함수형 컴포넌트가 있지만 여기서는 클래스 컴포넌트를 다룬다 React와 HTML import React, {Component} from 'react'; import './App....

promise란 fetch에서 작성한 것처럼 두개의 메소드를 가지고 비동기적 작업을 표준화 시킬수 있어서 사용한다고 했었다 이번에는 promise에 대해 자세히 적어볼려고 한다   promise <script> //Promise 선언부 var promise = function (param) { return new Promise(...

비동기적으로 사용할 때 콜백함수를 이용했다 하지만 콜백 함수가 계속 반복되면(콜백지옥) 가독성도 떨어지고 작성하기도 힘들어진다 여기서 나온것이 Promise를 이용한 async & await이다   async & await 사용 이유 timer(1000,function(){ console.log("1"); timer(1000...

callback 함수 callback 함수는 함수인데 다른 함수의 인자로 사용되어 다른 함수에 의해 나중에 호출되는 함수를 의미한다 val = function(a) { return 2*a } function fn(arg) { arg() } fn(val) // 여기서 val은 callback함수이다 val은 fn함수의 입력값으로 전달 되어...

자바스크립트와 bootstrap을 이용해서 사진과 같은 메모장을 만드는것이다 오랜만에 html과 css사용을 하려니까 잊어버린 것이 많았다(bootstrap에 이미 다 적용되어있지만) bootstrap에서 라디오 버튼과 card, input을 이용해서 위 사진과 똑같이 만들어야한다 bootstrap에 이미 html과 css가 적용되어 있으므로...