💡 TIL 20230907 - Tailwind CSS break-all (텍스트 줄바꿈 깨지는 현상) 태그의 글씨가 정상적으로 줄바꿈 되지 않는 현상 현재 모바일 반응형 작업 중인데, 왼쪽 이미지처럼 숫자를 길게 쓰면 줄바꿈이 되지 않고 영역 밖을 튀어나가는 현상을 발견했다. (암흑요리왕님께 무한한 감사) 그리고 오른쪽 이미지의 경우 이미지가 있는 다른 컴포넌트들은 정상적으로 나오는데, 저 "새콤달콤 치커리 샐러드"만 사진이 튀어나가는 것이 아니겠는가.. (딥빡) 암튼 치커리 샐러드를 고치다가 원인을 잘 모르겠어서 헤매던 중, 암흑요리왕님의 댓글을 발견하고 좀 찾아보니 tailwind의 Word Break라는 유틸함수를 알게 되었다. 엘리먼트 내에서 문장 또는 문단의 단어 나누기를 제어하는 유틸리티이다...
💡 TIL 20230831 - 기술면접 질문 정리 - 버츄얼 돔/리얼 돔, useRef, useEffect 1. 버과 리얼 돔의 차이 먼저 DOM이란 Document Object Model의 약자로 웹 어플리케이션의 HTML 요소들을 노드라는 단위로 나누어 노드들을 연결한 트리 구조의 객체입니다. 실제 DOM은 브라우저 화면을 렌더링할 때 이용하는 HTML 요소(노드)들의 트리 구조이고, 가상 DOM은 실제DOM의 가벼운 복사본이며, 메모리에만 존재하는 가상의 트리구조 입니다. 가상 DOM은 React.js, Vue.js와 같은 라이브러리와 프레임워크에서 사용됩니다. 둘의 가장 큰 차이점은 실제 DOM의 일부를 변경하면 전체 DOM을 한꺼번에 다시 렌더링하기 때문에 성능 문제가 발생할 수 있습니다. 또한..
💡 TIL 20230830 - react-hook-form mode mode란? mode란 React-hook-form의 useForm의 props 중 하나로, 사용자가 submit을 하기 전에 유효성 검사를 진행하는 것이다. (validation strategy before submitting behaviour) mode 옵션을 사용하면 사용자가 양식을 제출하기 전에 유효성 검사 전략을 구성할 수 있다. 유효성 검사는 handlesubmit 함수를 호출하여 트리거되는 onSubmit 이벤트 중에 발생한다. 1) onSubmit 유효성 검사는 제출 이벤트에서 트리거되며, 유효하지 않은 입력은 onChange 이벤트 리스너에 연결하여 유효성을 재확인한다. 2) onBlur 블러 이벤트에서 유효성 검사가 트..
💡 TIL 20230824 - import { useRouter } from “next/router”와 “next/navigation” 차이 next.js 13에서의 useRouter 훅 useRouter는 next/router에서만 불러와야 하는 줄 알았는데, 자꾸 import하려면 next/router와 next/navigation 두 가지가 떠서 궁금하기도 했고 오늘 위와 같은 에러를 마주해서 찾아보았다! 둘의 차이는 무엇? useRouter from next/route Page router으로 라우팅 시 사용 useRouter from next/navigation v13 이후 App router으로 라우팅 시 사용 Next.js 13 App router 이번에 진행 중인 프로젝트는 App rout..
💡 TIL 20230822 - Prisma, Planet scale 셋업 및 연결 방법 1. Prisma, Planet Scale, Vitess 1) Prisma Prisma는 데이터베이스를 다루기 위한 현대적이고 강력한 ORM (Object-Relational Mapping) 도구이다. Prisma를 사용하면 데이터베이스 스키마를 간편하게 정의할 수 있고, 데이터베이스 쿼리 역시 쉽게 작성하고 실행할 수 있다. Prisma는 다양한 데이터베이스 시스템과 통합할 수 있으며, TypeScript와 JavaScript를 지원하며, 데이터 모델과 데이터베이스 스키마를 동기화하여 개발자에게 강력한 개발 경험을 제공한다. 2) Planet Scale MySQL과 호환되는 서버리스 데이터베이스로, 개발자 경험을 저..
💡 TIL 20230820 - Prisma 1. Prisma란? 1) Node.js와 TypeScript ORM ORM은 Object Relational Mapping의 약자이다. 기본적으로 번역기의 개념이라고 생각하면 되는데, JS 또는 TS 코드와 DB 사이에 다리를 놓아주는 역할을 한다. SQL같은 데이터베이스 언어를 작성하지 않고 타입스크립트 코드로 작성하여 오류가 발생하기 전에 알 수 있다. PostgreSQL, MySQL, SQL Server, SQLite, MongoDB와도 사용할 수 있다. 2) schema.prisma Prisma를 사용하기 위해서는 먼저 Prisma에게 DB가 어떻게 생겼는지 설명해주어야 하는데, 이 설명은 `schema.prisma`라는 파일에 작성한다. // sche..
💡 TIL 20230819 - Tailwind CSS 장단점, 연습예제 1. Tailwind CSS란 Tailwind CSS는 utility-first 컨셉을 가진 CSS 프레임워크이다. 부트스트랩과 비슷하게 m-1(.m-1 {margin: 0.25rem}), flex(.flex {display: flex})와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다. tailwind는 제로 런타임으로 동작하며 빠르고, 유연하다. 1) 장점 프로그래밍 언어와 같은 추상화 수준을 제공해 스타일을 빠르게 적용할 수 있어 코드의 길이가 줄고, css 작업 시간이 절약된다. 컴포넌트 생성이 쉽고, 관리 및 유지보수가 편하다. 커스터마이징이 쉬워 원하는 대로 디자인을 바꾸..
💡 TIL 20230817 - SSR vs SSG vs ISR 저번 글에서는 CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링)의 차이점에 대해 공부했다면, 오늘은 SSR, SSG, ISR에 대해 정리해보았다. 1. SSR (Server Side Rendering) 1) 서버 사이드 렌더링 SSR은 CSR과 반대되는 개념으로 서버에서 페이지를 렌더링해서 클라이언트에 전달해주는 방식이다. Next.js에서 SSG나 ISR과 구분되는 이유는 렌더링되는 시점 때문인데, SSR은 사용자가 요청할때마다 그 시점에 페이지를 새롭게 렌더링한다. 그렇기 때문에 fetch 해야하는 데이터가 빈번하게 변경될 때 사용된다. 2) getServerSideProps getServerSideProps 함수는 serv..
💡 TIL 20230815 라이브러리 vs 프레임워크, CSR vs SSR 1. 라이브러리(React) vs 프레임워크(Next.js) React에서는 우리가 모든 것을 직접 생성하고 설정해 주었던 것들이 Next에서는 이미 만들어져 있다. 1) 📚 라이브러리 React는 JavaScript Library 어플리케이션을 만들 때 필요한 자원(기능: 함수)의 모임 응용 프로그램이 라이브러리를 사용한다. 개발자로서 사용하는 것 2) 🛠️ 프레임워크 Next.js는 React Framework 코드를 작성하는 기본 틀을 제공하여 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경 응용 프로그램은 프레임워크에 의해 사용된다. 개발자가 코드를 불러오는 것 코드를 적절한 위치에 잘 적기만 한다면 f..
