본문 바로가기

웹개발

(15)
[CSS] margin: 0 auto 중앙 정렬이 작동하지 않는 경우 필수 조건은 아래 두개를 만족해야 합니다. 1. 블록 레벨 요소여야 함 (display: block, grid, flex 등) 2. 너비가 지정되어 있어야 함 (width, max-width)   대표적으로 작동하지 않는 케이스들입니다 1. position: absolute 또는 fixed 가 아니여야 합니다.(일반적인 문서 흐름에서 요소를 제거하기 때문)   2.float 속성이 적용된 경우  3.부모 요소에 display: flex가 적용된 경우  4.transform 속성이 적용된 경우  5. calc()로 동적 너비가 설정된 경우
[javascript] 객체와 배열 간의 변환 Object.fromEntries() / Object.entries() export default function Page() { async function createInvoice(formData) { 'use server' const rawFormData = { customerId: formData.get('customerId'), amount: formData.get('amount'), status: formData.get('status'), } // 데이터 변조 // 캐시 재검증 } return ...} Next js 에서 필드가 많은 폼을 작업할 때는 Object.fromEntries() 혹은 Object.entries() 메서드를 사용하면 좀 더 수월하게 작업할 수 있습니다. Object.fromEn..
[Next.js] Server Actions 시 놓치면 안되는 revalidatePath, revalidateTag ( 데이터 캐시 관리) Server Actions으로 진행하던 사이드 프로젝트에서 잘 작동하던 게시글 등록이,빌드 후에는 새 게시글이 리스트에서 반영이 되지 않는 현상이 일어났습니다. 구글링 후, 해결책을 찾을 수 있었는데 캐시 무효화 로직이 ( revalidatePath )빠져 있었습니다. 'use server' 를 명시한 서버 컴포넌트에서만 사용이 가능한 revalidatePath에 대해 정리해 봅니다.  1. revalidatePath사용 목적특정 경로의 캐시된 데이터를 무효화하고 새로운 데이터로 갱신할 때 사용됩니다.기본 문법revalidatePath(path, type?) - path : 데이터 캐시를 재검증할 url 경로- type : 'page' (디폴트 값), 'layout' 여기서 type은 두가지가 있는데 p..
[Next.js] react 와 next의 form submit 차이( Server Actions 시 ) 기존 react 에서 form 제출 시에는 export default function Signup() { function handleSubmit(e) { e.preventDefault() const formData = new FormData(e.target) console.log('formData', formData) const acquisitionChoices = formData.getAll('acquisition') const data = Object.fromEntries(formData.entries()) data.acquisition = acquisitionChoices } return ( Email ..
[Next.js] next 기초 1. App 라우팅   동적 라우팅 폴더명 기입방식 [folder]필수 파라미터입니다하나의 세그먼트만 매칭됩니다블로그 포스트, 제품 상세 페이지에 적합합니다[ ...folder ]최소 하나의 세그먼트가 필요합니다여러 세그먼트를 포함할 수 있습니다계층적 카테고리 구조에 적합합니다/shop/clothes (O)  /shop/clothes/shirts (O)[ [ ...folder ] ]선택적 모든 것을 포함하는 라우트선택적 필터나 검색 파라미터가 있는 페이지에 적합합니다   이렇게 대괄호 표기를 하면 /blog/post-1  /blog/post-2  /blog/post-3 이렇게 동적으로 라우팅이 가능해진다.그리고 [folder] 안의 page.js 에서export default function BlogPo..
[javascript] 문자열을 배열로 변환하는 방법들 코테나 실무에서 문자열을 배열로 변환하여 로직을 작성해야하는 경우가 종종 있습니다그럴 때 사용하는 방법은 아래 3가지 중 편한 방법을 선택하시면 됩니다 1. split() 사용 const str = "hello";const arr1 = str.split(''); // ['h', 'e', 'l', 'l', 'o']const str = "hello"; const arr1 = str.split(''); // ['h', 'e', 'l', 'l', 'o'] 2. spread 연산자 사용 const arr2 = [...str]; // ['h', 'e', 'l', 'l', 'o']3. Array.from() 사용 const arr3 = Array.from(str); // ['h', 'e', 'l', 'l', 'o']
[TanStack Query / React Query] useInfiniteQuery와 무한 스크롤 useInfiniteQuery는 페이지네이션이나 무한 스크롤과 같은 데이터 로딩을 구현할 때 사용됩니다.    1. useQuery 와 useInfiniteQuery의 차이  ● useQuery단일 데이터 객체 반환 한 번의 요청에 대한 응답만 저장 ●  useInfiniteQuerypages 배열: 모든 페이지의 데이터를 순서대로 저장 pageParams 배열: 각 페이지를 가져올 때 사용된 매개변수 저장 여러 페이지의 데이터를 누적하여 저장 좀 더 이해하기 쉽게 data에 로그를 찍어보면 useQuery 와 uesInfiniteQuery 의 반환되는 data 의 구조는 다음과 같은 차이가 있습니다   1-1. useQuery const { data } = useQuery({ queryKey: ['i..