Web Programming/Front End
-
form tag using vanilaJSWeb Programming/Front End 2021. 10. 25. 19:04
Form tag using VanilaJS Prevent form redirect form 태그를 통해 submit하게 되면 submit의 응답 결과를 받는 페이지로 넘어가게 된다. 이를 방지하기 위해 e.e.preventDefault()를 쓸 수 있다. 예시는 아래와 같다. // react 예시이다. const get_input_value = (e) => { e.preventDefault(); value = e.target.text_input.value; console.log('get value', value) } return ( ) 나의 경우는 onInput보다 onSubmit이 더 적절한 상황이었다. 필요한 이벤트리스너에 등록해 사용하면 되겠다. 또한 코드에서 나온 것처럼 받고자 하는 변수의 이름을..
-
Gatsby Cloud setupWeb Programming/Front End 2021. 10. 25. 17:25
이 글은 개츠비 클라우드에서 시작한다. 블로그 개츠비로 블로그를 새로 만들어서 사용하려고 했는데, 이전에는 안보였던 개츠비 클라우드라는 기능이 보였다. 빌드와 호스팅을 모두 해주는 서비스인데, 빌드는 로컬에서 해도 되고, 호스팅도 깃헙을 통해 해도 괜찮다. (깃헙에서 호스팅을 할 수느 있지만, 내가 정한 이름이 아니라 내 계정명을 도메인으로 사용해야되는게 좀 별로다.) 하지만 1개의 웹사이트 호스팅에 대해서는 무료기에 사용해보기로 했다. (1개 호스팅, 1개 빌드) 블로그 운영을 위해서 사용할 것이기 때문에 무료 버전으로도 충분하다고 생각했다. 그러면 개츠비 클라우드를 통한 블로그 생성을 시작해보자. 블로그 생성 난 기존에 개츠비로 만든 블로그가 없었기 때문에, 템플릿에서 시작했다. Start from ..
-
What is `Charkra`?Web Programming/Front End 2021. 10. 25. 17:16
Chakra is ReactJS를 위한 UI 라이브러리이다. npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4 # or yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4 import * as React from "react" // 1. import `ChakraProvider` component import { ChakraProvider } from "@chakra-ui/react" function App() { // 2. Use at the root of your app return ( ) } Reference git..