記錄

const express = require('express');const app = express(); app.use(express.static('public')); app.get('/dynamic', function(req, res){ let li_tag = ''; for(let i = 0; i

const express = require('express');const app = express(); app.use(express.static('public')); app.get('/home', function(req, res){ res.send('Welcome! ');}); app.listen(3000, function(){ console.log('Connected 3000 port!')}); Node.js 에서 정적인 파일을 서비스하고 싶을 경우 Express에서 기본으로 제공하는 미들웨어 함수인 express.static을 사용하면 된다. 아래 코드와 같이 express.static()의 파라미터로 '폴더'를 설정한다. 경로를 설정한다는 것이다. 그러면 웹 상에서 파일 명을 주소창에 쳐서 직접 접..

강의에서는 Express의 기초 강의를 위해 엄청나게 간단한 웹앱을 만들고 있다. 그 내용을 여기 옮긴다.const express = require('express');const app = express(); app.get('/', function(req, res){ res.send('Welcome');}); app.get('/login', function(req, res){ res.send('login page');}); app.listen(3000, function(){ console.log('Connected 3000 port!')}); 초기에 했던 코드보다 express를 쓴 코드가 조금 더 간단해졌다.const express = require('express');const app = expres..

MEAN Stack의 전반적인 플로우 자꾸 이것 저것 하다보면 내가 지금 공부하는 것이 어떤 과정인지 큰 흐름을 놓칠 때가 많다. 그래서 용어에 대한 분명한 정의가 중요한 것 같다. 큰 그림에 대한 이해도 없이 부분 부분만 공부하는 것은 뭔가 불완전한 학습이라는 느낌이 들기 때문이다.Express에 대한 학습을 하던 중 정확히 이게 무엇인지에 대한 명쾌한 답을 못내리는 나 자신을 발견하고 MEAN Stack 전반에 대해 짚고 넘어가야 겠다는 생각이 들었다.그래서 처음 찾아본 것은 Node.js이고 W3school이 매우 잘 설명해놓은 것 같아서 여기 옮긴다 What is Node.js?Node.js is an open source server environmentNode.js is freeNode.js ..

(콜백 함수 플로우) Callback(콜백) 함수Callback(콜백) 함수란 이벤트 핸들러(함수)가 특정 이벤트가 발생 했을때 Call 당하는 함수를 의미한다. 중요한 것은 콜백 함수가 실행되는 시점이다. 콜백 함수의 실행 시점은 콜백 함수를 파라미터로 사용한 원래 함수가 끝난 시점이다. 즉, 원래 함수의 body가 끝나고서 콜백 함수가 실행된다는 의미이다. 그런 의미에서 Callback 함수는 "Call at the back" 함수라고 할 수 있다. 비동기로 뒤에서 멀티 쓰래드로 실행된다는 것이다. 적절한 설명이 stackoverflow에 있었다.(https://stackoverflow.com/questions/824234/what-is-a-callback-function) Callback(콜백) 함..

Node Package Manager(NPM)자바스크립트 프로그래밍 언어를 위한 패키지 관리자. 스프링에서 pom.xml 에 이것 저것 원하는 dependency를 추가한 것과 같은 원리이다. NPM에서 원하는 패키지를 찾아서 나의 소프트웨어의 일부로 사용할지 전역적이고 독립적인 소프트웨어로 사용하기 위해 가져올지를 정해서 npm 명령어를 통해 install 한다.독립적인 소프트웨어로 설치하여 전역적으로 사용하고 싶으면 npm install -g로 설치하면 된다.그렇지 않고 자신의 소프트웨어의 모듈로서 사용하고 싶다면 npm istall --save 로 설치한다.단, 후자의 경우로 설치할 경우 working directory에 초기 패키지 설정을 해주어야 하는데 이를 위한 시동어는 'npm init' 이..

IP Address와 Port예전에 한 번 개념을 정립했었는데 이번에 강의에 나와서 다시 정리한다. 무척 쉽지만 항상 그냥 지나쳤던거라.. 흔히 IP 라고 하는 것은 사실 'IP 주소'(IP Address)를 줄여서 우리가 그냥 편하게 쓰는 용어다. 컴퓨터 네트워크 상에서 컴퓨터 장치가 서로를 인식하는 유일키 같은 개념이 IP Address이다. 전화번호와 같은 것이라고 보면 된다. 그리고 Port는 0 ~ 65535개가 존재하는데 컴퓨터가 네트워크 데이터 송수신을 위해 활용하는 '창구'나 '통로'같은 개념이다. 강의에서 나왔듯이 '항구'로서의 개념도 이해하기가 쉽다.정리하자면 IP Address로 컴퓨터를 구분하여 접속하고 Port를 통해 서버를 구분하는 것이다. 예를 들어 http://jk.com:1..

드디어 첫 프로젝트의 결과물이 나왔다. 같은 팀원들이 정말 많은 고생을 했다. 특히 긴 프로젝트 기간동안 정말 첨예한 의견 대립이 많이 있었음에도 불구하고 사이가 더 좋아진 것 같아 더 보람차다. 토론을 하다가 해결이 나지 않는 경우 프로젝트 진행 속도를 위해서 깔끔하게 다수결로 의견을 결정하였다. 다수결에서 진 의견을 제시한 사람들의 경우(나도 때때로 여기에 포함) 깔끔하게 승복(?)하고 다수의 지지를 받은 의견을 구현하기 위해 최선을 다했다. 강사님의 가이드도 프로젝트의 완성도를 올려가는데에 많은 도움이 되었다. 프로젝트 설명프로젝트를 한 마디로 정리하자면 '개발자들을 위한 협업툴'이라고 할 수 있다. 개발 방법론에 대해 지식이 깊지 않더라도 주어진 템플릿만 활용한다면 개발 방법론을 적용해 프로그램을..

찾아도 내가 원하는 것이 나오지 않아서 직접 만들어 보았다(있긴 있었는데 딱 내가 원하는 것이 아니었다) 이모지를 쓸 때에 채팅창에 쓰는 것이 일반적이므로 내가 쓰거나 누군가 쓸 때 좋도록 프레임을 잡아 두었다 이모티콘 팝업 div를 없애기 위해서는 채팅 입력 창에서 esc를 누르면 없어지도록 처리했다 https://github.com/KIMJUNGKWON/emoji_jk

스프링 프레임워크에서 맵퍼의 쿼리 작성시 부등호를 사용해야 할 경우 아래와 같이 를 사용해서 부등호를 넣는다 그렇지 않으면 특수문자로 인식하여 RUN이 안됨 select tname, sday, eday, detail, ctime from task where pid = #{pid} and eday sysdate

멀티쓰래드 상황에서 시퀀스 값을 사용할 때 한 번 사용한 시퀀스 값을 그대로 다시 사용해야 할 경우 currval를 하게되면 값을 보장 받지 못한다. 그 사이에 누군가 nextval를 사용했을 수 있기 때문이다. 프로젝트를 하던 중 이것 때문에 좀 찾아보다가 selectKey 를 발견하게 되었다. selectKey는 채번을 미리 해서 그 값을 객체에 저장할 수 있는 기능이다 select seq_cmtid.nextval FROM DUAL insert into comments values(#{cmtid}, #{comments}, #{tid}, #{mid}, #{cmtkind}, sysdate) 위 코드에서는 selectKey가 가장 먼저 작동하면서 미리 시퀀스 값을 채번하여 keyProperty에 해당하는 ..

$(document).on("click","#btn",function(){ });

엑셀 파일을 추출하는 방법은 두 가지가 있는데 데이터 핸들링이 더 세세하게 들어갈 수 있는 poi 방식을 이용한 방법을 포스팅한다. 1. dependency 추가 org.apache.poipoi3.7 org.apache.poipoi-ooxml3.7HSSF(xls) : poi 라이브러리로 충분XSSF(xlsx) : poi-ooxml 라이브러리 필요 2. 내일 하자..작성중.

$(function() { var ctx = document.getElementById('projectinfo_DonutChart').getContext('2d'); var myDoughnutChart = new Chart(ctx, { type: 'doughnut', data: { datasets: [{ data: [10,20,30,20,10], backgroundColor: [ 'rgba(190, 190, 190, 1)', 'rgba(241, 196, 15, 1)', 'rgba(244, 7, 7, 1)', 'rgba(52, 152, 219, 1)', 'rgba(46, 204, 113, 1)' ], }], labels: [ '미지정','다음주 이후','이번주 까지','완료','기한 만료' ] }, opt..

참고 : http://tcpschool.com/css/css3_module_backgroundshttp://tcpschool.com/examples/tryit/tryhtml.php?filename=css3_module_backgrounds_02https://developer.mozilla.org/ko/docs/Web/CSS/Scaling_background_images 샘플코드) #fabio {background:url("fabio.jpg");background-repeat: no-repeat;background-size: cover;background-position: center center;width: 100%;height: 1000px;} background-size: cover vs contai..

참고 : https://getbootstrap.com/docs/3.3/css/#grid 그리드 시스템은 부트스트랩을 사용하는 큰 이유 중의 하나이다. 전체 레이아웃을 그리드 시스템을 통해 잡아줄 수 있기 때문에 페이지의 전체 레이아웃을 컨트롤 할 수 있다. 말 그대로 그리드(격자) 형식으로 페이지 레이아웃을 나누는 것이고 전체를 12로 잡고 원하는 그리드를 1/12 * n 단위로 형성한다.(최소단위는 1) 샘플코드 1) 전체 12에서의 공간 할당 col lg 2 col lg 8 col lg 2 위 코드는 하나의 row를 2/ 8/ 2 로 나눈 것이다. 핵심은 col-lg-n 클래스이다. col은 column을 의미하고 lg는 크게 봤을 때를 의미하며(sm은 줄였을 때를 나타낸다) 맨 뒤 숫자는 전체를 1..

* * * * *전체 참고 사이트 : https://getbootstrap.com/docs/3.3/css/위 사이트를 참고하면 템플릿 사용 여부를 떠나 수정도 용이하고백지에서 시작할 때에도 필요한 부분만 차용하는 것이 쉽다* * * * * Button>CSS 중심으로 커스터마이징 할 것이 있으면 보고 찾아서 변경한다https://getbootstrap.com/docs/3.3/css/#buttonshttp://getbootstrap.com/docs/4.1/components/buttons/ Jumbotron>A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your..

chat-ws.jsp(html도 무관)채팅 // 웹소켓으로 쓸 변수 선언 var wsocket; // 입장 버튼 클릭시 작동 함수 function connect() { // 웹소켓 생성 // 생성자에 관해서는 이전 포스팅 참고 // 여기서는 이 페이지로 대화 내용을 보내는 것이므로 소켓 경로가 이 페이지(여기)이다 wsocket = new WebSocket( "ws://localhost:8090/spring4-chap09-ws/chat-ws"); // 이렇듯 소켓을 생성하는 단계에서 // .onopen, onmessage, onclose에 해당하는 함수를 정의 wsocket.onopen = onOpen; wsocket.onmessage = onMessage; wsocket.onclose = onClose..

1. dependency 설정 org.springframework spring-websocket 4.0.4.RELEASE 2. Controller 오버라이드public class EchoHandler extends TextWebSocketHandler { // afterConnectionEstablished : 웹소켓이 연결되면 호출되는 함수 // 웹소켓이 연결 되는 것 = 프론트에서 웹소켓이 정확한 경로를 잡아 생성 되는 것 @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { System.out.printf("%s 연결 됨\n", session.getId()); } // 웹소켓 클라이언트..

1. pom.xml 에서 jackson dependency 선언(비동기로 json타입의 데이터를 가져올 것이기 때문에) com.fasterxml.jackson.core jackson-core 2.7.3 org.codehaus.jackson jackson-core-asl 1.9.13 com.fasterxml.jackson.core jackson-databind 2.7.3 2. DispatcherServlet 에 다음과 같이 선언(네임스페이스에 유의, xmlns:mvc 설정과 이를 이용한 맨 밑 두 줄) 3. 컨트롤러에서 아래와 같이 처리 (@ResponseBody, @RequestBody 설정)@RequestMapping(value="response2.kosta",method=RequestMethod.PO..

1. pom.xml 에서 jackson dependency 선언(비동기로 json타입의 데이터를 가져올 것이기 때문에) com.fasterxml.jackson.core jackson-core 2.7.3 org.codehaus.jackson jackson-core-asl 1.9.13 com.fasterxml.jackson.core jackson-databind 2.7.3 2. 나중에 Controller에서 @Autowired로 bean을 찾아 쓸 수 있도록 DispatcherServlet에org.springframework.web.servlet.view.json.MappingJackson2JsonView을 bean 설정 3. 컨트롤러에서 아래와 같이 처리(핵심: jsonview를 @Autowired 해주고..

pom.xml org.springframework.security spring-security-web 4.0.1.RELEASE org.springframework.security spring-security-config 4.0.1.RELEASE org.springframework.security spring-security-taglibs 4.0.1.RELEASE web.xml org.springframework.web.context.ContextLoaderListener contextConfigLocation /WEB-INF/applicationContext.xml /WEB-INF/security-context.xml springSecurityFilterChain org.springframework.we..

CSS 구글 폰트 적용하는 방법 1. https://fonts.google.com/ 로 간다 2. https://fonts.google.com/ 에서 원하는 폰트를 골라 + 버튼을 누른다 (한 번에 하나 할 필요 없이 장바구니에 물건 담듯 원하는 폰트가 많다면 모두 눌러도 상관 없다) 3. 아래에 뜬 Family Selected 를 눌러 창을 크게 만들고 자동 생성된 와 CSS 설정을 복사하여 코드로 가져간다 4. 아래와 같이 코드에 넣는다 (코드는 다수의 폰트를 클릭했을 경우를 가정해서 사용)테스트 페이지 h1 { font-family: 'Nanum Brush Script', cursive; } h2 { font-family: 'Do Hyeon', sans-serif; } h3 { font-family..

참고 : https://www.cssfontstack.com/참고 사이트를 보면 각 OS별로 어떤 font를 가지고 있는지 통계치를 알 수 있다CDN방식이 아닌 font를 사용할 경우 위 사이트를 참고하면 좋을 것 같다 font-size, font-family/* 글씨 크기와 폰트는 아래와 같이 설정 *//* 글씨 크기 : font-size *//* 글씨체 : font-family *//* cf) em은 상대적 크기로 상위 태그 기준으로 xN배 설정 *//* 참고 : http://zinee-world.tistory.com/131 */ body { font-size: 10px} p { font-family: Arial; /* p의 상위 태그인 body 태그를 기준으로 상대적 크기 설정 */ font-siz..

Tiles.xmlDOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 2.1//EN" "http://tiles.apache.org/dtds/tiles-config_2_1.dtd"> layout.jsp 직원 정보 관리 시스템 로그아웃 × 로그아웃 하시겠습니까? Cancel Logout

MasterController.java (Master는 내가 그냥 붙인거고 클래스명은 무관)// @Controller를 통해 DispatcherServlet이// 이를 controller로 인식하고 모든 처리를 여기로 요청한다@Controllerpublic class MasterController { // type으로 찾아 bean으로 생성 // root-context.xml에 이미 bean으로 설정은 마친 상태 @Autowired private SqlSession sqlsession; // 요청 주소를 mapping // 일단 .htm은 모두 이곳으로 요청되도록 설정된 상태이고 // 정확한 요청 주소를 보고 @RequestMapping 설정에 따라 // 알맞은 메소드로 요청이 들어간다 @RequestM..

addEmp.jsp 직원추가 EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO 돌아가기 EmpDto.java public class EmpDto { private int EMPNO; private String ENAME; private String JOB; private int MGR; private String HIREDATE; private int SAL; private int COMM; private int DEPTNO; // .... 아래는 getter, setter 자동 생성 // getter, setter 없으면 Mybatis 작동하지 않는다 // .. // .. // .. EmpDao.java(interface) public interface EmpDao { /..

pom.xml 4.0.0 kr.or bit PracticeSpring war 1.0.0-BUILD-SNAPSHOT 1.6 3.1.1.RELEASE 1.6.10 1.6.6 oracle ORACLE JDBC Repository http://maven.jahia.org/maven2 org.springframework spring-context ${org.springframework-version} commons-logging commons-logging org.springframework spring-webmvc ${org.springframework-version} org.aspectj aspectjrt ${org.aspectj-version} org.slf4j slf4j-api ${org.slf4j-ver..

Spring framework 스프링 프레임워크는 자바 플랫폼을 위한 오픈소스 애플리케이션 프레임워크로서 간단히 스프링이라고도 불린다. 동적인 웹 사이트를 개발하기 위한 여러 가지 서비스를 제공하고 있다. 대한민국 공공기관의 웹 서비스 개발 시 사용을 권장하고 있는 전자정부 표준프레임워크의 기반 기술로서 쓰이고 있다 Maven pom.xml(Project Object Model) 파일을 이용해서 프로젝트에 사용되는 jar파일(라이브러리)을 다운로드해서 사용하게 돕는 툴 Dependency 기능을 실행하기 위해서 다른 클래스(또는 타입)을 필요로 할때 이를 '의존' 한다고 한다. 예를 들어, A클래스가 기능하기 위해서 B클래스가 필요하다면 'A 클래스는 B 클래스에 의존한다'고 할 수 있다. 더 깊이 들어..

참고 : https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048 참고 링크에 모든 생성자가 정리되어 있으며 아래 생성자들은 자주 쓰이는 생성자에 대한 정리 ID selector, class Selector/* id selector : #id */ #firstid { color: #f442d7; border: black; border-width: 5px; border-style: solid; } /* class selector : .classname */ .firstclass{ color: rgb(0, 255, 0); } Star Selector/* Star *//* 페이지 내 모든 태그에 적용 */* ..