728x90
반응형

 

관리자 화면에서 공지사항이나 자주묻는 질문들을 저장하고, Client 에서 보여주도록 진행하고 있습니다.

 

하지만 Textarea 는 Enter 입력까지도 잘 보이지만 Content 내용에 맞게 높이조절을 하기가 여간 쉬운일이 아니었습니다.

 

PC 화면에서 로드가 되었을때 내용의 Scroll 의 높이를 가져온뒤 그 높이만큼 Textarea 높이를 바꿔주는 방식을 많이 사용하는것 같은데

 

이게 문제가 발생되는건 브라우저 크기가 변할때에는 반응을 하지 않아 최초 로드된 높이만을 갖고 있다는것입니다.

 

 

 

 

이 단점까지 처리해주는 라이브러리를 찾을수 있었습니다.

 

내용은 아래의 주소로 이동해서 확인할 수 있습니다.

 

https://www.jacklmoore.com/autosize/

 

Autosize

Autosize A small, stand-alone script to automatically adjust textarea height. Demo Released under the MIT License, source on Github (changelog)   Download Install via NPM npm install autosize Browser compatibility Chrome Firefox IE Safari iOS Safari Androi

www.jacklmoore.com

 

 

 

다운로드 받거나 CDN 을 사용하여 script를 불러옵니다.

 

<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>

 

autosize 라는 함수를 호출하면 간단하게 자동 높이 조절이 됩니다.

// TextArea 자동 높이 설정
autosize($("textArea"));

 

 

 

기본 사이즈는 css를 통해 주면 됩니다.

 

 

 

내용을 입력하거나 저장된 데이터를 불러와도 높이가 자동으로 설정됩니다.

 

 

 

반응형 홈페이지를 만드는 분들이라면 autosize 라는 라이브러리를 추천드리겠습니다.

 

728x90
반응형
728x90
반응형

 

홈페이지 개발을 하다보면 많이보는 '개인정보처리방침' 을 쉽게 만들수 있습니다.

 

아래의 URL로 이동합니다.

 

https://www.privacy.go.kr/a3sc/per/inf/perInfStep01.do

 

개인정보처리방침 만들기

개인정보처리방침 새로 만들기 개인정보처리방침 새로 만들기 - 개인정보보호법 및 시행령, 표준 개인정보 보호지침에 근거하여 개인정보처리방침 기본 항목에 대한 예시를 작성할 수 있도록 도와드리는 서비스입니다. 해당 공공기관 또는 사업자께서는 생성된 개인정보처리방침을 참조하여 사업 목적 및 범위에 맞도록 수정하여 사용하시기 바랍니다. 개인정보처리방침 작성예시

www.privacy.go.kr

 

 

 

 

개인정보도우미 -> 개인정보처리방침 만들기 메뉴를 통해 만들수 있습니다.

 

처리방침명은 일반적으로 회사명을 작성합니다.

 

 

 

필수 정보들을 입력 후 다음을 클릭합니다.

 

 

 

 

필수적 기재사항들과 선택적 기재사항을 확인 후 다음을 클릭합니다.

 

 

1. 개인정보의 처리 목적을 확인합니다.

 

 

2. 개인정보의 처리 및 보유 기간을 작성합니다.

 

3. 개인정보의 제3자 제공 작성

개인정보를 제공받는자와 개인정보를 이용하는 목적을 작성합니다.

 

그리고 제공하는 개인정보 항목을 선택합니다.

 

 

 

 

제공받는 자의 보유-이용기간을 선택합니다.

 

 

 

4. 개인정보처리의 위탁 작성

위탁 사무명과 위탁받는 자(수탁자)를 입력합니다.

 

그리고 위탁하는 업무의 내용을 선택합니다.

 

 

 

 

위탁기간을 선택합니다.

 

 

 

 

5. 정보주체와 법정대리인의 권리.의무 및 그 행사방법 작성

 

 

 

6. 처리하는 개인정보의 항목 작성

개인정보 처리업무를 작성합니다.

 

필수항목과 선택항목을 선택합니다.

 

 

 

 

7, 개인정보의 파기 작성

개인정보의 파기내용을 작성합니다.

 

 

8. 개인정보 자동 수집 장치의 설치-운영 및 그 거부에 관한 사항

운영 상황에 맞게 자동 수집 장치 설치에 대해 선택합니다.

 

 

 

9. 개인정보 보호책임자 작성

개인정보 보호책임자 정보를 작성합니다.

 

 

10. 개인정보 처리방침 변경 작성

개인정보 처리방침 변경 정보를 작성합니다.

 

 

11. 개인정보의 안전성 확보조치 작성

개인정보 안전성 확보조치 항목을 선택합니다.

 

 

 

지금까지 선택하고 작성한 내용이 아래와 같이 보여집니다.

 

작성한 내용을 다운로드 받을 수 있으며 잘못된 내용이 있다면 수정도 가능합니다.

 

 

 

이렇게 간단하게 생성한 '개인정보처리방침'을 홈페이지에 게재하면 됩니다.

 

이젠 다른 홈페이지의 개인정보처리방침을 copy 하지 않고 쉽고 간편하게 만들어보세요.

 

728x90
반응형
728x90
반응형

 

한 서버에 java 버전이 하나라는 확신을 할 수는 없습니다.

 

기존에 설정된 서비스는 JAVA_HOME 환경변수를 보고 있고 새로 운영할 서비스는 새로운 JDK 버전을 설치해야하는 상황이 생겼습니다.

 

JAVA_HOME을 새로운 JDK version으로 보게 한다고 해서 문제가 되지 않을수도 있지만 특정 JDK 에서는 하위 version에서 사용하는 기능을 제거하여 경량화 한 JDK를 배포 하기도 하였습니다.

 

 

 

 

이러한 문제를 발생시키지 않으려면 특정 Was 설정에서 구동시 JAVA_HOME 설정이 어떤 위치를 보느냐가 중요합니다.

 

우선 자바가 설치되어있는 경로를 확인하고 tomcat 경로에서 bin/catalina.sh 파일을 열어줍니다.

 

/usr/java 경로에 설치되어있는 jdk 버전을 확인하고 catalina.sh 상단에 아래와 같은 문구를 추가 하여줍니다.

JAVA_HOME=/usr/java/jdk1.8.0_202

 

 

 

 

tomcat 경로에서 /bin 디렉토리 안의 startup.sh 명령어를 입력하여 tomcat을 실행합니다.

./startup.sh 

 

 

 

 

 

Using CATALINA_BASE:   /data/tomcat9
Using CATALINA_HOME:   /data/tomcat9
Using CATALINA_TMPDIR: /data/tomcat9/temp
Using JRE_HOME:        /usr/java/jdk1.8.0_202
Using CLASSPATH:       /data/tomcat9/bin/bootstrap.jar:/data/tomcat9/bin/tomcat-juli.jar

 

위와같이 설정한 jdk가 잘 나온다면 잘 처리 된것입니다.

 

새로운 Jdk 설치는 이제 겁내지말고 즐기면서 하는 개발자가 됩시다.

 

728x90
반응형

'프로그래밍 > Server' 카테고리의 다른 글

[AWS] AWS 가입하기  (0) 2020.05.20
[CentOS] yum open jdk 설치  (0) 2019.07.16
[Tomcat] cannot restore segment prot after reloc: Permission denied  (0) 2019.06.17
[WebtoB] Log Directory  (0) 2019.04.15
[WebtoB] config Directory  (0) 2019.04.15
728x90
반응형

 

CentOS 서버에 jdck 1.8 을 설치하였고, Tomcat 9 버전도 같이 설치하였습니다.

 

tomcat 을 실행하는 순간 아래와 같은 오류가 발생하였습니다.

failed /usr/java/jdk1.8.0_202/jre/lib/i386/server/libjvm.so, 
because /usr/java/jdk1.8.0_202/jre/lib/i386/server/libjvm.so: 
cannot restore segment prot after reloc: Permission denied

 

 

 

 

터미널에서 아래 명령을 실행하여 SELinux를 비활성화 합니다.

/usr/sbin/setenforce 0

 

 

 

 

SELinux를 활성화 하려면 아래 명령을 실행합니다.

/usr/sbin/setenforce 1

 

 

 

 

원하는 명령을 실행한다음 Confluence를 다시 시작합니다.

 

원하는 오류는 없어졌지만 서버 설정은 너무나 많은 정보로 뭉쳐져 있기에 어려움이 많은것 같습니다.

 

그래도 열심히 정리를 하도록 하겠습니다.

 

728x90
반응형

'프로그래밍 > Server' 카테고리의 다른 글

[CentOS] yum open jdk 설치  (0) 2019.07.16
[Tomcat] JAVA_HOME 수동 설정  (0) 2019.06.18
[WebtoB] Log Directory  (0) 2019.04.15
[WebtoB] config Directory  (0) 2019.04.15
[WebtoB] Directory 구조  (0) 2019.04.15
728x90
반응형

 

Spring Boot security 를 구현하여 로그인, 로그아웃을 처리하고 있습니다.

 

고객이 로그아웃을 할때에 기록을 남겨 달라는 고객사의 요청이 있었습니다.

 

Security 를 사용할때 편하게 Session이 소멸시점을 체크할 수 있는 방법을 알아보겠습니다.

 

 

 

 

Security 설정에서 logout 을 세션을 초기화하는 코드를 작성합니다.

.and().logout()
      .logoutUrl("/logout")
      .logoutSuccessUrl("/login")  // 로그아웃 성공시 메인 고정
      .invalidateHttpSession(true)    // session invalidate
      .deleteCookies("JSESSIONID")	// cookie
      .permitAll()

 

 

 

Member Entity 입니다.

@Data
@Entity
@Table(name = "테이블")   // 회원 테이블
public class Member implements UserDetails {

	...
    
    /************************************
        UserDetails Override functions
     ************************************/
    /**
     * 사용자에게 부여된 권한
     */
    @Override
    public Collection<? extends GrantedAuthority> getAuthorities() {
    	Set<GrantedAuthority> roles = new HashSet<>();
		role.forEach(e -> {
    		roles.add(new SimpleGrantedAuthority(e.getValue()));
    	});
    	return roles;
    }

    /**
     * 사용자 인증에 사용된 암호
     */
    @Override
    public String getPassword() {
        return memberPw;
    }

    /**
     * 사용자 인증에 사용된 이름
     */
    @Override
    public String getUsername() {
        return memberId;
    }

    /**
     * 사용자 계정 만료 여부
     */
    @Override
    public boolean isAccountNonExpired() {
        return true;
    }

    /**
     * 사용자가 잠김 여부
     */
    @Override
    public boolean isAccountNonLocked() {
        return true;
    }

    /**
     * 사용자의 자격증명(암호)이 만료 여부
     */
    @Override
    public boolean isCredentialsNonExpired() {
        return true;
    }

    /**
     * 사용자의 사용가능여부
     */
    @Override
    public boolean isEnabled() {
        return true;
    }
}

 

 

 

 

 

session 이 소멸하게 되면 아래의 listener 로 진입합니다.

 

SessionDestroyedEvent를 implemets 하면 security 로그인했던 사용자 정보를 담아두고 있습니다.

 

사용자는 UserDetails 를 상속받거나 User를 구현했다면 정보를 조회할 수 있습니다.

 

이때는 request 가 없기 때문에 필요한 정보는 미리 UserDetails 에 넣어둔 뒤 소멸되는 시점에 기록을 남기면 됩니다.

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationListener;
import org.springframework.security.core.context.SecurityContext;
import org.springframework.security.core.session.SessionDestroyedEvent;
import org.springframework.stereotype.Component;

import com.kcknock.primary.domain.Member;
import com.kcknock.primary.domain.MemberState;
import com.kcknock.primary.repository.MemberStateRepository;

/**
 * sessionDestroyed 요청시
 * @author gigas
 */
@Component
public class SessionDestroyListener implements ApplicationListener<SessionDestroyedEvent>{

	@Autowired
	private MemberStateRepository memberStateRepository;
	
	@Override
	public void onApplicationEvent(SessionDestroyedEvent event) {
		List<SecurityContext> securityContexts = event.getSecurityContexts();

        for (SecurityContext securityContext : securityContexts) {
        	
        	Member member = (Member)securityContext.getAuthentication().getPrincipal();
        	
        	MemberState memberState = new MemberState();
        	memberState.setMemberId(member.getMemberId());
        	memberState.setType("로그아웃");
//        	memberState.setDevice("");
//        	memberState.setIpAddr("");
//        	memberState.setOs("");
        	
        	memberStateRepository.save(memberState);
        }
	}
}

 

 

 

 

소멸시점을 check 하는것처럼 생성시점도 아래와 같이 확인할 수 있습니다.

@Component
public class SessionCreateListener implements ApplicationListener<SessionCreationEvent> {

	@Override
	public void onApplicationEvent(SessionCreationEvent event) {
    
    }
}

 

 

 

 

이와같은 코드를 작성하면서 세션이 초기화되면 자동로그아웃을 구현해야겠다는 생각이 들었습니다.

 

하지만 찾아본 결과로는 해당 session 을 처리하는 곳에선 request 정보가 없기때문에 처리가 어렵다는 글들이 많던데..

 

최대한 '자동로그아웃' 기능을 찾아서 글로 남겨보도록 하겠습니다.

728x90
반응형
728x90
반응형

 

웹에서 자주 다루던 '아이디 기억하기' 를 해보려고 했던적이 있는데. 간단한 코드인데도 동작을 안하고.. 몇줄이나 따라서 썻지만 안되면 다 지우고 했던적이 한두번이 아닙니다.

 

찾다보니 간단하게 cookie를 사용할 수 있도록 jquery 에서 지원하는 plugin을 찾았습니다.

 

다운로드는 아래 url로 이동해서 받으면 됩니다.

 

https://plugins.jquery.com/cookie/

 

jQuery Cookie | jQuery Plugin Registry

jQuery Cookie by Klaus Hartl A simple, lightweight jQuery plugin for reading, writing and deleting cookies. Versions Version Date 1.4.1 Apr 27 2014 1.4.0 Oct 5 2013 1.3.1 Jan 25 2013 1.3.0 Jan 24 2013

plugins.jquery.com

 

 

 

 

요즘은 웹 cookie를 잘 사용하지 않고 기본적으로 javascript 에서 지원하기 때문에 version이 올라가지 않습니다.

 

Download now 를 클릭하여 다운로드를 받습니다.

 

 

Jquery 와 함께 load

다운로드를 받았다면 아래와같이 코드에 script를 불러옵니다.

<script type="text/javascript" src="https://code.jquery.com/jquery-x.x.x.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

 

 

Cookie 생성

// 세션 쿠키 생성 - 브라우저를 종료하면 소멸
$.cookie('name', 'value'); 

// 7일 뒤에 만료되는 쿠키 생성 
$.cookie('name', 'value', { expires: 7 }); 

// 전체 사이트에 대해 7일 뒤에 만료되는 쿠키 생성 
$.cookie('name', 'value', { expires: 7, path: '/' });

 

 

Cookie 조회

// key로 cookie 조회
$.cookie('name'); 

// {key: value} 형태의 모든 쿠키 반환
$.cookie();

 

 

Cookie 제거

// 기본 cookie 제거 방법
// 성공여부에 따른 boolean 값을 반환
$.removeCookie('name'); 

// domain 설정
$.cookie('name', 'value', { path: '/' }); 

// domain을 설정시 cookie 제거방법
$.removeCookie('name', { path: '/' });

 

간단하게 사용하는 방법을 알아보았습니다.

 

728x90
반응형
728x90
반응형

 

HTML 에서 정식으로 날짜 입력폼을 지원하고 있습니다.

 

input 태그에 type 을 'date' 로 지정해주면 간단하게 만들어집니다.

 

 

 

 

이로 인해서 jquery에서 지원하던 datePicker를 사용하지 않고도 쉽고 빠르게 만들수 있게 되었습니다.

 

month 까지만 입력을 제한할 수도있고 시작날짜를 value 속성을 통해 지정할 수도 있습니다.

 

그리고 최소 입력 날짜와 최대 입력날짜도 제한할 수 있습니다.

 

 

 

 

input date를 사용하면서 문제는 기본 설정으로 연도입력이 6글자까지 입력이 된다는 문제가 있습니다.

 

아래와 같이 아무렇게나 입력해봐도 6글자까지 입력이 되고 있습니다.

 

 

 

JavaScript 에서나 Jquery 에서 입력한 값을 정규표현식으로 걸러내는 방식도 있지만 입력자체를 막아야 된다는 생각이 들었습니다.

 

정말 간단한 속성을 설정하여 년도 yyyy 즉 년도 입력을 4자리만 제한해 보겠습니다.

 

 

 

 

아래와 같이 max값을 주어 yyyy 년도값을 4자리로 제한을 주었습니다.

 

정말 간단하게 max 속성을 주는것만으로도 입력을 제한할 수 있습니다.

<input type="date" max="9999-12-31">

 

 

 

다양한 브라우저에서 쉽고 간편하게 input date를 사용해보세요.

 

728x90
반응형
728x90
반응형

 

다음 예제는 데이터가있는 테이블  렌더링하는 두 가지 다른 흥미로운 조각 사용법을 보여줍니다 . 

 

이것은 변경할 수있는 테이블 헤더와 데이터가 렌더링되는 본문의 두 가지 중요한 부분으로 구성된 재사용 가능한 테이블 조각입니다.

<table>
    <thead th:fragment="fields(theadFields)">
        <tr th:replace="${theadFields}">
        </tr>
    </thead>
    <tbody th:fragment="tableBody(tableData)">
        <tr th:each="row: ${tableData}">
            <td th:text="${row.id}">0</td>
            <td th:text="${row.name}">Name</td>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

 

 

 

 

이 테이블을 사용하려면 필드 함수를 사용하여 자체 테이블 헤더를 전달할 수 있습니다 . 

 

헤더는 myFields 클래스  참조됩니다 . 테이블 본문은 데이터를 매개 변수로 tableBody 함수 에 전달하여로드됩니다 .

<body>
    <header th:replace="fragments/general.html :: header"> </header>
    <table>
        <thead th:replace="fragments/tables.html
              :: fields(~{ :: .myFields})">
            <tr class="myFields">
 
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <div th:replace="fragments/tables.html
          :: tableBody(tableData=${data})">
        </div>
    </table>
    <div th:replace="fragments/general.html :: footer"></div>
</body>

 

 

 

이것이 최종 페이지의 모양입니다.

<body>
    <div>
        <h1>Thymeleaf Fragments sample</h1>
    </div>
    <div>Data received</div>
    <table>
        <thead>
            <tr class="myFields">
 
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>John Smith</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>Jane Williams</td>
            </tr>
        </tbody>
    </table>
    <footer>
        <a href="/spring-thymeleaf/fragments">Fragments Index</a> |
        <a href="/spring-thymeleaf/markup">Markup inclussion</a> |
        <a href="/spring-thymeleaf/params">Fragment params</a> |
        <a href="/spring-thymeleaf/other">Other</a>
    </footer>
</body>

 

 

 

템플릿 관리를 쉽게 할 수있는 강력한 도구 인 Thymeleaf Fragments를 사용하여보기 구성 요소를 재사용하는 방법을 살펴 보았습니다.

 

728x90
반응형
728x90
반응형

 

이전글에선 티스토리 에디터 업데이트가 되고난 후에 Color Scripter 붙여넣기가 정상적으로 되지 않았던 문제에 대해서 작성하였습니다.

 

https://gigas-blog.tistory.com/128

불러오는 중입니다...

 

 

 

이번글에선 티스토리 업데이트가 되고 나서 강력한 기능인 코드블럭에 대해서 알아보겠습니다.

 

글쓰기 화면으로 이동하여 새로운 에디터를 사용하고 계시다면 아래와 같은 화면이 보이게 됩니다.

 

상단의 더보기 버튼을 클릭합니다.

 

 

 

 

 

여러가지 메뉴들이 펼쳐지는데 코드블럭 메뉴를 클릭합니다.

 

아래와같이 Color Script 처럼 코드를 입력하는 화면이 보여지게 됩니다.

 

 

 

 

여러가지 코드 설정도 가능합니다.

 

코드에 맞게 색상이 표현됩니다.

 

 

 

 

 

삽입을 할 코드를 붙여넣고 확인을 클릭합니다.

 

 

 

 

 

그러면 이전화면으로 전환되며 아래와 같이 코드가 깔끔하게 붙여지는것을 확인할 수 있습니다.

 

 

기존에 Color가 입혀진 코드를 입혀본적도 있지만 다른사이트를 거치지 않고 티스토리 에디터에서 바로 삽입을 할 수 있다는 장점이 있습니다.

 

몇번의 설정없이 바로 사용하기에 정말 좋은 방법인것 같습니다.

 

728x90
반응형
728x90
반응형

사이트에 따라서 날짜를 Database에 저장하는 방법이 조금씩 다릅니다.

 

TimeStemp로 하거나 Date로 하거나 String으로 저장하기도 하죠.

 

때에 따라서 Client에서 보여주는 Thymeleaf 에서 Format을 해야합니다.

 

 

 

 

일반적인 LocalDateTime 형태의 객체를 변환하려면 아래와 같이 한다는것을 쉽게 찾아볼 수 있습니다.

<td th:text="${#temporals.format(user.crtDtm, 'yyyy-MM-dd HH:mm')}"></td>

 

 

 

하지만 String 문자로 저장된 날짜를 yyyy-MM-dd 형태로 출력하려는 방법을 찾아보니 잘 나오지 않았습니다.

 

이런 형태로 하라는 글도 있었는데 너무 길고 지저분해 보이죠..

<th:block th:with="sdf = ${new java.text.SimpleDateFormat('yyyy-MM-dd''T''HH:mm:ss')}">
    <p th:text="${#dates.format(sdf.parse(myData.mdProperties.get('completionDate')), 'dd-MM-yyyy')}" />
</th:block>

 

 

늘 그렇지만 레퍼런스를 봐야겠다고 생각하고 들어갔지만 Thymeleaf Doc 은 간단한것만 나와있고 코드를 찾아가면서 분석해야합니다.

 

그냥 IntelliJ 자동완성기능을 사용하여 찾았습니다..

 

 

 

이렇게 작성해주었고. 내용은 '20190516' 이렇게 저장이 되있는 값을 사용했습니다.

 

현재 형식대로 두번째 인자값으로 넣으주면 기본 format 형태인 yyyy-MM-dd 로 출력이 됩니다.

<td th:text="${#temporals.createDate(user.crtDtm, 'yyyyMMdd')}"></td>

 

어렵지 않는 내용은 검색보단 직접 찾아보는게 빠를때도 있다는것을 다시 느끼게 해주는 시간이었습니다.

 

728x90
반응형

+ Recent posts