💡 TIL 20230909 - JavaScript 동기, 비동기, 비동기 프로그래밍의 필요성 동기와 비동기 동기 처리 방식은 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다는 장점이 있지만, 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹 되는 단점이 있습니다. 비동기 처리 방식은 현재 실행 중인 태스크가 종료되지 않은 상태라 해도, 다음 태스크를 곧바로 실행하므로 블로킹이 발생하지 않는다는 장점이 있지만, 태스크의 실행 순서가 보장되지 않는다는 단점이 있습니다. 비동기 프로그래밍의 필요성 자바스크립트는 싱글 스레드 언어입니다. 다시 말해, 자바스크립트는 한 가지 작업밖에 수행하지 못합니다. 그래서 자바스크립트로 코드를 구동하면 ‘순차적’으로 처리합니다. 이로 인해 무거운 작업들을 다량으로 ..
💡 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 20230826 - 일시적 사각지대 TDZ(Temporal Dead Zone) 1. 일시적 사각지대(Temporal Dead Zone)이란? TDZ 는 스코프의 시작 지점부터 초기화 시작 지점까지의 사각지대 구간을 의미한다. 즉, 선언 단계와 초기화 사이에 잠시 머물러있는 구간이다. 2. 변수 선언의 3단계 1) 선언 단계(Declaration phase) 변수를 실행 컨텍스트의 변수 객체에 등록한다. 스코프가 참조하는 대상 2) 초기화 단계(Initialization phase) 실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만든다. undefined로 초기화된다. 3) 할당 단계(Assignment phase) 사용자가 undefined로 초기화된 메모리에 다른 값..
💡 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과 호환되는 서버리스 데이터베이스로, 개발자 경험을 저..
🚨 발생 문제 Unhandled Runtime Error Next.js에서 텍스트 에디터 라이브러리인 react-quill을 불러오는데 document is not defined라는 에러 메시지 발생 🤔 문제 원인 react-quill 라이브러리는 SSR을 지원하지 않음 Next.js는 기본적으로 서버 사이드에서 렌더링을 하는데, react-quill 라이브러리는 SSR을 지원하지 않고, 클라이언트에서만 동작 quill editor는 document 객체를 조작해 동작하므 document 객체가 로드 된 이후 quill 에디터를 import 하도록 해야 함 💊 해결 방법 Lazy Loading Next.js의 Lazy loading은 경로를 렌더링하는 데 필요한 JavaScript의 양을 줄여 애플리케..
💭 부트캠프 3개월 회고 들어가며 짧다면 짧고, 적당하다면 적당한 3개월의 부트캠프 기간이 지나고 앞으로 딱 한 달, 파이널 프로젝트를 남겨두고 있다. 시간 왜이렇게 빠르냐.. 뭔가 많은 걸 배워오긴 했는데 아직 배움의 깊이가 얕다는 생각은 지울 수 없는 것 같다. 그래도 이런 걱정보다는 부트캠프 처음 때와 비교하면 아무것도 모르던 내가 이제는 리액트 프로젝트도 여러 번 해봤고 또 멀게만 느껴졌던 Next.js도 다루고 있는걸 보니 많이 성장한 것 같아 뿌듯하다는 생각을 더 하기로 했다. 그 이유는 저번에 밤에 남아서 당시 팀원들 그리고 튜터님과 스몰톡을 했던 적이 있는데, 그 때 이 로드맵을 보여주시면서 여기서 얼마나 많은걸 했느냐고 격려해주셨던 기억이 있다. 아직도 모르는게 많다는 생각에 걱정을 하던..
💡 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..
