Dog foot print

전 포스팅에서 prevMonth , nextMonth 버튼을 구현하지 않았는데 해당 버튼과 토,일의 스타일을 구현 하도록 해보겠다. buildCalendar 수정하기 prevMonth와 nextMonth에서 today만 변경해서 buildCalendar에서 알아서 변경하게 하고 싶어 전역변수 몇 개를 buildCalendar내부로 옮겼다.. 그리고 기존의 buildCalendar에서 일부 달의 경우 setDays가 아직 lastDate에 도달하지 못했음에도 row를 못 만들었기 때문에 함수끝에 제어문을 두도록 변경했다. function buildCalendar(){ let firstDate = new Date(todayYear, todayMonth-1,1); let lastDate = new Date(t..

작년에 자바스크립트를 만지면서 dom을 가지고 뭘 만들어 볼 수 있으려나 싶어서 만들어 본 것이 달력만들기였다. Date객체만을 이용해서 달력을 만들었는데 이런 생 노가다가 없었다. 지금이야 React moment 라이브러리를 이용해서 쉽게 만들지만 그때는 꽤나 힘들었다... 그래서 삽질의 과정을 포스팅 해보려 한다. 틀 만들기 틀은 div가 아닌 table로 만들 것이다. 1 일 월 화 수 목 금 토 style 추가하기 html의 결과가 조금 구리니 callender td에 style 을 추가하자 td{ width: 50px; height: 50px; text-align: center; font-size: 20px; font-family: 굴림; border:2px; border-color:black;..

오늘 낮에 position 속성에 관한 내용을 자스민 회원분이 업로드 하였는데 잘 이해하지 못하고 포스팅 한 것 같아서 아쉽다. 중요한 속성인 만큼 조금 신경을 써서 포스팅을 해야겠다. position 속성 positon은 어떤 것을 기준으로 상대적으로 옮겨질지 정하는 속성이다. 여지껏 position 속성을 몰랐다면 해당 margin 값을 이용해서 해당 html 요소를 옮겨왔을 것이다. 그러나 positon 속성을 쓰면 화면내에서 꽤나 자유롭게 요소를 배치할 수 있게 된다. positon의 value는 다음과 같다. static : 기본값 , top, left, right, bottom을 줘도 움직이지 않는다. relative : 자신이 static이었을때 위치에서 이동한다. absolute : 부모가..

관계성의 Role 지난번 관계성에서 뻗어나오는 2가지의 선(one / many)이 한 엔티티집합의 요소가 다른 엔티티집합에 1개 혹은 1개이상에 관계를 가지는 것이라고 했다. 그런데 지난번에는 한 관계성에서 어떤 엔티티에 한가지 선을 가지는 모습을 보였는데 한개의 관계성에서 두가지 선을 뽑아 각기 다른 역할을 나타낼 수 있다. isa 관계성 및 서브 클래스 객체지향에서는 상속이라는 개념이 있다. 어떤 부모 객체의 특성을 물려받아 자식 객체또한 상속받은 특성을 사용할 수 있는 것을 상속이라고 한다. 그런데 D/B에서도 비슷한 개념이 있는데 그것이 바로 isa 관계성이다. 조교수는 정교수와 달리 학교와 계약을 갱신해야 한다. 그렇기에 조교수는 계약기간이라는 어트리뷰트가 생겼는데 보기에는 1개의 어트리뷰트만 ..

우리 자스민 그룹원들이 공부를 매일 안 해서 조금 걱정이다... 아마 내가 이 글을 오늘 단톡방에 올려도 클릭해서 보지 않을 것 같다. 만약 이글을 자스민 그룹원들이 본다면 호형 멋쟁이라고 카톡에 올려주길 바란다. box-sizing box모델은 다음과 같이 ''content, padding , border, margin " 으로 이루어져 있다. 우리는 box모델의 크기를 제어하기 위해서 width 나 height를 적용한다. 그러나 해당 box모델에 padding 값이나 border 값을 할당한다면 우리가 주었던 width와 height 값을 넘어서 padding + border + width 값으로 해당 box 모델이 결정된다. 그러나 개발자가 padding을 사용하더라도 boder + padding..

state 와 props란 ? 리액트는 모든 뷰의 단위가 컴포넌트라고 하였다. 각 컴포넌트는 상위 컴포넌트에서 하위 컴포넌트를 import 하여 연결 되어 있는 구조인데 import 되어 있는 하위컴포넌트에게 상위컴포넌트가 값을 전달 하여 하위컴포넌트에서 사용 할 수 있다. 이것이 바로 props이다. 그리고 각 컴포넌트는 스스로 state라는 값을 가질 수 있는데 이는 개별적인 컴포넌트에서 각기 다르게 상태를 가질 수 있다. state란 ? state는 각 컴포넌트가 가지고 있는 개별적인 상태값이다. 클래스형 컴포넌트를 작성할때는 해당 클래스 내부 맨 위쪽에 작성하는 것이 일반적이며 state는 객체이다. import React, { Component } from 'react' export defaul..

" 쿠키와 세션은 브라우저에서 서버로 요청을 보낼 때 해당 클라이언트가 접근권한이 있는 사용자인지 파악할 때 사용되는 것이다. " 예를 들어 우리가 웹 서핑을 할 때 어떤 한 페이지에서 로그인을 하고 해당 텝에서 다른 사이트로 이동한 뒤 다시 로그인 했던 사이트를 접속해보면 로그인이 되어있는 모습을 볼 수 있거나 팝업창이 뜰 때 해당 광고글 하루동안 보지 않기를 눌러놓으면 해당 팝업창이 하루뒤에 생성이 되는 데 이와 같이 접근권한이나 특정 정보를 서버에서 브라우저에 전달하여 사용하는 것이 쿠키와 세션이다. 쿠키는 정보를 필요한 데이터를 가지고 있기에 보안에 취약하다 그렇기에 세션이라는 것이 발전 되었는데 이 세션은 데이터는 서버에 두고 세션에는 이 해당 데이터를 사용 할 수 있는 키를 가지고 있어 쿠키에..

정규표현식이란 문자열에서 특정한 패턴의 규칙을 가진 문자열의 집합을 표현 하는데 사용하는 형식 언어이다. - 위키 정의가 조금 와닿지 않을 수 도 있을 것 같다. 예를 들면 우리가 커뮤니티나 게임에서 "시발", "개새끼" , "섹스" 등 금지어를 글에 적을 때 해당 금지어 때문에 작성이 되지 않는 다던가 해당 금지어가 다른 문자열로 치환 되는 것을 본 경험이 있을 것이다. 이런 전체 문자열에서 특정한 문자열의 검색과 치환을 위해 사용되는 것이 정규표현식이다. 정규표현식 생성방법 정규표현식을 만드는 방법은 조금 난이도가 있어 보인다. 검색기능이 강력한 사이트를 관리하는 입장이라면 정규표현식은 필수로 잘 다뤄야 겠지만 일반인이라면 사용할때만 집중해서 만드는 것도 좋을 듯하다. 아래에 정말 잘 정리해놓은 블로..