0417/다운로드, 웹 동작 방식

쌍용교육센터에서 공부한 내용을 정리하며 기록하는 글이고 주관적인 생각이 들어갈 수 있습니다.
잘못된 내용이나 피드백 및 생각 공유는 언제든 환영입니다.
댓글로 남겨주시면 확인 후 수정하겠습니다.
내용에 대한 소스 코드는 https://github.com/2jaehoon/sangyoungjsp에 올려두었습니다.

 

무조건 다운로드

  - web browser는 브라우저가 해석할 수 있는 파일은 브라우저 안에서 보여준다.

    (이미지, text, xml, json, 서버에서 실행 될 수 있는 SSS)  서버의 정보를 얻을 수 있다.
  - 브라우저가 해석할 수 없는 파일은 자동 다운로드 수행
  - IOStream을 사용

// 0. 페이지 지시자 contentType 변경( HTML응답에서 Stream 응답 변환 )
contentType="application/octet-stream"

//1.응답 헤더를 변경                                                                             
response.setHeader("Content-Disposition","attachment;fileName=다운로드할파일명");
// 설정하지 않으면 JSP명으로 다운로드가 된다

// 2. 다운로드할 파일의 정보를 얻기
// 업로드한 파일의 경로 + 이전페이지에서 선택한 파일명
File file=new File("다운로드할 파일의 경로");

// 3. 다운로드할 파일에 input stream 연결
FileInputStream fis=new FileInputStream("읽어들인 파일의 경로");

// 4. 읽어들인 파일의 내용을 저장할 배열 생성
byte[] read=new byte[(int)file.length()];

int temp=0;// 읽어들인 값을 저장할 변수
int i=0; // 배열 방에 값을 넣기위한 인덱스 변수
  
// 파일에서 읽어들인 내용을 배열에 할당
// 배열은 파일과 똑같은 크기를 가지게 된다. 
while( (temp=fis.read()) != -1 ){
 read[i]=(byte)temp;                  
 i++;
}
//출력스트림 초기화 : out은 HTML을 출력할 목적의 스트림으로 파일을 출력하기 위해
// out을 초기화
out.clear();
// 설정된 응답헤더를 초기화된 스트림에 설정( 다운로드할 파일명 설정)
out=pageContext.pushBody(); // JSP의 정보를 접속자에게 출력하기 위해 내장 객체 사용
// 파일을 쓰기위해 출력 스트림 얻기
OutputStream os=response.getOutputStream();
// 파일 출력
os.write( read );// 파일 크기대로 저장된 배열을 스트림에 쓴다.
//스트림 끊기
os.flush();

 

*  charset을 변경해야 패킷을 타고 나갈 수 있다.

 

웹 동작방식

  - 동기식, 비동기식

 

* 동기 방식 동작

  - 요청을 보내면 브라우저는 응답받은 HTML 을 그리기위해 웹 브라우저 안의 내용을 
    지우고, 서버에서 처리 결과 올 때까지 기다린 후 처리 결과가 오면 다시 그린다.

    (화면 깜빡임 발생)

  - <a>, <form>으로 요청을 보낼 때 동기 방식으로 동작
  - 로딩된 페이지가 아닌 전체를 다시 그릴 때 사용
  - 단점 : 화면 일부분이 변경되더라도  모든 데이터를 다시 받아와서 다시 그린다. 

 

* 비동기식

  - 데이터만 보내고, 데이터만 받아 오는 방식
  - RIA(Rich Internet Application) => 접속자의 자원을 많이 사용하는 internet application
    AJAX (JavaScript)
  - XMLHttpRequset : JS에서 요청을 보내고 응답을 받을 수 있는 객체

  - JavaScript으로 요청을 보내고, JavaScript에서 응답을 받는 방식
    ( XMLHttpRequest - 자바스크립트 객체를 사용 )
  - 화면 깜빡임이 발생하지 않는다.(화면 전체를 갱신하는 것이 아님)
  - 데이터만 주고 받기 때문에 네트워크 사용 비용이 동기식보다 적다.
  - JavaScript에서 DOM을 사용하여 변경할 디자인이 있는 곳을 찾아서

    응답받은 데이터를 사용하여 디자인을 만들어 보여준다.