yuvnn BLOG

[React] Context API

yuvnn — Tue, 20 May 2025 19:13:08 +0900

☁️충북대 구름톤 유니브 4기 스터디 일부 내용

React를 사용하다 보면 로그인 정보, 다크 모드 같은 테마, 언어 설정처럼 여러 컴포넌트에서 공통으로 사용하는 데이터가 생깁니다. 이런 데이터는 매번 props로 넘겨주기보다는, Context API를 활용해서 컴포넌트 트리 전체에 쉽게 전달할 수 있어요.

이번 글에서는 Context API의 기본 개념부터 사용법, 주의할 점까지 하나씩 정리해보도록 하겠습니다.

1. Context란 무엇인가요?

Context는 컴포넌트 트리를 통해 데이터(상태)를 전역적으로 공유할 수 있게 해주는 React의 기능입니다.
기본적으로 props를 일일이 전달하지 않아도, 트리 하위에 있는 모든 컴포넌트가 원하는 데이터를 사용할 수 있게 해줍니다.

예를 들어 로그인 상태, UI 테마, 현재 언어 같은 정보에 적합합니다.

2. 기본 사용법

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {value => <Button theme={value} />}
    </ThemeContext.Consumer>
  );
}

React.createContext('light'): 기본값을 지정합니다.
ThemeContext.Provider: value를 통해 하위 컴포넌트에 데이터를 제공합니다.
ThemeContext.Consumer: 트리 어디서든 value를 사용할 수 있습니다.

3. useContext() 훅 사용하기

보다 간결한 방법으로는 useContext 훅을 사용할 수 있습니다.

import { useContext } from 'react';

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <Button theme={theme} />;
}

이 방식은 Consumer를 직접 사용하는 것보다 코드가 훨씬 간단하고 가독성도 좋습니다.

4. Context 사용할 때 주의할 점

Context는 편리하지만, 무조건 사용하는 건 좋은 방법이 아닐 수 있어요. 다음 사항을 고려해보세요.

재사용성이 떨어질 수 있습니다.
특정 Context에 의존하는 컴포넌트는 다른 곳에서 재사용하기 어려워집니다.
불필요한 렌더링이 발생할 수 있습니다.
Provider의 value가 바뀌면 하위의 모든 Consumer가 다시 렌더링됩니다. 이를 방지하려면 useMemo 등을 활용해서 value가 불필요하게 바뀌지 않도록 관리해야 합니다.
모든 상태를 Context로 관리할 필요는 없습니다.
컴포넌트 간 깊이가 깊지 않거나 단방향으로만 전달되면, props가 더 명확하고 효율적일 수 있습니다.

5. 여러 개의 Context 사용하기

여러 종류의 전역 상태를 관리해야 할 때는 Context를 분리해서 사용하는 것이 좋습니다. 예를 들어 로그인 정보, 언어 설정, 테마 등을 각각 따로 관리할 수 있습니다.

<AuthContext.Provider value={user}>
  <LanguageContext.Provider value={lang}>
    <ThemeContext.Provider value={theme}>
      <App />
    </ThemeContext.Provider>
  </LanguageContext.Provider>
</AuthContext.Provider>

이렇게 중첩 구조를 만들 수도 있지만, 지나치게 많아지면 Context nesting 문제가 생기므로 주의해야 합니다.

6. 마무리하며

Context API는 전역 상태를 간단하게 관리할 수 있도록 도와주는 매우 유용한 기능입니다.
하지만 무분별한 사용은 오히려 유지보수를 어렵게 만들 수 있기 때문에, props로 해결 가능한 경우는 그대로 두고, 진짜 전역이 필요한 경우에만 Context를 도입하는 것이 좋습니다.

지금까지 React Context API에 대해 정리해보았습니다. 직접 예제를 만들어보면서 감을 익혀보는 걸 추천드립니다.

[React] Controlled Components, Lifting State Up, Composition vs Inheritance

yuvnn — Mon, 12 May 2025 11:43:18 +0900

☁️충북대 구름톤 유니브 4기

1. React의 Form

1.1 Controlled Components

값이 React의 state에 의해 제어되는 폼 요소를 말합니다.

1.1.1 예시

// input 태그
<input type="text" value={value} onChange={handleChange} />

// textarea 태그
<textarea value={value} onChange={handleChange} />

// select 태그
<select value={value} onChange={handleChange}>
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option value="grape">포도</option>
  <option value="watermelon">수박</option>
</select>

1.2 textarea 태그

긴 텍스트 입력을 받기 위한 태그입니다.

import React, { useState } from 'react';

function RequestForm() {
  const [value, setValue] = useState('요청사항을 입력하세요.');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    alert('입력한 요청사항: ' + value);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        요청사항:
        <textarea value={value} onChange={handleChange} />
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

1.3 select 태그

드롭다운 형태로 옵션을 선택할 수 있는 태그입니다.

import React, { useState } from 'react';

function FruitSelect() {
  const [selectedFruit, setSelectedFruit] = useState('grape');

  const handleChange = (event) => {
    setSelectedFruit(event.target.value);
  };

  return (
    <form>
      <label>
        과일 선택:
        <select value={selectedFruit} onChange={handleChange}>
          <option value="apple">사과</option>
          <option value="banana">바나나</option>
          <option value="grape">포도</option>
          <option value="watermelon">수박</option>
        </select>
      </label>
      <p>선택한 과일: {selectedFruit}</p>
    </form>
  );
}

1.3.1 다중 선택 예시

<select multiple={true} value={selectedOptions} onChange={handleChange} />

const selected = Array.from(event.target.selectedOptions, (option) => option.value);

1.4 file input 태그

사용자가 파일을 선택할 수 있도록 하는 태그입니다.

파일 입력은 읽기 전용으로, uncontrolled component입니다.

import React, { useState } from 'react';

function FileUploadExample() {
  const [fileName, setFileName] = useState('');

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      setFileName(file.name);
    }
  };

  return (
    <form>
      <label>
        파일 업로드:
        <input type="file" onChange={handleFileChange} />
      </label>
      <p>선택된 파일: {fileName}</p>
    </form>
  );
}

1.5 여러 개의 상태 선언 및 입력 처리

여러 입력 필드가 있을 경우, 각각의 useState를 사용하여 상태를 관리합니다.

import React, { useState } from 'react';

function Reservation() {
  const [haveBreakfast, setHaveBreakfast] = useState(true);
  const [numberOfGuest, setNumberOfGuest] = useState(2);

  const handleSubmit = (event) => {
    alert(`아침식사 여부: ${haveBreakfast}, 방문객 수: ${numberOfGuest}`);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        아침식사 여부:
        <input
          type="checkbox"
          checked={haveBreakfast}
          onChange={(e) => setHaveBreakfast(e.target.checked)}
        />
      </label>
      <br />
      <label>
        방문객 수:
        <input
          type="number"
          value={numberOfGuest}
          onChange={(e) => setNumberOfGuest(e.target.value)}
        />
      </label>
      <br />
      <button type="submit">제출</button>
    </form>
  );
}

1.6 input에 null을 넘기면?

<input value={null} />

value={null}을 설정하면 React는 해당 input을 uncontrolled component로 간주합니다.
이후에는 사용자가 자유롭게 입력할 수 있게 됩니다.

2. Lifting State Up

여러 컴포넌트가 같은 상태를 공유해야 할 경우, 상태를 공통 부모 컴포넌트로 끌어올립니다.

function Parent() {
  const [value, setValue] = useState('');

  return (
    <>
      <ChildA value={value} onChange={setValue} />
      <ChildB value={value} />
    </>
  );
}

function ChildA({ value, onChange }) {
  return (
    <input value={value} onChange={(e) => onChange(e.target.value)} />
  );
}

function ChildB({ value }) {
  return <p>입력값: {value}</p>;
}

2.1 언제 써야 할까?

여러 컴포넌트가 동일한 데이터를 기반으로 렌더링될 때
자식 컴포넌트 간 상태 동기화가 필요할 때
데이터 흐름을 명확히 유지하고 싶을 때

3. Composition vs Inheritance

React는 상속보다 합성(Composition)을 권장합니다.

3.1 Composition - Containment

하위 컴포넌트를 포함하는 형태의 합성 방법

sidebar, dialog 같은 box형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다.
childen 이라는 props를 사용해서 조합.

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">{props.left}</div>
      <div className="SplitPane-right">{props.right}</div>
    </div>
  );
}

function App() {
  return (
    <SplitPane left={<Contacts />} right={<Chat />} />
  );
}

3.2 Composition - Specialization

범용적인 개념을 구별이 되도록 구체화하는 것

객체 지향 언어에서는 상속으로 구현. 여기서는 합성으로 구현.

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">{props.title}</h1>
      <p className="Dialog-message">{props.message}</p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="어서 오세요"
      message="우리 사이트에 방문하신 것을 환영합니다!"
    />
  );
}

3.3 상속보다 합성을 추천하는 이유

컴포넌트를 더 작게 쪼개고,
필요한 컴포넌트들을 조합해서 유연하게 UI를 구성할 수 있기 때문입니다.

[React] useState와 useEffect

yuvnn — Thu, 10 Apr 2025 10:10:15 +0900

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 (
    <div>
      <p>총 {count}번 클릭했습니다.</p>
      <button onClick={() => setCount(count + 1)}>
        클릭
      </button>
    </div>
  );
}

언제 사용하면 좋을까?

숫자 증가/감소 카운터 만들 때
폼 입력 상태 관리할 때
토글 상태 관리할 때 (예: on/off, show/hide)

⚠️ 주의할 점

상태가 변경되면 컴포넌트가 재렌더링됩니다.
이전 상태를 기반으로 상태를 바꾸려면 함수형 업데이트를 사용하는 게 안전합니다:

setCount(prevCount => prevCount + 1);

2. useEffect()

컴포넌트에서 Side Effect(부수 효과)를 처리하기 위한 Hook

Side Effect란?

렌더링 외의 작업으로, 컴포넌트 외부(브라우저, 서버 등)에 영향을 주는 작업들을 말합니다.

예를 들어:

API 요청 (fetch 등)
브라우저 타이틀 변경
이벤트 리스너 등록
타이머 설정
외부 라이브러리 사용 등

✅ 기본 문법

useEffect(() => {
  // 실행할 코드
  return () => {
    // cleanup 함수 (선택 사항)
  };
}, [의존성1, 의존성2]);

예시

예시1. API요청 ( 특정 유저가 온라인인지 아닌지를 구독)

import React, { useState, useEffect } from "react";

function UserStatus({ user }) {
	//사용자의 현재 상태(온라인/오프라인) 를 저장하기 위한 상태 변수
  const [isOnline, setIsOnline] = useState(null); 
  
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    
  //해당 유저의 온라인 상태를 실시간으로 구독함
    ServerAPI.subscribeUserStatus(user.id, handleStatusChange);
    
    return () => {
      ServerAPI.unsubscribeUserStatus(user.id, handleStatusChange);
    };
  }, [user.id]);

  if (isOnline === null) return "대기 중...";
  return isOnline ? "온라인" : "오프라인";
}

예시2. 타이머

import React, { useState, useEffect } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds(prev => prev + 1); // 상태 업데이트
    }, 1000);

    return () => clearInterval(timer); // 언마운트 시 타이머 정리
  }, []);

  return <div>{seconds}초</div>;
}

예시2-1. 타이머 잘못된 예시

import React, { useState, useEffect } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);
  
  const timer = setInterval(() => {
    setSeconds(prev => prev + 1); // 상태 업데이트
  }, 1000);

  return <div>{seconds}초</div>;
}

⚠️ 그런데 React 컴포넌트는 상태가 바뀌면 다시 렌더링됩니다.

다시 렌더링되면 Timer() 함수가 또 실행되죠.

그럼 어떻게 될까요?

매 렌더링마다 setInterval()이 계속해서 새로 실행됨
즉, 1초마다 증가하는 게 아니라, 점점 빨라짐!
결국 메모리에 쌓이고, 브라우저가 느려지고, 원하는 동작이 아님

그래서 useEffect를 사용해서 한 번만 setInterval()을 설정할 수 있도록 하는 것!

의존성 배열 (dependency array) 설명

[]: 컴포넌트 mount/unmount 시 단 1번만 실행
[변수]: 해당 변수가 변경될 때만 실행
생략: 렌더링마다 실행

useEffect(() => {
  console.log("매 렌더링마다 실행");
});

useEffect(() => {
  console.log("처음 한 번만 실행");
}, []);

useEffect(() => {
  console.log("특정 값 변경될 때 실행");
}, [count]);

⚠️ 주의할 점

의존성 배열을 정확하게 설정하지 않으면 불필요한 렌더링 또는 버그가 발생할 수 있음
비동기 함수(async)는 useEffect 바로 안에서 사용할 수 없음 → 즉시 실행 함수(IIFE)나 별도 함수로 처리해야 함

useEffect(() => {
  async function fetchData() {
    const res = await fetch("/api/data");
    const json = await res.json();
    console.log(json);
  }
  fetchData();
}, []);

3. 정리

Hook 역할 사용 시점 주의할 점

useState	상태 관리	상태가 필요한 모든 컴포넌트	set함수 호출 시 렌더링 발생
useEffect	부수 효과 처리	API 호출, 타이머, 구독 등 필요할 때	의존성 배열 누락 주의

[React] REACT란? / JSX란? / Element란?

yuvnn — Thu, 3 Apr 2025 16:39:42 +0900

* 충북대 구름톤 유니브 FE스터디 필기노트

REACT란?

Javascript UI 라이브러리

라이브러리이기 때문에 제어 권한이 사용자에게 있다.

장점

virtual DOM 을 사용 → 빠른 업데이트 & 렌더링 속도 *DOM (Document object model) : 웹 페이지를 정의하는 하나의 객체
component-based → 재사용성 (Reusability)
- 개발 속도 ⬆️
- 유지 보수 용이
활발한 커뮤니티
React native → 앱 개발도 가능

단점

방대한 학습량
버전 업데이트 → 뭔가 계속 바뀜… 개발자의 숙명임
높은 상태관리 복잡도

리액트 연동하는 법

1. 일반 방법

1. 기존 html에 dom container 추가 (Root DOM node)

<div id="root"></div>

2. 리액트 가져오기

3. 리액트 컴포넌트 가져오기

<body>
    <div id="root"></div>

    <!-- 리액트 가져오기 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

    <!-- 리액트 컴포넌트 가져오기 -->
    <script src="MyButton.js"></script>
</body>

2. create-react-app (편리한 방법)

필요
- node.js 14.0.0이상
- npm v6.14.0 이상
npx명령어로 실행

npx create-react-app mypjt
cd mypjt
npm start

JSX란?

JavaSciprt + XML/HTML

REACT에서는 React.createElement() 함수를 통해 JSX를 JS로 변환
- React.createElement() : 자바 스트립트 객체 생성
JSX는 JS보다 더 간결하고 가독성이 높음

장점 (JS 아닌 JSX 권장하는 이유)

간결한 코드, 가독성 향상
Injection Attacks 방어

사용

중간에 JS사용하고 싶으면 {}(중괄호) 로 묶어줌
- 태그의 속성(attribute)에 값을 넣는 등…
HTML 대입 하며 사용
- children 정의 등.. html 문법을 따름

Elements란?

리액트 앱을 구성하는 가장 작은 블록들

element는 화면에서 보이는 것들을 기술함
react element는 자바스크립트 객체 형태로 존재

React.crateElement(
	type,
    [props],
    [...children]
)

type: html or react component

props: element의 속성

children: element의 자식

특징

immutable (불변성)
- 생성후에는 children 이나 attributes를 바꿀 수 없다
- 그렇다면 화면 변경은 어떻게?
  - 새로운 element를 만들어 기존 element가 연결되어 있는 부분에 달면 됨
  - state change → compute diff → re-render
  - re-render (얼마나 자주 갱신) 성능에 큰 영향을 줌 !

element rendering

최상단 노드에 rendering

reactDOM에서 rendering 하는 과정 === 가상돔 → 실제돔으로 이동!

e.g.

const element = <h1> 안녕, 리액트! </h1>
ReactDOM.render(element, document.getElementById('root'));

엑셀에서 구글 드라이브 링크로 이미지 일괄 다운하는 법 (원하는 이름으로 다운 가능) - requeset라이브러리 / gdown라이브러리

yuvnn — Fri, 28 Mar 2025 17:26:11 +0900

서론

동아리 임원직을 맡게 되면서,
구글폼에 작성된 사진 데이터를 일괄적으로 다운로드 해야하는 일이 생겼다.

허나 구글 드라이브에 들어가보면 파일명 이름이 다 제각각이다.

이런식으로 제각각

나는 '{성명}_학생증.png'이런 형식으로

이름을 통일하여 다운받고 싶었기에
쉬운 일괄 다운로드 방법을 찾아 헤매었다.

여러분들은 시간낭비 하지마시라고 방법을 공유한다.
(그냥 이름 상관없이 다운로드만 하고 싶으면 아래 링크처럼 더 쉬운 방법이 많다)
http://xn--comfortable1000-jr85d.tistory.com/17

엑셀에서 구글 드라이브 링크로 일괄 다운하는 법

1. 로컬 엑셀 파일에 링크, 성명 옮기기

sheets에서 보기에서 확인 가능

여기 이 구글스프레드 시트데이터를

이런식으로 주르륵 옮겨주세요

2. 구글 드라이브 엑세스 권한 풀기

오른쪽 하단 폴더 보기에서 사진 전체 확인 가능

구글 드라이브에 들어가서
ctrl+a로 전체 선택 후
다음 사진처럼 점 세게 > 공유 > 공유

일반 액세스를 '링크가 있는 모든 사용자'로 바꾸어
사진에 대한 권한을 일괄적으로 열어줌

3. 코드 실행

이제 자기 상황에 맞춰서
경로, 파일 이름등의 변수 설정하고 코드 돌리면 됩니다.

현재 코드에서는

엑셀에 있는 링크의 값이

https://drive.google.com/open?id=xxxxx

이런식으로 구성되어 있다고 가정하고

다운이 가능한

https://drive.google.com/uc?id=xxxxx

이런 형태로 바꾸어 다운로드를 받고 있습니다.

링크의 구조 따라 알맞게 수정하여 실행하세요

코드는 어떤 라이브러리를 사용하느냐에 따라 두가지 방법이 있음. (gdown라이브러리 or request라이브러리)

둘 중 하나만 복사해서 사용하세요.

설치 귀찮으면 request , 설치하더라도 다운로드 진행사항 보고 싶으면 gdown

다만 request 방식에서

Google Drive는 일정 시간 동안 너무 많은 요청이 들어오면 일시적으로 오류가 발생할 수 있기 때문에,
일정 시간이 지나야 다시 다운로드 가능합니다.

gdown방식은 Google Drive 공유 설정을 '공개'로 변경하고 진행하세요.

3-1. gdown라이브러리

import pandas as pd
import gdown
import os

'''
여기를 자신의 상황에 맞게 바꾸세요
'''
file_path = ''  # 엑셀 파일 경로
sheet_name = ''  # 엑셀 시트 이름
save_folder = '' # 사진 저장 경로
output_filename = '' #저장 시 이름 (밑에서 행에 따라 다르게 저장도 가능)

df = pd.read_excel(file_path, sheet_name=sheet_name)
if not os.path.exists(save_folder):
        os.makedirs(save_folder)

for index, row in df.iterrows():
    name = row['성명']
    file_url = row['사진']

    # 'id=' 이후 부분이 파일 ID
    file_id = file_url.split('id=')[-1]  

    # Google Drive에서 다운로드 링크 생성
    download_url = f'https://drive.google.com/uc?id={file_id}'
    
    if file_id:
        # output_filename = f"{name}_모바일 학생증.jpg" #여기서 행에 따라 다르게 변경도 가능
        output_path = os.path.join(save_folder, output_filename)

        try:
            gdown.download(download_url, output_path, quiet=False)
            print(f"✅ {output_filename} 다운로드 완료!")
        except Exception as e:
            print(f"❌ {name}의 파일 다운로드 실패: {e}")
    else:
        print(f"❌ {name}의 유효한 구글 드라이브 링크를 찾을 수 없음.")

3-2. requeset라이브러리

import pandas as pd
import os
import requests

'''
여기를 자신의 상황에 맞게 바꾸세요
'''
file_path = ''  # 엑셀 파일 경로
sheet_name = ''  # 엑셀 시트 이름
save_folder = ''  # 사진 저장 경로
output_filename = '' #저장 시 이름 (밑에서 행에 따라 다르게 저장도 가능)

df = pd.read_excel(file_path, sheet_name=sheet_name)
if not os.path.exists(save_folder):
        os.makedirs(save_folder)

for index, row in df.iterrows():
    name = row['성명'] 
    file_url = row['사진']

    # 'id=' 이후 부분이 파일 ID
    file_id = file_url.split('id=')[-1]  # 'id=' 이후 부분이 파일 ID

    # Google Drive에서 다운로드 링크 생성
    download_url = f'https://drive.google.com/uc?id={file_id}&export=download'

    save_name = f"{name}_모바일 학생증.jpg"  # 저장할 파일명
    output_filename = os.path.join(save_folder, save_name)

    if file_id:
            # output_filename = f"{name}_모바일 학생증.jpg" #여기서 행에 따라 다르게 변경도 가능
            output_path = os.path.join(save_folder, output_filename)

            try:
                response = requests.get(download_url)
                with open(output_filename, 'wb') as file:
                    file.write(response.content)
                print(f"✅ {output_filename} 다운로드 완료!")
            except Exception as e:
                print(f"❌ {name}의 파일 다운로드 실패: {e}")
    else:
        print(f"❌ {name}의 유효한 구글 드라이브 링크를 찾을 수 없음.")

4. 결과

이런식으로 파일에 저장되는것을 확인할 수 있다.

[자료구조] python 공식문서 heapq.heapify()로 알아보는 최소 힙 (min heap)의 동작

yuvnn — Mon, 24 Mar 2025 17:41:38 +0900

1. 최소힙이란

부모 노드가 자식 노드보다 작거나 같은 값을 가지도록 유지하는 이진 트리 기반의 자료 구조

즉,

✅ 완전 이진 트리(Complete Binary Tree) 여야 함

✅ 부모 노드가 항상 자식보다 작거나 같아야 함

pos의 자식노드의 index

left 자식노드	right 자식노드
*2pos + 1**	*2pos + 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 → i=0 순서로 실행

2-2. _shiftup(heap,pos)

주석x + 설명

def _siftup(heap, pos):
    endpos = len(heap)
    startpos = pos
    newitem = heap[pos]

    childpos = 2 * pos + 1

    while childpos < endpos:
        rightpos = childpos + 1
        if rightpos < endpos and not heap[childpos] < heap[rightpos]:
            childpos = rightpos

        heap[pos] = heap[childpos]
        pos = childpos
        childpos = 2 * pos + 1

    heap[pos] = newitem
    _siftdown(heap, startpos, pos)

힙에서 특정 위치(pos)의 요소를 선택
현재 요소의 값을 저장하고, 해당 위치를 기준으로 왼쪽 자식 노드의 위치를 계산
자식 노드가 존재하는 동안(len(heap) < childpos) 다음을 반복한다:
- 오른쪽 자식 노드가 존재하고, 왼쪽 자식보다 작다면 오른쪽 자식을 선택한다.
- 현재 요소를 선택한 자식 노드의 값으로 교체하고, 현재 위치를 자식 노드 위치로 이동시킨다.
- 새로운 왼쪽 자식 노드의 위치를 다시 계산한다.
더 이상 자식 노드가 없을 때, 저장했던 원래 요소를 현재 위치에 삽입한다.
삽입한 요소가 부모보다 작아야 하는 경우를 대비해 _siftdown 함수를 호출하여 최종 위치를 조정한다.

주석o

def _siftup(heap, pos):
    """ 
    힙의 특정 위치(pos)에서 아래로 내려가며 적절한 위치를 찾도록 조정하는 함수.
    (부모 노드를 내려보내는 역할)

    heap: 힙 리스트
    pos: 조정을 시작할 노드의 위치
    """
    
    endpos = len(heap)  # 힙의 길이 (마지막 인덱스 초과 값)
    startpos = pos  # 시작 위치 저장 (추후 _siftdown 호출을 위해)
    newitem = heap[pos]  # 현재 위치의 값 저장

    childpos = 2 * pos + 1  # 왼쪽 자식 노드의 인덱스 계산

    # 자식 노드가 존재하는 동안 반복
    while childpos < endpos:  
        rightpos = childpos + 1  # 오른쪽 자식 노드의 인덱스 (left + 1)

        # 오른쪽 자식이 존재하고, 왼쪽보다 작다면 오른쪽 선택
        if rightpos < endpos and not heap[childpos] < heap[rightpos]:  
            childpos = rightpos  

        # 자식 노드를 부모 위치로 이동 (부모를 아래로 내림)
        heap[pos] = heap[childpos]  
        pos = childpos  # 현재 위치를 내려간 자식 노드 위치로 변경
        childpos = 2 * pos + 1  # 새로운 왼쪽 자식 노드 위치 계산

    # 최종적으로 newitem이 들어갈 위치에 삽입
    heap[pos] = newitem  

    # 만약 newitem이 위로 올라가야 할 경우 _siftdown 호출
    _siftdown(heap, startpos, pos)

2-3. _shiftdown()

주석x + 설명

def _siftdown(heap, startpos, pos): #자식 노드를 올림
    newitem = heap[pos]
    while pos > startpos:
        parentpos = (pos - 1) >> 1
        parent = heap[parentpos]
        if newitem < parent:
            heap[pos] = parent
            pos = parentpos
            continue
        break
    heap[pos] = newitem
    print('index : ',startpos,'| _shiftdown이후',heap)

현재 비교할 노드의 값을 newitem에 저장
노드가 루트까지 도달하지 않은 경우, 부모 노드와 비교를 계속함
현재 노드가 부모 노드보다 작으면, 부모 노드를 현재 위치로 내리고, 현재 노드는 부모의 위치로 이동
부모와 비교하여 작은 값을 위로 올리며 반복. 부모보다 작지 않으면 비교를 종료
더 이상 부모와 비교할 필요가 없으면, newitem을 최종 위치에 배치하여 완료

주석ｏ

def _siftdown(heap, startpos, pos):
    ''' 
    값이 올라가야 하는 경우, 힙의 적절한 위치로 이동시키는 함수.

    heap: 힙 리스트
    startpos: 힙화 시작 위치 (부모 노드의 위치)
    pos: 조정을 시작할 노드의 위치'
    '''

    newitem = heap[pos]  # 현재 위치에 있는 값을 newitem에 저장 (나중에 위로 올릴 값)

    # pos가 startpos보다 크면, 즉 아직 루트까지 도달하지 않았다면 반복
    while pos > startpos:
        parentpos = (pos - 1) >> 1  # 부모 노드의 인덱스를 계산 (현재 노드의 부모는 (pos-1) // 2)
        parent = heap[parentpos]  # 부모 노드의 값

        # 만약 newitem이 부모보다 작다면, 부모 노드를 현재 위치로 내려주고 계속 비교
        if newitem < parent:
            heap[pos] = parent  # 부모를 현재 위치로 내림
            pos = parentpos  # 현재 위치를 부모 위치로 업데이트
            continue  # 부모와 계속 비교하여 더 이상 교환할 것이 없을 때까지 반복

        break  # 부모보다 크거나 같으면, 더 이상 내려갈 필요 없으므로 반복 종료

    heap[pos] = newitem  # 최종적으로 newitem이 들어갈 위치에 저장 (부모보다 작은 경우 위로 올라옴)

2-4. 코드 실행화면

초기 :  [1, 6, 7, 2, 3, 4, 5]
index :  2 | _shiftup이후 [1, 6, 4, 2, 3, 7, 5]
index :  2 | _shiftdown이후 [1, 6, 4, 2, 3, 7, 5]
index :  1 | _shiftup이후 [1, 2, 4, 6, 3, 7, 5]
index :  1 | _shiftdown이후 [1, 2, 4, 6, 3, 7, 5]
index :  0 | _shiftup이후 [2, 3, 4, 6, 1, 7, 5] //자식노드가 있는 한, 끝까지 내림
index :  0 | _shiftdown이후 [1, 2, 4, 6, 3, 7, 5] //자식노드(1)이 부모노드 보다 작기 때문에 올려줌
최종 :  [1, 2, 4, 6, 3, 7, 5]

참고

https://github.com/python/cpython/blob/main/Lib/heapq.py#L170

https://github.com/python/cpython/blob/main/Lib/heapq.py#L260

[git] SSH를 사용하여 원격 저장소에 연결하기

yuvnn — Mon, 17 Mar 2025 17:56:01 +0900

서론

랩실 서버를 사용하여 프로젝트를 진행하던 중,

Git에 기록을 남기기 위해

프로젝트를 원격저장소에 remote, push하다가 오류가 발생했다.

⚠️ error: RPC 실패; HTTP 400 curl 22 The requested URL returned

error: 400 fatal: the remote end hung up unexpectedly

오류: RPC 실패; HTTP 400 컬 22 요청된 URL 반환

오류: 400 치명적입니다: 원격 끝이 예기치 않게 끊겼습니다

이유는 모르겠으나,

(인증오류, 푸시크기제한이 이유일 수 있음)

https 방식의 원격연결이 불가능하다는 내용의 오류로 추정되기에

SSH 방식의 연결을 시도해 보았다.

그 과정을 공유해보겠다 !

SSH를 사용하여 원격 저장소에 연결하기

1. 키 확인

.ssh 디렉토리 내에 id_rsa 또는 id_ed25519 같은 키 파일이 있다면, 이미 SSH 키가 있는 것입니다.

ls -al ~/.ssh

2. ssh 키 생성

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

하면 이렇게

1. 어디에 키를 생성할 것인지

2. passphrase를 생성할 것인지

*passphrase : SSH 키를 사용할 때 추가적인 보안을 제공하기 위해 설정하는 비밀번호

물어보는데

그냥 계속 엔터 치면 된다

3. SSH 공개 키 복사

cat ~/.ssh/id_rsa.pub

4. GitHub에 SSH 키 추가

GitHub에 로그인 후, Settings > SSH and GPG keys로 이동
New SSH key 버튼을 클릭
Title에 적당한 이름을 넣고, Key에 복사한 공개 키를 붙여넣기
Add SSH key 버튼을 클릭하여 키를 추가

완료되면 이런식으로 SSH Keys에 추가가 된 모습을 확인할 수 있다.

5. SSH 연결 테스트

ssh -T git@github.com

정상적으로 연결되었다면

다음과같은 메세지가 출력된다

6. Git 원격 URL 변경

만약 원격 URL이 HTTPS로 설정되어 있다면, SSH 방식으로 변경해야 한다.

git remote set-url origin git@github.com:username/repository.git

여기까지 완료했다면,

원래 하던대로 커밋,푸시를 진행하면 된다!

+) SSH이란?

참고 [네트워크] SSH, SFTP, FTP 아주 쉽게 개념 정리 & 설명 (feat. AWS) — 아주 쉽게 정리한 블로그

SSH는 "Secure Shell"의 약자로,

원격으로 호스트에 접속하기 위해 사용되는 보안 프로토콜

즉, 원격으로 다른 컴퓨터에 접속하고 싶을 때 SSH를 사용

우리가 나의 컴퓨터로 다른 컴퓨터를 접속 할 때, 나의 컴퓨터에서 Public Key와 Private Key를 생성
이를 통해 통신을 위한 나의 컴퓨터의 신원을 암호화 할 수 있다.
이 때, Public Key는 나의 컴퓨터의 신원을 암호화 한 것이고,
Private Key는 암호화 된 나의 컴퓨터의 신원을 복호화 하는 역할
그렇기 때문에 다른 컴퓨터에 Public Key를 저장해야한다.

git에 프로젝트 올리기

yuvnn — Mon, 17 Mar 2025 16:54:21 +0900

몇 번을 해도 계속 헷갈리는 git에 프로젝트 올리는 법 정리해보자

상황)

1. 로컬 파일에 코드 등이 이미 존재

2. 깃에서 새로운 레포지토리 생성완료

이럴때 괜히 쉽게 하겠다고 파일경로 확인 안하고 클론하면 파일을 날려먹는 수가 있다 (유경험자)

1. 로컬 폴더에서 레포지토리 초기화

.git 파일 생성

git init

2. .gitignore 파일 생성

⭐ add 전에 대용량 파일 있는지 확인

git은 한번에 100MB이상의 파일을 업로드 할 수 없음.
확인 안하고 add, commit 바로 했다가 대용량 데이터가 스테이지에 올라가면 귀찮아짐. 그러니까 잘 확인하자

touch .gitignore

기초적인 .gitignore문법
- 디렉토리는 끝에 슬래시(/)를 사용 e.g. folder/
- *는 모든 파일이라는 뜻 e.g. *.csv == csv확장자를 사진 모든 파일
- 주석 : #
- 예외 : !

3. 파일 추가 (Add)

스테이지에 모든 파일 올리기

(커밋 준비 상태)

git add .

4. github 레포지토리 원격 주소 설정

git remote add origin https://github.com/username/repository-name.git

remote 확인

git remote -v

5. 브랜치 설정 (필요 시)

기본적으로 로컬 git 레포지토리는 main 브랜치에서 작업을 하지만,

githbu 레포지토리가 master 브랜지를 사용하고 있다면 로컬 브랜치를 master로 변경해주어야 함

branch 확인

git branch

branch master로 변경

git branch -M master

6. 커밋 (commit) 및 푸시

git commit : 로컬 저장소에 커밋을 기록
git push : 원격 저장소에 반영

git commit -m "init"
git push -u origin master

+) 기타 branch 관련 명령어

git branch -m 'master' 'main'
브랜치명 변경
git branch [브랜치명]
브랜치를 생성
git checkout [브랜치명]
해당 브랜치로 이동
git branch [브랜치명]
해당 브랜치로 이동했는지 확인

이제 헷갈리지 말자요 파이팅!