[React] Context API
·
FrontEnd/React
☁️충북대 구름톤 유니브 4기 스터디 일부 내용 React를 사용하다 보면 로그인 정보, 다크 모드 같은 테마, 언어 설정처럼 여러 컴포넌트에서 공통으로 사용하는 데이터가 생깁니다. 이런 데이터는 매번 props로 넘겨주기보다는, Context API를 활용해서 컴포넌트 트리 전체에 쉽게 전달할 수 있어요.이번 글에서는 Context API의 기본 개념부터 사용법, 주의할 점까지 하나씩 정리해보도록 하겠습니다.1. Context란 무엇인가요?Context는 컴포넌트 트리를 통해 데이터(상태)를 전역적으로 공유할 수 있게 해주는 React의 기능입니다.기본적으로 props를 일일이 전달하지 않아도, 트리 하위에 있는 모든 컴포넌트가 원하는 데이터를 사용할 수 있게 해줍니다.예를 들어 로그인 상태, UI 테..
[React] Controlled Components, Lifting State Up, Composition vs Inheritance
·
FrontEnd/React
☁️충북대 구름톤 유니브 4기1. React의 Form1.1 Controlled Components값이 React의 state에 의해 제어되는 폼 요소를 말합니다. 1.1.1 예시// input 태그// textarea 태그// select 태그 사과 바나나 포도 수박1.2 textarea 태그긴 텍스트 입력을 받기 위한 태그입니다.import React, { useState } from 'react';function RequestForm() { const [value, setValue] = useState('요청사항을 입력하세요.'); const handleChange = (event) => { setValue(event.target.value); }; const handleSubm..
[React] useState와 useEffect
·
FrontEnd/React
React에서 함수형 컴포넌트를 사용할 때 상태 관리와 생명주기 관리가 필요하다면? 바로 Hook을 사용해야 합니다.이 글에서는 가장 기본이자 필수인 Hook인 useState와 useEffect의 개념과 사용법, 그리고 주의할 점까지 정리해보겠습니다.1. useState()컴포넌트에서 상태(state)를 관리하기 위한 Hook✅ 기본 문법const [변수명, set함수명] = useState(초기값);💡 예시import React, { useState } from "react";function Counter() { const [count, setCount] = useState(0); return ( 총 {count}번 클릭했습니다. setCount(count + 1)}>..
[React] REACT란? / JSX란? / Element란?
·
FrontEnd/React
* 충북대 구름톤 유니브 FE스터디 필기노트REACT란?Javascript UI 라이브러리라이브러리이기 때문에 제어 권한이 사용자에게 있다.장점virtual DOM 을 사용 → 빠른 업데이트 & 렌더링 속도 *DOM (Document object model) : 웹 페이지를 정의하는 하나의 객체component-based → 재사용성 (Reusability)개발 속도 ⬆️유지 보수 용이활발한 커뮤니티React native → 앱 개발도 가능단점방대한 학습량버전 업데이트 → 뭔가 계속 바뀜… 개발자의 숙명임높은 상태관리 복잡도리액트 연동하는 법1. 일반 방법1. 기존 html에 dom container 추가 (Root DOM node)2. 리액트 가져오기3. 리액트 컴포넌트 가져오기 ..
엑셀에서 구글 드라이브 링크로 이미지 일괄 다운하는 법 (원하는 이름으로 다운 가능) - requeset라이브러리 / gdown라이브러리
·
ML, Machine Learning
서론동아리 임원직을 맡게 되면서,구글폼에 작성된 사진 데이터를 일괄적으로 다운로드 해야하는 일이 생겼다. 허나 구글 드라이브에 들어가보면 파일명 이름이 다 제각각이다. 나는 '{성명}_학생증.png'이런 형식으로이름을 통일하여 다운받고 싶었기에 쉬운 일괄 다운로드 방법을 찾아 헤매었다.여러분들은 시간낭비 하지마시라고 방법을 공유한다.(그냥 이름 상관없이 다운로드만 하고 싶으면 아래 링크처럼 더 쉬운 방법이 많다)http://xn--comfortable1000-jr85d.tistory.com/17 엑셀에서 구글 드라이브 링크로 일괄 다운하는 법 1. 로컬 엑셀 파일에 링크, 성명 옮기기 sheets에서 보기에서 확인 가능 여기 이 구글스프레드 시트데이터를이런식으로 주르륵 옮겨주세요 2. 구글 ..
[자료구조] python 공식문서 heapq.heapify()로 알아보는 최소 힙 (min heap)의 동작
·
CS fundamental/data structure
1. 최소힙이란부모 노드가 자식 노드보다 작거나 같은 값을 가지도록 유지하는 이진 트리 기반의 자료 구조 즉,✅ 완전 이진 트리(Complete Binary Tree) 여야 함✅  부모 노드가 항상 자식보다 작거나 같아야 함  pos의 자식노드의 indexleft 자식노드right 자식노드2*pos + 1 2*pos + 2즉, left+1 2. python 공식문서 코드2-1. heapq.heapify(heap)def heapify(x): #리스트를 힙으로 변환 n = len(x) for i in reversed(range(n//2)): _siftup(x, i) revesed(range(n//2))e.g. [1,6,7,2,3,4,5] 일 때,n//2 == 3즉, i=2 → i=1 ..