낭만 개발자 고포고

[prisma/orm] prisma 설치 및 테스트 기존에 typeORM을 쓰다가 좀 더 효율적인 ORM으로 교체를 위해 시도해보았다. #설치 및 초기화 npm install prisma -D npx prisma init #db를 선택하여 넣는다. generator client { provider = "prisma-client-js" } //원하는 db 선택 datasource db { provider = "mysql" url = env("DATABASE_URL") } //sample model User{ id Int @id @default(autoincrement()) phone Int? @unique email String? @unique name String avartar String? create..

[vscode/error]error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error Error: Not supported 다음과 같은 오류가 났을경우 node버전의 문제이다,최신버전으로 업데이트 해주면된다. $ sudo npm install -g n $ sudo n stable $ node -v 다음과 같이 스테이블 버전을 설치 후 버전을 확인해주면된다. #error #node #npm #version #update #next.config.js #solution

[mac/vscode] xcrun error invalid active developer path 오류 해결(error) mac os 환경에서 os업데이트를하면 터미널환경 개발환경에 대부분 툴에서 다음과 같은 오류를 토해낸다. #해결법 $ xcode-select --install 터미널에 다음과 같이 입력해주면, 곧 xcode-cli 설치를 통하여 손쉽게 해결이 가능하다. #apple #mac #macos #update #xcrun #맥 #vscode #git #react #error

[nextjs+ts]react hook page loaded 이벤트(useEffect) #windows 개발의 loaded 같은 이벤트 #react의 componentdidmount 와 같은 이벤트 react hook에서는 useEffect 이다 #정의부 첫번째 인자는 콜백함수를 구현하며, 두번째 인자는 영향받을 객체의 배열를 저장한다. 아무것도 넣지않으면, 전체 적용, 빈 배열([])을 넣으면 아무것도 적용하지 않은 것이니 최초의 1번만 실행한다.(loaded개념) function useEffect(effect: EffectCallback, deps?: DependencyList): void; #사용법 - 마지막 인자에 []을 넣음으로써 최초 1번만 수행한다. useEffect(() => { setTi..

[nextjs+ts]( 번외) tailwindCSS peer와 group을 활용하여 다른 객체의 상태값 받아오기 / peer와 group의 차이 #[같은 점] peer와 group은 각각 등록을 한 후 등록된 그룹내에서 다른 곳에서 해당 객체들을 부를 수 있다 #[다른 점] peer는 동일 수준의 객체 group은 하위 객체(자식) 를 각각 접근 가능하다. #[peer]의 예 - 아래와 같이 input에 peer를 등록하고, span에서 input 값에 따른 예외 처리를 진행한다. 단 peer가 먼저 등록 후 하위에 이벤트처리를 해줘야한다 아이디 아이디를 입력해주세요 #[gorup]의 예 - details에 그룹을 등록하고, 자식인 details의 상태에 따라 summary 콘텐츠를 변경한다. 모니터링 ..

[nextjs+ts]( 번외) tailwindCSS form 플러그인(plugin) 설치 및 테스트 #[설치] npm i @tailwindcss/forms #[설정] tailwind.config.js module.exports = { content: [ "./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [require("@tailwindcss/forms")], }; #nextjs #ts #TailwindCSS #css #js #react #join #func #form

[nextjs+ts]( 번외) join과 tailwind를 활용하여 동적 css 구현 #join 함수를 활용하여 손쉽게 조건문을 적용 가능하다. #조건을 위한 스테이츠 생성 const [loginState, setLoginState] = useState("email"); #함수생성 function changeclass(...classnames: string[]) { return classnames.join(" "); } #조건 적용 클릭 #nextjs #ts #TailwindCSS #css #js #react #join #func #change view

[nextjs+ts]( 번외) TailwindCSS 지원 Class를 제외한 값 커스텀하기 TailwindCSS는 정말 다양한 custom한 정보를 제공해주지만, 프로젝트를 진행하다보면 그 외에 값을 적용해야할 때가 있다. 감사하게도 Tailwind는 [] 기능을 통하여 손쉽게 해당 커스텀 기능을 제공해준다. #기존 클래스 - 다음과 같이 클래스를 지정하여 이용한다. Test #커스텀으로 적용하기 Test 다음과 같이 []를 통하여 커스텀 적용이 가능하다. #nextjs #ts #TailwindCSS #css #js #react

[nextjs+ts]프로젝트 04.로그인 페이지 TailwindCSS Modifiers를 이용한 예외처리/이벤트 처리 [결과 화면] peer를 통하여, 예외처리, hover를 통하여 이벤트 처리를 진행하였다. #react에서 복잡하게 처리해야하는 작업들이 한줄로 간편하게 처리되었다. 예외처리 할 객체 peer등록 후 peer-invalid:bg-red-600 등의 이벤트 처리를 하면된다. 이벤트 처리 할 객체 hover:bg-red-600 등의 이벤트 처리를 하면된다. import type { NextPage } from "next"; const Test: NextPage = () => { return ( Test CMS 아이디 아이디를 입력해주세요 비밀번호 패스워드를 입력해주세요 문의가 있는 경우, 아..

[nextjs+ts]프로젝트 03. TailwindCSS로 기본 로그인 페이지 만들기 #기본 UI를 간단하게 작성해보았고, 트랜지션, 동적코드, 백엔드와 연동은 순차적으로 진행 할 예정이다. #[완성된 화면] #[소스코드] import type { NextPage } from "next"; const Login: NextPage = () => { return ( Test CMS 아이디 비밀번호 로그인 문의가 있는 경우, 아래의 이메일로 연락부탁드립니다. promoted.go@gmail.com ); }; export default Test; 프로젝트 경로 https://github.com/gofogo2/admin-cms-nextjs.git #nextjs #ts #TailwindCSS #css #js #re..