자바스크립트 궁금증11 a태그 사용한 첨부파일 다운로드 방법 프로젝트를 진행하던 중 관리자 페이지에서 첨부파일을 다운로드하는 기능을 구현해야했다. 자바스크립트의 a태그에는 download속성이 있다. {list.files?.length > 0 ? list.files.map((file, index) => ( {file.fileName} )) : "첨부파일 없음"} 서버에서 받아오는 file의 이름을 a태그로 감싸고 a태그 속성에 href를 받아오는 파일의 url로 설정하고 download 적용해주면 다운로드가 될 줄 알았지만 단순히 file의 url링크로만 들어가지는 문제였다. 검색해보니 a태그의 download속성은 동일출처 정책에 의해 다운로드 파일의 경로가 현재 파일의 경로와 동일해야 적용된다는 것! .. 2024. 7. 5. 쿠키, 세션스토리지, 로컬스토리지 web 스토리지의 개념과 사용법 - 웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다. 1.쿠키 서버가 사용자의 웹브라우저에 전송하는 작은 데이터 조각 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로사용된다, -> 사용자의 로그인 상태유지 가능 / 상태가 없는 http프로토콜에서 상태 정보를 기억시켜주기 때문이다. 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버에 접속할 때마다 쿠키 내용을 헤더에 넣어서 전달 1. 사용자가 로그인하면 서버는 http 응답 헤더의 set-cookie에 담긴 세션식별자 정보를 사용해 쿠키 설정한다. 2. 사용자가 동일 도메인에 접속하려고 하면 브라우저는 http cookie 헤더에.. 2024. 1. 15. 자바스크립트 - 동기처리와 비동기처리 동기식 처리는 코드를 직렬적, 즉 순차적으로 실행하며 어떤 작업이 실행중이면다음 작업은 대기하게 된다. -> 자바스크립트는 단일스레드, 하나의 작업만을 처리하기 때문 비동기식 처리모델은 코드를 병렬적으로 실행, 작업이 종료되지 않은 상태여도 대기하지 않고 다음 작업을 실행한다. DOM 이벤트 핸들러와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작 function1 이 실행되면 callstack에 쌓인다. 그리고function1은 function2를 호출하므로 function2가 callstack에 쌓이고 setTimeout 함수가 호출, -> setTimeout 콜백함수는 즉시 실행되지 않고 지정된 시간만큼 기다리다가 이벤트가 발생하면 taskQ.. 2024. 1. 5. 1220 / 비동기 처리 패턴 promise PROMISE fetch('https://www.google.com') // fetch 는 promise객체를 리턴 .then((response) => response.text()) // then는 promise 객체의 메소드 .then((result) => {console.log(result);}); promise 3가지 상태 pending - 진행중 fulfilled - 성공 rejected - 실패. response를 정상적으로 받았을 때 fulfilled 상태가 된다 -> 그때 response 콜백이 실행 promise 객체이 작업 성공 결과는 첫번째 파라미터로 넘어옮.(response) promise Chaining 비동기작업을 순차적으로 실행할때 전체 코드를 깔끔하게 하기 위해서 ? fetch.. 2023. 12. 28. 1219 / html 메서드 / fetch fetch / json / ajax / proimse / async / await fetch 요청(request) 웹브라우저 ㅡㅡㅡㅡㅡㅡㅡㅡ>서버 서버로부터 응답이 오면 받음 .then((response) => response.text())// 서버에 리스폰스가 오면 함수 실행 -> 하나의 객체가 되어서 response 라는 파라미터로 넘어옴 .then((result) => {console.log(result);}); //then 메소드는 fetch함수가 리턴하는 어떤 객체의 메소드 -> //promise 객체의 then 메소드는 콜백을 등록하는 메소드 //이전 콜백의 리턴값을 다음 콜백이 넘겨받을 수 있음 fetch 함수는 promise 객체를 리턴 -> promise 객체의 then 메소드로 리스폰스.. 2023. 12. 19. 이전 1 2 3 다음
