TIL/FrontEnd13 [FE] WebStorage 기초 웹의 취약점 (state less) 페이지가 이동할 때마다 상태 정보는 모두 사라진다. a라는 페이지에서 사용했던 정보들(변수, 객체 등)이 b페이지로 이동하면 모두 사라진다. 만약 필요하다면 get, post 방식으로 값들을 하나하나 넘겨야 하는 번거로움이 있다. 그래서 정보의 영속성을 유지하기 위한 저장 매커니즘이 필요하다 클라이언트 쪽에 저장하는 기술: 단점 - 사용자가 직접 삭제, 보기가 가능하다 Cookie 용량의 제한과 개수의 제한 사용자의 요청(request)이 될때마다 서버로 쿠키를 매번 전송한다. ex. id 기억시키기, 사용자 트렌드 분석 HTML5에서 지원하는 WebStorage: 브라우저가 가지고 있는 저장소에 저장되는 것 localStorage: 만료기간이 없이 삭제하지 않으면 평.. 2023. 4. 18. [JavaScript] addEventListener 사용 함수 parameter 전달 click 등 이벤트가 발생했을 때 함수를 유발시킬 용도로 target.addEventListener 를 사용한다. 이때 parameter를 포함하는 함수를 전달하면 괄호가 포함되니까 화면이 열리자마자 바로 실행된다. 이벤트가 발생하지 않아도! 예를 들면 이런 식 const userValueDiv = document.getElementById("userValueDiv"); function setValue(id, label) { let Input = document.getElementById(id).value; userValueDiv.textContent = `${label}: ${Input}`; } // getName 버튼을 눌렀을 때 함수가 작동하게 하고 싶다 const getNameButton = d.. 2023. 4. 16. [FE] jQuery 기초 jQuery Tutorial W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com - HTML/DOM manipulation - CSS manipulation - HTML event methods - Effects and animations - AJAX (비동기 처리) - Utilities 기본 사용 설정: CDN 불러온 후 script 태그 안에 코드 작성 // 혹은 이렇게 .. 2023. 4. 12. [Svelte] SvelteKit으로 웹사이트 만들기 1️⃣ 프로젝트 시작 포트폴리오를 웹사이트 형태로 만들어보고 싶었는데, svelte도 써보고 싶어서 혼자 하는 서브프로젝트 느낌으로 시작해 보기로 했다. 일단 create project부터 얼레벌레 시작! 프로젝트 시작 Docs • Svelte Documentation Before we begin This page contains detailed API reference documentation. It's intended to be a resource for people who already have some familiarity with Svelte. If that's not you (yet), you may prefer to visit the interactive tutorial or the svelte.dev npm c.. 2023. 4. 1. [React-TypeScript] .env 변수 타입 설정하기 .env 파일로 값을 불러와 함수에 사용하려고 했더니 타입 오류가 났다 타입이 string | undefined로 되어 있기 때문이라고 하는데, 해결하려면 전역 타입을 지정해주면 된다. CRA로 앱을 생성했다면 react-app-env.d.ts 파일이 있다. (없다면 만들면 될듯) 여기에 내용을 추가해주면 된다. 맨 윗줄은 원래 써 있는 내용이고, 아래에 각 변수의 타입을 지정해주면 된다. 2022. 11. 9. [React] 헤더에 뒤로가기 버튼 만들기 [React] 뒤로가기 버튼 만들기 (useNavigate) 리액트로 프로젝트를 진행하던 중 홈버튼은 만들어두었지만 뒤로가기 버튼이 없는 게 불편해서 만들어보기로 했다. button tag가 아닌 문구와 사진을 이용해서 만들고 싶었기 때문에 div 태그를 사용하던 중 발생하던 에러 해결 로그 react-router-dom 라이브러리를 사용해서 진행한다. version 5까지는 useHistory를 사용했지만, react-router-dom v6부터는 useNavigate를 사용하여 진행한다! 1. import useNavigate 먼저, react-router-dom의 useNavigate를 import 해준다. 2. useNavigate 함수 호출 function component 안에 useNavig.. 2022. 9. 20. 이전 1 2 3 다음 728x90
