일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- REACT
- 파이썬 enumerate
- 내일배움캠프 최종 프로젝트
- 자바스크립트
- 내일배움캠프 프로젝트
- 그리드 정렬
- React Hooks
- 파이썬 for
- 리액트 팀 프로젝트
- 리액트
- 내배캠 프로젝트
- 파이썬 slice
- Next 팀 프로젝트
- 타입스크립트
- 타입스크립트 리액트
- 코딩테스트
- 리액트 훅
- 프로그래머스
- 리액트 페이지 이동
- 리액트 프로젝트
- JavaScript
- js
- 타입스크립트 props
- 파이썬 for in
- 내일배움캠프
- 파이썬 list
- typeScript
- useState
- 한글 공부 사이트
- 파이썬 반복문
- Today
- Total
목록전체 글 (198)
aotoyae
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/MBPeq/btsFDGg41NE/VKNMxU409LjD9hnqXjnDDK/img.png)
💡 타입 할당이 안된다는 error.. 해결.. deleteMutation.mutate(todo.id)} > delete 왜 그런가 보니.. id 타입을 옵셔널로 주고 있어서였다. const newTodo = { title, content, isDone: false, }; json 서버를 쓰고 있어서 투두를 생성할 때 id 값을 안써도 되니까 요렇게 썼었는데..! 🫠 그래서 id: string; 으로 바꿔주고, newTodo 에 id 값도 넣어줬다! npm install react-uuid yarn add react-uuid const newTodo = { id: uuid(), title, content, isDone: false, }; 🥲 메소드 타입 에러 TodoList.tsx const ongoin..
패키지 설치 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/qlck2/btsFD5sUoTs/WvlQTr1Q8alWyUI8opMnM0/img.png)
💡 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kAd0e/btsFDF2drql/0CiTfPspDGMtqkmkklReO0/img.png)
💡 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
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Lbj09/btsFA9QthQX/jkFwzmRmcLklU0kPtPG9YK/img.png)
💡 검색 키워드로 데이터 가져오기 쿼리로 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 받아서 대문자로 바꿨던게 새록새록.. 🧞♂️ 다른 사람의 풀이 ..