전체 글
-
JSX에 관하여React영화 웹 서비스 2022. 7. 26. 13:36
React.createElement라는걸 들어본 적 있을까.? 없는 것 같다. 모두들 JSX를 사용하고 있기에 쓰지 않는 문법인데, 예시를 들어서 알아보자. const h3 = React.createElement( "h3", { id: "title", onMouseEnter: () => console.log("mouse enter"), }, "Hello I'm a title" ); //JSX방식 const Title = () => ( console.log("mouse enter")}> Hello I'm a title ) 위와 아래와 같은 뜻이다. JSX를 쓰면, 아래처럼 쉽고 간단하게 작성할 수 있다. 하지만, JSX로만 쓰면 에러가 나는데 JSX를 위의 코드로 변환시켜주는걸 Babel이라고 한다. 즉,..
-
라우터 나머지 기능Vue.js 2022. 7. 26. 01:56
route 초기설정 때 import { createRouter, createWebHistory } from 'vue-router' const router = []; const router = createRouter({ history: createWebHistory(), routes, }) 이렇게 설정을 했는데, history: createWebHistory() 이게 문제가 되는 경우가 있다. import { createRouter, createWebHashHistory } from 'vue-router' const router = []; const router = createRouter({ history: createWebHashHistory(), routes, }) 이처럼 설정하는건 Hash mode라..
-
Nested routes와 push함수Vue.js 2022. 7. 25. 13:43
저번에 /detail/숫자에 따른 각각의 상세페이지를 보여줬는데, 여기서 /detail/0/author 이렇게 적으면 0번글의 상세페이지의 저자를 보여주고 싶다. 이럴 때, 쓰는게 nested routes이다. 만드는 방법은 children : {}을 안에 만들면 된다. { path: '/detail/:id', component: Detail, children: [ { path: "author", component: Author, }, { path: "comment", component: Comment, }, ] }, 이렇게 Detail을 보여주는 컴포넌트 밑으로 children을 적어주고, 거기에 또 path와 component를 적어주면 된다. 결과적으로, /detail/:id/author ,/det..
-
router에서 페이지나누기Vue.js 2022. 7. 25. 13:12
보통 url디자인은 /어쩌구/1 이면 1번글을 /어쩌구/2 이면 2번글을 보여준다. 이런건 route에 const routes = [ { path: "/list", component: List, }, { path: "/", component: Home, }, { path: '/detail/:id', component: Detail, } ]; 이런 식으로 /detail/:작명 이렇게 사용할 수 있는데, 이러면 /detail/아무거나 적으면 보여주게 된다. 이걸 파라미터 문법이라고 한다. 근데 들어갈 때마다, 디테일페이지 글제목 글설명~ ,html이 이러면 똑같은 페이지만 보여주니까, detail뒤에 오는 숫자에 따라 디테일 페이지를 바꿔보자. 디테일페이지 {{블로그글[$route.params.id].tit..
-
layout패턴Next.js 2022. 7. 22. 22:17
보통 component파일에 layout.js를 만들어서 다음과 같은 패턴을 사용한다. //(_app.js) import Layout from "../components/Layout"; export default function App({Component, pageProps}) { return ( ); } //(Layout.js) import NavBar from "./NavBar"; export default function Layout({children}) { return ( {children} ); } layout.js의 children prop가 _app.js의 가 되는 것이다. 즉, 안에 들어가는게 모두 {children}에 나오게 되는 것이다. 그리고 Head라는걸 import해서 사용할 수 ..
-
custom appNext.js 2022. 7. 22. 20:32
전처럼 하나의 컴포넌트가 아닌 전역적인 css를 주고싶다면, Next.js가 모든 페이지를 렌더링할 수 있게 하는 _app.js라는 무조건 이 이름을 가진 파일을 만들어서 customize할 수 있다. 즉, _app.js는 청사진이 된다. 이걸 기반으로 pages에 있는 다른 js 파일들을 살펴본다. export default function App({Component, pageProps}) { return ( ); } 이렇게 적으면, Component자리에 렌더링하길 원하는 페에지를 넣을 거고, 페이지를 렌더링하게 된다. 그래서 index.js about.js에 있는 을 _app.js에 적어놓으면 각각 컴포넌트에 사용할 일이 없게 된다. 그리고, 여기에 style을 적으면 모든 컴포넌트에 적용이 된다...
-
Styles JSXNext.js 2022. 7. 22. 19:19
전의 css module은 조건에 대한 css스타일을 주기 불편하고, 클래스이름을 외워야 하지만, styled jsx는 그렇지 않다. return Home About 이런 식으로, style태그 안에 jsx를 적고, {``}안에 내용을 적어주면 된다. 하지만, 한 파일에 있는 요소만 영향을 줄 뿐 다른 파일의 a태그엔 영향을 주지 않는다. 클래스 역시 이렇게 넣어주고, .클래스이름 {}하면 된다. className={router.pathname ==="/about" ? "active": "" }About 그리곤, 클래스도 한 컴포넌트 내부로 범위가 한정되므로 클래스이름이 같아도 상관없다.
-
CSS ModulesNext.js 2022. 7. 22. 18:19
components파일에 작명.module.css 파일을 만들고, css를 작성한 다음 .nav { display: flex; justify-content: space-between; background-color: tomato; } import Link from 'next/link'; import {useRouter} from 'next/router'; import styles from './NavBar.module.css'; export default function NavBar() { const router = useRouter(); return Home About } 이렇게 import styles from 경로 로 import를 해주면 className에 오브젝트에서 프로퍼티 형식으로 적어주면 ..