콛 다이어리

스타일 컴포넌트로 만든 컴포넌트에링크 태그를 넣으려고 했다. 리액트 돔 설치도 해줬는데브라우저 화면에 흰 화면만 보여준다. 내 VSCode에서 보이는 에러도 없고개발자 도구를 확인해 봐도내가 잘못한 건 없어보인다. 계속 아무것도 출력이 안 되니까신경질이 나서 튜터님을 찾아갔다. 역시 내가 틀렸다. 개발자 도구 열어보라고 하셔서열어보니까빨간색이 엄청 많다고 하셨다......힉?이유는 내가 Link태그를 사용하면서최상위 컴포넌트 (App.jsx)에를 입력해주지 않아서 그런거였다!

올림픽 메달 트레커의 메달 인풋 3개에정규 표현식을 사용하려고 했다.메달 갯수 입력하는 텍스트 박스이기 때문에숫자만 입력할 수 있게 하고싶었다.  정규표현식 (regex):pattern/flag로 표현test(string) 함수는 인자로 전달된 문자열이정규표현식의 패턴과 일치하면 true를 리턴하며그렇지 않으면 false를 리턴 ^ : 문자열의 시작[ㄱ-ㅎ|가-힣|a-z|A-Z|0-9|]:한글, 소문자 영어, 대문자 영어, 숫자에 해당하는 문자 1개+: 문자 1개 이상$: 문자열의 끝  1. 숫자만 입력되는 정규식/[^0-9]/gi 2. 영문만 입력되는 정규식/[^a-z]/gi 3. 한글만 입력되는 정규식/[a-z0-9]|[ \[\]{}()?|`~!@#$%^&*-_+=,.;:\"'\\]/g 4. 숫자, ..

// 국가명  const [nation, setNation] = useState("");  // 금메달 수  const [goldMedal, setGoldMedal] = useState(0);  // 은메달 수  const [silverMedal, setSilverMedal] = useState(0);  // 동메달 수  const [bronzeMedal, setBronzeMedal] = useState(0);  /* 사용자가 입력한 각 메달 수 넣을 배열 */  const [userData, setUserData] = useState([]);여기는 쉽게 작성했다.useState는 const [상태 함수, 상태 변경 함수] = useState(초기값);이렇게 사용한다.상태 변경 함수는 말 그대로 함수이다..

import { useState } from "react"; import "./App.css"; function App() {   const style = {     display: "flex",     gap: "12px",     padding: "50px",   };   // 국가 정보 저장   const [countries, setCountries] = useState([]);   // 입력 후 필드 상태   const [countryName, setCountryName] = useState("");   const [goldMedal, setGoldMedal] = useState(0);   const [silverMedal, setSilverMedal] = useState(0);   const [..