목록Front-end (81)
Daily coding
RMS : 2. JSX & Props 1. JSX Component : React에서 HTML을 반환하는 함수 Component의 첫 글자는 반드시 대문자 JSX는 React에서 Javascript와 HTML 사이의 조합. React에서 커스텀 한 개념 React에 특화된 개념으로 return 값으로 html 엘리먼트를 가지고 있다. React application은 한번에 하나의 컴포넌트만 랜더링 할 수 있다. 1) JSX 사용하기 다음과 같은 Potato.js 파일이 있다. // potato.js import React from "react"; function Potato(){ return ( I love Potato ); } export default Potato; 위의 코드는 JSX 문법으로 작성..
1. create-react-app 하나의 명령을 실행해서 React Web App을 빠르게 셋업해주는 기능 webpack, babel 등 다양한 라이브러리를 직접 다운로드하고 패키지를 세팅하지 않고도 자동으로 초기 세팅을 만들어 줌 사용방법 터미널에서 리액트 패키지를 생성하려는 폴더로 이동함 npx 명령어로 프로젝트 패키지 생성 : npx create-react-app folderName package.json, .gitignore, README.md 등 파일이 생김 npm commands : npm start : 리액트 프로젝트 개발 server 동작 및 시작 npm build : 설치한 번들을 정적 파일로 빌드 npm test : test runner 시작 npm eject : create-reac..
웹에서 클라이언트의 요청을 수행할 때의 통신방식은 2가지가 있다 1. 동기 통신 (Sychronous) : 2. 비동기 통신 (Asychronous) : 클라이언트에서 서버로 데이터를 요청한 것을 화면에 나타낼 때 페이지를 갱신하지 않고 불러오는 통신 방법이다. 비동기 통신을 사용하려면 몇 가지 방법이 있는데, ajax를 이용하지 않는 방법으로는 XMLHttpRequest를 사용하는 방법이 있다. AJax ( Asychronous Javascript And Xml ) : 클라이언트의 요청을 xml 또는 json, html 등의 형태로 전달하고, 요청한 데이터를 가져오는 비동기 방식 xml보다는 json형식을 많이 사용한다.
EL / Core / JSTL : jsp 파일에서 java형식의 코드를 대용할 수 있는 태그 jsp 기본 문법을 보완한다 --------- EL tag : front end에서 자바 코드를 사용하지 않기 위해 사용하는 스크립트 언어 Core tag : 제어문을 담당함 (사용을 위해서는 링크 걸어야 하며 jar파일필요) --------- JSTL : Java server page Standard Tag Library - 표준 액션태그로 처리하기 힘든 부분을 담당 > EL 문법 $ { scope.expr} - 기본적으로 지정한 scope 내에 반드시 setAttribute를 설정하여 사용할 수 있다. - getAttribute 함수를 사용하지 않고도 데이터를 꺼내 사용할 수 있다. - scope : page..
내장객체 : 동적 할당하지 않고 바로 사용할수 있는 Object - request : 가장 많이 사용, getParameter, setAttribute, getAttribute 등 접근 가능 - response : sendRedirect, - out - session .. 등 1. response : getParameter - 무조건 String값만 받음 0) { for(int i=0; i * 넘어올 때의 방식 ? 1) html : input, a href, form(action) 2) javascript : location.href 3) JQuery : submit() 2. response 1) sendRedirect : 페이지 이동시 사용(단순이동) - sendRedirect -> HttpServle..
jsp 작성해보기 1. 변수 선언 : 자바와 같은 데이터 타입을 사용한다. 다만, requset로 받은 데이터는 모두 String 타입이다. 2. 반복문 / 조건문 : 자바에서처럼 for문 등의 반복문과 if문을 사용할 수 있다. * html태그와 함께 사용하기 위해서 자바 코드는 반드시 안에 적고, html 코드는 반드시 바깥 쪽에 쓰도록 한다. ( 중괄호, 대괄호 주의 ) 3. JSP 선언부 : : 선언 부분의 영역 - 변수선언 (global= 전역변수), 함수선언, 클래스 선언 등 - 딱 한번만 실행되는 영역, 잘 사용하지는 않음 - 이 부분에는 클래스를 선언하거나 함수를 선언할 수 있다. 또한 전역 변수를 지정할 수 있는데, 페이지가 리로딩이 되더라도 전역변수의 값은 초기화 되지 않는다. 4. J..
JSP : Java Server Page (WAS) CLIENT ----- request ----- > SERVER (web) SERVER (DB) (EX> local host:8080/sample) java + html server + container (html코드) servlet + jsp내장 (get/post:보안문제) < ------ respond ------- 해석 Spring Framework MyBatis Framework * Servlet : Java 코드 안에 HTML코드 들어가 있음 * JSP : HTML안에 Java 코드 들어가있음 HTML, javaScript, css, jquery, java.. 모두 사용가능 함 * Jsp는 무조건 서버를 거쳐 해석 되어야 실행이 가능하다(서버코..
> Cookie와 Session login 후 필요 정보-> ID(String), 정보(Object : Id, pw ...) HTTP의 쿠키와 세션이 필요한 이유 ? : HTTP 프로토콜의 서버는 항상 클라이언트가 누구인지 확인 해야한다. 클라이언트가 요청을 한 후 응답을 받게되면 HTTP 프로토콜은 그 연결을 끊는데, 연결 비용을 줄이기 위해 커넥션을 재활용한다. (connectionless) 또한 통신이 끝나면 상태를 유지하지 않는 특징이 있어, 클라이언트가 요청한 상태정보는 유지하지 않게 된다 (stateless) 이러한 HTTP의 두가지 특성 때문에, 클라이언트가 요청한 정보를 담아둘 cookie나 session이 없다면 매 페이지마다 로그인을 해야하는 등의 불상사가 발생할 수 있다. 1. Coo..
Include & forward : include / forward 할 서블릿은 꼭 등록이 되어있어야함 ( @webServlet("/이름") ) 1. include : : 서블릿에 다른 서블릿을 끼워 넣음 (페이지 이동x) 뷰에 뿌려지는 url 주소는 처음 열었던 서블릿으로 되어있음 뷰를 따로따로 만들어놓고 붙여놓을 수 있음 * 사용법 - getRequestDispatcher 소속의 include() 함수 사용 RequestDispatcher dis = req.getRequestDispatcher("include"); // web.xml에 등록된 이름으로 dis.include(req, resp); *** include 하는 서블릿에는 printwriter를 close하면 안됨, -> 불러온 후 닫아버려서..