본문 바로가기

전체 글402

layout과 template layout.tsx전체 공통 레이아웃layout 파일을 작성하면 segment와 그 자식 node에 있는 요소들이 공통적으로 적용받게 할 UI를 작성할 수 있다.예를 들어 header나 footer같은 공통 요소를 말한다.Next.js 프로젝트를 생성하고 나면 src/app/layout.tsx가 자동으로 생성되어 있다.이 파일에 레이아웃을 작성하면 라우팅을 몇 개를 해놨든 모든 페이지에 공통적으로 적용된다.그리고 그 라우팅 된 페이지들에서 상태가 변경되더라도 이 layout.tsx 파일은 최상위 부모 컴포넌트이기 때문에 리렌더링이 되지 않아 깜빡임 없는 사용성을 제공할 수 있다.라우트별 공통 레이아웃앱 라우팅 별로도 레이아웃을 지정할 수 있다.위 폴더 트리를 보면📦about ┣ 📂company ┃ ┗.. Programing/Next.js 2024. 7. 2.
App 라우팅 이해하기 주요개념leaf: children이 더이상 없는 node를 의미함.URL Segment : / 슬래시로 분류된 URL path의 한 부분을 말함.URL path : 도메인 이후 따라오는 전체 URL 부분을 말함.파일(폴더) 기반의 라우팅page.tsx/ path로 접근했을 때 보여지는 페이지의 이름이다.이 이름과 파일명이 다르면 페이지가 보이지 않는다.static routingsrc/app 폴더 내부에 위치한 폴더가 /path가 된다.예 ) src/app/info 폴더가 있다면, localhost:3000/info가 path가 되고, info 폴더 안에 있는 page.tsx가 이 path에 접근했을 때 렌더링 되는 페이지.폴더를 중첩해서 /path를 여러 개 만들 수 있다.예 ) src/app/info/.. Programing/Next.js 2024. 7. 2.
Next.js 프로젝트 세팅하기 참고Next.js 공식 문서https://nextjs.org/docs/getting-started/installation Getting Started: Installation | Next.jsCreate a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.nextjs.org시스템 요구사항Node.js 18.17 이상MacOS, Windows, Linux 지원자동설치npx create-next-app@latest설치 메시지 선택 (Y/N)What is your project named? my-app// 프로젝트 이름 설정Would you like t.. Programing/Next.js 2024. 7. 1.
Tailwind :: hover 애니메이션 : 위로 살짝 올라가기 trnasition-tranform : 호버와 같은 변환 속성에 대해 트랜지션을 적용duration-400 : 지속 시간을 400ms(0.4s)로 설정hover:-translate-y-2 : 호버 시 요소를 0.5ream (8px) 만큼 위로 이동시킴. translate 앞에 - 붙어 있으면 위로, 양수면 아래로. Programing/CSS 2024. 6. 30.
Tailwind :: 마우스 호버 시 살짝 커지는 애니메이션 Programing/CSS 2024. 6. 30.
Supabase SQL 쿼리로 민감한 데이터 한방에 별표 처리하기 상황supabase에 민감한 자료가 있다.그런데 이것을 API 호출로 받아와서 렌더링 해야 하는데 부담스러운 상황이다.일단 데이터를 받아오고 프론트엔드에서 코드로 텍스트를 변환하는 방법도 있겠지만, CSR을 하지 않는 이상 네트워크 탭에서 응답값을 전부 볼 수 있기 때문에 SSR에서는 해결책이 아니다.처음부터 별표처리된 데이터를 받아오는 것이 가장 안전하겠다.그런데 원본 데이터를 훼손시킬 순 없으니 별표 처리 된 데이터 컬럼을 만들어서 그것을 가져오려고 한다.방법UPDATE bankstatementSET securedname = CONCAT( LEFT(name, 2), REPEAT('*', GREATEST(LENGTH(name) - 2, 0)));bankstatement : 데이터 베이스 테이블 이름.. Programing/Server 2024. 6. 29.
supabase jsonb 컬럼 타입 지정 방법 export interface Expense { details: {content: string[]};} 아래와 같은 데이터 형식을 지정할 때 쓴다.{ "content": [ "계좌개설 후 계좌관리자 토스머니 자동으로 이동된 건", "", "" ]} Programing/Server 2024. 6. 29.
실수로 GitHub에 올려버린 .env 지우기 gitignore에 환경변수 파일 설정# .gitignore.env환경변수 파일 캐시에서 제거git rm --cached .env변경사항 커밋git commit -m "Remove .env file from repository"변경사항 pushgit push origin main  위 과정은 리포지토리에서 파일만 삭제하는 것이고 커밋 로그는 그대로 남아 있어서 이곳에서 볼 수 있으니, 필요하면 커밋 로그를 지우는 명령어를 사용해서 추가 조치한다. Programing/Git 2024. 6. 29.
React Tailwind :: 모바일 고려 Layout 컴포넌트 Layout 컴포넌트// src/components/Layout.tsximport React, { ReactNode } from 'react';type LayoutProps = { children: ReactNode; }const Layout : React.FC = ({ children }) => { return ( {children} );};export default Layout;max-w-full: 모바일 장치에서 컨테이너가 전체 너비를 차지하도록 설정sm:max-w-screen-sm: 작은 화면에서 최대 너비를 screen-sm으로 설정md:max-w-screen-md: 중간 크기 화면에서 최대 너비를 screen-md로 설정lg:m.. Programing/CSS 2024. 6. 29.
Supabase + TanStack Query + Intersection Observer :: infinite scroll 구현 개발 환경ReactViteTypeScript사용 라이브러리TanStack QuerySupabaseReact-Intersction-Observer패키지 설치yarn add @tanstack/react-query @supabase/supabase-js react-intersection-observer 단, supabase 셋업은 완료된 상태로 가정함.데이터 fetch 함수 작성supabase에서 어떤 데이터를 가져올 것이고, 데이터를 스크롤 한 번당 얼마나 끊어서 가져올 것인지 설정하는 함수이다.별도 컴포넌트로 작성해도 되고, useInfiniteQuery를 작성한 커스텀 훅 바로 위에서 작성해도 좋다.아니면 fetch만 모아 놓은 api.ts 같은 파일에 다른 fetch 함수들과 모아서 작성해도 좋다.im.. Programing/React 2024. 6. 29.

티스토리툴바