본문 바로가기

Archived(Programming)

 (74)
Web_MVC Framework 활용시 Web Container에서 MVC 처리(C->M->DB->V) Forward 분기 방식 / Redirect 분기 방식 Session 뿐 아니라 Request scope에도 Data를 보낼 수 있어야한다(이 때, 반드시 Forward 방식으로 전달해야함) # EL(Expression Language) 다양한 위치에 있는 데이터에 접근하기 위한 언어 문법체계가 직관적으로 사용이 가능하도록 만들어짐 JSP에서는 모든 변수의 생성과 선언을 반드시 표시를 해주어야 되지만 그러한 과정없이 바로 사용 가능 ${ EL내장객체.속성 } EL의 다양한 연산자 # JSTL JSTL은 JSP 표준 태그 라이브러리(JSP Standard Tag Library) 라이브러리는 여러 프로그램이 공통으로 사..
Web_웹의 기본 # MVC JSP만으로도 웹 구축 가능 / Servlet만으로도 웹 구축 가능 그러나 Servlet은 Controller의 역할, JSP는 VIEW의 역할을 수행할 수 있도록 @WebServlet("greeting.do") 어노테이션 > url로 들어오면 해당 Servlet을 실행시켜라 형상 관리(구성 관리)도 고려되어야 함 wildcart mapping *.inc 를 통해 사용자의 접근을 전부 모을 수 있다 package front.ctrl; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServle..
Web_JSP와 SERVLET CF. markup Language > tag와 text로 이루어진 언어(대표적으로 JSP) servlet의 생명주기는 container가 관리(IOC 제어역행) CF. http://127.0.0.1:8088/incWEB/greeting.do?key=value(>>query string) servlet 만들어서 구현하기(init, destroy, doGet, doPost) JSP는 요청에 대한 응답도 가능, SERVLET도 요청에 대한 응답 가능 SERVLET은 사용자 요청(진입)만 받고 JSP에 넘기자! 즉, SERVLET은 CONTROLLER / JSP는 VIEW의 역할 그러나, 자바와 브라우저로 서로 보내는 한글 다 깨짐(이러한 부분 주의) package ctrl; import java.io.IOE..
ReactJS_9_Deploy 다른 프로젝트에서는 배포에서 애를 많이 먹었다. 그러나 ReactJS에서는 비교적 간단한 편이다. 먼저 Build를 통해 배포의 준비를 한다(압축해줌). $ npm run build /package.json 내용 추가 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "homepage": "http://YoonShinWoong.github.io/movie_app", "scripts":{ "start": "react-scripts start", "build": "react-scripts build", "te..
ReactJS_8_MovieApp_보충 1. Data 받아오기 json 요청으로 가져온 데이터 중에서, 필요한 데이터 컬럼을 log를 통해 찍어서 확인한 뒤 그에 맞게 가져온다. 가져올 때는 최대한 Component 단위로 쪼개서 가져오는 것이 세련된 코드이다. /src/App.js import React, { Component } from 'react'; import './App.css'; import Movie from './Movie.js'; class App extends Component { state = { } componentDidMount(){ this._getMovies() } _getMovies = async() => { const movies = await this._callApi() this.setState({ movie..
ReactJS_7_Async_Await 1. 개념 Async Await는 우리가 작성한 코드들을 좀 더 분명하게 해준다. then을 계속해서 쓰면 헷갈리고 어려워진다 -> async await를 통해 처리하자. async: 비동기 방식으로 작업이 진행된다. await: 결과 값을 기다려서 받은 후에 작업이 진행된다. 바로 예제 코드를 보도록 하자. 2. 영화앱 참고사항 state = { } componentDidMount(){ this._getMovies() } // DidMount를 크게 만들지 않기 위해 나누기! _getMovies = async() => { // const movies의 값은 await 로 함수의 결과값을 기다린다 const movies = await this._callApi() this.setState({ movies ..
ReactJS_6_Fetch_Promise 1. 개념 Fetch는 쉽게 말하면 무엇인가 가져오는 것을 뜻한다. 우리는 ReactJs에서 XML 파일을 링크를 통해 가져오고자 하는데 이 때, Fetch를 통해 가져올 것이다. 구체적으로는 AJAX를 통해 비동기화 방식으로 새로고침 없이 가져온다. REACT에서는 AJAX와의 작업이 간편한데다가 사용도 쉽기에 AJAX와의 연동을 추천함. cf_비동기화 프로그래밍 비동기화란 쉽게 이야기하면, 순차적으로 실행되는 것이 아닌 별개로 실행되는 형태이다. 반드시 좋고 나쁜 것이 아니라 특징적인 것이다. Promises는 말 그대로 약속으로, 우리가 처리할 것들을 시나리오를 잡아준다. fetch와 promise를 통해 시나리오를 만들고 관리하면 보다 효율적인 처리가 가능하다. 이 때, fetch를 통해 링크로 ..
ReactJS_5_Smart_Dumb 1. 개념 Smart component는 state Dumb component는 stateless 어떤 컴포넌트는 return을 위해 존재한다(mount function update state와 같은 것들이 필요없음) props, html 만이 필요로 한다. 이러한 Component를 보고 Dumb Component라고 한다. (상태가 없다 -> 멍청하다, 직관적으로 받아들이기 쉽다) 즉, state도 없고 render도 없고 lifecycle도 없다. stateless로 바꾸는 방법은 function MoviePoster{{poster}}{} 와 같이 함수형 Component로 작성하면 된다. 밑의 예시에서 자세히 살펴보자. 2. 영화앱 /src/Movie.js import React from 'rea..

티스토리툴바