Dog foot print

이 책을 구매할 당시는 2018년 한참 css와 바닐라 js로 여러가지 토이프로그램을 만들며 실험하던 참이였다. 그러던 중 집에 쟁여놓고 사용할 만한 좋은 css 예제 책이 필요했는데 생각보다 최신 css관련 서적이 없고 내용도 html + css + javascript 섞어 놓은 책이나 초급용 책들이 대부분 이였다. 2년 넘은 책은 구입하지말라고 했었는데 마땅히 성에 차는 구성이 없으니 당시 발매한지 4년된 책을 구입하였다. 그게 바로 전문가를 위한 css3이다. http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9788994774725&orderClick=LAG&Kc= CSS3 『전문가를 위한 CSS3』는..

javascript의 배열은 array-list라는 것의 형태를 띄고 있어 배열의 크기 존재하지 않는다. 그런데 c 같은 언어들은 배열의 크기가 존재하기에 한 배열을 유한하게 밖에 사용 할 수 없다. 그래서 개발자들은 노드리스트라는 개념을 만들어 각각의 구조체들로 서로를 연결하는 것을 만들었다. 연결리스트에는 단순 연결리스트, 이중연결리스트, 원형연결리스트가 있으며 이 연결리스트들을 이용하여 스택, 큐, 트리등 다양한 자료구조를 만들 수 있다. node 란 node란 data필드와 link필드를 가지고 있는 일종의 구조체로 link를 통해서는 다음 연결된 노드에 접근 할 수 있다. simple linked-list는 처음 노드를 header라고 하며 마지막 노드의 link는 항상 null이다. 연결리스트..

리액트에서 컴포넌트는 뷰의 단위이다. 우리가 리액트로 모든 것은 컴포넌트로 이루어져있으며 필요에 의해서 이 컴포넌트를 화면에서 제거 혹은 연결 하여 페이지를 구성한다. 컴포넌트는 함수형 컴포넌트 , 클래스형 컴포넌트를 가지는데 react-hook 이라는 라이브러리가 나오기전까지 함수형 컴포넌트는 스스로 상태를 가지지 못하여 잘 사용되지 못했지만 최근 함수형 프로그램의 우수성과 react-hook의 등장으로 인하여 많이 사용되고 있다. 해당 포스팅에서는 클래스형 컴포넌트와 함수형 컴포넌트의 작성 형태를 설명하고 컴포넌트의 life-cycle 같은 내용들은 추후 따로 포스팅 할 예정이다. 클래스형 컴포넌트 클래스형 컴포넌트는 React.component 를 상속받아서 사용하여야 한다. component 프로..

C-R-A 란 create-react-app node module 의 약자로 리액트 프로젝트를 쉽게 만들 수 있게 필요한 모듈혹은 설정을 포함하는 보일러 플레이트이다.( C-R-A 가 없다면 우리는 바벨, eslint, 웹팩등을 직접 하나하나 설치하고 해당 파일을 일일히 설정 해주어야 할 것이다. ) 또한 C-R-A 는 페이스북에서 직접 관리하고 있으니 꾸준히 업데이트되는 장점도 있다. C-R-A의 설치 먼저 노드가 global로 설치가 되지 않았다면 노드를 먼저 설치한다. https://nodejs.org/en/ 다음 본인의 node 패키지 환경에 따라 터미널에 다음과 같이 작성 한다. npm을 사용하는 경우 npm install -g create-react-app yarn을 사용하는 경우 yarn a..

c언어나 c++같은 언어를 배우는 사람들은 swap(int a, int b) 같은 함수를 만들때 인자로 그냥 일반자료형이 아니라 포인터라는 것을 넘겨주어야 우리가 원하는 결과가 나오는 것을 알것이다. 그러나 다행스럽게도(?) 자바스크립트에서는 포인터가 없다. 이 포인터라는 것이 없기 때문에 javascript에서는 함수의 인자로 기본자료형(string, numb, undefined,bullean,null)이 들어 왔을때 값을 복사한 변수를 새로 메모리에 만들게 된다. 그로인하여 함수의 결과는 새로운 메모리의 값을 변경하는 행위가 되고 실제 인자로 들어온 변수들의 메모리의 값을 변경하는 행위는 하지 못한다. 예제 let a = 10; let b = 20; function swap(x,y){ let temp..

이전까지 stack, sicle queue, queue 를 만들었지만 전부 다 단방향에서 아이템을 꺼내와야 하는 불편함이 있었다. 그러나 원형 큐의 아종인 덱이라는 녀석은 앞과 뒤 모든 방향에서 데이터를 추가 및 삭제 할 수 있는데 오늘은 이 녀석을 만들어 볼 예정이다. 덱 Deck 덱은 원형 큐와 마찬가지로 배열에 빈 공간이 있다면 데이터를 추가 할 수 있는 구조를 하고 있어 원형 큐와 마찬가지로 덱 또한 원형 구조를 하고 있다. 덱의 멤버변수 constructor(size){ this.maxQueueSize = size; this.array = []; this.front = 0; this.rear = 0; } 원형 큐와 동일한 front , rear를 가지고 있다. 덱의 메서드 __주의__ addRe..

E/R모델은 실제 데이터베이스를 만들기 전 개념적으로 각 테이블간 관계와 가상의 스키마를 만들어 보는 단계이다. 굉장히 귀찮고 어려워 보이지만 E/R 모델의 설계는 필수적이다. 복잡한 데이터베이스 테이블간의 관계를 생각도 하지 않고 만들었다가 오류가 날 경우 수정하는 비용이나 시간이 훨씬 비싸기 때문이다. 더군다나 E/R모델은 그림으로 표현하기에 각 개체마다 관계를 파악하기 쉽다. E/R 다이어그램의 세가지 구성 요소 Entity-set(엔티티 집합) : 유사한 객체들의 집합이다. ex ) 학생, 교사, 고객, 영화배우등 Attribute(어트리뷰트) : 해당 엔티티가 가지고 있는 특성을 말한다. ex ) 학생이면 이름, 성별,전화번호, 주소등이 해당되고 교사인 경우 이름, 성별, 전화번호, 주소, 전담..

나는 es6부터 javascript를 접했기 때문에 훨씬 좋은 환경에서 웹개발을 배웠다 생각한다. es6에서는 arrow-function , class, const와 let의 출현 , promise 객체 등 개발자에게 코드의 간결성, 명확성을 선물해주었지만 현실은 es6 를 자유자재로 사용 할 수 없었다. 그 이유는 ie와 같은 구형 브라우저에서는 es6를 제대로 지원하지 않았고 사람들은 구형브라우저나 구형 윈도우 os를 그대로 사용하는 사람들이 많기에 개발하는 입장에서는 es6는 그림의 떡이였다. 그런 와중 Babel 이라는 트랜스파일러가 등장했는데 이 바벨은 es6 문법을 es5로 변환시켜 준다 . 설치 해당 프로젝트를 npm init 해주고 명령창에 다음과 같이 작성한다. 개발환경에 추가하기 위해 ..