aotoyae

패키지 설치 npm i @supabase/supabase-js .env 에 키 넣기 VITE_SUPABASE_URL= URL VITE_SUPABASE_KEY = KEY config.ts process.env 가 아니라 import.meta.env 로 호출 import { SupabaseClient, createClient } from '@supabase/supabase-js'; const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string; const supabaseKey = import.meta.env.VITE_SUPABASE_KEY as string; export const supabase: SupabaseClient = createClient(su..

💡 Props 의 타입들을 정해보자. button.tsx import { ReactNode } from 'react'; import styles from './Button.module.css'; interface Props { className?: string; id?: string; children?: ReactNode; onClick: any; } export default function Button({ className = '', id, children, onClick, }: Props) { const classNames = `${styles.button} ${className}`; return ( {children} ); } ❗️ children: ReactNode ❗️ App.tsx input..

💡 js 에서 ts 로 변경할 때, html DOM 요소들의 타입을 설정하는 방법에 대해 알아보자. ✳️ DOM 노드 타입 설정 script.js const usernameInput = document.getElementById('username'); const submitButton = document.getElementById('submit'); usernameInput.focus(); submitButton.addEventListener('click', handleClick); function handleClick(e) { e.preventDefault(); const message = `${usernameInput.value}님 반갑습니다.`; alert(message); } script.ts t..

💡 타입스크립트로 CRA 폴더를 만들었다면 폴더 위치에서 npx create-react-app . --template typescript 폴더까지 새로 만든다면 npx create-react-app 원하는_폴더_이름 --template typescript 💡 자바스크립트로 만든 앱 TS 로 마이그레이션 한 시스템에서 다른 시스템으로 옮기는걸 Migration 이라고 한다! TS 로 앱을 생성하고 src 폴더 내에 아래 파일들을 제외하고 다 지운다! src/react-app-env.d.ts src/reportWebVitals.ts src/setupTests.ts 그리고 기존 JS 앱에서 src 내 파일들을 카피해온다. 마지막으로 확장자를 바꿔주자! jsx ➡️ tsx, js ➡️ ts

💡 검색 키워드로 데이터 가져오기 쿼리로 keyword=검색어 요런식으로 주소를 바꿔 검색을 했을 때 http://localhost:3000/courses?keyword=react 😲 useSearchParams 로 검색어만 빼올 수 있다! import { useSearchParams } from 'react-router-dom'; function CourseListPage() { const [searchParams, setSearchParams] = useSearchParams(); console.log(searchParams.get('keyword')); // 주소에서 keyword 만 빼옴 const [keyword, setKeyword] = useState(''); // input state co..

💡 잘못된 경로로 접근할 때 페이지를 돌려보자! 로그인이 풀렸다던가, 데이터가 없다던가 할 때 페이지가 돌아가도록 해보자. (페이지를 바꿔주자) import { Navigate, useParams } from 'react-router-dom'; function CoursePage() { const { courseSlug } = useParams(); const course = getCourseBySlug(courseSlug); const courseColor = getCourseColor(course?.code); if (!course) { // 추가한 부분 return ; } const headerStyle = { borderTopColor: courseColor, }; 코스 리스트 페이지에서 나열된 ..

📝 문제 JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 단, 첫 문자가 알파벳이 아닐 때에는 이어지는 알파벳은 소문자로 쓰면 됩니다. (첫 번째 입출력 예 참고) 문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요. 🫠 나의 풀이 function solution(s) { let arr = s.split(' '); let arr2 = arr.map( (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase() ); return arr2.join(' '); } params 받아서 대문자로 바꿨던게 새록새록.. 🧞‍♂️ 다른 사람의 풀이 ..

📝 문제문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요.예를들어 s가 "1 2 3 4"라면 "1 4"를 리턴하고, "-1 -2 -3 -4"라면 "-4 -1"을 리턴하면 됩니다. 🫠 나의 풀이function solution(s) { const arr = s.split(' '); const min = Math.min(...arr); const max = Math.max(...arr); return `${min} ${max}`;} 실패가 떠서 문자열 때문인가 했더니.. 전개 구문이 필요한 거였다. 😨 🧞‍♂️ 다른 사람의 풀이function sol..