React & TypeScript21 [TIL] supabase로 로그인과 회원가입 연동하기 supabase 링크 https://supabase.com/ Supabase | The Open Source Firebase AlternativeBuild production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.comsupabase 공식문서 링크 https://supabase.com/docs Supabase Docs supabase.com 1. supabase 에서 New project 만들기 비밀번호는 Generate a password로 자동생성한 후 Copy해서 .. 2024. 6. 19. [TIL] 옵셔널 체이닝(Optional Chaining)이란 프로그래밍 언어에서 특정 값이나 객체가 존재하는지 확인하고, 존재할 때만 그 값에 접근하는 방법. api로 회원 정보를 가져와서 MyProfile에 가져온 닉네임을 띄우려 했으나해당 페이지를 새로고침하면 데이터가 다 날라가버리는 현상이 일어났다. // 문제 로직//생략function MyProfile() { const { userData, setUserData } = useContext(ListContext); const [nickname, setNickname] = useState(''); return ( 프로필 변경 setNickname(e.target.value)}/> 닉네임 변경 )}//생략 .. 2024. 6. 14. [TIL] React 'react-router-dom'으로 페이지 연결하기 메인페이지에서 로그인 버튼을 누르면 로그인 할 수 있는 페이지로 넘어가도록 연결해보자 ! 1. 먼저 터미널에서 `react-router-dom` 설치한다.npm install react-router-dom또는yarn add react-router-dom // Home.jsximport { useContext, useEffect, useState } from "react";// 생략import { Link } from "react-router-dom";import Header from "../loginpages/Header.jsx";function Home({ contents, setContents }) { //생략 return ( // 생략 .. 2024. 6. 11. [TIL] 벤토 그리드 레이아웃 넣기 홈페이지 메인을 벤토 그리드로 꾸미고 싶을 때, 아래의 공식문서를 통해 원하는 그리드를 가져오면된다.https://mui.com/material-ui/react-masonry/ React Masonry component - Material UIMasonry lays out contents of varying dimensions as blocks of the same width and different height with configurable gaps.mui.com 코드를 가져와 사용하던 중 Uncaught SyntaxError: Export 'import_react3' is not defined in module (at chunk-ALR5B6M7.js?v=aa4e0109:17143:3) 위처럼 경고.. 2024. 6. 4. [TIL] 주석으로 함수에 추가설명 넣기 협업 시 다른 개발자가 한번에 알아 볼 수 있도록함수이름을 잘 지어줘야하는데 가끔 애매한 경우가 생긴다.그럴때에는 작성함 함수 위에 주석을 넣어주면 된다.이때 주석을 // 이 아닌 /** */로 써줘야 한다. 위에 처럼 주석을 적고해당 함수가 사용되는 곳으로 가서 마우스 오버를 하면 2024. 5. 29. [TIL] useState와 useRef의 차이 useState와 useRef 모두 React에서 쓰이는 훅으로 useState는 state를 useRef는 initialValue를 관리한다. 아래는 useState를 사용한 예시이다.import { useState } from "react"; function App () { const [inputValue, setInputValue] = useState(""); const addTextHandler = (e) => { setInputValue(e.target.value); } return ( {inputValue} );}export default App useState영상에서 보는 바와 같이 입력란에 타이핑 하는 즉시 텍스트가 화면에 반영이 되는 것(.. 2024. 5. 28. [TIL] 'contents.find' is missing in props validation 경고문 없애기 로직에 뜨면 불안감 조성되는 이 빨간 경고문을 지워보도록 하겠습니다. 리액트 안에 여러 파일 중 .eslintrc.cjs 로 들어가서 rules 에 아래와 같이 추가하고 저장하면 끝! "react/prop-types": "off" 2024. 5. 27. 윈도우와 Mac 리액트 타입스크립트 설치하기 윈도우1. Node.js 설치먼저 Node.js가 설치되어 있어야 합니다. 설치되어 있지 않다면 Node.js 공식 웹사이트에서 최신 버전을 다운로드하여 설치합니다.2. Vite와 React 프로젝트 생성Step 1: 터미널 또는 명령 프롬프트 열기Windows 키를 누르고 "cmd" 또는 "PowerShell"을 입력하여 명령 프롬프트 또는 PowerShell을 엽니다. 혹은, Visual Studio Code와 같은 통합 개발 환경(IDE)에서 터미널을 열 수도 있습니다.Step 2: 프로젝트 생성 명령 실행아래 명령을 실행하여 Vite와 React를 사용한 새로운 프로젝트를 생성합니다:# Vite 프로젝트 생성 명령 실행npm create vite@latest my-react-app --templa.. 2024. 5. 18. [TIL] 리액트 input 값 제출 후 input 태그 초기화하기 To do list 페이지를 만드는 중에 할일과 내용을 채우고 추가를 한 후에도 썼던 텍스트가 그대로 남는 부분과빈칸일 때도 추가가 되는 오류가 있었다. const [title, setTitle] = useState("");const [text, setText] = useState(""); const addTextHandler = () => { const newContent = { id : new Date().getTime(), title: title, text: text, isDone: false, }; setContents([...contents, newContent]); } 첫번째로,addTextHandler는 추가 버튼을 누를 시 동작하는 함.. 2024. 5. 14. 이전 1 2 다음
