Web
-
#2 헤더 UI 만들기Web/Next 2023. 6. 1. 03:00
먼저 기존 화면에서 이와같이 UI를 변경하였다. 변경하다보니 헤더는 모든 ui에서 유지되어야 함으로 page.tsx에서 layout.tsx로 헤더를 이동하였다. import './globals.css' import { Inter } from 'next/font/google' import Link from "next/link"; const inter = Inter({ subsets: ['latin'] }) export const metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function RootLayout({ children, }: { children: React.Rea..
-
#1 컨텐츠 구상Web/Next 2023. 6. 1. 02:01
1인 개발로 하며 생소한 ts와 next js를 사용하다보니 설계를 꼼꼼하게 하기보단 먼저 박아보고 조금씩 디테일을 추가하기로 하였다. 초기 컨텐츠로는 나에 대한 소개, 나의 기술 스택, 이력서, 경험한 프로젝트 총 4가지 컨텐츠로 결정이 났고 route 만 간단하게 연결해보자 이전 버전을 사용해본적이 없어 모르지만 13버전부턴 파일명이 아닌 디렉토리 명으로 라우트가 된다고 한다. 근데 글을 쓰다보니 컨텐츠들은 contents 디렉토리로 옮겨 합쳐야 보기도 이쁘고 관리도하기도 편할거 같다. import React from 'react' export default function Home() { return ( 어바웃입니다. ) } app/contents/about/page.tsx 아직은 ts만의 문법을 ..
-
[React] Custom Hook을 사용하자Web/Front-End 2021. 5. 20. 11:57
Custom Hook은 아주 편한 기능 중 하나이다. 내가 사용하고싶은 컴포넌트나 로직을 미리 정의해두고 매개변수를 통해 자유롭게 어디서든 가져다 쓸 수 있으면서 Hook 내부에는 react문법이나 다른 hook을 포함 시킬 수 있어 함수형 컴포넌트 개발을 하면 빼먹을수가 없는 부분이다. 간단하게 내가 만든 예제를 통해 뭐가 간편한지 작성하도록 하겠다. const usePage = () => { const [totalSize, setTotalSize] = useState(0) const [size, setSize] = useState(10) const [pageNumber, setPageNumber] = useState([]) const [selectedPage, setSelectedPage] = use..
-
[React] Infinity Scroll 구현Web/Front-End 2021. 5. 20. 11:45
무한 스크롤링이라곤 하지만 정확하겐 바닥에 닿으면 데이터를 새로 불러오는 로직이다. 여러 라이브러리가 존재하지만 순수 리액트만으로 작성을 해보았다. 먼저 스크롤이 화면 전체인 컴포넌트에서의 스크롤 구현이다. 해당 기능은 현재 진행중인 프로젝트내에서 여러곳에서 써야하므로 훅으로 구현을 하였다. const useScroll = (totalPage, limit) => { const [page, setPage] = useState(1) const ScrollPaging = useMemo( () => throttle(() => { let scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) let scro..
-
[React] 조건에 따른 컴포넌트 교체Web/Front-End 2021. 3. 19. 18:24
1. 삼항 연산자 return ( {a ? AComponent : BComponent} ) true or false 검사 return ( {a === 0 ? AComponent : a=== 1 ? BComponent : CComponent } ) 중첩 삼항연산자 개인적으로는 조건이 여러개가 붙으면 삼항연산자보단 return ( {0 : AComponent 1 : BComponent 2 : CComponent}[a]} ) 이렇게 쓰는걸 선호한다
-
[React] 정해진 횟수 연속 클릭 구현Web/Front-End 2021. 3. 11. 17:57
요구사항에 특정영역을 5회터치(or 클릭) 시 특정 페이지로 이동하는 기능이 있었다. 더블클릭같은 경우는 봤어도 5회 클릭은 구현해본적이 없어 조금 애를 먹다 구현을 하였는데 해당 내용을 포스팅 해보도록 하겠다. Logic.ClickCountCheck(history)} /> 컴포넌트에는 이렇게 작성을 하고 let clickCount = 0 export function ClickCountCheck (history) { clickCount = clickCount + 1 setTimeout(() => { clickCount = 0 }, 3000) if (clickCount === 5) { history.push('/A') } } 로직 함수내부에 이렇게 작성 하였다. useHistory로 만든 history라는..
-
[React] 같은 계층의 중첩 라우터끼리 페이지 이동Web/Front-End 2021. 3. 11. 17:47
App.jsx 에 Arouter와 Brouter를 정의한 후 Arouter에 A_AComponent와 A_BComponent 를 정의한다. Brouter에는 B_AComponent와 B_BComponent를 정의해준다. 이렇게하면 A_A => A_B 또는 B_A => B_B 로 useHistory나 Link태그를 통해 자유로운 이동이 가능해지는데 만약 A_A => B_A 로 이동은 가능할까? 기본적으로 url path는 변하지만 사용자가 직접 새로고침을 하지 않으면 렌더링이 되지않는 문제가 있다. 이유는 중첩 라우팅의 구조로 인해 A/A_A 에서 URL을 던지면 A/ 에서 찾게되는데 A/에는 B_로 시작하는 라우트가 없기때문에 렌더링이 되지 않는다. 그럼 어떤 방법이 있을까? 나는 페이지 이동을 성공 시..