Root

서버, 클라이언트란? 서버 - 서비스를 요청받아, 제공하는 역할을 하는 부분 클라이언트 - 서비스를 요청하고, 제공받는 역할을 하는 부분 서버와 클라이언트 나누어 보기 MySQL - GraphQL - React - 사용자 1. 사용자가 React에게 데이터 요청 - ( C : 사용자, S : React ) 2. React가 사용자 요청에 맞춰 GraphQL 데이터 요청 - ( C : React, S : GraphQL ) 3. GraphQL이 React 요청에 맞춰 MySQL 데이터 요청 - ( C : GraphQL, S : MySQL ) 위의 경우에서 알 수 있듯이, 서버와 클라이언트는 상대적인 개념으로 어떤 데이터 송수신을 기준으로 잡느냐에 따라 달라진다. ( 서버없이 클라이언트가 존재할 수 없고, 클..

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..

input으로 체크박스를 만들고, label과 연결해주면 label을 클릭할때마다 체크박스를 활성화 할 수 있다. {* html파일 *} {* input에서 type을 지정해 checkbox를 만들고, label과 연결하기 위한 id를 만들어준다. *} {* label을 만들어주고, 연결하고 싶은 input의 id를 for요소에 적어준다. *} 라벨 내용~ 많이 사용하는 체크박스 형식 {* css파일 *} input { {* 원래 input 숨겨주기 *} display: none; } label { {* 라벨 텍스트 줄바꿈 열맞추기 *} display: block; } {* 사용자에게 보여줄 가상체크박스 만들기 *} label::before { content: ""; width: 16px; height:..

CSS 가상요소란? CSS선택자에 추가하는 키워드로, 우리가 선택한 요소의 일부분에만 스타일을 입힐 수 있게 해준다. 가상요소의 종류 가상요소 기능 p::first-line { 스타일 } p문단의 첫번째 줄에만 스타일을 적용한다. div::first-letter { 스타일 } p::before { content: "😀", 스타일... } p문단 바로 앞에 😀 아이콘 추가, 스타일 적용 p::after { content: "🤣", 스타일... } p문단 바로 뒤에 🤣 아이콘 추가, 스타일 적용 div::backdrop { 스타일 } div 내부, 콘텐츠가 없는 부분에 스타일 적용 div::cue { 스타일 } div::cue-region { 스타일 } div::grammar-error { 스타일 } div..

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..

1. 드래그 불가능하도록 만들기 user-select: none; 2.

hr 태그란? 웹페이지의 위의 요소와, 아래의 요소를 나누어주는 html 태그 hr 태그 사용법 Login {* 위아래를 나누고 싶은 부분에 넣어줍니다 *} 아이디를 입력해주세요

svg 란? 픽셀값이 아닌, 벡터값을 사용한 이미지 이미지를 아무리 키워도, 깨지지 않고 원래의 모양을 유지할 수 있다. ( 선명한 품질 유지 ) 텍스트 작성하기 텍스트를 입력하고, 마음에 드는 폰트를 적용시켜 주세요. 텍스트 변형하기 텍스트를 우클릭하고, 윤곽선을 만들어 줍니다. 선택도구를 사용하여, 파란색 점들을 마우스로 끌어당기면, 글자를 도형처럼 변형할 수 있습니다. 로고에 배경 크기 맞추기 오브젝트 > 대지 > 아트웍 테두리에 맞추기를 눌러줍니다. svg 파일로 저장하기 다른이름으로 저장, 파일 형식에서 SVG를 선택해주면 끝 입니다. 완성본