Programming

useRouter란? Next.js에서 함수형식으로 라우팅 할 수 있게 해주는 Next.js 기본 라이브러리 자주사용하는 useRouter 기능 router.push(URL) 해당 URL로 이동한다. router.replace(URL1, URL2) URL1으로 이동후, URL2로 주소만 변경한다. useRouter 사용법 1. router.push() // next.js 프로젝트 내부 import { useRouter } from "next.router" export default function Push(){ // 라우터 가져오기 const router = useRouter(); // 클릭시 "/" 경로로 이동하는 버튼 return router.push("/") } value="Push"/> } imp..

스타일 적용 방법 코딩 매커니즘 목적에 따른 효율성 코드를 더 쉽게 알아 볼 수 있도록 작성 - 가독성 반복을 최소화 할 것 - 프로그램 속도, 데이터 용량 전역변수 - 공통적으로 사용하는 것을 전역으로 관리함 ( 공통적 : 사이트 전체, 여러개의 페이지, 하나의 페이지, 여러개의 모듈 ) nextjs 스타일 적용하기 각 페이지에서 styled jsx 적용하기 글로벌스타일 지정하기 styled jsx 적용된 component 만들기 모듈파일에서 스타일 불러오기 공유 - 컴포넌트간 간격 스타일링 불가능 공유, 컴포넌트에 적용 컴포넌트에 글로벌 적용 컴포넌트에 한정 적용 암호 입력칸 - type password 암호 보이기 버튼 1. onClick -> 암호 입력 type default 2. 입력 value..

Router as, Link as, rewrites 란? 실제 URL정보를 사용자가 보지 못하도록 숨겨주는 Next.js 기능 Router as 사용법 import Router from 'next/router' function handleClick(){ Router.push('실제로 이동할 주소', '사용자에게 보여줄 주소') } Link as 사용법 Drive rewrites 사용법 next.config.js 파일에 설정해준다. const path = require("path"); /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, // rewrites 사용 async rewrites() { // arr..

캐시란? 자주사용하는 정보를 따로 저장해놓는, 저장소

URI 인터넷 상의 파일을 구분하기 위한 문장 - ( Uniform Resource Identifier ) ( URL과 URN으로 나뉨 ) URL 인터넷상 파일의 위치를 나타내는 문장 - ( Uniform Resource Locator ) URL = "https://google.com:443/mail/test?page=1#Hello" https:// - 프로토콜 google.com - 도메인 :443 - 포트번호 ( http = 80, https = 443 생략가능 ) /mail/test - 경로 ( path ) ?page=1 - 쿼리(query) 문자 #Hello - Fragment URN 인터넷 상 파일의 고유한 이름 - ( Uniform Resource Name ) ( 프로토콜과 위치정보를 빼고, ..

CORS란? Cross-Origin Resource Sharing 서버와 통신가능한 도메인과 포트번호를 제한해놓는 기능. ( feat. URI란? - 도메인 설명 ) ( 도메인에 따라, 리소스 공유할지 말지 조절! ) HTTP POST 요청에 대한 메타데이터를 먼저 보내고 ( 실제 데이터 아님 ) 서버는 이 메타데이터가 안전하다고 파악할 때만, 요청을 허용한다. ( 악의적인 목적의 데이터를 서버로 보내지 못하도록 ) CORS 동작 방식 1. 보내고 싶은 요청에 대한 정보를 미리 전달 * 아직 실제 요청은 하지 않는다. 주소 정보 (Origin) 메서드 정보 (POST) 헤더 정보 (X-PINGOTHER, Content-Type 등등) 2. 요청 정보를 바탕으로, 필요한 권한 허용 요청할 주소 (Origi..

Apollo Studio 란? Apollo를 이용해서, Apollo Server와 Apollo Client를 쉽게 연결하고, ( GraphQL + Apollo + Frontend ) 여러가지 추가 기능을 제공한다. Apollo Studio의 기능 Apollo Server에서 실행했던 명령어들 ( Query, Mutation )의 기록을 확인할 수 있다. 추후 추가 Apollo Studio 사용 방법 1. 회원 가입하기 Apollo Studio Studio is a hub for creating, evolving, and consuming your graph for all members of your team. studio.apollographql.com 2. 새로운 그래프 만들기 New Graph를 눌러..

해결하고 싶은 문제점 이전 게시글에서, Next.js에서는 pages 폴더 내부의 파일로 페이지를 관리한다고 했다. 하지만 이런 페이지들을 만들어야 할때는 어떻게 할까? 게시글 상세페이지 유저 프로필 페이지 위의 경우에, 하나씩 페이지를 직접 만들게 되면, 너무 많은 페이지를 만들어야 한다. Nest.js에서는 하나의 페이지를 공유하는 방식을 사용할 수 있고, 이를 사용해, 불필요한 반복작업을 줄일 수 있다. 해결방법 // 여러개의 게시글들 중에, 하나의 게시글 보여주기위한 페이지만들기 // pages/posts/[id].tsx // uri 매개변수 받아오기 위한 모듈 불러오기 import { useRouter } from 'next/router' const Post = () => { // useRout..

prisma에서 DB 데이터를 가져올때, include를 사용해야 하는 경우 처음으로 참조하는 테이블과 다른 테이블에 있는 정보를 가져와야 할때 ( 처음 : 게시글 -> 두번째 : 댓글 정보 )