Code-Jaram blog

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)내가 이겼을 경우 나의 점수 ..

머신러닝_05_KNN 모델(Iris 데이터) 머신러닝 모델 개략도 2. 일반화, 과대적합, 과소적합: 모델의 신뢰도를 측정하고 성능을 확인하기 위한 개념 과대적합(Overfitting): 지나치게 상세하고 복잡한 모델링을 하여 훈련세트에만 과도하게 동작하는 모델, 테스트 세트의 성능 저하 -조건이 너무 까다로워 조건에 적합한 데이터가 너무 적음 과소적합: 모델링을 너무 간단하게 하여 훈련세트를 충분히 반영하지 못해 훈련세트, 테스트 세트에서 성능 저하 -조건이 단순하여 조건에 적합한 데이터가 너무 많음 일반화: 훈련세트로 학습한 모델이 테스트 데이터가 주어져도 정확히 예측할 거라 기대하는 것. 훈련세트에서 테스트 세트로 일반화가 되었다고 표현 3. 모델 복잡도 곡선 4. 모델의 복잡도 해결 일반적으로 데..

React_03_State State: 컴포넌트 내부에서 관리되는 변경이 가능한 데이터 변수와의 차이점: 값 변경 시 화면에 바로 렌더링이 됨(화면에 적용) - JS 문법에서는 화면에 접근하는 렌더링 코드를 별도로 작성해야 함 State 사용방법 ①State import: import {userState} from 'react'; ②State 선언: const [변수이름, set 변수이름]=useState(초기값) ③State 값 변경: set변수이름(변경값) [실습1]버튼 클릭하면 숫자 증가시키기 [실습2]좋아요 실습: 하트 클릭 시 빨간 하트로 변경, 좋아요 개수 증가 [실습3]랜덤게임: 버튼 클릭 시 랜덤 수 출력되고 선택한 버튼의 숫자와 비교하여 결과 출력 *실행순서가 State 선언 부분-ret..

머신러닝_04_데이터 핸들링 [Titanic 데이터 실습] 1. Pandas 라이브러리 import pandas as pd 2. 파일 로딩 #파일 읽어오기 #최상위 폴더: /content/ #파일경로: 절대경로로 작성 # [TIP]파일경로 쉽게 작성하기 #파일-오른쪽마우스-경로복사 titanic_df=pd.read_csv('/content/titanic_train.csv') print('titanic 변수 타입', type(titanic_df)) 3. 데이터 정보 확인 데이터 출력 #상위 5개 출력 titanic_df.head() #하위 5개 출력 titanic_df.tail() 데이터 크기 확인 #데이터 크기 확인(행, 열) titanic_df.shape 데이터 정보 확인 #정보 확인 titanic_d..

React_02_컴포넌트 [리액트 단계] 서버 실행하기 2. JSX 파일 만들기: 기본 jsx 구조 3. index.js에서 jsx 파일 import하기: 브라우저에서 보여지는 파일 변경하기 [실습1] //1. 사용자에게 이름 입력받기 var name=prompt("이름을 입력해주세요"); console.log(name); // 2. 현재 날짜 가져오기 let today=new Date(); console.log(today); // case A: 연도-월-일 형태 ->toLocaleDateString() var date=today.toLocaleDateString() console.log(today.toLocaleDateString()); //case B: 현재 월 ->getMonth() // *컴퓨터는..

머신러닝_03_머신러닝 과정 실습 [환경설정]Google Collaboratory 구글 드라이브-새로 만들기-더보기-연결할 앱 더보기 Collaboratory 검색 새로 만들기-더보기-Google Collaboratory 런타임-런타임 유형 변경-T4 GPU(대용량 데이터 처리 세션 종료: 런타임-세션관리-삭제 버튼 -파일 작성 완료 후 반드시 세션 종료해야 다른 파일 사용가능 [머신러닝 과정] [AND 조건문제 실습] 문제와 정답 DataFrame 형태로 만들기 import pandas as pd and_df=pd.DataFrame({'A': [0,0,1,1,1,0,1,0], #문제 'B': [0,1,0,1,0,0,1,1], 'A and B': [0,0,0,1,0,0,1,0] #정답 }) and_df ..