노드와 리액트를 연동시키기 위한 세팅을 알아보겠다. 프로젝트 생성 터미널에서 하단의 내용들을 순서대로 입력해준다. Node.js 서버 생성 $ mkdir node_react $ cd node_react $ npm init node_react 파일을 만들고 들어간다. $ npm install mongoose --save $ npm install express --save $ npm install nodemon concurrently --save-dev 몽고 DB 연동을 위한 mongoose Node.js의 웹앱 프레임워크인 Express 여러 개의 명령어를 동시에 실행하는 nodemon concurrently. 변경될 때마다 자동으로 재실행되게 한다. React App 생성 $ npm create reac..

Props 'props'는 properties를 의미한다. 부모 컨트롤러에서 자식 컨트롤러로 값을 전달할 때 사용한다. 매개변수에 각각의 변수들을 미리 입력해줌으로써 변수명을 그대로 가져올 수 있다. props 비구조 할당 매개변수에 각각의 변수명을 넘겨주지만 이를 비구조 할당으로 넘기려면 const {title,name,age,addr,tel,color,done} = props 로 입력해주면 된다. 또한 제일 기본적인 것은 const Test6Sub = (props) => { 의 경우, props.name 또는 props.age처럼 앞에 props로 붙여줘야 한다. propType - 데이터 유형 정의 Test6Sub.propTypes = { name: PropTypes.string.isRequired..

리액트를 사용할 툴인 비주얼 스튜디오 코드(Visual Studio Code)를 설치하고 ES6(ecmascript) 문법에 대해서 살펴보겠다! React 리액트란 UI를 구현하는 자바스크립트 라이브러리다. 페이스북에서 제공해주는 프론트엔드 라이브러리로 사용하는 큰 기업들이 많다. 자바스크립트 친화적인 es6기반이며 성능 최적화와 유지보수가 쉽다. 공식 라이브러리가 없고 자유도가 높다. Visual Studio Code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debug..

MVC 패턴에서 V(View)는 결과가 나타나는 화면이다. 모델을 통해 얻은 데이터와 뷰 템플릿을 통해 클라이언트에게 응답할 결과를 보여준다. 웹 문서의 기본 형태를 뷰 템플릿으로 두어 사용하며 템플릿도 여러 가지 종류가 있지만 그중에서도 오늘은 'ejs'를 알아볼 것이다. 자바스크립트 파일 내에서 html 코드를 입력하지 않고 따로 각각의 파일을 만들어서 데이터를 웹 화면에 출력시킬 수 있다. EJS https://ejs.co/ EJS -- Embedded JavaScript templates Simple syntax JavaScript code in simple, straightforward scriptlet tags. Just write JavaScript that emits the HTML you..

Semantic-Ui html 페이지의 화면을 Semantic-Ui로도 간단하게 꾸밀 수 있다. 사이트에서 제공되는 코딩을 통해 버튼, 입력창 등 원하는 곳에 맞춰서 사용하면 된다. 설치 방법과 사용 예제를 알아보겠다. Semantic UI 다운로드 https://semantic-ui.com/ Semantic UI Shipping Choose your shipping options semantic-ui.com 위의 사이트에서 알집 파일을 설치받는다. 그다음 이클립스 내에서 semantic.min.js 와 semantic.min.css를 'data'라는 폴더에 넣어주었다. 이는 밑에 파일 경로를 통해 확인할 수 있다. cmd 창 - 모듈 등록 npm install semantic --save cmd창에서 ..

오늘은 Ajax를 중심으로 게시판과 방명록 페이지를 만들어볼 것이다. 화면에 띄울 웹페이지는 게시판과 방명록 페이지 총 2개이다. 각각의 파일과 이를 잇는 파일들을 살펴보겠다. Guest.jsp 위의 파일을 만들기 전에 먼저 GuestDTO.java 파일에 getter,setter를 위해 변수들을 입력해주었으며 사용한 변수들 중 테이블에 만든 변수는 num, name, email, content, ipAddr, created 이며 listNum, pageNum 는 추가로 만들어주었다. body 구현될 body 부분을 간략하게 가져와보았다. 오늘은 css에는 집중을 안할 것이기 때문에 input의 id가 어떤건지 확인하면 된다. id는 jQuery를 읽어내기 위함이다. // 작성자 // '작성자' 외에 '..

DOM(Document Object Model) DOM이란? Document Object Model의 뜻으로 HTML 또는 XML 등의 문서를 객체로 표현할 때 사용하는 API이다. DOM API는 트리 구조로 문서를 표현한다. XML 예제 DOM 트리에서 Document는 문서 전체를 나타내는 것이며 는 document 하위의 루트 노드이다. Element는 각각의 태그를 의미한다. firstChild : book 노드 입장에서 첫번째에 위치한 'title' lastChild : book 노드 입장에서 마지막에 위치한 'author' (현재 2개밖에 안썼지만 그 이상이더라도 처음과 끝에 위치간 태그만 가져온다.) parentNode : title 노드 입장에서 'book', book 노드 입장에서 'b..

오늘은 Ajax를 통해 데이터를 주고 받는 코딩 예제를 살펴보겠다. Get 또는 Post 방식으로 데이터 보내기 Get 방식과 Post 방식으로 각각 데이터를 보내는 법을 알아볼 것이다. 총 2개의 파일로 진행된다. ajaxGetPost.jsp 먼저 웹페이지에 출력될 body 부분이다. form을 사용하여 사용자가 입력할 부분은 'greeting'으로 지정하였다. 각각의 'Get/Post전송' 버튼을 누를 때마다 다른 메소드가 실행되도록 하였다. 이제 해당 메소드들을 살펴보도록 하자. XMLHttpRequest 객체 생성 먼저 실행 시 getXMLHttpRequest를 실행되도록 하여 브라우저 상황에 따라 다른 XMLHttpRequest 객체 생성 코딩을 실행하도록 한다. 먼저 "Get전송" 버튼을 입력..

Ajax에 대한 정의와 이를 활용한 간단한 예제 코딩을 살펴보겠다. Ajax Ajax란 Asynchronous JavaScript + XML의 약어 2005년 James Garrett(제임스 가렛)이 소개한 개발 방법이다. 자바스크립트, CSS 등의 기존 웹기술을 그대로 활용하며 비동기 통신이며 페이지 이동 없이 빠르게 화면을 전환할 수 있다. 하지만 브라우저 호환성에 대한 한계가 있고 유지보수 또는 디버깅이 어렵다는 등의 장단점이 있다. jQuery와 함께 사용할 수 있다. 홈페이지에서 라이브러리를 다운로드하여 이클립스에 옮겨주면 된다. https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScri..