[출처]👉🏻  우아한테크: [10분 테코톡]👉🏻  Dev.Ella 블로그        오늘날 웹 애플리케이션을 개발한다고하면 대부분 React, Angular, Vue와 같은 자바스크립트 기반 프레임워크를 사용해 SPA를 개발한다. ✔️ SPA여기서 SPA란, Single Page Application의 약자로, 하나의 페이지로 구성된 웹 애플리케이션이다. SPA로 개발된 웹사이트에서는 카테고리에 있는 각 메뉴를 선택하면 보통 헤더는 고정되어 있는 상태로 메인화면 혹은 클릭한 부분만 바뀐다. ✔️ MPA반면 MPA란, Multi Page Application의 약자로, 탭을 이동할 때 마다 서버로부터 새로운 HTML을 새로 받아와서 페이지 전체를 렌더링 하는 전통적인 웹 페이지 구성 방식이다.  ..

Application 웹 어플리케이션이 시작되고 종료될 때까지 변수가 유지되는 경우 사용 Session 웹 브라우저 별로 변수가 관리되는 경우 사용 웹 브라우저별로 변수를 관리하고자 할 경우 사용한다. 웹 브라우저간의 탭 간에는 세션정보가 공유되기 때문에, 각각의 탭에서는 같은 세션정보를 사용할 수 있다. HttpSession 인터페이스를 구현한 객체를 사용한다. JSP에서는 session 내장 변수를 사용한다. 서블릿에서는 HttpServletRequest의 getSession()메소드를 이용하여 session 객체를 얻는다. 값을 저장할 때는 session 객체의 setAttribute()메소드를 사용한다. 값을 읽어 들일 때는 session 객체의 getAttribu..

이렇게 동작한다Keyframes 와 animation을 이용해 위와 같이 움직이는 효과를 만드는 실습을 했다.html과 css를 사용했는데 문제는 css파일이 아닌 React에서 쓰는 @emotion/styled를 이용해JavaScript 파일에서 태그 대신 함수를 만들어 사용했기 때문에 Keyframes를 어떻게 사용해야하는지 몰라 한참을 해매다가 겨우 성공!!ㅜㅜ 일단 기본적으로 css에서는@keyframes titleText { 0% { transform: translateY(70px); opacity: 0; } 92% { transform: translateY(-10px); } 100% { transform: transl..

index.js import { Page, Wrapper, Title, Content, Text1, Text2, Text3, Text4, Subtitle, DiaryDate, } from "@/styles/my_diary/mydiary"; export default function MyDiary() { return ( 나만의 일기장 나만의 일기장 입니다! 원하는 색과 사이즈로 일기장을 커스텀 해보세요. Have a Good Day.😊 📌 쭈꾸미의 일기 오늘은 김치찜을 먹었다. 🧀치즈 계란말이 도 같이 나오는 세트였다. 맛있어서 정신없이 먹다보니 배가 너무 불러서 힘들었다. 내일은 과식하지 말아야겠다!! 2023년 3월 8일 날씨 맑음☀️ ); } mydiary.js import styled from "@..

서블릿에서 다른 서블릿으로 전달하려는 데이터의 양이 많을 때는 GET방식으로 데이터를 전달하는 것이 불편하다. 서블릿에서 다른 서블릿 또는 JSP로 대량의 데이터를 공유하거나 전달하고 싶을 때는 바인딩 기능을 사용한다. 웹 프로그램 실행 히 데이터를 서블릿 관련 객체에 저장하는 방법으로, 주로 HttpServletRequest, Httpession, ServletContext 객체에서 사용되며 저장된 데이터는 프로그램 실행 시 서블릿이나 JSP에서 공유하여 사용한다. 관련 메소드 기능 setAttribute(객체명, "객체값") 데이터를 객체에 바인딩 한다. 객체명 = 객체값 ex) address = "수원시 권선구" getAttribute(String name) setAttribute에서 받아온 데이터..

MVC란 Model - View - Controller 의 약자로, 일반 PC 프로그램 개발에 사용되는 디자인 채턴을 웹 어플리케이션에 도입한 것. 즉, 웹 어플리케이션을 화면 부분, 요청 처리부분, 로직 처리 부분으롤 나누어 개발하는 방법 MVC 특징 ∙ 각 기능이 분리되어 있어 개발 및 유지보수가 편하다. ∙ 각 기능의 재사용성이 높아진다. ∙ 디자이너와 개발자의 작업을 분업화해섯 쉽개 개발할 수 있다. MVC 구성요소 ∙ Model : 비즈니스 로직을 처리한다. ∙ Controller : 사용자의 요청 및 흐름 제어를 담당한다. ∙ View : 사용자에게 보여줄 화면을 담당한다. 컨트롤러는 사용자로부터 요청을 받아 어떤 비즈니스 로직을 처리해야 할 지 제어한다. 모델은 데이터베이스 연동 같은 비즈니..

세션은 웹 페이지들 사이의 공유 정보를 서버에 저장해 두고 웹 페이지들을 매개해주는 방법이라는 점에서 쿠키와 같다. 하지만 쿠키는 사용 시 웹 페이지들의 정보가 클라이언트 PC에 저장되므로 정보가 쉽게 노출될 수 있다는 단점이 있다. 세션은 서버의 메모리에 생성되어 정보를 저장하기 때문에 보안이 요구되는 정보는 대부분 세션을 이용한다. 세션은 각 브라우저당 한 개, 즉 사용자당 한 개가 생성된다. 사용자의 로그인 상태나 쇼핑몰의 장바구니 담기 기능 같은 정보를 해당 브라우저의 세션에 저장해 두고 사용하면 편리하다. 세션의 특징 ∙ 정보가 서버의 메모리에 저장된다. ∙ 브라우저의 세션 연동은 세션 쿠키를 이용한다. ∙ 쿠키보다 보안에 유리하다. ∙ 서버에 부하를 줄 수 있다. ∙ 브라우저(사용자)당 한 개..

∙ 어플리케이션 실행 시 미리 ConnedtionPool 객체를 생성한 후 데이터베이스와 연결을 맺는다. ∙ 어플리케이션은 데이터베이스 연동 작업 발생 시 이 ConnectionPool 객체를 이용해 작업한다. 커넥션풀(ConnectionPool) 동작과정 1) 톰캣 컨테이너를 실행한 후 응용 프로그램을 실행한다. 2) 톰캣 컨테이너 실행 시 ConnectionPool 객체를 생성한다. 3) 생성된 거넥션 객체는 DBMS와 연결한다. 4) 데이터베이스와 연동 작업이 필요할 경우 응용 프로그램은 ConnectionPool에서 제공하는 메소드를 호출하여 연동한다. JNDI ( Java Naming and Directory Interface ) 실제 웹 어플리케이션에서 ConnectionPoll 객체를 구현할..

웹 프로그램은 클라이언트의 요청에 대해서 비즈니스 처리 기능을 이용해 데이터 저장소에서 데이터를 조회한 후 서블릿의 응답 기능을 이용해 클라이언트에게 결과를 전송한다. 서블릿의 비즈니스 작업의 대표적인 예 ∙ 웹사이트 로그인 요청 처리 작업 ∙ 쇼핑몰 상품 주문 처리 작업 서블릿에서 데이터베이스와 연동하는 과정은 자바의 데이터베이스 연동 과정과 같다. 클라이언트로부터 요청을 받으면 서블릿은 SQL문을 사용해 데이터베이스에 접근하여 작업한다. 이 과정에서 DAO와 VO 클래스가 사용된다. 회원정보 테이블을 생성한 후 회원 정보를 추가하여 웹 브라우저에서 서블릿으로 요청, 데이터베이스와 연동해 회원 정보를 웹 브라우저로 출력하는 작업 --회원 테이블 생성 create table t_member( id var..