JongDDA의 한걸음 한걸음씩

axios는 React에서 제공하는 프로미스 기반의 서버 통신 객체를 제공하는 모듈이다 (브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리) axios를 사용하기 전에 비동기 작업관련 함수에 대해 배워보자 async : 이 함수는 비동기적으로 일처리를 한다 await : 뒤에 나오는 데이터를 기다렸다가 내보낸다 import React from 'react' function getPromise(){ return new Promise((resolve, reject) =>{ // 동작이 끝날 때까지 시간이 좀 걸리는 작업 setTimeout(function(){ resolve("성공적 마무리!!") }, 1500) }) } // getPromise를 불러다가 반환..

styled-components는 리엑트(React)에서 제공하는 javascript에서 css를 사용할 수 있도록 해주는 스타일링 프레임워크이다. React Component에 특정 스타일링을 할 수 있기 때문에 재사용성을 더 높일 수 있고 스타일링을 간편하게 구현 할 수 있다. 프레임워크 설치 terminal 에 다음과 같이 npm install styled-components를 입력해주면 된다. 기본 문법 기본적인 틀은 아래와 같다. import styled from "styled-components"; const (변수명) = styled.button/*스타일링 하고자 하는 요소*/` // HTML 엘리먼트에 대한 스타일 정의 `; 예제) // 사용 예1 : 스타일 있는 h1 요소를 만들어준다 c..

프로퍼티는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. 이때 프로퍼티값은 수정할 수 없다는 특징을 가진다. 예제) class App extends React.Component{ render(){ return( ); } } Mycomponent 컴포넌트에서는 name 이라는 이름의 전달받은 "message"라는 문자열값을 render() 함수에서 참조할 수 있다. 코드를 보면 render() 함수에서 this.props.name으로 프로퍼티값을 참조하고 있다. class MyComponent extends React.Component{ render(){ const name = this.props.name; return {name}; } } 여기서 중요한 것은 프로퍼티가 상위 컴포넌트에서 하위..

웹 페이지를 보시면 다양한 슬라이드를 많이 볼 수 있을 텐데요 그런 슬라이드들을 어떻게 만드는지 순수 자바스크립트만으로 하나, 제이쿼리를 이용한 거 하나, 이렇게 2가지 방법으로 기본틀을 만들어 보겠습니다. 1. 순수 JavaScript 만으로 HTML CSS html,body{ margin:0;} #container{ width: 640px; margin: 0 auto;} h1{ text-align: center;} .album{height: 400px; width: 100%; overflow: hidden;} /* overflow 되면 숨긴다*/ .images{ display: flex; height: 400px; width: 2560px; transition-property: transform; /..