본문 바로가기

전체 글

 (220)
[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()로 동적 너비가 설정된 경우
[CSS] 색상을 사용하는 팁, contrast ratio 확인 방법 1.  메인 컬러를 웹사이트의 개성에 맞게 설정하세요: 컬러는 의미를 전달합니다!  🔴 빨간색주목성이 높음힘, 열정, 흥분을 상징강렬한 에너지를 표현 🟠 주황색빨간색보다 덜 공격적행복, 쾌활함, 창의성을 전달 💛 노란색기쁨, 밝음, 지성을 의미긍정적인 에너지를 표현 💚 초록색조화, 자연, 성장, 건강을 대표안정감과 평화로움을 전달 💙 파란색평화, 신뢰성, 전문성을 상징 ( 파란색 계열이 많이 쓰이는 이유 )차분하고 안정적인 이미지 💜 보라색부, 지혜, 마법을 상징고귀함과 신비로움을 표현 💗 분홍색로맨스, 관심, 애정을 나타냄부드럽고 따뜻한 감정을 전달 🟤 갈색자연, 내구성, 편안함과 연관안정감과 신뢰성을 표현 ⚫ 검정색힘, 우아함, 미니멀리즘을 상징동시에 슬픔과 비통함도 표현 출처https..
[CSS] 구글 개발자 도구에서 CSS 값 수정 단축키로 하기 위처럼 클릭 후 수정 모드로 변환한 뒤 1.  Alt + 위/아래: 0.1 단위씩 증가/감소 2. 위/아래 방향키: 1 단위씩 증가/감소3. Shift + 위/아래: 10 단위씩 증가/감소4. Ctrl + 위/아래: 100 단위씩 증가/감소  이제서야 알아서 슬픈 현실.. ㅠ
[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..
[React] 리액트 라이브러리 추천 목록(2024 기준) 기존 Ykss 님이 번역하신 글을 표로 정리한 글입니다 실 사용 경험과는 상관 없이 지극히 개인적 취향을 목적으로 정리하였으니,맨 아래 원문을 참고하시길 바랍니다. 구분이름 및 링크비고build toolVite 패키지 매니저pnpm성능적으로 npm 보다 향상된 pnpm기본적이고 가장 널리 사용되는 건 -> npm모노레포가 필요한 경우 -> Turborepo상태관리ZustandApi context 는 최적화시 개발자가 직접 최적화 해야하는번거로움이 있어 Zustand + tanstack Query 로 풀어낸다데이터 페칭 TanStack QueryREST API 또는 GraphQL API라우팅React Router타입스크립트면 TanStack RouterCSSTailwind CSS https://runebo..
[Next.js] Server Actions 시 놓치면 안되는 revalidatePath, revalidateTag ( 데이터 캐시 관리) Server Actions으로 진행하던 사이드 프로젝트에서 잘 작동하던 게시글 등록이,빌드 후에는 새 게시글이 리스트에서 반영이 되지 않는 현상이 일어났습니다. 구글링 후, 해결책을 찾을 수 있었는데 캐시 무효화 로직이 ( revalidatePath )빠져 있었습니다. 'use server' 를 명시한 서버 컴포넌트에서만 사용이 가능한 revalidatePath에 대해 정리해 봅니다.  1. revalidatePath사용 목적특정 경로의 캐시된 데이터를 무효화하고 새로운 데이터로 갱신할 때 사용됩니다.기본 문법revalidatePath(path, type?) - path : 데이터 캐시를 재검증할 url 경로- type : 'page' (디폴트 값), 'layout' 여기서 type은 두가지가 있는데 p..
[React] form submit과 관련된 useFormStatus 훅 useFormStatus는 마지막 폼 제출의 상태 정보를 제공하는 Hook입니다form 이 pending 상태일 때 다른 이벤트를 주고 싶을 때 사용하는 용도로 사용됩니다.(예 : submit 버튼의 텍스트를 submitting... 으로 바꾼다던지 ) const { pending, data, method, action } = useFormStatus();  tanstack query 의 useQuery 에서 보던 형태이다. pending: 불리언 값입니다. true라면 상위 이 아직 제출 중이라는 것을 의미합니다. 그렇지 않으면 false입니다. data: FormData 인터페이스를 구현한 객체로, 상위 이 제출하는 데이터를 포함합니다. 활성화된 제출이 없거나 상위에 이 없는 경우에는 null입니다...
[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 ..

티스토리툴바