15 Feb 2021
|
JSP
JSP/Servlet - 이클립스, 톰캣 개발환경 구축
-
아파치 톰캣 개발환경 구축
- 동적 웹을 만들기 위해서는 웹 컨테이너인 톰캣이 필요하다. 정적 웹은 아파치로, 동적 웹은 톰캣으로 분할해서 사용하지만 수업의 편의를 위해 정적, 동적 처리 모두 아파치 톰캣 하나로 끝낸다
- 우선 http://tomcat.apache.org/ 에서 톰캣을 다운받자
- 안정성을 위해 가장 최신 버전보다 낮은 9 버전을 설치하자
- 인스톨러로 설치해도 되지만 zip 파일을 통으로 다운받는게 개발자 입장에서는 여러모로 편리하다. 다운받은 zip 파일을 C드라이브에 압축을 푼다
- 환경변수의 시스템 변수에 변수를 추가, 변수 이름은 CATALINA_HOME, 경로는 위에서 압축을 푼 경로이다
- 톰캣의 bin 폴더에 startup.bat을 실행하여 브라우저 상에서 http://localhost:8080/ 을 입력했을때 고양이가 나온다면 설치가 제대로 된 것이다. shutdown.bat을 실행시켜 서버를 종료하자
- 웹상에서 Java Beans, HTML, JSP, Servlet 4 가지의 프로그램을 개발할 것인데, Servlet은 보안 문제로 기본설정이 막혀있어 이를 해제해야한다
* 톰캣 폴더의 conf/context.xml을 편집기로 실행시켜 다음과 같이 권한설정을 한다
-
이클립스 톰캣 연동
- 이클립스의 [Window] - [preferences]의 [server] 탭에서 Runtime Enviroments를 찾아 톰캣이 설치된 경로를 추가한다
- 다시 [Window] - [Show View] - [Servers]를 클릭하여 콘솔창이 나오는 하단 구역에 server 메뉴가 뜨도록 설정한다
- 이 곳에서 톰캣 서버를 키고 끌 수 있는데, 작업을 마치고 이클립스 종료 전 서버를 꼭 꺼주는 습관을 들이자
-
동적 웹 프로젝트
- 이제 JEE 웹 프로젝트를 생성하여 테스트를 진행한다
- 새 프로젝트를 만들 때에는 [Dynamic Web Project]로 만든다
- Target runtime 설정에 아파치 톰캣과 그에 맞는 모듈 버젼을 설정할 수 있다
- Next를 누른 기본 설정의 src 폴더는 java 파일이 위치할 경로, build-classes는 compile한 class들이 위치할 경로이다. 기본 설정 그대로 Next 클릭
- Context root 설정과 directory 설정이 가능한데, 특별한 경우가 아니면 이대로 설정을 마친다. WebContent의 하위 영역에 JSP, HTML, 이미지, Javascript 파일 등이 위치한다.
- Generate web.xml deployment descriptor는 가급적 체크를 하여 생성하자
- WebContent의 하위 폴더인 WEB-INF 폴더에 web.xml 파일이 생긴것을 볼 수 있다
- 추후 이 파일로 Servlet 설정 등을 할 수 있다
- WebContent에 JSP 파일을 만들어 테스트를 진행하자
- 실행은 [Run As] 의 [Run on Server]로 실행
참고 자료
KG 아이티뱅크 강의 자료
ECLIPSE에 톰캣 서버 설정 및 JEE 프로젝트 만들기
11 Feb 2021
|
React
React.js Redux Advanced
-
Redux Middleware
- 미들웨어를 사용하면 action이 dispatch된 다음, reducer에서 해당 action을 받아와서 업데이트하기 전에 추가적인 작업을 할 수 있다
- 추가적인 작업이란 특정 조건에 따라 액션이 무시되게 만들거나, 액션을 콘솔 혹은 서버사이드에 로깅하거나, 디스패치된 액션을 수정해서 리듀서에게 전달하거나, 특정 액션이 발생했을 때 이에 기반하여 다른 액션 혹은 자바스크립트 함수를 실행시키는 등의 것들이다
- 미들웨어는 주로 asynchronous works(비동기 작업) 처리에 사용된다
/* 미들웨어 직접 만들기 */
import { createStore, applyMiddleware } from 'redux';
import reducer from 'path/reducer';
const logger = store => { // store를 파라미터로 받음
return next => { // 액션을 다음 미들웨어에게 전달, 다음 미들웨어가 없으면 리듀서에게 액션을 전달
return action => { // 현재 처리하고 있는 액션
console.log(action);
const result = next(action);
console.log(store.getState());
return result;
}
}
};
const store = createStore(reducer, applyMiddleware(logger));
ReactDom.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
-
Redux Devtools extension
- 크롬 확장앱인 redux devtools로 현재 store의 state 조회, dispatch된 action 등을 확인할 수 있다
/* index.js에 다음을 추가 (미들웨어를 사용할 경우 적용법) */
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(logger)));
-
Action Creator
- 지금까지는 action을 하드코딩으로 때려넣었다
/* 지금까지의 코드 */
const mapDispatchToProps = dispatch => {
return {
onAddCounter: () => dispatch({type: actionTypes.ADD, val: 10});
}
};
- action creator 메소드를 생성하여 dynamic하게 action을 생성할 수 있다
- 이렇게 코드를 짜면 비동기 작업을 처리할 때 유용하다
/* actions.js */
export const ADD = 'ADD';
export const add = (value) => {// action creator
return {
type: ADD,
val: value,
};
};
import * as actionCreators from 'actions';
const mapDispatchToProps = dispatch => {
return {
onAddCounter: () => dispatch(actionCreators.add(10));
}
};
-
redux-thunk
- redux-thunk는 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어이다
- redux-thunk를 이용하면 액션 객체가 아닌 함수를 디스패치 할 수 있다
- 위 코드처럼 action을 바로 return 하지 않고 함수로 감쌌기 때문에 작업을 뒤로 미룰 수 있다
- npm install –save redux-thunk
/* index.js */
import thunk from 'redux-thunk';
const store = createStore(reducer, composeEnhancers(applyMiddleware(logger, thunk))); //미들웨어 삽입
/* actions.js */
export const add = (value) => {
return {
type: ADD,
val: value,
};
};
export addAsync = (value) => {// thunk로 비동기 처리
return dispatch => {
setTimeout(()=> {
dispatch(add(value))
}, 2000);
}
};
- 위의 코드에서 thunk는 두 번째 파라미터로 getState를 받으면 store의 현재 state에도 접근할 수 있다
- 현재 state에 따라서 dispatch 여부를 결정하는 등 logic을 세울 수 있다
- state를 직접 바꾸는 것도 가능하나, getState의 남용보다는 reducer에서 처리하는 것이 좋다
export addAsync = (value) => {// thunk로 비동기 처리
return (dispatch,getState) => {
const oldState = getState().state; // 현재 state에 접근
console.log(oldState);
setTimeout(()=> {
dispatch(add(value))
}, 2000);
}
};
참고 자료
reactjs.org - 공식홈페이지
Udemy - React The Complete Guide
redux 공식 홈페이지
벨로퍼트와 함께하는 모던 리액트
redux-thunk Github
