Archive: 2017
타자연습 Game - JavaScript, Ajax, JSON
JavaScript, Ajax, JSON으로 타자연습 게임를 만들어보라는 3차 코딩 테스트!비교적 수월한 작업이었고, 재미있는 요소들을 넣어가며 작업했습니다. ^^ 결과화면 보기해당 소스 보기 특징 및 기능 30초 동안 json내의 단어들을 랜덤으로 뿌려줍니다. 맞으면 +10점, 틀리면 -10점의 점수가 반영됩니다. sweetalert.js 사용, 맞
Sliding Puzzle Game - JavaScript, Electron
JavaScript로 숫자퍼즐 게임를 만들어보라는 2차 코딩 테스트!가 주어졌었습니다.UI는 Google검색으로 가장 마음에 드는 것을 정해 비슷하게 CSS로 만들어보았습니다.이 퍼즐 게임 또한 한정된 시간내에서 최선을 다해 만들었던 과제입니다. 결과화면 보기해당 소스 보기 특징 및 기능 easy, hard모드는 radio 버튼의 value로 정해지고
계산기(calculator) - JavaScript, Electron
JavaScript로 계산기를 만들어보라는 1차 코딩 테스트!가 주어졌었습니다.이에 UI는 아이폰 계산기 앱을 본 따 만들었습니다.숫자, 연산자 순으로 클릭시 잘 되고 있습니다. ㅋㅋ잘 풀리지 않을 땐 친구에게 설명만 해도 자연스레 해결책이 떠오르더군요.. :) 결과화면 보기해당 소스 보기 특징 및 기능 =을 누르기 전까지 상단에 계산과정이 나오도록
GET, POST요청의 차이점
관련 포스팅 : HTTP 프로토콜 GET과 POST 요청은 언제 발생할까요?GET 요청 웹브라우저의 주소창에 주소를 입력한 후 엔터를 칠 때, 페이지에서 링크를 클릭했을 때, 입력폼의 method 속성이 get 일 때, AJAX에서 서버에 연결할 때 get으로 설정한 경우 POST 요청 입력폼의 method 속성이 post 일 때, AJAX에서 서버에
02. URL Routing 처리하기
라우팅(Routing)이란?네트워크 안에서 통신 데이터를 보낼 경로를 선택하는 과정url path에 따라서 view를 지정하는 것 GET 요청 처리123app.get('/', function(req, res) { // url path, 콜백함수 res.sendFile(__dirname + "/public/main.ht
01. Express 모듈로 간단하게 웹 서버 만들기
익스프레스(Express)Node.js에 기본으로 있는 http모듈을 사용하면 웹 서버 기능을 담당하는 서버 객체를 만들 수 있습니다.하지만 http 모듈만 사용해서 웹 서버를 구성할 때는 많은 것들을 직접 만들어야 합니다.Express는 좀 더 쉽고 빠르게 웹 서버를 구성하도록 코드를 자동으로 만들어 줍니다. 1_ 익스프레스 모듈 설치1$npm inst
REST, RESTful API
REST(Representational State Transfer)네트워크 아키텍처 원리의 모음웹 리소스(자원)를 요청해서 받고 서버에 올릴 때 어떻게 전송, 요청을 할 것인가..데이터를 주고 받을 때 필요한 스타일, 패턴 RESTful APIREST를 잘 준수한 API HTTP Protocol 기반 리소스는 URI로 표현하며 고유해야한다. URI는 단
HTTP(Hyper-Text Transfer Protocol)
프로토콜(Protocol))이란?데이터를 어떤 형태로 주고 받을 것인지 정한 규약 HTTP(Hyper-Text Transfer Protocol)란?웹서버(HTTP Server)와 웹브라우저(HTTP Client) 사이에 데이터를 주고 받는 형식즉 인터넷 상에서 데이터를 어떻게 주고 받는지를 정의해 둔 것으로 모든 웹브라우저가 이 방식을 따릅니다. HTTP
Node.js 개념과 특징
Node.jsJavaScript를 이용해서 서버를 만들 수 있는 개발도구속도가 빠릅니다.짧은 코드로 쉽게 서버를 만들 수 있습니다.성능이 뛰어나고 안정성과 보안도 검증된 서버로서 실무에 적합합니다.Node.js를 사용하는 대표기업으로 페이팔, 이베이, 야후 등이 있습니다. 크롬의 V8 자바스크립트 엔진 위에서 실행됩니다.네트워킹 기능을 담당하는 Socke
Spring Framework_스프링이란?
스프링이란? (= 스프링 프레임워크)JAVA언어를 기반으로 다양한 애플리케이션을 제작하기 위한 약속된 프로그래밍 툴동적인 웹 사이트를 개발하기 위한 여러가지 서비스를 제공하는 스프링은국내에서 전자정부 표준 프레임워크 기반 기술로서 쓰이고 있고 자바 개발자들에게 표준 프레임워크가 되었습니다. 스프링 학습 이전에 JAVA언어, JSP, Servlet, MVC
Computer Science기초 - Null
Null에 대한 고찰1_ 개발자들의 영원한 숙제, ‘NULL’ 이야기위 포스팅에서는 데이터베이스, C, Java상에서의 Null에 대하여 다루어져있습니다. 2_ JavaScript에서의 null과 undefined데이터타입에 대해 유연한 언어인 자바스크립트에서 Null, Undefined에 관해 다룬 포스팅입니다. 3_ Null과 빈칸변수를 초기화하는 관
JDBC 프로그래밍 & java.sql 패키지
java.sql 패키지의 주요 인터페이스 (mysql의 경우)java.sql.Driver (=> 구현 com.mysql.jdbc.Driver 클래스)=> JDBC Driver 정보를 제공하는 기능=> DBMS와의 연결을 관리하는 객체를 리턴하는 기능 java.sql.Connection (=> 구현 com.mysql.jdbc.Conne
JDBC(Java Database Connectivity)
관련 용어ODBC(Open Database Connectivity)데이터베이스에 접근하기 위한 소프트웨어의 표준 규격MySQL, Oracle, MS-SQL 등 DBMS사 마다 달랐던 API를 통일하여 사용하고자 만든 규격입니다. JDBC(Java Database Connectivity)자바에서 데이터베이스에 접속할 수 있도록 하는 자바 API데이터베이스에
WAS, Servlet Container, Servlet 개념
웹 애플리케이션의 구성요소 3가지는1) 서블릿(servlet) : 클라이언트의 요청을 처리합니다.2) 필터(filter) : 서블릿을 실행하기 전이나 후에 작업을 수행합니다.3) 리스너(listener) : 서블릿 컨테이너의 특정 상황(event)에서 작업하는 객체입니다. 이 중 서블릿(servlet)에 대해 알아보겠습니다. 서블릿이란?웹 애플리케이션은
Tomcat server directory (디렉토리, 폴더) 설명
웹 애플리케이션 서버(WAS. Web Application Server)인 톰켓의 디렉토리 구조를 설명하려고 합니다.다른 웹 애플리케이션 서버 프로그램들의 디렉토리 구조도 비슷하다고 하니 잘 알아두면 좋것쥬~ 그동안 서버사이드 공부를 하면서 블로그 포스팅을 못했는데, 이제부터 천천히라도다시 시작하려합니다. :) 씐나!! 제 컴퓨터에 설치된 톰켓의 디렉
GitHub page로 블로그 만들기 - hexo
Github 페이지로 블로그를 만들어보고 싶어 고민할 때, 유명한 Jekyll을 사용하고 싶었습니다.그러나 (역시나? 왜?) Windows에서는 지킬설치시 각종 이슈가 발생한다는 소문이 있더군요..껄껄그래서 찾아낸 hexo! 도움받은 사이트링크입니다. ^^ hexo 한국어사이트 바로가기 hexo 설치시 도움받은 블로그
MongoDB Window 설치
React 스터디를 진행하면서 윈도우유저들은 몽고디비를 먼저 설치해보라는 명이 떨어졌습니다. ㅋㅋ왜 맥에서는 쉽게 설치가 되는 것들이 윈도우에서는 약간?의 말썽이 일어나는 것일까요. 크~도움받은 사이트와 진행을 쉽게 정리해보고자 합니다. 1_ 설치 (참고사이트) mondodb.com 에서 msi파일을 다운로드 받습니다.저는 첫번째인 Windows Se
JavaScript ES6 문법 - default parameter
default parameter아래 함수처럼 파라미터 개수에 맞지 않게 함수를 실행시킨다면 오류를 발생시킵니다.1234const sum = function(x,y){ return x+y;}sum(); // NaN ES6에서는 파라미터에 기본 값을 할당해줄 수 있습니다.1234const sum2 = function(x=5,y=10)&
JavaScript ES6 문법 - spread operator
spread operator(...)copy목적으로 씁니다.length를 갖고 있는, 즉 순회를 할 수 있는 대상들(배열, 문자열)에 적용가능합니다. 12345678const defaultColors = ['red', 'green'];const userFavoriteColors =['yellow', &
JavaScript ES6 문법 - rest parameter
rest parameter(나머지 파라미터 ...)일정하지 않은 갯수의 파라미터를 넘길 때 유용합니다. 1234567function addNum(...numbers) { return numbers.reduce((sum, number) => { return sum + number; }, 0);}addNum(
JavaScript Array - find, every, some, reduce 내장 메소드
반복자 함수 2. find, every, some, reduce (추후 추가)목차find 메소드 find 메소드콜백함수가 요구하는 조건을 만족하는 첫번째 값을 하나 반환합니다. 없으면 undefined를 반환합니다. 1arr.find(callback[, thisArg]) 예: 특정 프로퍼티, 값을 가지는 첫번재 객체를 찾는 함수를 완성해보세요.주어진 문제
JavaScript Array - forEach, map, filter 내장 메소드
반복자 함수 1. forEach, map, filter목차forEach 메소드map 메소드filter 메소드 forEach 메소드배열의 각 요소에 대해 한번씩 순서대로 콜백함수를 실행합니다. 1arr.forEach(callback[, thisArg]) callback 함수 : 배열의 각 요소에 대해 실행할 함수로 다음 세 가지 인수를 가집니다.1) cur
스터디그룹모임 - JavaScript의 this
이번주에 우리 스터디모임에서 나눈 주제는 크로스브라우징, JS ES6 - Arrow Function, 원시데이터와 참조데이터였습니다.Arrow Function에 대해서는 제가 발표자였는데, JavaScript의 this에 대해 좀 더 자세하게 다뤄야할 필요성이 느껴지더라고요. 잘 알고있다고 생각했는데 클래스, 인스턴스, 메소드 등의 this에 대해서 정
JavaScript ES6 문법 - class
Class 클래스자바스크립트 ES5 문법으로 class를 만들기 위해서 prototype 상속을 이용하는 방법을 사용하였습니다. 해당 포스팅 바로가기ES6 문법에서는 class 문법을 지원함으로서 이를 좀 더 쉽게 만들게 해줍니다. ES5 와 ES6 비교1_ ES5123456789101112131415// Person 클래스. 생성자 함수var Perso
JavaScript 객체지향 - 캡슐화
캡슐화 (encapsulation)객체의 중요한 프로퍼티(데이터)와 메소드(기능)를 외부에서 접근하지 못하게 하는 작업을 말합니다. 일반적으로 객체 내부의 프로퍼티, 메소드는 1)객체 내부, 2)객체 외부, 3)자식 객체에서 접근해 사용합니다. ES5 소스 예시1234567891011121314151617181920// MyParent 클래스functio
JavaScript 객체지향 - 추상화
추상화 (abstraction)객체의 프로퍼티와 메소드를 정의 하는 작업으로, 이름을 작성하는 선언 부분만 만들 뿐 구현부분은 작업하지 않습니다. 자바스크립트에서는 인터페이스와 추상클래스를 제공하지 않기 때문에 클래스만을 이용해서 추상화 작업을 해야합니다. 예: 이미지 슬라이더 추상화 하기 ImgSlider 프로퍼티 현재 선택된 이미지 인덱스
스터디그룹모임 - Event(이벤트)
설연휴로 인해 2주만에 만난 스터디모임 ^^ 알차고 재밋었던 시간이었습니다~이번엔 이벤트 버블링, 이벤트 객체, 이벤트 위임, ES6, 알고리즘 등을 나눴는데,그 중 이벤트에 대해 포스팅해보려합니다. 이벤트 버블링 (Event Bubbling)이벤트 버블링이란 자식노드에서 부모노드 순으로 이벤트가 전파되는 것으로, 반대방향으로 전파되는 것은 캡쳐링이라
JavaScript ES6 문법 - Strings 문자열표기법 등
Template StringsES5에서 문자열을 변수, 함수와 함께 쓰고자 할 때 +기호를 씁니다.12345678910let firstName = 'John';let lastName = 'Smith';const yearOfBirth = 1990;function calcAge(year) { return 2017