전체 글

로그인 페이지에서 로그인버튼을 클릭 submit 이벤트 발생 -> 기본이벤트 핸들러를 막도록 함사용자가 버튼을 눌렀을 때만 이벤트가 발생해야 되기 떄문에 기본 이벤트 핸들러를 막아야한다. form의 객체를 얻고 그 값을 loginFormObj 변수에 담는다. submit 이벤트가 발생했을 때 리턴값을 false로 하여 이벤트 헨들러를 금지한다. 현재는 로그인버튼을 눌러도 아무 반응이 없다. form의 경로는 아래와 같다. ajax 요청-> 결과를 가져와서 특정값 호출 url, method, data, seccess, error 의 프로퍼티를 정의한다. url 은 ajax 을 요청할 url이 된다. 아래 코드의 위치경로를 나타낼것이다. 이것을 바로 나타내지 않고 새로운 변수에 값을 대입해서 나타낼 것이다...

url에 /move로 데이터를 요청 MoveServlet 에서 요청받은 데이터값을 얻기 - redirect, forword, include 로 표현 MoveServlet -> ResultSevlet 으로 응답출력하기 1. url에 move로 데이터 요청 http://localhost:8888/firstEE/move?t=a 2. MoveServlet 에서 요청받은 데이터값을 얻기 1) 응답형식지정 response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); 2) 요청전달데이터opt값 얻기 - redirect, forword, include 로 표현 3. MoveServlet -> ResultSevlet 으로 응답출력하기 출력값 ..

useState 를 사용하여 버튼 클릭시 1씩 증가시키기 let num =1; const add =() =>{ num++ console.log('add',num); } return ( 숫자: {num} 더하기 ); } export default App; 위의 코드를 보면 num 변수를 정의하여 함수에 num++ 로 하나씩 증가하도록 하였다. 일반적인 변수는 랜더링시점에 대해 리액트가 알지 못하기 때문에 상태값을 변경해야 한다. let num = 1; 의 구문을 주석처리 하도록 하겠다. useState - react안에 hooks 라이브러리를 사용한다. //let num =1; const [num, setNum] = useState(1); //react안에 hooks라이브러리 사용 const add =()..

불변함수 -> 깊은 복사 함수 1. spread (전개) 연산자 2. concat (추가하기) 3. filter 걸러내기 (삭제시 사용) 4. slice 잘라내기 5. map 1. 스프레드(전개) 연산자 [...a]를 사용하면 배열을 복사한다. b의 값에 4를 넣고 확인을 해보았다. 이런식으로 복사해서 추가하는데 사용할 수 있다. 결과값 2. concat (추가하기) a2에 4를 추가한 값이 b2에 들어간다. - 깊은 복사 만약 a2.concat(4) 이 아닌 a2.push(4)를 할 경우에는 b2의 값은 4만 출력된다. 3. filter 걸러내기 (삭제시 사용) const b3 = a3.filter((n) => { return n != 1; }); filter 안에는 함수가 들어간다. ( )=>{ };..

보호되어 있는 글입니다.

HTTP특징이 상태정보를 저장하지 않기 떄문에 저장소가 필요하다. 4개의 저장소를 가지고 있으며 사용하는 목적에 따라 알맞게 사용한다. pageContext - jsp 파일내에서만 사용가능 application - 공통저장소 , 전체 1개만 존재 session - 개별저장소, 최소한의 data : 메모리 부담 request - 요청할때 마다 생성, 요청을 하면 jsp가 응답 Scope 기본 객체 유효 범위 설명 pageContext 1개 JSP 페이지 JSP 페이지의 시작부터 끝까지. 해당JSP내부에서만 접근가능. 페이지당 1개 application 1+개 JSP페이지 요청의 시작부터 응답까지. 다른JSP로 전달가능(forward사용) 요청마다 1개 session n개 JSP페이지 session의 시작부..

서블릿 HttpServlet 을 상속 @webServlet - 3개의 메서드 존재 1. init 서블릿이 초기화될때 자동 호출되는 메서드 서블릿의 초기화 작업 담당 2. service 입력, 처리, 출력 3. destroy 서블릿이 갱신되어 로딩되거나, 뒷마무리작업을 할 때 호출 서블릿이 메모리에서 제거될때 서블릿 컨테이너에서 자동호출 요청 - > Servlet Context 에서 서블릿 인스턴스가 존재하는지 확인 yes-> service() 호출 no -> 서블릿 클래스로딩 & 인스턴스 생성 -> 초기화 init() -> service() 호출 2번째부터는 첫번쨰 객체를 만들었기 떄문에 yes -> service() 호출 프로그램이 종료, 웹애플리케이션이 종료되면 destroy() 호출 map 형태로 ..

1. fisrt 프로젝트 생성 - 2.5버전 2. 서버설정 (톰켓10버전) https://mvnrepository.com/artifact/javax.servlet/servlet-api/2.5 아래의 5 서블릿을 생성한 다음에 보면 컴파일에러가 발생할 것이다. 2.5버전의 서블릿 스팩에서는 톰켓 10버전에는 지원하지 않는것이 있기 때문에 jakarta로 변경하여 사용한다. 3. 한글 utf-8 (css,js, html) 4. jre 파일 설정 5. Servlet servlet 경로를 확인 servlet 에서 url 호출 서버 포트: 8888지정 url = http://localhost:8888/first?t=hello&p=hi Console 창 출력값 확인 서버 설정에서 에러가 나는 경우를 모아보았다. 1..

Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시 서버와 다음과 같은 다양한 형태의 데이터를 주고 받음 JSOPN XML HTML 텍스트 파일등 장점 웹페이지를 전체 로딩하지않고 웹페이지 일부분만 변경가능 웹페이지가 로드된 후에 서버로 데이터요청을 보낼 수 있음 웹페에지가 로드된 후에 서버로 부터 데이터를 받을 수 있음 백그라운드 영역에서 서버로 데이터를 보낼 수 있음 구성요소 웹페이지의 표현을 위한 HTML과 CSS 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해 사용되는 DOM모델 데이터의 교환을 위한 JSON이나 XML 웹서버와의 비동기식 통신을 위한 XMLHtt..

1. return 시에 하나의 DOM만 리턴할 수 있다. 하나의 태그만 리턴을 해준다. 위의 그림에서 보면 노랑밑줄이 그어져있는 코드를 보자 태그가 2개가 있어서 리턴이 안되는 것을 볼 수 있다. 아래의 그림에서 보듯이 하나의 태그안에 넣어주면 가능하다. 또 주의해야할 점이 하나의 태그안에 코드를 넣는다고 하더라도 리턴이 두개 이상이 되면 에러가 발생한다. 즉, 리턴시에 하나의 DOM만 리턴할 수 있다. 2. 변수 선언은 let 혹은 const로만 한다 var 변수는 함수 안에서 선언이 되면 보통 함수안에서만 사용이 된다고 알고있다. 그런데 함수 밖에서도 사용이 되는 스코프가 변칙적이기 때문에 가능하면 var 함수를 사용하지 않고 let 과 const 로 사용을 하는 것이 이상적이다. let 은 변수를 ..