Web 개발

[npm-cli] npm warn config init.author.name Use `--init-author-name` instead 출력 이유 확인

2025-02-26T18:43:00.000-08:00

증상:

npm 명령 수행 시 아래와 같은 경고 문구 표시

npm warn config init.author.name Use `--init-author-name` instead.
npm warn config init.author.email Use `--init-author-email` instead.

원인:

npm 설정에 init.author.name 값은 init-author-name 로 변경됨

해결:

값 설정

npm config set init-author-name <name>

npm config set init-author-email <email>

기존키 삭제

.npmrc 파일에 init.author.name, init.author.email 값 삭제

.npmrc 파일 위치 (https://docs.npmjs.com/cli/v8/configuring-npm/npmrc)

per-project config file (/path/to/my/project/.npmrc)
per-user config file (~/.npmrc)
global config file ($PREFIX/etc/npmrc)
npm builtin config file (/path/to/npm/npmrc)

참고

init-author-name 과 init-author-email 은 npm init 과정에서 package.json 에 author 값을 설정하는데 사용됨

fetch + progress

2023-12-28T23:39:00.000-08:00

fetch + progress

요약

ArrayBuffer 다운로드 방식을 커스텀

예) react + fetch + progress

gzip encoding 시 content length 값 문제

Transfer-Encoding: gzip

증상:

gzip encoding 시 content-length 는 압축된 데이터 크기이기 때문에 실제 데이터 보다 크기가 작다

우회:

요청 헤더에 Accept-Encoding 을 명시하여 gzip 방지

주의: 서버 구현에 따름

[React] useRef, useState, useReducer, useContext 사용례 비교

2023-12-28T22:15:00.000-08:00

요약

useRef 렌더링 X 변수 설정 필요한 경우 [컴포넌트]
useState 렌더링 O 단순한 데이터 타입 [컴포넌트]
useReducer 렌더링 O 복잡한 데이터 타입 (예: object), 복잡한 operation [컴포넌트]
useContext 여러 컴포넌트에 걸쳐 공유하는 데이터, 함수 [Provider 하위]

useRef

언제?

컴포넌트 안에서만 사용되는 한번 초기화되는 변수
렌더링 필요없는 경우

사용례

비디오 element 조작

useState

언제?

컴포넌트 안에서만 사용되는 한번 초기화 되는 변수
렌더링 필요한 경우
간단한 데이터 타입 (예: string, number, boolean 등)

사용례

간단한 계산기

useReducer

언제?

컴포넌트 안에서만 사용되는 한번 초기화 되는 변수
렌더링 필요한 경우
복잡한 데이터 타입 (예: object 등)
데이터를 다루는 다양한 operation 필요한 경우

사용례

fetch 데이터

useContext

언제?

여러 컴포넌트에 걸쳐 사용되며 한번 초기화 되는 변수

사용례

테마 설정
로그인 정보

[React] useImperativeHandle 사용 예

2023-12-20T21:13:00.000-08:00

useImperativeHandle 사용하기

참고: https://react.dev/reference/react/useImperativeHandle

state, callback prop 대신 직접적으로 component 에 명령을 내릴 때 사용

예제) react + typescript

import { forwardRef, useRef, useImperativeHandle, useState } from 'react';

function App() {

const mycomponent = useRef<MyComponentElement>();

return (
    <div className="App">
      <MyComponent ref={ref => mycomponent.current = ref as MyComponentElement} />
      <div style={{ display: 'flex', gap: 3 }}>
        <button onClick={() => mycomponent.current?.play()}>Play</button>
        <button onClick={() => mycomponent.current?.pause()}>Pause</button>
        <button onClick={() => mycomponent.current?.stop()}>Stop</button>
        <button onClick={() => alert(mycomponent.current?.getState())}>Get State</button>
      </div>
    </div>
);
}

type MyComponentElement = {
play: () => void;
pause: () => void;
stop: () => void;
getState: () => string;
};

type MyComponentProps = {
};

const MyComponent = forwardRef<MyComponentElement, MyComponentProps>((props, ref) => {
const [state, setState] = useState<string>('idle');
useImperativeHandle(ref, () => ({
    play: () => {
      setState('play');
    },
    pause: () => {
      setState('pause');
    },
    stop: () => {
      setState('stop');
    },
    getState: () => {
      return state;
    }
}));
return (
    <div>
      <p>state: {state}</p>
    </div>
);
});

export default App;

설명

주로 forwardRef, useRef 와 함께 사용

[Python] Flask Http Server 예제

2023-10-22T08:35:00.000-07:00

https://flask.palletsprojects.com/en/2.0.x/quickstart/

설치

pip install Flask

e.g.) hello.py

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
return "<p>Hello, World!</p>"

설명

from flask import Flask

Flask 를 import

app = Flask(__name__)

Flask 인스턴스 생성

@app.route("/")

route 설정
"/" 은 root 경로

실행

$ export FLASK_APP=hello
$ flask run
* Running on http://127.0.0.1:5000/

[React] useEffect + async 예시

2023-08-20T00:02:00.002-07:00

useEffect 사용시 async 호출 방식

promise 완료 이벤트 활용

- 중첩적으로 완료 이벤트 적용 가능한 특성을 이용

async function foo() {
    console.log('start');
    return () => {
        console.log('done');
    }
}

useEffect(() => {
    let prom = foo();
    prom.then(() => console.log('listener is added'));

    return () => {
        prom.then((unlisten) => unlisten());
    }
}, []);

[Node.js] 간단한 http server 만들기

2022-02-04T20:14:00.004-08:00

참고: https://nodejs.org/en/docs/guides/getting-started-guide/

1. 개념

Node.js (링크)

Javascript 기반 프로그램 실행 플랫폼

NPM (링크)

Node.js 패키지 관리자
손쉬운 설치를 도와주는 도구

2. Http Server 실행

외부 패키지 없이 구현

코드: server.js

코드 설명

require()

외부 모듈을 import 함
http 모듈은 node.js 를 설치하면 기본으로 내장된 모듈
https://nodejs.org/api/modules.html#requireid

http.createServer()

http server instance 를 생성함
파마메터로 handler 함수를 넘겨줌
handler 함수는 http request 와 http response 를 입력 받아 처리하는 간단한 함수
https://nodejs.org/api/http.html#httpcreateserveroptions-requestlistener

server.listen()

서버 가동
파라메터로 넘겨받은 hostname 과 port 번호로 bind 하고 http 요청들을 처리함
세번째 파라메터는 http server 의 가동 준비가 완료되면 호출되는 함수
https://nodejs.org/api/http.html#serverlisten

참고

hostname 을 '0.0.0.0' 으로 주면 같은 네트워크 내에 다른 PC 에서 IP 로 접근 가능

외부 접근 되지 않으면 방화벽 설정 확인

port 을 0 으로 주면 가용한 아무 port (any port) 로 bind 함

any port 로 bind 한 경우 listen callback 이 불리는 시점에 server.address().port 로 port 번호 확인 가능

3. 실행

$ node server.js
Server running at http://127.0.0.1:3000/

javascript closure

2018-11-12T01:28:00.001-08:00

closure 는 함수를 리턴하는 함수로 고립된 scope 영역을 만들어 dynamic scope 로 인한 고민을 덜어 줄 수 있다.

예)

function genClosure(i) {

return function () {

i++;

return i;

}

var closure1 = genClosure(0);

console.log(closure1()); // 1

console.log(closure1()); // 2

console.log(closure1()); // 3

var closure2 = genClosure(100);

console.log(closure2()); // 101

console.log(closure2()); // 102

console.log(closure2()); // 103

console.log(closure1()); // 4

var i = 10;

var closure3 = genClosure(i);

console.log(closure3()); // 11

console.log(closure3()); // 12

console.log(i); // 10

MySQL 자주 사용하는 명령어

2018-03-10T16:48:00.000-08:00

mysql 설치

$ sudo apt install mysql-server

mysql 서버 접속

사용자 id가 root 이고 password 가 있는 경우

$ mysql -u root -p

database 목록 표시

mysql> show databases;

database 생성

mysql> create database <db name>;
또는
mysql> create schema <db name>;

예)
mysql> create database test_db;

사용할 database 선택

mysql> use <db name>;

예)

mysql> use test_db;

table 생성

양식: http://dev.mysql.com/doc/refman/5.1/en/create-table.html
mysql> create table table_name
    (create_definition, ...)
    [table options]
    [partition options];

예)

mysql> create table users (

id varchar(256) not null,

password varchar(256) not null,

email varchar(256) not null,

primary key (id)

);

또는 여러 field 값을 primary key 로 설정

mysql> create table users (

id varchar(256) not null,

password varchar(256) not null,

email varchar(256) not null,

primary key (id, pw)

);

Auto increment

mysql> create table users (id medium int not null auto_increment, ...)

table 속성 보기

msyql> desc <table name>;

예)
msyql> desc user;

table 제거

http://dev.mysql.com/doc/refman/5.5/en/drop-table.html
mysql> drop table [if exists] table_name [, table_name]

예)
mysql> drop table if exists test_tbl;

계정 목록

mysql> select user from mysql.user;

계정 만들기

mysql> create user '<usename>'@'<host>' identified by '<password>';

예)
mysql> create user 'testuser'@'localhost' identified by 'testuserpassword';

계정 권한 주기

mysql> grant all privileges on <db name>.* to <user name>@<host> identified by '<password>' with grant option;

예)
mysql> grant all privileges on test_db.* to 'testuser'@'localhost' identified by 'testuserpassword' with grant option;

DB 백업 (dump)

$ mysqldump -u [username] -p [db name] > [filename]

예)
$ mysqldump -u testuser -p testdb > backupdump.sql

DB 백업 복구

복구하려는 database 는 미리 생성해야 함
$ mysql -u [username] -p [db name] < [filename]

예)

$ mysql -u testuser -p testdb < backupdump.sql

CORS (Cross-origin resource sharing) 간략한 설명

2014-05-13T22:28:00.000-07:00

Wiki: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

대략적 내용만 정리합니다.

개요

보안상 문제로 어느 시기 부터 웹 브라우저들이 AJAX 로 외부 host 로 접속하는 걸 막기 시작했습니다.

예를 들어 AJAX 로 http://www.google.com 와 같이 외부 host url 로 접속하는게 불가능 해지고 /relative-path/mypage.html 과 같이 현재 host 의 하부 경로로만 접근 가능합니다.

CORS 가 필요한 시점

그러나 AJAX 로 외부 접근이 필요한 경우에 Response header 에 field 를 추가하여 접근 허용 범위를 정할 수 있습니다
Header field 에 Access-Control-Allow-Origin 를 추가해 줍니다.

Access-Control-Allow-Origin: http://www.example-social-network.com

위와 같이 특정 host 로 부터 접근을 허용할 수도 있고 아래와 같이 모든 접근을 허용할 수도 있습니다.

Access-Control-Allow-Origin: *

테스트 방법

2대의 PC (IP 주소가 다른 2대의 서버 환경) 에 서버를 구동합니다.
192.168.0.2 와 192.168.0.3 IP 주소를 사용하는 서버가 있다고 가정합니다.
192.168.0.2 서버의 웹 페이지에 접속해서 AJAX 로 192.168.0.3 서버의 웹 페이지를 접근 하겠습니다.

192.168.0.2 (Apache tomcat)

파일 : cors.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>CORS test</title>
        <style type="text/css">
            #result {border:solid 1px black;}
        </style>
        <script type="text/javascript">
            function $(obj) {
                return (obj instanceof String || typeof obj === "string") ? document.getElementById(obj) : obj;
            }
            function getXMLHttpRequest() {
                if (window.ActiveXObject) {
                        try {
                                return new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                                try {
                                        return new ActiveXObject("Microsoft.XMLHTTP");
                                } catch (e1) {
                                        return null;
                                }
                        }
                } else if (window.XMLHttpRequest) {
                        return new XMLHttpRequest();
                } else {
                        return null;
                }
            }
            function action(url) {
                var ajax = getXMLHttpRequest();
                ajax.onreadystatechange = function() {
                    switch (ajax.readyState) {
                        case 1:
                        case 2:
                        case 3:
                            break;
                        case 4:
                            if (ajax.status === 200) {
                                $("result").innerHTML = ajax.responseText.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/\r/g, "").replace(/\n/g, "<br />");
                            } else {
                                $("result").innerHTML = "AJAX request failed with status code: " + ajax.status;
                            }
                            break;
                    }
                };
                ajax.open("GET", url, true);
                ajax.send();
            }
        </script>
    </head>
    <body>
        <h1>CORS test</h1>
        <button onclick="action('http://192.168.0.3/apps/hello.html');return false;">Action</button>
        <div id="result">
            ...
        </div>
    </body>
</html>

192.168.0.3 (apache + php)

파일 : apps/hello.html
<?php
header('Access-Control-Allow-Origin:*');
?>
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello</h1>
<p>If you get this message via AJAX request, you are allowed to access me.</p>
</body>
</html>

테스트 결과

http://192.168.0.2:8080/MyApp/cors.jsp 에 접속해서 Action 버튼을 누르면 192.168.0.3 서버의 apps/hello.html 파일에 접근해서 해당 내용을 div 에 표시합니다.

192.168.0.3 서버의 apps/hello.html 의 아래 부분을 주석 처리하면 아래와 같이 실패할 것입니다.

<?php
//header('Access-Control-Allow-Origin:*');
?>

Firefox 로 테스트 하였습니다.

팁
JSP 페이지에 header 를 추가하려면 다음과 같이 할 수 있습니다.
<%
response.addHeader("Access-Control-Allow-Origin", "*");
%>

[Tomcat] JDBC pool + MySql

2013-04-16T01:10:00.000-07:00

참고: http://tomcat.apache.org/tomcat-7.0-doc/jdbc-pool.html

MySQL JDBC 드라이버

다운로드 - http://dev.mysql.com/downloads/connector/j/
압축을 풀고 jar 파일을 반드시 Tomcat 설치 폴더의 lib 폴더에 복사 한다.

주의: 웹 앱 폴더의 WEB-INF/lib 에 복사하면 context.xml 파일에서 설정할 DataSource 객체의 JNDI 등록이 실패할 수 있다.
참고: http://stackoverflow.com/questions/13161747/jdbc-apache-tomcat-pooling-jar

결과물 폴더 구조
- 테스트용 프로젝트는 결과적으로 아래와 같은 구조를 갖게 된다.

테스트를 위한 DB 준비
- 테스트용 DB 계정 생성 및 DB Schema 생성

C:\> mysql -u root -p
Enter password: *******

mysql> grant all privileges on *.* to tester@localhost identified by 'changeit' with grant option;
Query OK, 0 rows affected (0.17 sec)

mysql> create database javatest;
Query OK, 1 row affected (0.00 sec)

mysql> use javatest;
Database changed

mysql> create table testdata (id int not null auto_increment primary key, foo varchar(25), bar int);
Query OK, 0 rows affected (0.24 sec)

mysql> insert into testdata values(null, 'hello', 12345);
Query OK, 1 row affected (0.02 sec)

mysql> select * from testdata;
+----+-------+-------+
| id | foo   | bar   |
+----+-------+-------+
|  1 | hello | 12345 |
+----+-------+-------+
1 row in set (0.00 sec)

web.xml
- 테스트용 서블릿 (com.javatest.MySqlTestServlet) 을 등록했다.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
 id="WebApp_ID" version="3.0">
 <display-name>TomcatTest</display-name>

 <servlet>
  <servlet-name>MySqlTestServlet</servlet-name>
  <servlet-class>com.javatest.MySqlTestServlet</servlet-class>
 </servlet>

 <servlet-mapping>
  <servlet-name>MySqlTestServlet</servlet-name>
  <url-pattern>/MySqlTest</url-pattern>
 </servlet-mapping>

 <welcome-file-list>
  <welcome-file>redirect.jsp</welcome-file>
 </welcome-file-list>
</web-app>

redirect.jsp
- 테스트용 서블릿 (com.javatest.MySqlTestServlet) 으로 redirect 한다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
response.sendRedirect("MySqlTest");
%>

context.xml 파일
- DataSource 를 생성한다.

<?xml version="1.0" encoding="UTF-8" ?>
<Context docBase="TomcatTest" path="/TomcatTest" reloadable="true">

<Resource name="jdbc/mySqlDb"
auth="Container"
type="javax.sql.DataSource"
factory="org.apache.tomcat.jdbc.pool.DataSourceFactory"
testWhileIdle="true"
testOnBorrow="true"
testOnReturn="false"
validationQuery="SELECT 1"
validationInterval="30000"
timeBetweenEvictionRunsMillis="30000"
maxActive="100" 
minIdle="10"
maxWait="10000"
initialSize="10" 
removeAbandonedTimeout="60"
removeAbandoned="true"
logAbandoned="true"
minEvictableIdleTimeMillis="30000" 
jmxEnabled="true"
jdbcInterceptors="org.apache.tomcat.jdbc.pool.interceptor.ConnectionState;org.apache.tomcat.jdbc.pool.interceptor.StatementFinalizer"
loginTimeout="10"
username="tester"
password="changeit"
driverClassName="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost:3306/javatest?autoReconnect=true"
/>

</Context>

MySqlTestServlet.java
- 테스트용 서블릿 소스 코드
- javax.naming.InitialContext 객체를 생성하고 lookup() 함수로 context.xml 파일에서 설정한 DataSource 객체를 얻는다.
- 나머지는 일반적인 JDBC 사용법과 같다.
- JDBC pool 을 사용해도 Connection 객체는 close() 를 해주어야 한다.
> 참고: http://stackoverflow.com/questions/4938517/closing-jdbc-connections-in-pool

package com.javatest;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.sql.Statement;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.sql.DataSource;

public class MySqlTestServlet extends HttpServlet {

 protected void doGet(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {

  response.setContentType("text/plain");
  PrintWriter writer = response.getWriter();

  Connection conn = null;

  try {

   Context con = new InitialContext();
   DataSource ds = (DataSource) con
     .lookup("java:comp/env/jdbc/mySqlDb");
   conn = ds.getConnection();

   Statement st = conn.createStatement();
   ResultSet rs = st.executeQuery("select * from testdata");
   ResultSetMetaData rsmd = rs.getMetaData();
   int cnt = rsmd.getColumnCount();
   StringBuffer sb = new StringBuffer();
   for (int i = 0; i < cnt; i++) {
    sb.append(String.format("[%s]\t", rsmd.getColumnName(i + 1)));
   }
   writer.println(sb.toString());
   writer.println("=======================================");
   while (rs.next()) {
    sb = new StringBuffer();
    for (int i = 0; i < cnt; i++) {
     sb.append(String.format("[%s]\t", rs.getString(i + 1)));
    }
    writer.println(sb.toString());
   }

   rs.close();
   st.close();
  } catch (Exception e) {
   e.printStackTrace();
  } finally {
   if (conn != null)
    try {
     conn.close();
    } catch (SQLException e) {
     e.printStackTrace();
    }
  }
 }

}

실행 결과
- http://localhost:8080/TomcatTest/MySqlTest

Tomcat 서버 + Timer 작업 (스케줄 작업)

2013-04-02T04:01:00.000-07:00

참고: http://stackoverflow.com/questions/791986/background-thread-for-a-tomcat-servlet-app

ServletContextListener 를 이용하여 앱이 시작할 때와 앱이 종료할 때 이벤트를 처리할 수 있다.

앱이 시작할 때 schedule 작업하는 thread 를 시작하고 앱이 종료할 때 thread 를 종료하는 방식을 응용해 봤다.

web.xml 에 우리의 listener 클래스를 등록한다.

<listener>
    <listener-class>com.sample.SampleListener</listener-class>
</listener>

Listener 클래스는 대략 아래와 같다.

package com.sample;

public class SampleListener implements ServletContextListener {

    private MyThread myThread = null;
 
    /**
     * 앱 시작시 불리는 함수
     */
    public void contextInitialized(ServletContextEvent sce) {
        if ((myThread == null) || (!myThread.isAlive())) {
            myThread = new MyThread(new MyTask());
            myThread.start();
        }
    }
    /**
     * 앱 종료시 불리는 함수 
     */
    public void contextDestroyed(ServletContextEvent sce){
        if (myThread != null && myThread.isAlive()) {
            myThread.quit();
        }
    }
}

실제 작업하는 스레드는 TimerTask 를 등록하고 작업이 진행되는 동안 대기하는 일을 한다.
예) 매분마다 특정 파일(backup.bat) 을 실행한다.

/**
 * 실제 작업하는 클래스
 */ 
public static class MyTask extends TimerTask {

    @Override
    public void run() {
        
        try {
            ProcessBuilder builder = new ProcessBuilder("c:\\bin\\backup.bat");
            Process p = builder.start();
            InputStream in = p.getInputStream();
            while (in.read() != -1) {
                Thread.sleep(10);
            }
            p.waitFor();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }
}

/**
 * 앱이 실행되는 동안 작업을 기다리는 스레드
 */
public static class MyThread extends Thread {
    
    private boolean done = false;
    private Timer timer;
    private TimerTask task;
    
    public MyThread (TimerTask task) {
        this.task = task;
    }
    
    public void quit() {
        this.done = true;
        this.interrupt();
    }
    
    public boolean finishing() {
        return (done || Thread.interrupted());
    }

    @Override
    public void run() {
        super.run();
        
        timer = new Timer();
        
        Calendar now = Calendar.getInstance();
        timer.scheduleAtFixedRate(task, now.getTime(), 1000 * 60);
        
        while (!finishing()) {
            try {
                Thread.sleep(10);
            } catch (InterruptedException e) {
                break;
            }
        }
        
        timer.cancel();
    }
}

@WebServlet annotation with Tomcat 7 and 404 error

2013-01-13T04:36:00.000-08:00

@WebSerlvet annotation 을 사용해서 servlet 을 정의했지만 404 에러가 발생했다.
문제는 web.xml 파일에 metadata-complete 를 true 로 설정했기 때문이었다.

아래와 같이 metatdata-complete 를 false 로 설정해야 했다.

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

 xmlns="http://java.sun.com/xml/ns/javaee"

 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"

 metadata-complete="false"

 version="3.0">

!) eclipse 에서 프로젝트를 clean 하고 다시 build 해야 할 수도 있다.

참고: http://www.coderanch.com/t/548158/Tomcat/WebServlet-annotation-working-Tomcat

Color

2012-12-04T20:19:00.000-08:00

R
G
B

HttpServletRequest 의 getServletContext() 함수 사용 문제

2012-11-02T20:51:00.000-07:00

참고: http://stackoverflow.com/questions/7860782/request-getservletcontext-not-found-even-with-new-jar

JSP 페이지에서 request.getServletContext() 사용시 아래와 같은 에러가 발생했다.

The method getServletContext() is undefined for the type HttpServletRequest

Tomcat 7 에서는 문제가 되지 않았지만 tomcat6 에서는 문제가 되었다.

!) 원인은 HttpServletRequest 의 getServletContext() 함수는 Servlet 3.0 부터 지원되기 때문이었다. Tomcat7 부터 Servlet 3.0 을 지원한다.

그냥 getServletContext() 함수를 부르면 Tomcat 6 와 Tomcat 7 에서도 에러가 발생하지 않았다.

예)
<%= getServletContext().gerRealPath("/") %>

[JSP] getOutputStream() has already been called for this response 문제

2012-10-12T01:22:00.001-07:00

참고: https://kr.forums.oracle.com/forums/thread.jspa?threadID=452123

jsp 파일에서 response.getOutputStream() 을 부르는 경우 아래와 같은 Exception 이 발생할 수 있다.

getOutputStream() has already been called for this response

이유는 하나의 jsp 파일에서 getWriter() 와 getOutputStream() 를 동시에 부를 수는 없기 때문이다.

getWriter() 함수는 jsp 내부적으로 html 을 렌더링 할 때 호출 된다.

- Tomcat 서버의 경우 만약에 개행 문자없이 오로지 java 코드 파트로만 구성된 jsp 라면 getOutputStream() 함수를 사용할 수 있었다.

- 하지만 서버 마다 다를 수 있으므로 확인해 봐야 할 것이다.

!) 개행 문자를 아래와 같이 주석을 이용하여 제거하는 방법도 생각해 볼 수 있다.

<% ... %><%--

--%><%

...

Mac OS Mountain Lion + apache

2012-10-06T22:16:00.005-07:00

Mountain Lion 부터는 웹 공유 옵션이 없어졌다.
참고 : http://support.apple.com/kb/HT5230

하지만 apache 서버가 이미 OS 에 포함이 되어 있다.

참고: http://coolestguyplanettech.com/downtown/install-and-configure-apache-mysql-php-and-phpmyadmin-osx-108-mountain-lion

terminal 을 열고 아래 명령을 통해 apache 서버를 실행할 수 있다.
$ sudo apachectl start

설정 파일은 아래 위치에 있다.
/etc/apache2

기본 document 경로는 다음과 같다.
/Library/WebServer/Documents/

기존에 웹 공유를 사용했다면 /Users/사용자아이디/Sites 에 폴더가 지정이 되었을 것이다.
/etc/apache2/users/ 디렉토리에 사용자아이디.conf 파일을 생성하고 아래와 같이 저장한다.
<Directory "/Users/사용자아이디/Sites/">
Options Indexes MultiViews
AllowOverride All
Order allow,deny
Allow from all
</Directory>

그리고 아파치를 재실행한다.
$ sudo apachectl restart

웹브라우저로 접속해 보자.
http://localhost:80/~사용자아이디

[HTML] input 태그 disabled & readonly 속성

2012-08-02T05:17:00.001-07:00

input tag 에 disabled 속성을 줄 수 있다.
disabled="disabled"

disabled 속성을 주게 되면 form submit 할 때 해당 값은 아예 보내지 않게 된다.

input tag 에 readonly 속성을 아래와 같이 줄 수 있다.
readonly="readonly"

form submit 할 때는 값이 포함되고 사용자의 조작을 막을 수 있다.

!) 만약 사용자의 조작을 막고 비활성화된 모습을 보여주고 싶다면 readonly 속성을 지정하고 style 을 지정하는 방법을 사용하자.

MyBatis + Software caused connection abort: recv failed

2012-08-02T05:12:00.000-07:00

참고: http://linuxism.tistory.com/580

서버를 실행하고 오래 접속을 하지 않으면 아래 와 같은 에러가 발생할 수 있다.
Software caused connection abort: recv failed

바로 다시 접속하면 연결이 되기는 하지만 신경이 쓰이는 부분이다.

DB 와 연결하고 오래 사용하지 않으면 연결이 끊긴다. 그래서 주기적으로 아주 간단한 query 를 날려 줄 필요가 있다.

아래와 같이 설정 하였다.

<environments default="development">
 <environment id="development">
  <transactionManager type="JDBC"/>
  <dataSource type="POOLED">
   <property name="driver" value="${jdbc.driver}"/>
   <property name="url" value="${jdbc.url}"/>
   <property name="username" value="${jdbc.username}"/>
   <property name="password" value="${jdbc.password}"/>
   <!-- Pool ping setting : http://linuxism.tistory.com/580 -->
   <property name="poolMaximumActiveConnections" value="20"/>
   <property name="poolMaximumIdleConnections" value="20"/>
   <property name="poolMaximumCheckoutTime" value="20000"/>
   <property name="poolPingEnabled" value="true"/>
   <property name="poolPingQuery" value="select 1"/>
   <property name="poolPingConnectionsNotUsedFor" value="43200"/>
   <property name="poolTimeToWait" value="30000"/>
   <property name="driver.encoding" value="UTF-8"/>
  </dataSource>
 </environment>

...

poolPingEnabled 를 true 로 설정한다.
poolPingQuery 는 select 1 과 같은 아주 간단한 query 로 설정한다.
poolPingConnectionsNotUsedFor 에 지정한 시간 만큼 사용하지 않으면 ping query 를 날린다. (millisecond 단위)

JSP + MyBatis + MySql 샘플

2012-07-20T10:07:00.000-07:00

참고: http://www.mybatis.org/core/ko/index.html

아래 순서로 설명.

1. MySql DB 구축
2. 웹앱 생성
3. MyBatis 설정
3.1. 필요한 라이브러리 설치
3.2. 환경 설정
3.3. 맵퍼 생성
3.4. JSP 연동
4. 웹 페이지 생성
5. 테스트

최종 폴더 구조:

1. MySql DB 구축
- 테스트용 계정을 아래와 같이 설정했다.
User name : "username"
Password : "password"

1) test 스키마를 생성한다.

mysql> create schema test;

2) users 테이블을 생성한다.

mysql> use test;

mysql> create table users (
`username` varchar(255) not null,
`password` varchar(255) not null,
`email` varchar(255) not null,
primary key (`username`)
) default charset=utf8;

3) user 를 생성한다.

mysql> create user 'username'@'localhost' identified by 'password';

4) test 스키마에 대한 권한을 설정한다.

mysql> grant all privileges on test.* to 'username'@'locahost';

2. 웹앱 생성
- 폴더 구조

+ $WEB_APP/
  + WEB-INF/
    + libs/
    - web.xml
  + index.jsp

web.xml 소스:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
 metadata-complete="true" version="3.0">
 
 <welcome-file-list>
 <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>
 
</web-app>

3. MyBatis 설정
3.1. 필요한 라이브러리 설치
- 다운로드

MySql JDBC driver 다운로드 : http://www.mysql.com/downloads/connector/j/
MyBatis 다운로드 : http://code.google.com/p/mybatis/downloads/list?can=3&q=Product%3DMyBatis
commons dbcp 다운로드: http://commons.apache.org/dbcp/
commons pool 다운로드: http://commons.apache.org/pool/

- 위 파일들을 다운로드 받아 $WEB_APP/WEB-INF/libs/ 에 복사한다.
!) MyBatis 폴더에 lib 폴더에 있는 파일들도 복사한다.

asm-3.3.1.jar
cglib-2.2.2.jar
commons-dbcp-1.4.jar
commons-logging-1.1.1.jar
commons-pool-1.6.jar
log4j-1.2.16.jar
mybatis-3.1.1.jar
mysql-connector-java-5.1.20-bin.jar
slf4j-api-1.6.2.jar
slf4j-log4j12-1.6.2.jar

3.2. 환경 설정
- mybatis 설정 파일인 mybatis-config.xml 파일을 생성한다.(파일 이름은 중요하지 않다)
!) com.sample.mybatis.config 패키지에 생성하였다.
!) 파일 내용: JDBC 설정만 들어 있다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>
 
 <environments default="development">
  <environment id="development">
   <transactionManager type="JDBC"/>
   <dataSource type="POOLED">
    <property name="driver" value="com.mysql.jdbc.Driver"/>
    <property name="url" value="jdbc:mysql://localhost:3306/test"/>
    <property name="username" value="username"/>
    <property name="password" value="password"/>
   </dataSource>
  </environment>
 </environments>

</configuration>

3.3. 맵퍼 생성
- 필요한 파일들

User.java - 레코드 아이템
UserMapper.java - SQL 문 수행을 위한 인터페이스
UserMap.xml - SQL 문 맵퍼

- 소스 코드들
com.sample.mybatis.dto.User.java:

package com.sample.mybatis.dto;

public class User {
 private String username;
 private String password;
 private String email;
 
 public String getUsername() {
  return username;
 }
 public void setUsername(String username) {
  this.username = username;
 }
 public String getPassword() {
  return password;
 }
 public void setPassword(String password) {
  this.password = password;
 }
 public String getEmail() {
  return email;
 }
 public void setEmail(String email) {
  this.email = email;
 }
}

com.sample.mybatis.dao.UserMapper.java:

package com.sample.mybatis.dao;

import java.util.List;

import com.sample.mybatis.dto.User;

public interface UserMapper {
 public List<User> selectAllUsers();
 public User selectUser(String username);
 public void insertUser(User user);
 public void updateUser(User user);
 public void deleteUser(String username);
}

com.sample.mybatis.sqlmap.UserMap.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN" "http://ibatis.apache.org/dtd/ibatis-3-mapper.dtd">

<mapper namespace="com.sample.mybatis.dao.UserMapper">

<select id="selectAllUsers" resultType="User">
 select username as username,
  password as password,
  email as email
 from users;
</select>

<select id="selectUser" parameterType="string" resultType="User">
 select username as username,
  password as password,
  email as email
 from users
 where username=#{username};
</select>

<insert id="insertUser" parameterType="User">
 insert into users (username, password, email)
  values (#{username}, #{password}, #{email});
</insert>

<update id="updateUser" parameterType="User">
 update users set
  password=#{password},
  email=#{email}
 where username=#{username}
</update>

<delete id="deleteUser" parameterType="string">
 delete from users
  where username=#{username}
</delete>

</mapper>

- mybatis-config.xml 에 추가

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>

 <!-- Type alias -->
 <typeAliases>
  <typeAlias alias="User" type="com.sample.mybatis.dto.User"/>
 </typeAliases>
 
 <environments default="development">
  <environment id="development">
   <transactionManager type="JDBC"/>
   <dataSource type="POOLED">
    <property name="driver" value="com.mysql.jdbc.Driver"/>
    <property name="url" value="jdbc:mysql://localhost:3306/test"/>
    <property name="username" value="username"/>
    <property name="password" value="password"/>
   </dataSource>
  </environment>
 </environments>

 <!-- UserMap.xml 등록 -->
 <mappers>
  <mapper resource="com/sample/mybatis/sqlmap/UserMap.xml" />
 </mappers>
</configuration>

3.4. JSP 연동
- 서버 시작시에 SqlSessionFactory 를 생성해야 한다.
- SqlSessionFactory 를 생성하는 서블릿을 생성한다.

com.sample.mybatis.config.MyBatisConfig.java : 서버 시작시 init 함수가 실행된다.

package com.sample.mybatis.config;

import java.io.IOException;
import java.io.InputStream;

import javax.servlet.http.HttpServlet;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

public class MyBatisConfig extends HttpServlet {
 
 private static SqlSessionFactory sqlSessionFactory;
 
 public void init() {
  
  try {
   InputStream inputStream = Resources.getResourceAsStream("com/sample/mybatis/config/mybatis-config.xml");
   sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
  } catch (IOException e) {
   e.printStackTrace();
  }
 }

 public static SqlSessionFactory getSqlSessionFactory() {
  return sqlSessionFactory;
 }

 public static void setSqlSessionFactory(SqlSessionFactory sqlSessionFactory) {
  MyBatisConfig.sqlSessionFactory = sqlSessionFactory;
 }
}

- web.xml 설정 : load-on-startup 을 설정해 줘야 한다.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
 metadata-complete="true" version="3.0">
 
 <!-- MyBatis initializer 등록 -->
 <servlet>
 <servlet-name>MyBatisInitializer</servlet-name>
 <servlet-class>com.sample.mybatis.config.MyBatisConfig</servlet-class>
 
 <load-on-startup>1</load-on-startup>
 </servlet>
 
 <welcome-file-list>
 <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>
 
</web-app>

4. 웹 페이지 생성
- User 레코드 생성, 수정, 삭제 할 수 있는 페이지 (validation 미포함)

user_control.jsp :

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.sample.mybatis.config.MyBatisConfig" %>
<%@ page import="com.sample.mybatis.dao.*" %>
<%@ page import="com.sample.mybatis.dto.*" %>
<%@ page import="org.apache.ibatis.session.*" %>
<%@ page import="java.util.*" %>

<%

// handle operation

if (request.getMethod().equalsIgnoreCase("POST")) {
 
 SqlSession sqlSession = MyBatisConfig.getSqlSessionFactory().openSession(true);
 try {
  UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
 
  String subtype = request.getParameter("subtype");
  if (subtype.equals("create-user")) {
   User user = new User();
   user.setUsername(request.getParameter("username"));
   user.setPassword(request.getParameter("password"));
   user.setEmail(request.getParameter("email"));
   userMapper.insertUser(user);
  } else if (subtype.equals("modify-user")) {
   User user = new User();
   user.setUsername(request.getParameter("username"));
   user.setPassword(request.getParameter("password"));
   user.setEmail(request.getParameter("email"));
   userMapper.updateUser(user);
  } else if (subtype.equals("delete-user")) {
   userMapper.deleteUser(request.getParameter("username"));
  }
 } finally {
  sqlSession.close();
 }
}

// select users
List<User> users = null;

SqlSession sqlSession = MyBatisConfig.getSqlSessionFactory().openSession(true);
try {
 UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
 
 users = userMapper.selectAllUsers();
 
} finally {
 sqlSession.close();
}
%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>User Control</title>
</head>
<body>

<h2>Create User</h2>
<form name="create-form" method="post">
<input type="hidden" name="subtype" value="create-user" />
Username: <input type="text" name="username" value="" /><br />
Password: <input type="password" name="password" value="" /><br />
Email: <input type="email" name="email" value="" /><br />
<input type="submit" value="Create" />
</form>

<h2>User List</h2>
<ul>
<%
if (users == null || users.size() == 0) {
 %><li>no user</li><%
} else {
 for (User user : users) {
%>
 <li style="border:solid 1px black;padding:4px;margin-bottom:5px;">
 <form name="modify-form" method="post">
 <input type="hidden" name="subtype" value="modify-user" />
 <input type="hidden" name="username" value="<%= user.getUsername() %>" />
 Username: <%= user.getUsername() %><br />
 Password: <input type="password" name="password" value="" /><br />
 Email: <input type="text" name="email" value="<%= user.getEmail() %>" /><br />
 <input type="submit" value="Modify" />
 </form>
 <form name="delete-form" method="post">
 <input type="hidden" name="subtype" value="delete-user" />
 <input type="hidden" name="username" value="<%= user.getUsername() %>" />
 <input type="submit" value="Delete" />
 </form>
 </li>
<%
 }
}
%>
</ul>

</body>
</html>

!) SqlSessionFactory.openSession() 함수에 true 를 인자로 주면 작업이 끝나면 자동으로 commit 한다.

5. 테스트

Javascript animation

2012-06-08T07:52:00.000-07:00

참고: http://www.w3schools.com/js/js_timing.asp

Animation 은 일정한 시간 간격으로 객체의 속성 등을 서서히 변화시키는 일이다.

일정한 시간 간격으로 원하는 작업을 하기 위해 setTimeout 함수를 이용한다.
setTimeout(function, delay);

예) 1초 마다 i 변수에 1을 더하고 표시한다.

<div id="value"></div>
<script type="text/javascript">
var i = 0;
var func = function() {
 i++;
 document.getElementById("value");
 setTimeout(func, 1000);
}
setTimeout(func, 1000);
</script>

Animation 객체

<script type="text/javascript">
function myanim(actionFunc, interval) {
 this.timer;
 this.interval = (interval != null) ? interval : 1000;
 this.actionFunc = actionFunc;
}
myanim.prototype.start = function() {
 this.stop();
 var me = this;
 if (this.actionFunc) {
  this.loop = function() {me.actionFunc();setTimeout(me.loop, me.interval);}
  this.loop();
 }
}
myanim.prototype.stop = function() {
 if (this.timer) clearTimeout(this.timer);
}
</script>

Animation 객체 사용하기

<div id="value2"></div>
<script type="text/javascript">
var j = 0;
var anim = new myanim(function(){j++;document.getElementById("value2").innerHTML=j;}, 1000);
</script>

Element 이동
div 객체의 위치 속성 값을 바꾼다.
1. div 준비

<div id="box1" style="position:absolute;width:100px;height:100px;border:solid 1px black"></div>

2. animation

<script type="text/javascript">
var x = 0;
var anim = new myanim(function(){
 x=(x+1)%100;
 document.getElementById("box1").style.left=x + "px";
}, 50);
</script>

Servlet 클래스 등록하기

2012-05-31T15:50:00.000-07:00

다음과 같은 순서다.
1. servlet 작성
2. servlet 컴파일
3. web.xml 에 등록

myapp 이라는 프로젝트를 만드는 것으로 가정한다.
대략 아래와 같은 구조이다.

/Users/username/

 + project/myapp/src/com/myapp/servlet/

   + HelloServlet.java

 + apache-tomcat/webapps/myapp

   + WEB-INF/

     + classes/com/myapp/servlet/

       + HelloServlet.class

     + web.xml

1. servlet 작성
javax.servlet.http.HttpServlet 클래스를 상속받아 doGet 또는 doPost 함수를 작성한다.
doGet 은 GET 방식으로 접속한 경우 호출 되는 함수이고 doPost 는 POST 방식으로 접속한 경우 호출되는 함수 이다.

예) src 라는 폴더를 만들고 com/myapp/servlet/ 폴더 구조로 HelloServlet.java 를 만듬

package com.myspp.servlet;

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;


public class HelloServlet extends HttpServlet {

 @Override
 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  PrintWriter out = response.getWriter();
  out.println("Hello World");
 }
}

2. servlet 컴파일

컴파일 하기 위해선 $TOMCAT_HOME/lib 에 servlet-api.jar 파일이 필요하다.
-cp 에 servlet-api.jar 를 추가한다.

예)
export TOMCAT_HOME=/Users/username/apache-tomcat/
export PROEJCT_HOME=/Users/username/project/myapp/

$ javac -cp $TOMCAT_HOME/lib/servlet-api.jar -d $TOMCAT_HOME/webapps/myapp/WEB-INF/classes $(find $PROJECT_HOME/src -name *.java)

!) 참고
- Ant 로 컴파일 : http://tjjava.blogspot.kr/2012/06/ant.html
- javac 로 컴파일 : http://tjjava.blogspot.kr/search/label/javac

3. web.xml 에 등록
servlet 태그로 servlet class 를 등록하고 servlet-mapping 태그로 url 를 매핑한다.
!) url pattern 작성시 / 로 시작해야 하는 점에 주의한다.

예)
<servlet>
<servlet-name>HelloServlet</servlet-name>
<servlet-class>com.myapp.servlet.HelloServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HelloServlet</servlet-name>
<url-pattern>/hello</url-pattern>
</servlet-mapping>

4. 테스트
tomcat 을 재시작한다.
http://localhost:8080/myapp/hello 로 접속하여 Hello World 를 확인 할 수 있으면 된다.

HTML Doctype

2012-05-18T18:46:00.002-07:00

HTML 문서의 처음에 doctype 을 지정할 수 있다.
명시적으로 doctype 을 설정함으로써 다양한 환경에서도 웹페이지가 원하는 모습으로 출력될 수 있도록 한다.
참고: http://hooney.net/2007/08/21/438/

예) html 문서의 처음에 아래와 같이 입력한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML4 와 HTML5 Doctype 의 차이점
HTML4 는 세가지 Doctype 이 있지만 HTML5 는 Doctype 이 하나이다.
참고: http://www.w3schools.com/html5/tag_doctype.asp

<!DOCTYPE html>

HTML4 보다 고민이 줄었고 외우기 쉬워졌다고 할 수 있겠다.

JSP session 처리

2012-05-15T17:11:00.001-07:00

[session 활성화]
session = request.getSession(true);
또는
<%@page session="true"%>

- 매개변수를 true 로 주면 기존에 session 이 존재하지 않은 경우 session 을 생성한다.
참고: http://docs.oracle.com/javaee/6/api/javax/servlet/http/HttpServletRequest.html#getSession(boolean)

!) session 변수는 내부적으로 미리 정의된 변수이기 때문에 새로 선언을 할 수 없다.

[session 값 설정]
session.setAttribute("key", "value");
- key 는 string 타입이고 value 는 Object 타입이다.

[session 값 얻기]
String value = (String)session.getAttribute("key");
- 리턴 타입이 Object 타입이기 때문에 Casting 해줘야 한다.

[session 값 지우기]
session.removeAttribute("key");

[session timeout 설정]

web.xml 파일 설정 (분 단위)
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>

PHP get / post 처리

2012-05-14T16:00:00.001-07:00

[Request method 확인]
$_SERVER['REQUEST_METHOD'] 값이 'POST' 또는 'GET' 인지 확인

[매개 변수 확인]
Method type 이 get 인 경우 $_GET['value'] 에 method type 이 post 이면 $_POST['value'] 로 확인

예)
<?php
if ($_SERVER['REQUEST_METHOD']=='POST') {
echo "POST<br />";
echo $_POST['id'];
} else {
echo "GET<br />";
echo $_GET['id'];
}
?>
<form method="post">
<input type="text" name="id" value="" />
<input type="submit" value="send" />
</form>