Everyday-Jaram blog

React_10_라우터 라우터(Router): 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 리액트는 Single Page Application이지만 여러 페이지인 것처럼 페이지를 전환하는기능(SPA의 장점을 유지) 2. 라우터 사용방법 1)react router dom 설치: npm i react-router-dom 2)BrowserRouter [index.js] BrowserRouter import하기 라우팅 기능을 사용할 컴포넌트 전체를 감싸기 →index.js에서 App을 감싸는 방식 사용 3)Routes-Route [App.js] Routes: 여러 경로(Route)들을 감싸서 하위 Route 중 조건에 맞는 Route 하나만 렌더링 해주는 역할 -과거에는 Switch라..

머신러닝_08_타이타닉 생존예측모델 문제정의 타이타닉호 생존자, 사망자 예측 머신러닝 전체 모델과정 진행 train.csv 파일로 훈련, test.csv 파일로 예측 제출용 샘플데이터 gender_submission.csv 형식에 맞게 제출 #라이브러리 불러오기 import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns 2. 데이터 수집 Kaggle 사이트에서 Titanic - Machine Learning from Disaster 데이터 수집 #train 데이터 불러오기 train_data=pd.read_csv('/content/drive/MyDrive/실습파일/머신러닝 ᄉ..

React_09_useEffect 실습 [가위바위보 게임] (1)나의 선택, 컴퓨터의 선택, 결과 state 생성: 가위바위보를 0,1,2 숫자로 설정 (2)나의 선택 설정: 클릭한 버튼값에 따라 0,1,2값을 설정 (3)컴퓨터의 선택 설정: 0,1,2 랜덤 수 설정(난수 생성) (4)게임 결과 판별: useEffect 사용하여 정확한 시점 지정 가위바위보, 결과값 State 생성 2. 클릭한 가위바위보 값을 숫자로 바꿔서 저장하기 3. 가위바위보 승부 판별하는 함수 -승리: 사용자(가위, 바위, 보), 컴퓨터(보, 가위, 주먹) -패배: 사용자(가위, 바위, 보), 컴퓨터(주먹, 보, 가위) 4. 클릭한 가위바위보 이모티콘과 결과값 출력 -이모티콘 출력: 이모티콘 배열[State 값] -가위바위보 버튼..

[클래스형 컴포넌트] 컴포넌트: 리액트로 만들어진 애플리케이션의 UI를 이루는 최소 단위 컴포넌트의 종류 1)함수형 컴포넌트 2)클래스형 컴포넌트 구분 함수형 컴포넌트 클래스형 컴포넌트 State state 사용불가 state 사용가능 Life Cycle Life Cycle 사용불가 Life Cycle 사용가능 3. Life Cycle: 컴포넌트의 생성부터,변화,소멸까지의 전 과정 *클래스형 컴포넌트에서만 사용가능 4. Life Cycle단계별 메소드 *클래스형 컴포넌트 구조 단축키: rcc+Enter [실습]텍스트, 숫자 변경 1)Mount constructor(생성자) -초기 state 값 설정 -화면 렌더링 전 가장 첫 번째 단계 2)ComponentDidMount 3)componentDidUpda..

React_07_Context API 실습 [TodoList 실습]할 일 추가/완료한 일 체크/할 일 삭제 [createContext.Js] [App6.js] State 생성 새로운 할 일 추가하는 함수 새로운 할 일을 기존의 State 배열에 누적하는 함수 완료한 일 체크하는 함수: [ListItem.js] 할 일 삭제하는 함수: [List.js] return문: TodoContext.Provider로 context 값 넣기 -전역적으로 공유할 state, 함수, ref 저장하기 -[AddTodo], [List] 컴포넌트 출력하기 [List.js]리스트의 데이터를 반복하는 컴포넌트 Context 데이터 가져오기: todos State(할 일) [ListItem.js]로 할 일, index 전송 [Lis..

React_07_Context API [ContextAPI] 컴포넌트의 구조: 단방향 데이터 흐름 상위컴포넌트에서 하위컴포넌트로 데이터 전송 장점: 관리 용이,DOM 요소와의 궁합 단점 -하위컴포넌트에서 상위컴포넌트로 데이터전송이 불가 -하위컴포넌트끼리의 데이터전송 불가 2. 양방향 데이터 전송방법 1)상위→하위 컴포넌트: input의 value값으로 데이터 전송 2)하위→상위 컴포넌트: 함수의 매개변수로 데이터 전송 props로 데이터를 전달할 때 발생하는 문제 - 최하단에 위치한 컴포넌트에서 최상위 컴포넌트로 데이터를 전달해야 하는 경우 여러 컴포넌트를 연달아 props 전달해야 함(props drilling) - 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달하는 과정이 불편함 →context라는 ..

머신러닝_07_앙상블 모델 앙상블(Ensemble): 여러 개의 머신 러닝 모델을 연결하여 더 강력한 모델을 만드는 기법 앙상블 모델의 종류: Voting, Bagging, Boosting 1)Voting: 서로 다른 모델을 결합하여 투표를 통해 최종 예측결과를 결정하는 방식 Hard Voting(다수결)/Soft Voting(확률) 2)Bagging: 같은 알고리즘으로 여러 개의 모델을 만들어서 투표를 통해 최종예측, 결과를 결정하는 방식 -샘플 데이터를 여러 개로 분할, 데이터의 중복 허용 예)랜덤 포레스트(Decision Tree모델이 여러 개) 3)Boosting: 성능이 낮은 여러 개의 모델을 이용 처음 모델이 예측을 하면 예측결과에 따라 잘못 분류된 데이터에 가중치 부여 부여된 가중치가 다음 ..

React_05_JS 함수 map() 함수 배열함수의 종류 중 하나로 반복되는 컴포넌트를 렌더링하기 위해 사용 주어진 함수를 호출한 결과를 모아서 원하는 규칙에 따라 새로운 배열을 생성(반복문 역할) 사용법: 배열이름.map(콜백함수) *콜백함수: 함수 내에 있는 함수 -문자열 데이터 추출: item -객체 데이터 추출: item.속성명 [map 실습]화씨를 섭씨로 변환하기 *객체의 여러 속성값을 return문에 작성하고 싶은 경우 스프레드 문법 사용 *스프레드 문법: 객체나 배열과 함께 사용하면 변경된 값을 제외한 나머지는 값을 그대로 유지하는 문법→…item, 2. Filter 함수 - 배열의 각 요소에 대해서 주어진 함수의 결과값이 true인 요소들만 모아서 새로운 배열로 반환하는 함수 [Filte..

머신러닝_06_Decision Tree 캐글에서 데이터 다운로드 https://www.kaggle.com/datasets/uciml/mushroom-classification Decision Tree: 특정 기준(질문)에 따라 데이터를 구분하는 모델 -스무고개 하듯이 예/아니오 질문을 반복하면 학습 -분류와 회귀에 모두 사용 가능 장점: 쉽고 직관적인 모델 단점: 과대적합이 발생하기 쉬움→사전 가지치기 필요(트리의 크기 사전 제한) Decision Tree 구조 -Root Node: 가장 상위에 있는 규칙노드. 첫 번째 규칙 조건 -Decision Node: 규칙 노드 -Leaf Node: 규칙노드에 의해 결정된 클래스 값 -depth: 트리의 깊이 -Sub Tree: 규칙 노드에 의해 분류된 클래스값을..

React_04_주사위 게임(State, useEffect) [실습 4]주사위 게임 [부트스트랩] 리액트 부트스트랩 홈페이지 https://react-bootstrap.netlify.app/ https://mui.com/ 부트스트랩 설치(terminal) 2. 부트스트랩 import *프로젝트 전체에 부트스트랩 적용 3. 부트스트랩 css import 4. 가져오기 [주사위 게임룰] Step1. '던지기' 버튼을 눌렀을 때 주사위의 모양 변경/유저의 선택/컴퓨터의 선택 1-1)유저의 주사위 숫자가 랜덤으로 표시 1-2)컴퓨터의 주사위 숫자도 랜덤으로 표시 1-3)유저의 숫자/컴퓨터의 숫자가 이미지로 표시 Step2. 유저와 컴퓨터의 숫자 결과 비교(useEffect) 2-1)내가 이겼을 경우 나의 점수 ..