본문 바로가기

분류 전체보기

Set Data Structure About Set 집합이란 고유한 요소의 모임을 집합이라 한다. [1,2,3,3] 3은 고유하지 않기때문에 집합이라 부를수 없다. 집합에는 순서가 없다. [3,1,2,4] 는 집합 이다. ADT Structure method description add(val) 추가 remove(val) 제거 has(val) 존제 여부 체크 clear() 초기화 size() 길이 values() 현재 담겨져 잇는 값 union() 합집합 intersection() 교집합 difference() 차집합 Implementation class Set { constructor() { this.data = []; } add(val) { return this.has(val) ? console.log('val is exist') :.. 더보기
Html5 & Css3 Basic Acknowledgment 웹 입문을 자바로 시작해서 관심사가 오라클로 갔다. 입사한곳에 뷰페이지를 담당하는 퍼블리셔가 있었다. 뷰페이지에 대해서 소흘할수 밖에 없었다. 장기적으로 참여하고 있는 오프 스터디 모임 구성원들이 전부 프론트 앤드 쪽이다 보니 내 방향성도 프론트 앤드로 가고 있는듯 하다. 그래서 한번은 개론적인 부분에 대해 정리할 필요성을 느꼈다. 어제 윤인성님 책을 시립도서관에서 빌려서 오늘 하루동안 문서화 하고 정리했다. 윤인성님께 감사 드린다. Font Tag 폰트는 브라우저 마다 다르기때문에 강제 해야 한다. 제목 : h1 ~ h6 숫자가 높을수록 글씨크기가 작아진다. 내용 : p 단락 br 개행 hr 수평줄 앵커 태그(a) : 웹표준에 따르면 href 값이 있어야 하기때문에 빈값은 #.. 더보기
Dynamic Programming & Greedy Algorithms About DP(Dynamic Programming) 우선 뭔가 명칭에서 있어 보인다. 역동적인 프로그래밍 이라니.. 실제로 고안자인 벨만은 있어보여서 dynamic 이란 단어를 선정 했다고 한다. 저서의 서문을 보면 연구소에서 펀딩을 받기에 좋은 단어라 선택했다고 나온다. 저서에는 다음과 같이 DP 를 정의 하고 있다. 어떤 문제를 풀기위해 그 문제를 더 작은 문제의 연장선으로 생각하고 과거에 구한 해를 활용하는 방식의 알고리즘을 총칭한다. DP는 알고리즘 이라기보단 하나의 방법론에 가까운데 Optimal Substructure 라고 불리는 구조에 DP를 활용해야 좋은 효과를 얻을수 있다. 뭔가 구하기위해서 했던 계산을 계속해서 반복하는류에 문제들이 적용 대상이라 할수있는데 피보나치 수열, 배낭문제, .. 더보기
Express Basic Essentials - Form,Cookie,Session(END) Form Session Cookie 익스프레스에 관한 마지막 포스팅이 되겠다. 익스프레스에서 가장 중요한 영역이다. 3개를 나열해놓으니 문뜩 영화 놈놈놈(좋은놈,나쁜놈,이상한놈)이 생각난다. 각설하고.. Express 에서 폼을 다루는 방식에 대해서 살펴보고자 한다. GET 방식과 POST 방식에 차이점에 대해서 생각해보자 너무나 기초적 이다 보니 구글링해보면 똑같은 내용에 글들이 수도없이 나올것이다. 몇가지 차이가 있지만 그중에서 내가 생각하기에 중요한 차이는 POST 방식에서만 파일 전송이 가능하다는 점이다. Express 에서 폼을 다루는 방식에 대해서 살펴보면 POST는 조금 특별하다는것을 알수 있을것이다. GET req.query 를 통해 접근이 가능하며 별도의 설정이 필요없고 자바스크립트 배열.. 더보기
Express Basic Essentials - Response Object Express in Response 익스프레스에서 응답 객체에 대한 이야기를 하고자 한다. 서버가 전송하는 응답에 브라우저는 상태코드 그리고 헤더 가 필요하다. 상태코드 목록은 다음과 같다. 코드명 내용 1xx 정보로 분류되며 서버가 임시적 응답을 전달할때 사용 2xx 서버의 리소스 요청이 성공했음을 전달할때 사용 3xx 리다이렉션으로 분류되며, 추가적인 액션에 사용하는 정보를 나타낼때 사용 4xx 클라이언트 에러로 분류되며 에이전트가 서버에게 에러가 담긴 요청을 했다고 알려줄때 사용 5xx 서버 에러로 분류되며 요청이 서버 내부에서 끝까지 실행되지않았음을 브라우저에 알릴때 사용 express 에서 상태 코드 설정은 status 함수를 통해 가능하다. 하지만 상태 코드만 발송해서 응답을 처리하기엔 부족하.. 더보기
Express Basic Essentials - Route Express Route Express 에서 라우터는 특별한 미들웨어 이다. 다른 미들웨어가 connect를 상속받는 반면 라우터는 express 자체를 상속받아 구현한다. 익스프레스 라우터는 HTTP 요청 함수 에 기반한 거의 모든 함수를 지원하는데 LIKE 나 UNLIKE 같이 불안정하고 모호한것은 아직 지원하지 않는다. HTTP 요청 함수는 여러가지가 있지만 웹개발을 하면서 우리가 많이 사용하는것과 사용하지 않는것으로 나눠보면 다음과 같다. 많이 사용 GET, POST, PUT, DELETE 많이 사용 안함 HEAD,TRACE,OPTIONS,CONNECT,PATCH,M-SEARCH,NOTIFY,SUBSCRIBE 이런 요청 함수들을 라우터는 소문자로 구현해 놓았는데 express 가 가진 고유한 함수.. 더보기
Express Basic Essentials - init,middleware Summary MEAN STACK 으로 개발을 하면서 그간 정리 하지 못한 내용 중에 하나인 Express 에 대해서 정리하고자 한다. 사실 요즘 가상돔을 제어하는 React 에 빠져서 MEAN STACK 을 온전히 쓰고 있다고 보긴 어려울것 같다. 경량 서비스를 제작 한다고 해도 webpack 과 함께 express 는 필수라는 생각이 들었다. 조만간 블로그에서 MEAN STACK 카테고리를 정리해야할 필요성을 느낀다. 뭐 아무튼.. 정리에 앞서 간단한 개요를 정의 한다. 익스프레스는 Application, Request, Response 3개의 객체로 이루어져있다. 각 객체가 가진 레퍼런스가 궁금하다면 여기를 참고 하기 바란다. express 를 전역으로 설치한뒤 express-generator 설치.. 더보기
Sorting Data Structure About Sorting 정렬의 목적은 데이터 검색을 위해서 이다. 그렇기 때문에 다음시간에 포스팅할 검색과도 깊은 연관이 있다. 정렬은 매우 중요한 작업이다. 정렬이 되어있지 않은 수백만건의 데이터를 상상해보면 끔찍할것이다. 그래도 어찌됐건 정렬을 해야하는데 순차 검색외엔 다른방법이 없다. 하지만 정렬이 되어있다면 매우 빠른 이진 검색을 사용할수 있다. 컴퓨터가 정렬을 수행하는 여러가지 이유중에 하나가 바로 이진 검색이 가능한 데이터로 가공하기 위한 목적도 있다. 정렬을 하기까지 걸리는 시간은 보통 자료수의 제곱에 비례하여 늘어나기때문에 효과적인 정렬방법을 만드는게 중요하지만 스터디에 목적은 정렬을 알아보기 위함이고 내장되어 있는 정렬을 가져다 쓰는것이 더 빠를것이다. Basical Sorting 기본.. 더보기
Graph Data Structure About Graph 그래프는 Vertex(점:노드) 와 Edge(간선) 로 구성된다. 점과 점사이를 이어주는 역할을 선이 하게 되는데 선에 방향이 없을경우 무향 그래프(Undirected graph) 방향이 있으면 유향 그래프(Directed graph) 라고 부른다. 간선의 경우엔 가중치(Weighted value) 를 가질수 있다. Adjacency List 간선에 가중치는 그래프의 이동경로를 포함하고 있다. 간선을 표현하는데에는 2가지 방식을 사용할수 있는데 인접 행렬과 인접 리스트 방식이 있다. 결론적으로 인접 리스트를 사용하는것이 좋은데 인접 행렬의 문제에 대해서 이야기 해보겠다. 인접 행렬 방식은 Matrix 즉 2차원 배열 형식을 가지고 있다. 그렇기 때문에 특정 노드와 연결된 노드를 찾기.. 더보기
You Know Nothing Chrome Developer Tools. 제목은 내가 좋아하는 미드 왕좌의 게임에서 나오는 유명한 대사를 패러디 해봤다. you know nothing jon snow Chrome을 사용하면서 경험한 것들에 대한 이야기를 해보고자 한다. Chrome Canary 자바스크립트로 자료구조 알고리즘 스터디를 진행하면서 부터 우리의 두번째 서브미션인 ES6 문법을 활용해볼것을 위해서 스터디 어느분에 소개로 Canary 버전을 처음 접하게 되었다. 설치를 완료하고 flags 에서 2가지 옵션을 활성화 시켜줘야 하는데 이는 es2015 에 표준이 되는 레퍼런스를 모두 지원할수 있게 해준다. beginning Developer Tools 크롬에서 개발자 모드를 호출하는 방법 window : F12 mac : command+option+i console 자바.. 더보기