오늘은 탑버튼을 만들었다. 찾아보니 간단하길래 그냥 대충 보고 만들면 되겠거니... 했는데? 했는데? 안 됐다. 이유는 공통으로 적용된 레이아웃에 overflow가 있으면 적용이 안 되는 모양... 나는 일단 탑버튼을 컴포넌트로 또 따로 분리했는데 onClick 이벤트가 발생했을 때 실행할 함수를 다른 컴포넌트 파일을 만들어 작성한다. 처음엔 그냥 window.scrollTo로 했었는데 window는 전체 창의 스크롤 위치를 변경하는 것이다. 그래서 찾아보니 공통 컴포넌트에 overflow가 있는 것을 발견@! 그럼 거기에 id를 넣어준다. 그냥 메인에 이렇게 넣어주기. 그리고 tsx 파일을 만들어서const topBtn = (e: React.MouseEvent) => { const main..
프로젝트를 시작했다! 드디어...일단 포켓몬 + 다마고치 느낌으로 이전에 만들었던 포켓몬 도감에서 업그레이드한 버전이다. 나는 상점 페이지 + 디테일 + 아이콘, 이미지 정리 + 폰트 추가를 맡았는데 폰트 추가는 그냥 거슬려서 넣은 거긴 한데 이게 또 이전엔 그냥 index.css에 폰트를 넣으면 됐어서 문제가 없었다. 그런데 이제 next.js + 바뀐 폴더구조(index.css 그딴 거 읎슴)으로 하니 폰트 변경을 하려다가도 ...어떻게 하드라? 하게 되는 것이었다... 물론 찾아보고 바로 성공했지만 그래도 기본적인 느낌이라 한번 정리! 나는 일단 눈누의 둥근모 폰트를 사용했다. 가장 먼저! global.css 파일에 들어간다. @tailwind base;@tailwind components;@tai..
타입 정리 원시 데이터 타입 (Primitive Types)원시 데이터 타입은 가장 기본적인 데이터 종류다. 1. 숫자 (number)let product_id: number = 124981; 2. 문자열 (string)let product_name: string = 'VR 글래스'; 3. 불 (boolean)let is_waterproofing: boolean = false;배열 타입 (Array Types)TypeScript에서 배열 타입을 명시적으로 지정하면, 특정 타입의 값만 배열에 담을 수 있다.1. 문자열 배열 (string[])let members: string[] = ['이권', '감장겸', '장도일'];2. 숫자 배열 (number[])let nums: number[] = [100, 10..
useState 심화 1. 간단한 로그인 폼 ☆문제import React from 'react';function LoginForm() { return ( 로그인 );} 답더보기function App() { const [inputEmail, setInputEmail] = useState(''); const [inputPassword, setInputPassword] = useState(''); const loginUser = () => { setInputEmail(''); setInputPassword(''); }; return ( setInputEmail(e.target.value)} va..
리액트 라우터 돔 복습, 모달 만들기! 오늘은 리액트 라우터 복습 강의, 모달 만들기 강의를 듣고 라이브 코딩을 했다 좀 헷갈리긴 했는데 어쨌든 끝냈다! 일단 페이지 3개, 모달을 2개 만든다. } /> } /> } /> } /> 리액트 라우터 돔을 설치하고, Routes에 Route를 만들어 저렇게 페이지를 연결해준다. 그리고 배웠던 게 페이지 모달, 스위치 모달이었는데 페이지 모달은 저렇게 페이지를 연결해서 불러오는 것이고, 스위치 모달은 원래 알던 방식으로 useState를 이용해 모달을 띄우는 방법이었다. 페이지 모달은 userModal로 UserPage Navigate('/')}>home { ..
next.js 에서 쿼리 세팅하기!ㄹㅇ루 간단하다...yarn add @tanstack/react-query이렇게 설치하는 건 같고 // src>app>provider.tsx"use client";import React from "react";import { QueryClient, QueryClientProvider } from "@tanstack/react-query";function QueryProvider({ children }: React.PropsWithChildren) { const queryClient = new QueryClient(); return ( {children} );}export default QueryProvider;provider.tsx 파일을 만들어서 저렇게 넣어..
