[ CSS 그리드의 특징 ] CSS 그리드는 부트스트랩이나 여타 다른 CSS 와는 다르게, 마크업의 위치나 클래스 이름이 크게 중요하지 않습니다. 웹 페이지 하나를 하나의 큰 격자들의 모음으로 보고, 그 격자에 어떤 태그가 어느정도를 차지할지를 결정하는 식으로 레이아웃이 결정되지요. 그리고 이를 화면 크기에 따라 재정렬하고 크기를 조절할 수 있는 유연성을 가지고 있습니다. 이 격자들은 위의 그림에서는 8 x 8 이지만 사실 이는 사용자가 맘대로 정할 수 있습니다. 2 x 2 가 되던, 12 x 12 가 되던 상관 없습니다. 게다가 각각의 column 과 row 는 모두 동일한 너비와 높이로 이루어져 있어야 할 필요가 없으며, 이용자가 마음대로 이를 지정할 수 있습니다. [ CSS 그리드 적용 방법 ] 관..

[ flex container ] 그냥 div 태그 같은 display: block; 속성이 할당된 태그는 width 를 지정해도 요소 자체는 전부 100%의 width 값을 가지게 되지만, 해당 div 들이 display 값이 flex인 컨테이너 안에 들어있다면, 모두 지정된 width 값을 가진 블록 아이템이 되어 정렬됩니다. float 과의 차이점은, 문서 흐름에서 벋어나지 않기 때문에, 플렉스 속성이 지정된 상위 태그의 높이와 너비는 안의 자식 요소들에 의해 결정된다는 것입니다. [ flex-grow ] flex-grow 는 flex container 안의 아이템들에 지정하는 것이며, 부모 태그에서 채워지지 못한 남은 width 들을 해당 아이템이 채우게 됩니다. 1 부터 수치를 매길 수 있는데,..

www.youtube.com/watch?v=1d38YZKCM88&list=PLuHgQVnccGMDF6rHsY9qMuJMd295Yk4sa 이 글은 생활코딩님의 '관계형 데이터 모델링' 유튜브 재생목록 영상들을 바탕으로 작성되었습니다. 논리적 데이터 모델링이란 논리적 데이터 모델링은 뽑아낸 ERD를 관계형 데이터베이스 모델에 어울리게 잘 정돈하는 것이다. 이때 핵심적으로 활용하는 것이 Mapping Rule 이다. ERD를 관계형 데이터베이스로 전환할 때 사용하는 방법론이다. 이를 통해 철저하게 전환을 처리할 수 있기에 필요하다. 개체 -> 테이블 속성 -> Column 관계 -> PK, FK 단순히 테이블의 이름, Column, key들을 명시하는 것뿐만 아니라 들어가는 데이터들의 길이, 타입 등을 정의하..

www.youtube.com/watch?v=1d38YZKCM88&list=PLuHgQVnccGMDF6rHsY9qMuJMd295Yk4sa 이 글은 생활코딩님의 '관계형 데이터 모델링' 유튜브 재생목록 영상들을 바탕으로 작성되었습니다. 모델링이란 어떤 목적을 가지고 진짜를 모방하는 것 두개의 세계는 서로 다르기 때문에, 끊임없이 얼마나 큰 차이가 날지를 확인해야 한다. 데이터를 표에 담기만 하면, 이용할 수 있다. 그러나 하나의 표에 그 데이터를 담는 것은 비효율적일 뿐만 아니라, 엄청나게 어렵다. 그렇기 때문에 모델이 필요하다. 모델링의 과정 업무파악 -> 개념적 데이터 모델링(ERD 그림) -> 논리적 데이터 모델링(ERD 표) -> 물리적 데이터 모델링(코드 작성) 업무를 제대로 이해하고, 설명할 수 ..

REST API 란? REST : Representational State Transfer API : Application Programming Interface REST API Routung 클라이언트와 서버는 어떻게 REST API를 이용해서 통신할까? 전통적인 방법으로는 링크 태그를 이용하거나, 폼 태그를 이용하였다. HTTP 메서드와 경로를 같이 보냈다. Ajax나 fetch API를 써서 비동기로 이러한 요청을 보냈다. 이를 API Endpoint라고 한다. API Endpoint란 Http 메서드(Post, Get…)와 상대경로의 조합을 말한다. 여기서 Http 메서드들 중 GET과 POST 만이 HTML 태그를 이용해서 사용할 수 있고, 나머지는 브라우저 상의 자바스크립트를 통해서만 사용될 ..

기존의 function () {} 과는 달리, 화살표 이름에는 함수 이름, this, arguments 가 없습니다. 함수 이름이 없다는 것은 화살표 함수는 익명 함수로만 동작한다는 뜻일 뿐입니다. 기존의 함수에서는 this라는 변수 이름으로 함수 스코프 안에서 자기 자신에 접근할 수 있는 방법이 제공되었습니다. 하지만 화살표 함수에서는 이게 없기 때문에, 스코프의 원칙 상, 상위 스코프에서 this 라는 변수명을 찾아보게 되고, 그러면 결국 상위 함수의 this나 전역 객체인 window 를 화살표 함수 안에서 불러오게 되는 것입니다. bind를 써도, apply, call을 써도 this를 주입할 수가 없습니다. 따라서 화살표 함수로는 new 키워드를 쓸 수 없습니다. 또한 기존의 function 에..