불변함수 -> 깊은 복사 함수 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 은 변수를 ..
Node.js는 경량의 프레임워크로 React로 만들어진 스태틱 서버 렌더링 애플리케이션 기본적으로 스타일링과 라우팅 해결책을 가지고 있으며, 사용자가 Node.js를 서버 환경으로 사용 node.js 설치 3. npx 설치 vscode 연동 npm -> 라이브러리를 다운 - 빌드 -> 프로젝트3개 (로컬에 다 다운) npx -> 라이브러리를 다운 - 빌드 -> 프로젝트 3개 (다운 받은 걸 재사용, 없으면 다운) -> 실행 -> 삭제 npx npx create-react-app my-app cd my-app npm start 서버를 키면 크롬창에 아래와 같이 나오면 제대로 서버가 작동하는 것이다. 문법오류확인 react 문법 자동완성기능 .prettier 파일 만들기 설정에서 format on save..