전체 글 37

간단한 hover tooltip 만들기

React 내용은 아니긴한데 그냥 html 카테고리가 없어서 여기다가 적어볼라고 합니다.보통 이미지에다가 설명을 붙혀주기 위해서 툴팁을 적잖아요?  이 태그에 적게 될게 될텐데 거기에 title만 붙히면 툴팁이 나옵니다. Community는 import 한걸 넣었고 title을 저런식으로 작성하면 요런식으로 나옵니당캡쳐모드라서 커서가 안나오긴했는데, 현재 마우스는 3번째 이미지에 올라간 상태입니다tooltip 꾸미는건 다른 블로그 보시거나 나중에 다시 쓰겠습니다.이 글은 간단한 tooltip 만들기니까요

React 2024.12.25

useEffect란?

useState와 비슷하게 생긴 useEffect는 화면에 Component가 렌더링 될 때마다 특정 코드를 실행하게 하는 React Hook이다. 그러므로 화면에 무조건 바로 보여줘야 되는 코드보다는 조금 늦어도 되는(?) 코드에 주로 사용한다.ㅁuseEffect는 component가 mount(화면에 나올때), unmount(화면에서 사라질때), update(수정됐을때)특정 작업을 처리할 수 있다.1. ComponentDidMount : 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행2. ComponentDidUpdate : 리렌더링을 완료 후. 즉 render()가 업데이트 될 때마다 실행3. ComponentWillUnMount : 컴포넌트를 DOM에서 제거할때 실행useEffect( funct..

React 2024.11.04

React - Router, Link 사용법

React나 Vue 등등을 사용할때는 Router가 필연적으로 사용된다.Router란 SPA에서 페이지 간 이동을 가능하게 해주는 라이브러리 이다.https://east-hyun.tistory.com/37 (SPA가 뭔지 보려면) Single Page Application" data-og-description="원래 html만을 사용해서 웹 페이지를 만든다면 가정 합시다.시작은 index.html에서 만약 a href를 사용한 링크를 누른다면 다른 페이지로 이동할겁니다.이러한 페이지들은 어쩌구.html , 저쩌구.html 등" data-og-host="east-hyun.tistory.com" data-og-source-url="https://east-hyun.tistory.com/37" data-og-u..

React 2024.10.31

(React) SPA -> Single Page Application

원래 html만을 사용해서 웹 페이지를 만든다면 가정 합시다.시작은 index.html에서 만약 a href를 사용한 링크를 누른다면 다른 페이지로 이동할겁니다.이러한 페이지들은 어쩌구.html , 저쩌구.html 등등으로 웹페이지를 갈아엎고 어쩌구 or 저쩌구 .html로 바뀌도록 해왔습니다.하지만 React 혹은 Vue를 사용한다면 이렇게 진행 되지 않는다.Why -> React와 Vue는 SPA ( Single Page Application )로 만들어지기 떄문이다. Single Page Application이란 index.html이라는 화면을 사용자에게 보여주고다른 페이지로 이동할때, 페이지 전체가 바뀌는것이 아닌 일부분만 바뀌는 것을 뜻한다.쉽게 말해, 단일 페이지로 구현한 사이트를 말하는데만약..

React 2024.10.31

props란? 왜 쓰는가

js 파일안에 function App안에 작업을 해서 html을 만든다. ( JSX )우리는 예시로 Modal이라는 컴포넌트를 만들어서 App안에 넣을수 있다.그런데 우리는 컴포넌트를 만들때 하나의 내용만을 위해서 만들지 않는다. (하나만 할거면 하드코딩하지?)보통 컴포넌트는 3가지 상황에서 많이 사용된다.1. 반복적인 html을 축약하고 싶을때2.페이지를 전환할때 큰 페이지를 컴포넌트로 사용하면 유용3.자주 변경되는것들을 컴포넌트화 하면 편함그래서 App function에서 만든 State를 Modal function에 사용한다면 좋겠지만 바로 사용할수 없다.왜냐하면 당연하게도 Function App에서 만든 변수나 State는 바깥에서 사용할 수 없기 때문이다.Props 등장여기서 props가 필요하..

React 2024.10.28

Text Vectorization ( 데이터 -> 수치변환)

Text Vectorization이란?텍스트 데이터를 수치 벡터 (numerical vector) 형태로 변환하는 과정입니다.자연어 처리에서 중요한 단계로써, 컴퓨터가 텍스트 데이터를 이해하고 처리할 수 있도록 도와줍니다.(컴퓨터가 이해할수 있게 숫자 형식으로 변환!)1. Integer Encoding사람의 언어인 텍스트를 컴퓨터한테 인식 시켜주기 위해 컴퓨터가 이해할수 있는 단어 사전(vocabulary)을 먼저 만들어 준다.단어 집합(단어사전) 은 집합이기 떄문에 중복을 허용하지 않는다. 물론 순서도 없다.정수 인코딩은 단어 집합에 있는 단어들에게 정수를 부여하여 컴퓨터에게 알려주는 방법입니다. 2.  BOW ( Bag Of Words )쉽게 가방 속의 단어들 이라는 뜻인데즉, 단어들을 가방에 하나씩..

K-Means 군집

군집화란?데이터 분석에서 비지도 학습 기법중 하나로, 주어진 데이터셋을 유사한 특성을 가진그룹으로 나누는 방법을 말합니다.군집화의 목적 = 데이터의 구조를 파악, 비슷한 데이터 포인트들을 같은 그룹에 묶어 새로운 통찰을 얻음.K-Means란 비지도 학습에서 사용되는 군집화 알고리즘으로,주어진 데이터를 K개의 클러스터(cluster)로 나누는 방법이다.K-Means 군집에서는 클러스터의 개수를 미리 알고 있는것이 좋다.이 알고리즘은 각 군집의 중심(센트로이드)을 반복적으로 계산하여 데이터 포인트를 가장 가까운 군집으로 할당합니다.cluster란?비지도 학습에서 데이터 포인트들이 유사한 특성을 가진 그룹으로 나누어진 것이다.클러스터링은 데이터를 사전 레이블 없이 그룹화하는 작업입니다.예를 들어, 고객 세분화..

데이터 전처리 ( Preprocessing )

데이터 인코딩머신러닝 알고리즘은 문자열 데이터 속성을 입력 받지 않는다.문자형 카테고리형 속성은 모두 숫자값으로 변환/인코딩 되어야 한다.레이블(Label)인코딩원-핫(One-Hot)인코딩레이블 인코딩 ( Label Encoding )# Target(Label)에만 적용해야 합니다.targets = ["청바지", "치마", "청바지", "원피스", "청바지", "치마", "치마", "청바지", "원피스"]#LabelEncoder란 범주형 데이터를 수치형 데이터로 변환 하는데 사용합니다.#범주형 데이터 ( 예 : 문자열 라벨 ) 를 숫자형 라벨로 인코딩.from sklearn.preprocessing import LabelEncoder#LabelEncoder라는 객체를 생성lbl_encoder = Labe..

데이터 세트 훈련 교차 검증 (KFold, Stratified, cross_val_score,GridSearchCV)

데이터 세트 훈련에는 교차 검증이라는 것이 있습니다.교차검증이란?**모델의 일반화 성능을 평가하기 위해 데이터셋을 여러 번 나누어 훈련하고 평가하는 방법입니다.**이를 통해서 모델이 데이터셋의 특정 분할에 의존하지 않고새로운 데이터에 대해서도 잘 작동할수 있는지 확인할 수 있습니다.왜 교차 검증을 사용하는지?교차검증을 사용하는 까닭은 3가지 정도가 있습니다.1. 일반화 성능 평가: 모델이 훈련 데이터뿐만 아니라 보지 않은 데이터에서도 잘 작동하는지 확인 할수 있어서2.데이터 활용: 데이터를 최대한 활용하여 훈련과 평가를 반복하므로, 작은 데이터셋에서도 유용해서.3.편향 및 분산 문제 완화: 데이터를 여러번 나누어 평가함으로써 특정 데이터 분할에 따른 편향을 줄일수 있다.교차검증에는 2가지가 있습니다.*1..

데이터 세트 분리, 모델 학습(fit), 예측 수행(predict), 평가(evaluate)

데이터 세트 분리 데이터를 학습 데이터(train), 테스트 데이터로 분리한다.왜? --> 전체 데이터 세트를 머신러닝 모델에 훈련시키고 다시 데이터에 예측을 시키면 어떻게 될까.머신러닝 모델은 그 데이터를 이미 훈련 받았기 때문에 데이터에 대해 알고 있습니다.그렇기 때문에 데이터 세트를 훈련 데이터 세트 / 테스트 데이터 세트 2개로 나누어서 해야됩니다.나온 로직을 가지고 테스트 데이터 세트를 예측합니다.이렇게 데이터 세트를 나누어서 해야 훈련받은 머신러닝 모델의 성능을 알 수 있습니다. 모델 학습 ( fit )학습 데이터 ( X_train,y_train ) 를 기반으로 머신러닝 알고리즘을 적용해 모델을 학습 시킨다. 예측 수행 ( predict )학습된 머신러닝 모델을 이용해 테스트 데이터로 예측합니..