jingyulog

📋 게시판 등록페이지: /boards/new 상세페이지: /boards/1 다이나믹 라우팅 /boards/:id -> :으로 표기 /boards/{id} -> { }으로 표기 목록페이지: /boards 수정페이지: /boards/3/edit 다이나믹 라우팅 /boards/:id/edit /boards/{id}/edit 🏪 쇼핑몰 상품 등록페이지: /products 상품 상세페이지: /products/상품ID 상품 목록페이지: /products 상품 수정페이지: /products/상품ID/edit

✏️ Router 객체 Router 객체란 페이지 이동과 관련된 기능을 가지고있는 객체이다. 자주 사용하는 Router 객체 기능 공식 문서: https://nextjs.org/docs/pages/api-reference/functions/use-router Functions: useRouter | Next.js Using Pages Router Features available in /pages nextjs.org import Router from 'next/router' 현재 위치 주소: Router.pathname 현재 위치 주소: Router.asPath 뒤로가기 버튼: Router.back() 현재 페이지에서 다른 페이지로 이동: Router.push('/') 새로고침: Router.reload..

✏️ apollo-client 셋팅하기 apollo-client를 설치한 후, 사용하기 위해서 setting이 필요하다. 설치한 도구들을 setting하는 위치는 일반적으로 _app.js 이다. index.js(페이지들)이 app.js로 합쳐져서 app.js가 실행되는 것이다. Component 자리에 index.js가 들어오게 되고, index.js가 합쳐진 app.js가 실행된다. ApolloClient : graphql 세팅, API가 있는 위치를 모든 페이지에 알려주기 위해 세팅한다. InMemoryCache : 나중에 꺼내서 쓰기위해 컴퓨터의 메모리에 백엔드에서 받아온 데이터를 임시로 저장한다. ApolloProvider : 컴포넌트에서 client graphql 세팅을 사용할 수 있게 전달해준..

✍️ 정의 React의 인기 CSS 방식이다. CSS를 자바스크립트 파일에 넣어놓고 쓴다는 의미이다. ⚒️ 2가지 도구 styled-components yarn add styled-components npm install styled-components emotion 🆚 기존 CSS 방식 vs CSS-IN-JS 방식 기존 CSS 방식 .title { width: 996px; height: 52px; } Hello World CSS-IN-JS 방식 import styled from '@emotion/styled' const Title = styled.div ` width: 996px; height: 52px; ` import {Title} from '../../styles/emotion' Hello Wor..

❓ React-Hooks란? React에서 만든 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 하는 도구 쉽게 설명하면, Hooks가 있기 때문에 간단한 함수형 컴포넌트로 클래스형 컴포넌트를 대신할 수 있다는 것이다. 대표적인 Hooks에는 useState, useEffect가 있다. 클래스형 // 클래스형 import { Component } from "react"; class New extends Component { constructor(props){ super(props) // 다른 컴포넌트한테 받은 데이터 this.state = {} // 컴포넌트 안에 보관해둘 데이터 } componentDidMount(){ // 컴포넌트가 최초 그려진 후 실행 } componentDi..

❓ 컴포넌트란? 컴포넌트란 UI 또는 기능을 부품화해서 재사용이 가능하게 만드는 것이다. 동일한 UI를 재활용하므로, 원본만 변경하면 모두 적용되게 한다. 데이터는 각 컴포넌트에 맞게 변경하여 사용이 가능하다. ✍️ 컴포넌트 작성 방법 클래스형 import { Component } from "react" class New extends Component { render(){ return 이것은 클래스형 컴포넌트 } } export default New 함수형 // 함수형 컴포넌트 작성법 1 function New(){ return 이것은 함수형 컴포넌트 } export default New // 함수형 컴포넌트 작성법 2 const New = () => 이것은 함수형 컴포넌트 export default ..