kasumil의 코딩 공작소

아아... 시간이 없습니다... 젠장. ㅠㅠ 개발하기에는 솔직히 템플레이트로 제작하는 것이 제일 좋지만, 그런데 돈쓰기엔 아까우니 그냥 개인적으로 개발하는 여차저차 typescript 적용해서 만드는 프로젝트가 있습니다. head, footer 완성. home 진행 중인데, 가장 첫 탭인 react-slider 적용해서 완성... 약간 비율도 안맞고, 헤더의 경우 로고와 링크 주소를 고쳐야하는 것이 있지만 기본틀은 잡혀있다. 진행해야할 페이지 로그인, 회원가입, 로그아웃, 메인페이지(홈) 상품 리스트 상품 페이지 장바구니 결제페이지 인데...언제 하니 ㅠㅠ

import React from 'react'; import Head from 'next/head'; import Nav from './Nav'; import Footer from './Footer'; type Props = { children: any; } function Layouts({children}: Props) { return ( {children} ) } export default Layouts; // 위처럼 구성했었다. 위 처럼 내용을 구성했더니... 클릭 Nav 컴포넌트의 클릭이벤트가 아무것도 작동이 안되는 버그가 있었다. 흠.... 무엇이 문제일까? 하고 Nav바만 엄청 보고 고민하고 그랬는데, 원인은 Head였다. import React from 'react'; import Nav f..

pages 폴더에서만 써야하는 함수로 getServerSideProps, getStaticProps가 있다. 차이점은 크게 ssg냐 ssr이냐로 볼 수 있는데, getStaticProps = SSG(Server Side Generate) getServerSideProps = SSR(Server Side Rendering) 이건 뭐야? 할 것이다. getStaticProps은 getServerSideProps보다 빠르다. 그 이유는 매번 새로 만들지 않아서다. 서버에서 정적인 데이터를 보여줄때 사용된다. 동적인 데이터가 있다면 요청에 따라서 계속 변해야한다면, getServerSideProps 써야만한다. 둘다 솔직히 미리 데이터를 보여줘야하는 부분이 없다면 CLIENT 단에서 작동되는 것이 제일 좋다. ..

Next.js는 이전 포스티에도 언급했듯이 라우팅을 폴더 경로에 따라서 페이징을 처리한다. 그렇다면 id값 같은 동적인 부분은 어떻게 해야할까? 바로 해당 페이지.js나 jsx의 이름을 []로 감싸는 것. /pages ㄴ index.js /news ㄴindex.js /id ㄴ[newsDetail].js 위처럼 하면 고정값이 아닌 동적 라우팅이 진행되어 id값에따라 해당 값을 호출하고 준다. 이때 Router값에 따라 해당 데이터를 호출해야하는데, 이를 어떻게 해야 하나 싶을것이다. import { useRouter } from 'next/router'; // React 내장이 아닌 Next팀이 만든 내장 hook function newsId () { const router = useRouter(); ro..

Next.js의 경우 서버사이드이다. 기존 react와 다르게 크롤링을 위해서 서버에 요청시 모든 페이지를 로딩한다. 즉 검색 기능에 노출되기 쉽다. 그리고 또한 page를 기존 React의 경우 페이징을 위해 무조건 쓰는 React router v5 기준 Switch, v6기준 Routes를 쓰지 않는다. pages ㄴindex.js // domain.com/ 과 같은 상황 ㄴnews ㄴ index.js // domain.com/news ㄴnews/id ㄴindex.js // domain.com/news/id 이러한 구조로 폴더별로 경로를 설정할 수 있어서 매우 좋다. 즉 편리하다 이말이여~ 기존에는 라이브러리를 일일히 호출하고 이를 넣어서 경로 잡아야 했는데, 그런게 없으니 ㅎㅎㅎㅎㅎ import R..