Everyday-Jaram blog

리액트 11_Kakao API 실습 [카카오 API 설정] https://developers.kakao.com/ 내 애플리케이션-등록한 애플리케이션-웹사이트 주소 수정: localhost 주소로 변경(http://localhost:3000) https://react-kakao-maps-sdk.jaeseokim.dev/ public 폴더-index.html에 script 태그 붙여넣기 내 애플리케이션-등록한 애플리케이션-JavaScript 키를 APP KEY 자리에 붙여넣기 kakao map install: install 코드를 terminal에 붙여넣기 [카카오 지도 기본 실습] Map, MapMarker import -import {Map, MapMarker} from 'react-kakao-maps-..

머신러닝 09_분류평가지표 오차행렬(Confusion_matrix) TN(True Negative): 실제 False인 정답을 False로 예측(정답) FN(False Nagative): 실제 True인 정답을 False로 예측(오답) FP(False Positive): 실제 False인 정답을 True로 예측(오답) TP(True Positive): 실제 True인 정답을 True로 예측(정답) 1)정확도(Accuracy): 전체 데이터 중에서 실제 정답을 정확히 맞춘 비율 불균형한 데이터가 있을 경우 정확도로 성능을 평가하는 것이 문제가 됨 →정확도는 95%지만 실제 암환자를 한 명도 예측하지 못함 2)재현율(Recall): 실제 정답 중에 정확히 예측한 비율 →같은 결과에서 정확도는 95%지만 재현..

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