콛 다이어리

스타일 컴포넌트로 만든 컴포넌트에링크 태그를 넣으려고 했다. 리액트 돔 설치도 해줬는데브라우저 화면에 흰 화면만 보여준다. 내 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(초기값);이렇게 사용한다.상태 변경 함수는 말 그대로 함수이다..

리액트 라우터 돔(react-router-dom)React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리  a태그를 사용하지 않는 이유:a태그를 사용하면, 화면이 새로 로딩이 된다. 이 때 필수적으로 발생하는 화면 깜박임이 사용자의 경험을 떨어뜨리는 요인이 되기 때문에 라우팅으로 부드러운 화면 전환을 꾀하는 것이다.결론:1. a태그쓰면 화면 깜박여서 bad2. 라우팅을 사용하면 화면이 부드러워져서 good   설치하는 방법import {BrowserRouter, Routes, Route } from "react-router-dom"   BrowserRouterhistory API를 활용해 history 객체를 생성history API는 내부적으로 stack 자료구조의 형태를 띄기..

import해서 데이터를 던졌고export해서 데이터를 잡았다.'코딩은 절대 거짓말을 하지 않는다' 라고 하지만나는 정말 틀린게 없었다.. 억울할 정도였다.. 브라우저는 왜 계속 에러를 띄우는지 모르겠고개발자 도구도 왜 자꾸 에러를 띄우는지이해를 할 수가 없었다. 에러나는 부분이 당연히 작성해야 하는'import react from "React" 와"import styled from "styled-component" 였다.안 쓰면 안 썼다고 작동 안 시켜 줄거면서.. 마침 화면 공유로 내 코드를 보고있던 분이 도와주셨다.결론은 내가 styled-components 패키지 설치를 하지 않아서였다;; 터미널 → new Terminal에 가서yarn add styled-components 를 입력해서패키지 설..

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 [..

html에서 js파일 연결하는 방법  다른 js파일에서 함수 호출하는 방법:    1) 내가 사용할 js파일에 import { 함수명 } from "파일경로";    2) 가져올 함수명 앞에 export를 입력한다ex)내가 movie.js파일에서 movieInfo라는 함수를 가져오고 싶으면,main.js 파일에 가서 import { movieInfo } from "./movie.js"; 를 입력하고movie.js 파일의 movieInfo 앞에는 export를 입력하면 된다.   api 호출하는 방법 (api는 비동기 ↓)(특정 코드가 끝날때 까지 실행을 멈추지 않고다음 코드를 먼저 실행하는 것)API: (Application Propramming Interface): 소통하기 위한 접점 앱이 프로그래밍 ..

나는 깃을 잘 사용할줄 모른다.그래서 팀원들이 깃에 푸시하고 풀 해달라고 했을 때기존 파일에서 작업을 끝내면최종 파일에 복사 붙여넣기를 하겠다고 했다.모르면 물어보고 자꾸 부딫혀봐야 하는데 피했다. 오늘 팀원들이랑 회의를 하는 도중에나중에 코드를 복붙하면 오류가 날 수 있다고 했다.바로 깃 풀해서 파일을 받아서코드를 입력했다.근데!!! 깃 푸시를 하려니 또 안된다..오늘 안에 올리기로 약속을 해서 팀원 도움을 받기로 했다.깃 사용도 할 줄 모른다고 생각하면 어떡하지?챙피했지만 다른 방법이 없었다. 근데 예상 외로 너무 잘 알려줬다..이 깃 명령어가 뭔지, 언제 써야하는지,여기서 뭐 하는지, 어디로 가야 하는지,뭘 눌러야 하는지까지 정말 세세하게 알려줬다.너무 고마웠다..덕분에 깃 명령어에 대해서 좀 더 ..

검색어에 맞는 영화를 출력하는 기능을 맡았다.평소 텍스트 박스를 사용하면서편했던 기능들과 이런 기능은 넣지 않았네?싶었던 기능들이 있어서 내가 직접 넣어보기로 했다. 그 기능들은1. 특정 문자 입력 제한 함수 만들고 텍스트 박스 공란 설정특정 기호를 입력하면 컴퓨터의 성능 저하를 유발할 수 있다고 한다. 2. 검색창이 빈칸일 때 검색 버튼을 클릭하면 alert( )창을 띄우기 3. 검색창이 빈칸인 상태에서 엔터를 치면 alert( )창을 띄우기 4. 입력한 단어를 포함하는 영화가 없을 때 alert( )창을 띄우고 공란 설정   갯수도 별로 안되고 쉬운 것 같은데 잘 안된다..하다가 막히면 공부하고.. 모르면 또 찾아보고 공부하고..그래도 어제보다 나아지는 것 같아서 뿌듯하다 (>_

html에서 의 부모를 생성한다.                            내가 만들 태그의 위치 -->                      → 자바스크립트에서 를 생성한다.const card = document.createElement('div');let imgTag = document.createElement('img'); imgTag.src= `https://image.tmdb.org/t/p/w300${movie.poster_path}`; card.innerHTML = `${movie.original_title}`; card.appendChild(imgTag);  movieContainer.appendChild(card); →  css 설정/* 영화 목록 전체 div */.movie-con..