전체 글
-
#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만의 문법을 ..
-
가상 코인세탁소 회원예약제DB 2023. 5. 4. 01:37
셀프 빨래방을 운영중인 A씨는 자동화시대에 맞춰 매장내 키오스크와 휴대폰 어플리케이션을 통해 세탁기 예약 시스템을 구축해 대기시간을 최소화하고자 한다. 아래는 A씨 측에서 제공한 요구사항이다. 1. 어플리케이션은 회원제로 로그인이 필요하며 회원번호, 아이디, 비밀번호, 전화번호, 주소, 잠금여부 정보를 저장한다. 2. 세탁기는 총 12대로 10대는 어플리케이션을 통한 예약제, 2대는 기존과 같이 예약을 거치지않고 그때그때 사용가능하며, 예약 세탁기에 한해 세탁기번호, 작동타입(고장및 점검체크)를 관리한다. 3. 예약은 한시간 단위로 가능하며, 시간대별 정보로는 예약번호, 날짜/시간, 세탁기번호, 예약자 회원 번호를 저장한다. 4. 예약시간으로 부터 10분내로 미 결제 시 블랙리스트에 회원번호가 등록되며 ..
-
[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라는..