목록분류 전체보기 (142)
뉴히의 개발 로그
javascript로 네이버 소셜 로그인 구현하기 1 (로그인)
네이버 개발자 센터 > application > 애플리케이션 등록 api 이용신청애플리케이션 이름 넣고 사용할 API 선택 (네이버 로그인)사이트에 필요하지 않은 정보까지 사용체크하면 검수시에 반려나니 사이트에서 보여지는 필요 정보들만 선택 서비스 URL 에 웹사이트 주소, callback URL에 로그인 완료후 보여질 페이지 URL 등록 모두 넣고 등록하세요!그리고login 페이지와 callback 페이지 작업https://developers.naver.com/docs/login/web/web.md Web 애플리케이션 - LOGIN네이버 로그인은 서버 사이드 언어인 PHP나 Java로 개발한 웹 애플리케이션에도 적용할 수 있습니다. 또한 프런트엔드에서 사용하는 JavaScript를 사용해도 적용할 수 ..
typescript '() => void' 형식은 'MouseEventHandler<HTMLDivElement>' 형식에 할당할 수 없습니다
'(id: string) => void' 형식은 'MouseEventHandler' 형식에 할당할 수 없습니다. 'id' 및 'event' 매개 변수의 형식이 호환되지 않습니다. 'MouseEvent' 형식은 'string' 형식에 할당할 수 없습니다. ts(2322) index.d.ts(2424, 9): 필요한 형식은 여기에서 'IntrinsicAttributes & HTMLAttributes & RefAttributes' 형식에 선언된 'onClick' 속성에서 가져옵니다. const onClickItem = (id: string) => { router.push(`products/${id}`); }; 해결 onClickItem(id)}>
[supabase] Authentication Policies RLS(row-level security) 인증 보안 정책 오류/해결/추가 방법
Uncaught (in promise) Error: new row violates row-level security policy for table "users" at userUpdate (auth.ts:35:31) at async signUpUser (auth.ts:30:5) authentication > Policies > 해당 테이블 우측상단 Disable RLS 이렇게 RLS 보안을 비활성화 시키면 문제는 해결된다. 그러나 그보다 더 좋은 방법은 user 테이블에 정책을 추가하는게 더 좋을듯 하다. 우측 상단 New Policy > Get started quickly >Enable insert access for authenticated user only ~~ >INSERT를 허용하면된다. 참고 :..
[React hook form] 라이브러리 사용법
useForm resister register 함수의 두번째 인자값으로 옵션을 넘겨줄 수 있다. required : 필수입력 min max minLength :최소길이 maxLength :최대길이 pattern { value: 정규식, message: 형식이 맞지않을때 전할 메세지 } validate aria-invalid aria-invalid={errors.email ? 'true' : 'false'} 웹접근성을 위한 aria-invalid 속성을 추가하면 사용자에게 시각적으로 안내 가능 그러나, aria-invalid사용시에는 isSubmitted 속성을 같이 사용해줘야 한다. 아무 정보가 없어도 박스에 초록불이 들어와 있기때문 isSubmitted 는 submit 버튼을 한번이라도 클릭하면 tru..
[NextJS] Next.js 13이상 - App Router 기본 폴더 구조
Page.tsx 가 메인페이지 그를 감싸는 Layout.tsx 페이지생성은 src 아래 폴더생성(subpage)>page.tsx 파일생성하면 페이지 생성완료 ex) http://www.ddd.com/subpage subpage에 page.tsx는 같은 레벨에 layout파일이 있다면 layout으로 감싸지며 그상위 폴더에 layout파일이 또있으면 또 감싸지고 그상위 폴더에 layout파일로 또감싸진다 page router의 경우는 pages > index.tsx -> main pages폴더 아래 파일을 생성하면 페이지생성이 완료 된다. ex) pages>about.tsx --> www.ddd.com/about 다이나믹 라우팅의 경우 app 폴더아래 첫번빼 경로 폴더를 만들고 다이나믹하게 바뀌는 segm..
vscode ftp-simple : vscode ftp 자동 저장 설정
vscode 좌측하단 확장팩 아이콘을 누른 후 ftp-simple을 검색해 설치 F1을 눌러 ftp로 검색한 후 ftp-simple: config - FRP connection setting 클릭 ftp 정보 입력 ( ftp 서버 선택시 뜰 이름을 "name" : "-----"여기 넣어주세요) F1을 눌러 ftp-simple : Remote directory open to sorkspace 클릭 아까 ftp 정보 입력할대 넣은"name" : 부분에 본인이 지정한 이름이 뜹니다 그걸 클릭!
react 프로젝트 생성 - nextjs 프레임워크로 프로젝트 생성/실행 with TypeScript
프로젝트 생성 node 먼저 설치가 되어있어야한다. // 최신 버전 설치 npx create-next-app@latest 프로젝트명 // start with typescript (tailwind, eslint도 한번에 설치) npx create-next-app@latest 프로젝트명 --typescript --tailwind --eslint // yarn yarn create next-app yarn create next-app --typescript 프로젝트 실행 cd 해당 프로젝트 npm run dev http://localhost:3000/에서 초기 화면 확인가능
react 프로젝트 생성 - vite 로 프로젝트 생성/실행
npm create vite@latest 프로젝트의 이름이나 사용하려는 템플릿을 직접 지정할 수도 있다. Vite + Vue 프로젝트를 만들고 싶다면 다음과 같이 입력 # npm 7+, '--'를 반드시 붙여주세요 npm create vite@latest my-vue-app -- --template vue # yarn yarn create vite my-vue-app --template vue # pnpm pnpm create vite my-vue-app --template vue # bun bun create vite my-vue-app --template vue 그 외 템플릿 vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-sw..