본문 바로가기

분류 전체보기

[JSP] 커스텀 태그를 이용해 Java 메소드 이용하기 Java단의 StringUtils 같은 유용한 문자열 처리 유틸리티를 JSP 에서 EL(Expression Language)을 사용하 편하게 사용 할 수 있다. 먼저 Java단에서 사용할 유틸리티 메소드 만든다. 메소드는 반드시 정적(static) 메소드로 만들어야 한다. 아래는 숫자로된 문자열을 받아서 3자리마다 콤마를 찍어서 돌려주는 기능을 하는 메소드이다. 그리고 커스텀 태그 설정 파일인 tld 파일을 생성한다. 파일은 WEB-INF 하위에 임의의 폴더를 만든 후 생성한다. 단, WEB-INF 하단의 classes, tags, lib 폴더는 사용할 수 없다. 여기서는 /WEB-INF/custom-tag/stringUtils.tld 로 만들었다. tld 파일에서 tld-version, jsp-vers.. 더보기
[초기셋팅] STS 설치 및 기본 설정 윈도우10 환경에서 설치하는 것을 기준으로 한다. 1. STS 공식 다운로드 사이트를 통해 STS를 다운로드 한다. - URL: https://spring.io/tool 2. 현재(2021.12.21) 기준 최신 버전인 4.13.0 버전의 윈도우 64bit 버전을 내려 받는다. 3. 다운로드 받은 파일을 압축해제한다. 4. contents.zip 파일안에 실제 STS가 들어있다. 원하는 폴더에 contents.zip 파일을 압축해제한다. - 알집의 경우 압축을 풀다가 파일을 찾을 수 없다는 오류가 발생할 수 있음. - 파일 경로가 255자를 초과해서 그런것이니 반디집을 이용하여 압축 해제를 진행한다. - 반디집의 경우 설정 > 환경설정 > 고급설정 에서 "260자 이상의 긴 파일 경로명 사용하기" 옵션을.. 더보기
JSP나 HTML 에서 Vue Component 사용하기 Vue 공식 가이드에서 컴포넌트를 등록할 때 아래와 같이 HTML 코드를 template 에 문자열로 만들어서 사용하도록 가이드가 되어 있다. // 등록 Vue.component('my-component', { template: '사용자 정의 컴포넌트 입니다!' }) // 루트 인스턴스 생성 new Vue({ el: '#example' }) HTML 코드가 짧다면 사용할 수도 있겠지만 조금만 내용이 많아져도 코드가 지져분해지며 가독성도 매우 떨어지게 된다. 그래서 HTML 코드는 html 파일로 만들어 작성하고 동적으로 페이지를 불러와 컴포넌트를 만드는 방법을 소개한다. Node 기반에서 Vue를 이용한다면 이러한 수고러움이 필요가 없겠지만 실무에선 생각보다 Node 기반 환경을 구성하기가 쉽지 않은 경.. 더보기
react-redux ## 설치 라이브러리$ yarn add redux react-redux redux-actions ## 필수 셋팅redux를 사용할 최상위 컴포넌트에 Provider를 이용해 store를 주입해야 한다.import { Provider } from 'react-redux'; Redux App ## Actions 셋팅import { createAction } from 'redux-actions'export const addText = createAction(TYPE_ADD);위에 선언한 actions인 addText를 호출할 때 파라미터를 입력하게 되면 다음과 같은 데이터 구조로 reducer에 전달된다.addText({text: 'abc', color: '#fff'}); /* 결과: { type: 'TYPE.. 더보기
Router 관련 Component ## React Router 설치$ yarn add react-router-dom ## BrowserRouter ComponentRoute를 사용할 Component 상위에 랩핑해준다. 사용 예제import React from 'react' import { BrowserRouter } from 'react-router-dom'; import App from '../shared/App'; const Root = () => ( ); export default Root; ## Route Componentimport { Route } from 'react-router-dom';url 패턴에 맞는 Component를 맵핑해 준다. 사용 예제 콜론(:)으로 되어 있는 URL은 맵핑되어 있는 Component에서 p.. 더보기
yarn 빌드시 path 경로 변경 build 이휴 생성되는 html 파일에 설정되어 있는 경로를 보면 '/' 로 시작 하는 것으로 되어 있다.contextPath나 테스트를 위해 기본 URL이 변경이 필요할 땐 적용하도록 하자. package.json 파일에 homepage 속성을 추가한다. 예제{ "name": "phone-book", "version": "0.1.0", "homepage": "./", "private": true, "dependencies": { "react": "^16.4.2", "react-dom": "^16.4.2", "react-scripts": "1.1.5" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test.. 더보기
유용한 라이브러리 ## cross-envimport 경로 설정을 지정한 절대 경로를 기준으로 지정할 수 있도록 함.ex ) ../someDir/some.js => someDir/some.js 설치$ yarn add cross-env package.json 설정에서 다음과 같이 cross-env NODE_PATH=src 추가"scripts": { "start": "cross-env NODE_PATH=src react-scripts start", "build": "cross-env NODE_PATH=src react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } ## query-stringURL 뒤의 파라미터를.. 더보기
ES5? ES6? 이게 뭐지? 아주아주 오래전에 넷스케이프(Netscape)라는 브라우저가 있었다.그동안 정적인 웹페이지만 제공했던 웹서비스에서 동적인 요소를 지원하기 위해 이 넷스케이프를 만든데서 Javascript를 만들어 쓰기 시작했다. 그랬더니 다른 브라우저 회사들이 보기에 그게 매우 좋아 보였나보다.. 너도나도 하나둘씩 자기네 브라우저에도 Javascript를 지원하기 시작한다.시간이 좀 지나고 보니 Javascript를 대부분의 브라우저에서 지원을 하긴 하는데.. 이게 또 자기네들 맘대로 적용을 해놓다보니 브라우저마다 조금씩 차이가 나기 시작한거지..이당시 개발을 한다고 생각해보자.. 모든 브라우저에서 동일한 기능을 구현하기 위해 브라우저별로 코드를 짜놔야 했을 것이다.얼마나 짜증나겠어... 그래서 ECMA 라는 국제기구에.. 더보기
보안 관련 HTTP 헤더 헤더명 설정 예제 설명 Content-Security-Policy Content-Security-Policy "default-src 'self'" 용도 : 컨텐츠 허용범위에 대한 정책 이 헤더를 사용하게 잘 돌고 있던 스크립트가 동작을 안할 수 있음.inline-script나 eval 및 css 내부의 data 속성도 동작을 안함. default-src 'self' 'unsafe-inline' 'unsafe-eval' 등 기타 옵션을 통해 해결 할 수 있음.자세한건 아래 링크 참조.https://www.html5rocks.com/en/tutorials/security/content-security-policy/ X-XSS-Protection X-XSS-Protection "1; mode=block" 용도.. 더보기
정규식을 이용한 이메일 패턴 체크 String 객체에 이메일인지에 대한 여부를 확인할 수 있는 validateEmail 함수를 추가 한다. 출력 결과[Log] true (localhost, line 12)[Log] false (localhost, line 13) 더보기

티스토리툴바