아무거나

npx prisma generate 명령실행 후 애플리케이션 구동시에 DB/컬럼 관련 오류가 발생하는 경우 prisma 에서 마이그레이션은 schema.prisma 파일에 정의해놓은 스키마에 변화가 있을 경우 사용하고 있는 DB 에도 업데이트를 해주기 위해 사용하는 연산 그러나 여기서 히스토리가 꼬이는경우 즉, 스키마 파일을 수정 하기 전에 마이그레이션을 하지 않고 그냥 버전을 건너 뛰어서 마이그레이션을 할 때 발생함 해결하려면 기존 히스토리를 무시하고 새롭게 마이그레이션을 진행하고 이제 그 마이그레이션 부터 다시 마이그레이션을 적용하는 방법 (마이그레이션으로 인하여 DB도 초기화가 되어 데이터가 날아가므로 반드시 백업을 해야된다!) $ prisma migrate dev --name initial-mig..

Mocking 라이브러리를 활용하자 프론트엔드 개발시에 가장 이상적인 프로세스는 기획, 분석, 백엔드 개발, 프론트 개발들의 작업들이 서로 겹치지 않고 각각 진행되는 것이 좋다. 하지만 진행하는 과정에서 나오는 이슈 또는 요구사항의 변경등으로 인하여 번거롭게 작업을 진행해야되는 경우가 많다. 또한 프론트 엔드 영역과 백엔드 영역에 대한 일정이 서로 겹치게 동시 진행하는 경우도 많으므로 백엔드의 API 의 의존적이게 작업해야하는 프론트엔드의 경우는 백엔드 API 기능들이 개발서버에 배포되기 전까지 프론트엔드에서는 진행하기에 번거롭다. (물론 백엔드쪽에서 굳이 개발서버 배포를 안해도 로컬에서도 바로 확인 할 수 있는 다른 방법들이 있지만 인원이 많을 경우 변동성이 적은 개발서버 기준으로 작업하는것이 안정적이..

오래전에 작성된 글을 복사해온거라 직접 테스트 해보는 것을 권장 ( 참고용 정도로만 올렸음 ) Scroll Down 구현 // Render DOM // ref가 지정된 곳으로 포커싱이 될 예정이다. forEach({ .... }) // 스크롤 다운 함수 async handleScrollDown() { if (this.scrollLocationRef && this.scrollLocationRef.current) { this.scrollLocationRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' }) } } // 실행되는 함수 // 동적 추가할 때 마다 새로 생성된 행의 Ref를 찾을 수 없어서 우선 재귀함수로 해결.. (__) this.h..

오래전에 작성된 글을 복사해온거라 직접 테스트 해보는 것을 권장 ( 참고용 정도로만 올렸음 ) Fragments: DOM에 별도 노드를 추가하지 않고 자식 목록을 그룹화 할 수 있다. // 1. Fragments를 사용하면 아래와 같이 된다. render() { return ( ) } // 2. Fragments를 짧은 구문으로 사용한 예시이다. // 짧은 구문은 많은 도구에서 아직 지원하지 않기 때문에 명시적으로 를 사용하자. render() { return ( ) } // 3. key가 있는 Fragments // Fragments에 key가 있다면 문법으로 명시적으로 선언해야 합니다. 예를 들어 정의 목록을 만들기 위해 컬렉션을 fragments 배열로 매핑하는 사용 사례이다. return ( {p..

오래전에 작성된 글을 복사해온거라 직접 테스트 해보는 것을 권장 ( 참고용 정도로만 올렸음 ) useRef 리액트를 사용하면서 가끔씩 직접 DOM을 선택해줘야하는 상황이 발생할 수 있다. 예를 들어 Element의 크기를 가져온다는지, 스크롤을 제어 한다는지 등 다양한 상황에 대해 대응하기 위하여 react에서는 ref를 사용하고 Functional Component에서 ref를 사용하기 위해선 useRef라는 React Hook 함수를 사용한다. import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const..