본문 바로가기

Programing375

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.

티스토리툴바