본문 바로가기

Front-end14

History API를 이용한 시간 여행 우리는 이렇게 생긴 뒤로 가기, 앞으로 가기 버튼을 이용해 30분 전에 봤던 페이지로 돌아갈 수도 있고 가장 최근에 본 페이지로 다시 이동할 수도 있습니다. 이것이 가능한 이유는 어딘가에 기록들이 저장되어 있기 때문입니다.사용자가 어떤 페이지를 방문할 때마다 브라우저의 세션 히스토리 스택에는 페이지에 대한 기록이 쌓입니다.하나의 페이지에 대한 정보는 하나의 엔트리에 저장되며, 엔트리는 state와 url 정보를 가지고 있습니다.History API는 세션 히스토리에 접근하여 엔트리를 조작할 수 있는 기능을 제공합니다. history 전역 객체를 통해 다음과 같은 메서드들을 사용할 수 있습니다. 1. history.back()뒤로 가기 2. history.forward()앞으로 가기 3. history.g.. 2024. 5. 16.

React에서 폼 form을 다루는 방법 1. 참조를 이용하는 방법 useRef() 훅은 컴포넌트 생명주기 동안 사용할 수 있는 ref 객체를 반환해 줍니다. 이 객체는 current 프로퍼티에 렌더링에 필요하지 않은 값을 저장해 두고, 필요할 때마다 참조할 수 있도록 해줍니다. CreateForm.js는 아이디와 패스워드를 저장할 수 있는 ref 객체(loginId, password)를 엘리먼트의 ref 속성에 추가해주고 있습니다. submit 이벤트가 발생하면 ref 객체의 current.value에 있는 값을 id, pw에 각각 저장한 다음 onAccess 함수를 통해서 상위 컴포넌트로 올려 보내고 다시 초기화시켜 줍니다. 만약 입력한 아이디를 유지하고 싶으면 loginId.current.value = ""; 부분을 삭제하면 됩니다. 이 .. 2023. 5. 25.

AJAX를 왜 사용하는가 AJAX란 무엇인가 AJAX(Asynchronous Javascript And XML)는 비동기 자바스크립트 그리고 XML이란 뜻을 가지고 있으며 XMLHttpRequest라는 객체를 이용해서 서버와 통신하는 방법을 말합니다. 웹 화면단에서 서버와 통신하는 전통적인 방법은 폼 태그 를 사용하는 것입니다. 그런데 폼을 제출 할 때에는 페이지 전체의 새로고침이 발생하게 됩니다. 회원가입이나 로그인, 게시글 작성과 같은 일회성 이벤트는 폼으로도 충분하지만, 현재 페이지의 상태를 유지하면서 수시로 서버와 데이터를 주고 받아야하는 경우 한계에 부딪힐 수 있습니다. 현대의 웹에서 가장 중요한 키워드가 '동적인 페이지'와 'UX'라는 점을 고려하면 비동기 통신은 선택이 아닌 필수라고 할 수 있습니다. 이런 요구에 부.. 2023. 5. 8.

HTML&CSS 작성 치트키, Emmet 에밋 사용법 Emmet은 HTML, CSS 를 간편하게 작성할 수 있도록 도와주는 툴킷입니다. 1. 도구 VSCode에 내장되어 있어 별도의 설치없이 Tab 키만 누르면 사용할 수 있습니다. 인텔리제이 역시 에디터에서 기본적으로 Emmet을 지원하며, 에밋을 작성한 뒤 Tab 키를 누르면 HTML로 변환됩니다. setting > editor > emmet 에서 Tab 대신 다른 키로 변경이 가능합니다. 2. 뼈대 만들기 ! + Tab !를 입력한 뒤 Tab키를 누르면 위와 같은 html 기본 골격과 메타태그를 만들어줍니다. 3. 살 붙이기 아래 HTML은 기본적인 웹 페이지의 구조를 나타낸 것입니다. HTML은 기호도 많이 들어가고 양도 많아 직접 타이핑하는 것이 굉장히 귀찮습니다. 하지만 Emmet을 사용하면 축약.. 2023. 3. 21.

타입스크립트와 자바스크립트의 차이 타입스크립트는 자바스크립트의 모든 기능을 지원하며 단지, 자바스크립트 위에 타입 시스템이라는 추가적인 레이어를 추가한 것입니다. 즉, 여러분이 작성한 자바스크립트 코드는 타입스크립트라고 할 수 있습니다. 타입스크립트의 주요 이점은 여러분이 예상하지 못한 돌발 상황을 쉽게 발견할 수 있게 해 주고, 버그의 가능성을 낮춰준다는 점입니다. 자바스크립트와의 차이 자바스크립트를 사용하다보면 자주 undefined를 마주하게 됩니다. 자바스크립트는 타입을 엄격하게 따지지 않기 때문에 '이 값이 왜 여기서 나와?' 하는 경우에는 그냥 undefined로 취급해 버립니다. 이것은 어떻게 보면 장점이라고 할 수도 있습니다. 개발자가 작성한 코드에 사소한 문제가 있더라도 자바스크립트는 최대한 성실하게 코드를 실행하기 위해.. 2023. 3. 13.

HTML 기본 구조와 태그(tag), 요소(element), 속성(attribute) HTML(Hypertext Markup Language)은 웹 페이지의 구조를 나타내기 위한 마크업 언어입니다. 웹 페이지의 전체적인 골격을 형성하고, CSS에 의해서 스타일링되거나 JS에 의해서 조작될 수 있는 요소들을 만든 다음, 그 안에 컨텐츠를 채워넣기 위해 사용됩니다. 기본적인 형태는 다음과 같습니다. 최상단에서 으로 이 html 문서의 타입을 정의합니다(DTD). 과거에는 이렇게 길고 복잡한 형태를 가지고 있었지만, html5 이후로는 아래와 같이 간소화되었습니다. 내용 html문서의 전체 내용은 태그가 감싸게 됩니다. html 태그에서 적용한 속성은 문서 전체에 적용되기 때문에 보통 lang 속성을 통해서 사용할 언어(한국-ko, 영어-en)를 지정해줍니다. 그 하위에 와 가 위치합니다. 에.. 2023. 1. 19.

이전 1 2 3 다음

티스토리툴바