React pagination

\[Simple Frontend Pagination | React]bootstrapaxios

2020년 7월 5일
·
0개의 댓글
post-thumbnail

#1.5 wrap, nowrap, reverse, align-content

박스의 넓이, 높이는 150px로 설정되어 있다. 그러나 브라우저의 넓이에 맞추어 박스의 넓이가 줄어든 것을 볼 수 있다. flexbox는 기본적으로 모든 아이템을 같은 라인에 구겨 넣으려고 하기 때문이다. 이 과정에서 아이템의 넓이를 바꾸어 버린다. flex-wra

2020년 6월 30일
·
0개의 댓글

#1.4 align-self and order

index.htmlstyles.cssalign-self와 order는 자식 요소에 직접 적용하여 위치를 개별적으로 조정할 수 있도록 하는 속성이다. : The align-self property specifies the alignment for the selected

2020년 6월 28일
·
0개의 댓글

#1.3 Column and Row

위와 같이 flex-direction: column으로 설정하면 세로 축이 main axis가 되고, 가로 축이 cross axis가 된다.align-item은 아이템을 cross axis에 정렬하므로, 여기에서 align-item: flex-end로 설정하면 아이템이

2020년 6월 28일
·
0개의 댓글
post-thumbnail

#1.2 Main Axis and Cross Axis

flexbox-direction 의 값으로는 row와 column이 있다. 기본 값은 row이기 때문에, 설정이 없으면 가로로 정렬된다. 이렇게 기본값 row로 설정되어 있을 때는, 수평 축(horizontal axis)이 main axis이고, 수직 축이 cross

2020년 6월 27일
·
0개의 댓글
post-thumbnail

#1.1 First Rule of Flexbox

Flexible Box Layout Module을 이용하면 손쉽게 반응형 레이아웃 구조를 디자인할 수 있다. body의 속성을 display: flex로 지정하면 요소들이 자동으로 inline-block 정렬된다. flexbox를 사용하려면 위치를 지정하고 싶은 자식

2020년 6월 27일
·
0개의 댓글
post-thumbnail

#1.0 Life Before Flexbox

모든 html element는 기본 디스플레이 값을 갖는다. 디스플레이 값에는 block과 inline이 있다. \[HTML Block and Inline Elements]위 화면의 요소들의 디스플레이 값은 기본적으로 block이다.(display: block;) bl

2020년 6월 27일
·
0개의 댓글
post-thumbnail

#3.9 Getting the Weather part Two API

날씨 데이터를 받아오기 위해 https://openweathermap.org/api 가입 후 API key를 받는다. Current weather data by geographic coordinates의 API 주소를 얻는다. api.openweathermap

2020년 6월 27일
·
0개의 댓글
post-thumbnail

#3.8 Getting the Weather part One Geolocation

weather.js 파일 추가 후 연결 navigator.geolocation.getCurrentPosition(success\[, error\[, \[options]]) 메서드의 success함수는 디바이스의 현재 위치를 나타내는 GeolocationPosition

2020년 6월 25일
·
0개의 댓글
post-thumbnail

#3.7 Image Background

배경에 넣을 사진을 다운로드한다. [Unsplash]

2020년 6월 23일
·
0개의 댓글

S3 / EC2 / RDS

파일을 Amazon S3에 저장하려면 버킷에 업로드 해야한다. Amazon S3는 데이터를 버킷 내에 객체로 저장한다. 버킷은 Amazon S3에 저장된 객체에 대한 컨테이너이다. 모든 객체는 어떤 버킷에 포함된다. 버킷 이름은 중복될 수 없고, 변경할 수도 없다. 버

2020년 6월 22일
·
0개의 댓글

IM sprint #12 Authentication and Full Stack Development - shortly express

signup.jsfindOrCreate는 배열을 반환한다. 배열은 \[{검색되었더나 생성된 객체}, true/false]로 구성된다. 검색 결과가 없어 새로 생성된 객체를 반환한 경우 boolean 값이 true, 그 반대의 경우 false이다. \[Sequelize

2020년 6월 21일
·
0개의 댓글

Cookie / Session

Hash Cookie Session Token

2020년 6월 18일
·
0개의 댓글
post-thumbnail

IM self-assessment #4

Inside async-word-count.js, complete getTotalWordCount. getTotalWordCount should pass the combined word count of the files located at filePathOne and

2020년 6월 17일
·
0개의 댓글

IM sprint #11 Chatterbox - Database

MySQL을 활용해서 Chatterbox의 데이터베이스를 구축한다. 1) 우선, 스키마(schema)를 설계한다. (DB Diagram에서 편리하게 테이블 구조를 도식화 할 수 있다.) 3) 설계한 스키마를 schema.sql파일에 코드로 작성한다.

2020년 6월 14일
·
0개의 댓글
post-thumbnail

SQL Tutorial

SQL(Structured Query Language)은 데이터 접근 및 조작에 쓰이는 언어이다. RDBMS(Relational Database Management System, 관계형 데이터 베이스 관리 시스템)으로 데이터 베이스를 관리할 수 있다. 그 중 MySQL

2020년 6월 11일
·
0개의 댓글

IM sprint #10 Promise

fs.readFile은 node.js가 제공하는 비동기 함수이다. 01_callBack.js\[\[fs.readFile(path, options, callback)]](https://nodejs.org/dist/latest-v14.x/docs/api/fs.ht

2020년 6월 9일
·
0개의 댓글

Async / await

Async/await는 프로미스를 더 간편하게 사용하도록 해준다.await의 대상이 되는 비동기 처리 코드는 보통 프로미스를 반환하는 API 호출 함수이다. Async 키워드는 함수 앞에 위치한다. 함수 앞에 Async키워드를 두는 것은, '이 함수는 프로미스를 반환하

2020년 6월 9일
·
0개의 댓글

Promise

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 주로 시간이 걸리는 작업(서버에서 데이터를 받아오는 등)에 사용한다. 프로미스는 다음의 세 가지 상태 중 하나로 존재한다.Pending(대기): 초기 상태로 이행도 실패도 되지 않은 상태fullfiled(이행):

2020년 6월 9일
·
0개의 댓글
post-thumbnail

#3.4, 3.5, 3.6 Making a To Do List

todo.js 작성아까와 같은 방식으로 함수를 작성한다. 현재까지 출력되는 화면엔터를 치면 입력한 값이 사라지도록 하는 코드를 추가한다.

2020년 6월 8일
·
0개의 댓글