hwan_lee.log

Python Websockets 오류해결 - BaseEventLoop.create_connection() got an unexpected keyword argument 'extra_headers'

Tue, 02 Sep 2025 01:31:02 GMT

평화롭게 파이썬 웹소켓 튜닝하던중에 문제가 발생

직감적으로 절대 코드 문제는 아니고 바로 구글링

https://github.com/pytr-org/pytr/issues/167

나처럼 비슷한 증상이 나타나는 사람들이 많다는 것을 확인

Hi @timherz86
Same error, I solved doing this:

`pip uninstall websockets

pip install websockets==10.1`

With this version I dont have errors. Hope this helps you.

이렇게 해결했다고 함.

나도 이렇게 하니 해결됨 ~~깃허브와 스택 오버플로우에는 없는 오류가 없다~~

결론

1. pip uninstall websockets
1. pip install websockets==10.1

어셈블리로 웹 만들기

Wed, 23 Jul 2025 13:16:19 GMT

WebAssembly, 왜 필요할까요? 🤔

여러분, 웹이 언제부터 이렇게 진화했죠? 이제 그냥 정보만 띄우는 화면이 아니잖아요. 복잡한 프로그램이 돌아가는 플랫폼이 됐단 말이죠.

근데 웹의 메인 언어인 JavaScript가 말입니다, 좀 한계가 있었어요. 특히 막 3D 게임 돌리고, 영상 편집하고, 사진 보정 같은 고성능 작업에선 속도가 발목을 잡았단 말이죠? 답답해 죽는 줄 알았어요.

그래서 **WebAssembly(Wasm)**가 짠! 하고 등장한 겁니다. 얘가 뭐냐면, 웹 브라우저에서 돌아가는 새로운 형태의 코드예요. 자바스크립트랑 같이 손잡고 일하면서, 고성능 작업은 얘가 처리하는 거죠. 덕분에 웹 앱 성능이 그냥 날아다니게 된 겁니다!

WebAssembly, 어떤 점이 매력적일까요? ✨

1. 엄청난 속도! 🚀

Wasm은 말이죠, 브라우저에서 거의 네이티브 앱 수준으로 쌩쌩 달려요. 이미 컴파일된 바이너리 파일이라 읽고 실행하는 데 시간이 적게 들고, 컴퓨터 자원도 효율적으로 쓴단 말이죠. 복잡한 계산이나 막 그래픽 처리 같은 거 할 때 얘가 핵심입니다!

2. 다양한 언어 지원! 🌐

이게 진짜 대박인데, C, C++, Rust, Go 같은 여러 프로그래밍 언어로 짠 코드를 Wasm으로 바꿔버릴 수 있어요. 그러니까 기존에 만들어진 고성능 라이브러리나 프로그램들을 웹에서 그대로 쓸 수 있게 된 거죠. 웹 개발의 문이 활짝 열리는 순간입니다!

3. 보안성! 🔒

Wasm은 샌드박스라는 안전한 울타리 안에서만 돌아가요. 외부에서 이상한 공격 들어와도 시스템을 딱! 보호해주는 거죠. 웹의 개방성이랑 보안이라는 두 마리 토끼를 동시에 잡는 겁니다! 기가 막히죠?

4. 경량화! 📦

Wasm 파일은 바이너리 형태라서 텍스트로 된 자바스크립트 파일보다 크기가 훨씬 작아요. 이게 뭐냐면, 웹 앱이 더 빨리 로딩된다는 뜻입니다. 기다리는 시간 줄어드니 사용자들도 행복해지겠죠?

WebAssembly, 어디에 활용될까요? 💡

고성능 게임: 웹에서 3D 게임 엔진 돌리고 막 복잡한 물리 시뮬레이션까지 가능해요. 게임이 훨씬 생동감 있어지는 거죠.
그래픽 및 멀티미디어 처리: 웹에서 이미지 편집, 비디오 인코딩/디코딩 같은 무거운 작업도 이제 척척 해낼 수 있습니다.
CAD/CAM 및 과학 시뮬레이션: 막 복잡한 계산 필요한 전문 소프트웨어도 웹에서 돌릴 수 있게 됐단 말이죠. 가능성이 무궁무진합니다.
블록체인: 분산 앱(dApp)의 성능을 팍팍 올려주는 데도 기여할 수 있어요.

WebAssembly 간단 실습: C에서 Wasm으로! 🧑‍💻

자자, 이제 말로만 듣던 WebAssembly를 직접 손으로 만져볼 시간입니다! 가장 쉬운 예제로 C 언어로 짠 함수를 WebAssembly로 바꿔서 웹에서 실행해볼 거예요.

급한분들은 위한 실습 레파지스토리: 실습 레퍼지스토리

준비물:

손
이상적이 환경은 리눅스라고 합니다. 윈도우에서 하실 분들은 오류좀 겪을지도 모르겠네요
Node.js (npm 포함)
Emscripten (C/C++ 코드를 WebAssembly로 바꿔주는 마법 도구)

1단계: Emscripten 설치

Emscripten은 Wasm 개발의 치트키 같은 겁니다. 아래 명령어로 설치할 수 있어요.

설치하는 데 시간이 좀 걸릴 수도 있으니, 뭐 맛있는 거라도 하나 물고 기다리세요.

emsdk GitHub 사이트

git clone https://github.com/emscripten-core/emsdk.git  # gitHub 레파지스토리 클론
cd emsdk  # emsdk 디렉토리로 이동
emsdk install latest  # emsdk 설치 1
emsdk activate latest  # emsdk 설치 2
.\emsdk_env.bat   # 설치한 emsdk 컴파일러 실행

2단계: C 코드 작성 (add.c)

아주 간단한 덧셈 함수를 C 언어로 짜볼 겁니다. add.c 파일을 만들고 아래 코드를 복붙하세요. 파일 경로는 emsdk 디렉토리의 동위 디렉토리 입니다.

그래도 말귀를 못 알아듣는 우리 코딩 새싹이이들을 위해서 굳이 설명을 더 해주자면

C://A/B/emsdk 자 이렇게 여러분들의 emsdk 디렉토리가 있다고 칩시다. C://A/B/add.c 그럼 이렇게 emsdk 디렉토리와 같은위치에 있어야합니다.

굳이 상관없긴한데 파일 구조 관리가 이게 더 편하니 그냥 따라하세요. 반박시 님말이 최고. 너 튜링상.

그리고 아까 생성했던 add.c에 뭐 이런 함수 두개를 적어봅니다.

// add.c
#include 

int add(int a, int b) {
    return a + b;
}

int multiply(int a, int b) {
    return a * b;
}

이 코드는 두 숫자를 더하거나 곱하는, 뭐 아주 평범한 함수 두 개예요. 이것도 이해못하시면 이 글을 왜 읽는거죠?

빠져나가서 유튜브에 C언어 기초 강의라도 듣고 오세요.

3단계: C 코드를 WebAssembly로 컴파일

이제 Emscripten을 써서 add.c 파일을 WebAssembly 모듈이랑 자바스크립트 래퍼 파일로 바꿔줄 거예요. 자 자세한 원리는 생각하지 마시고.

emcc add.c -o add.js -s EXPORTED_FUNCTIONS="['_add', '_multiply']" -s EXPORT_ES6=1 -s WASM=1

emcc add.c: add.c 파일을 컴파일합니다. -o add.js: 출력 파일 이름을 add.js로 정해주는 거예요. 이 파일이 나중에 WebAssembly 모듈을 불러오고 써먹을 수 있게 해줍니다. -s EXPORTED_FUNCTIONS="['_add', '_multiply']": C 코드에 있는 add랑 multiply 함수를 자바스크립트에서 호출할 수 있게 내보내는 겁니다. 함수 이름 앞에 언더바(_) 붙이는 거 잊지 마세요! -s EXPORT_ES6=1: ES6 모듈 형식으로 내보내는 옵션입니다. -s WASM=1: 이걸 붙여줘야 WebAssembly로 컴파일하라고 명령하는 거예요.

이 명령어 뙇 실행하면 add.js랑 add.wasm 파일 두 개가 생길 겁니다.

정상 적용된 모습이고요. 참고하실 분들은 해주세요. (LICENSE 파일이랑 README.md파일을 없어도 무관합니다)

4단계: 웹 페이지에서 WebAssembly 사용 (index.html)

이제 이 WebAssembly 모듈을 웹 페이지에서 불러와서 돌려봐야겠죠? index.html 파일을 만들고 아래 내용을 복붙하세요.

최종 파일 구조




    WebAssembly Test


    WebAssembly Add Example
    Result of add(5, 3): 
    Result of multiply(5, 3):

이 HTML 파일은 add.js를 모듈로 가져와 쓰는 거예요. Module.onRuntimeInitialized는 Wasm 모듈이 준비되면 실행되는 부분입니다. 여기에서 C 함수인 _add와 _multiply를 호출해서 그 결과를 웹 페이지에 띄워줄 겁니다.

5단계: 웹 서버 실행 및 확인

웹 페이지를 열려면 우리 컴퓨터에 웹 서버가 돌아가고 있어야 해요. 간단하게 Node.js의 http-server를 쓸 수 있습니다.

npm install -g http-server
http-server

명령어 실행하고 브라우저에서 http://localhost:8080 (아니면 화면에 뜨는 다른 주소)으로 들어가 보세요. add(5, 3)이랑 multiply(5, 3) 결과가 페이지에 뙇! 하고 나타나는 걸 확인할 수 있을 겁니다! 개발자 도구(F12) 콘솔에서도 결과 확인 가능해요.

마치며... 🌟

지금까지 한 모든 뻘짓들을 저의 깃허브에 올려놨으니 알아서 참고하실 분들은 하세요.

WebAssembly는 웹의 가능성을 한 단계 더 업그레이드 시키는 엄청난 기술입니다. 단순히 속도만 빨라지는 게 아니라, 웹 앱의 복잡한 기능들을 구현하게 해주는 핵심 중의 핵심 기술이 될 거예요.

이번 간단한 실습으로 WebAssembly가 어떻게 돌아가는지 조금이나마 감을 잡으셨기를 바랍니다. 개발자 여러분들도 Wasm에 관심 가지고 새로운 웹 개발 세상을 한번 탐험해 보시는 건 어떨까요? 진짜 후회 안 할 겁니다!

혹시 WebAssembly에 대해 더 궁금한 점이 있다면, 뭐든지 물어보세요! 대답은... 나도 모르면 안 해줄거임 ㅅㄱ

구글이 쓰는 10배빠른 데이터 전송법

Mon, 14 Jul 2025 11:31:11 GMT

깃허브의 Trending을 확인하며

깃허브의 수많은 레포지스토리 중 가장 인기 있는 레파지스토리는 무엇일까?

GitHub트렌딩사이트

다음 링크를 타고 넘어가면 깃허브의 최대 이슈 레파지스토리를 확인 가능하다.

★개수가 기본 2000이 넘어가는 중

이게 사람이 할 짓인가 싶을 정도로 레파지스토리 하나하나가 살인적인 용량을 자랑한다.

거의 대부분 구글이 만든 대형 프로젝트 아키텍쳐들이다.

오늘은 그중에서 맨 상단 protobuf에 대해서 알아보자

Protobuf GitHub사이트

이런 대형 프로젝트 레파지스토리의 정체를 알기위한 꿀팁

바로 README파일 읽어보자!

다른 이유가 아니라, README 파일은 개발자들이 머리를 싸매고 이 프로젝트를 이해시키기위해서 발악한 결과물이다.

영어고 읽기 싫지만 몇번 읽어보면 적응된다.

그래서 정리하자면

마이크로서비스 아키텍처(MSA)나 gRPC(Google Remote Procedure Call) 통신에서 '실제'쓰고 있는 코드라고 합니다.

이런 게 왜 필요한데?

대부분 컴퓨터 비전에서

왜 이렇게까지 해야하는가?

처럼 필요성의 질문에는 무조건

효율성, 편의성, 성능 때문에

이라고 답을 하면 맞는다.

따라서 이 프로젝트도 그런 맥락이다.

이제 중요한 개념설명들을 하기전에 원치 않는 분들이 99%라고 생각합니다.

이제 그런 걸 기대하는 씹덕프사님들께 욕망해소의 링크를 첨부해드립니다.

★☆ㅣ9@gold_pr@t●_u출_♥♡

~~유니짱 다이스키~~

프로토콜 버퍼(Protocol Buffers) 완벽 가이드: 기본 개념부터 고급 아키텍처까지

현대 데이터 처리 방식은 주로 json 과 XML방식이 많이 채택되는 모습이다.

출처: https://moldstud.com/articles/p-what-are-the-latest-trends-in-xml-development

~~와! 매우 과학적인 스택오버플로우!~~

그러면 프로토콜 버퍼는 몇위정도 채택률을 가질까?

30분동안 아무리 찾아도 데이터 protobuf의 점유율을 조사한 결과는 없어서 그냥 Gemini돌리고 간단히 사실 유무 체크 하는 "대답 재확인"기능을 돌렸다. 빨간색 표시는 믿지 않는게 좋고 대충 초록색이면 신뢰가능한 정보라는 뜻. 따라서 대충 4~5위정도 Protobuf가 시장점유율을 가진다고 보면된다.

~~와! 매우과학적인 Gemini !!~~

1. 기본 개념: 프로토콜 버퍼란 무엇인가?

프로토콜 버퍼(이하 Protobuf)는 구조화된 데이터를 저장하거나 교환하기 위한 형식(Format)이자 규칙(Protocol)이다. 텍스트 기반인 JSON이나 XML과 달리, Protobuf는 데이터를 *바이너리(Binary) 형식으로 직렬화하여 크기가 작고 처리 속도가 빠르다는 장점을 가진다.

[바이너리 형식(파일)]: 0과 1로만 이루어진 이진법으로 표현된 데이터 또는 파일.

텍스트는 문자와 숫자로 이루어져 있으며, 아스키 코드나 유니코드와 같은 문자 인코딩 방식을 사용하여 표현됩니다.

따라서 인코딩을 한 번 거치는 텍스트보다 당연히 0과 1로 이루어진 파일이 빠를 수 밖에 없겠죠.

이해가 안되신다면 → Python보다 C언어가 빠르고 → C언어보다 assemble언어가 빠르고 → assemble보다 → 기계어가 빠르다

는처럼 생각하면 됩니다.

위에 사진처럼 바이너리는 읽기/쓰기 모두 문자/숫자간에 통신이 문제가 없는 반면에, 기존 텍스트 방식 json이나 XML은 읽기쓰기에 제약이 있는 모습이다.

주요 이점:

성능: 바이너리 인코딩을 통해 데이터 크기와 파싱 속도를 획기적으로 개선합니다.
엄격한 스키마: 데이터 구조를 미리 정의하므로 데이터 타입 불일치로 인한 런타임 오류를 방지합니다.
호환성: 스키마에 필드를 추가하거나 변경하더라도 하위 및 상위 호환성을 유지하는 명확한 규칙을 제공하여 시스템의 유연한 진화를 지원합니다.

한마디로 개쩐다는 것

2. 핵심 워크플로우: `.proto` 파일과 코드 생성

Protobuf의 모든 것은 .proto 파일의 작성에서 시작됩니다. 다음은 간단한 주소록을 정의하는 예시입니다.

// addressbook.proto
syntax = "proto3";

package tutorial;

message Person {
  string name = 1;
  int32 id = 2;
  string email = 3;

  enum PhoneType {
    MOBILE = 0;
    HOME = 1;
    WORK = 2;
  }

  message PhoneNumber {
    string number = 1;
    PhoneType type = 2;
  }

  repeated PhoneNumber phones = 4;
}

message AddressBook {
  repeated Person people = 1;
}

Protobuf 객체 스키마

객체 (Message)	필드 (Field)	타입 (Type)	설명
Person	`name`	`string`	사람의 이름
	`id`	`int32`	고유 식별자
	`email`	`string`	이메일 주소
	`phones`	`repeated`	전화번호 목록 (PhoneNumber)

PhoneNumber	`number`	`string`	실제 전화번호
	`type`	`enum`	전화번호 타입
	(Enum)	`MOBILE`	휴대폰
		`HOME`	집 전화
		`WORK`	직장 전화

AddressBook	`people`	`repeated`	주소록에 포함된 사람 목록

이후 .proto 파일을 protoc 컴파일러로 처리하면 됩니다.

자세한 컴파일 절차 (토글 버튼)

조선대학교 에브리타임 강의실 버그 픽스

Wed, 05 Mar 2025 09:13:33 GMT

시작하기 앞서..

안녕하세요? 시간표 업데이트하는 사람입니다. 지난 에브리타임 시간표 3차 업데이트 이후(약 3/2)에 강의실이 4자리가 아닌 뒤에 끝 3자리만 표시되는 버그를 발견,이에 지속적인 에브리타임 측과 문의과 피드백을 받으면서 해결할려고 하는 중입니다. 학기초, 그것도 신입생/복학생이 들어어와서 해당 3자리만 표시되는 문제는 신입생/복학생 모두에게 혼선을 주고 있습니다. 이에 보다 더 나은 학교생활을 제공하기 위해서 저나 에브리타임이나 열심히 버그픽스중에 있습니다.

현재 에브리타임 측과 문의해본 바, 회사 사정으로 자세한 원인은 알 수 없으나 html파일과 Javascript파일들을 분석해본 바 저의 소견으로는시간표 데이터들을 정상적으로 데이터베이스(db)로 저장되었으나, 해당 저장소를 다시 사용자에게 가져오는 API 혹은웹/앱 구동하는 자바스크립트가 잘못 된거 같습니다.

따라서 제가 버그없이 잘 구동되는 js파일을 따로 작성 에브리타임 측에 보냈습니다

일단 급한데로 인터넷 웹 브라우저(웨일, 마소엣지, 크롬, 브래이브, 파폭 등등) 에서라도 잘 작동되도록 하기 위해서 불러오는 JS파일을 뜯어고치는 방법을 저의 velog에 자세히 적어놓았습니다.

이동통신단말기(aka 스마트폰)로 구동되는 앱은 현재로서는 앱자체를 뜯어고쳐야 하는데 이렇게 되버리면 제가 문제가 나타는 모든 핸드폰에 깔려있는 앱을 수정해야해서 현실적으로 불가능합니다. 이점 양해부탁드립니다.

현재로서는 빠른 시일 내로 에브리타임 자체에서 문제가 해결되길 기다리는 수밖에 없습니다. 감사합니다.

본격적인 시작(사진 글자가 잘 안보이면 확대해서 봐주세요)

STEP1. Tampermonkey 확장 프로그램 다운로드

다음 사이트에 들어가서 Tampermonkey 확장프로그램을 다운로드 받는다. https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=ko 해당 확장 프로그램은 웹에서 실행되는 자바스크립트 자체를 뜯어고치는 확장 프로그램입니다. 주로 광고차단, 웹해킹 등에서 사용되지만 오늘은 일단 급한데로 강의실4자리가 온전히 표기되도록 하는 스크립트만을 적었습니다.

SPET2. 스크립트 편집기 들어가기

Tampermonkey 다운로드 후 Tampermonkey 아이콘 클릭 -> 대시보드 를 클릭해서 다음과 같이 타고 들어가준다.

이후 +버튼을 눌러준다.

STEP3. 스크립트 복붙

정상적으로 타고 들어갔다면 다음과 같은 창이 뜹니다.

이후 해당 검은박스에 있는 모든 내용을 삭제 후, 아래 JS를 복붙해준다.

// ==UserScript==
// @name         에브리타임 강의실 정보 자동 수정
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  서버에서 받아온 XML의 강의실 정보를 올바르게 수정하여 적용
// @author       You
// @match        https://everytime.kr/timetable*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 📌 1️⃣ XMLHttpRequest 가로채기 (XML 응답 수정)
    function interceptXHR() {
        const open = XMLHttpRequest.prototype.open;
        XMLHttpRequest.prototype.open = function(method, url) {
            this.addEventListener("readystatechange", function() {
                if (this.readyState === 4 && this.responseText) {
                    try {
                        let parser = new DOMParser();
                        let xmlDoc = parser.parseFromString(this.responseText, "text/xml");

                        console.log("📌 서버 응답 감지 (XML)", xmlDoc);

                        // 모든 subject(과목) 태그를 가져옴
                        let subjects = xmlDoc.getElementsByTagName("subject");

                        for (let subject of subjects) {
                            let timeNode = subject.getElementsByTagName("time")[0]; //  태그
                            let dataNodes = subject.getElementsByTagName("data");  //  태그들

                            if (timeNode && dataNodes.length > 0) {
                                let timeValue = timeNode.getAttribute("value"); // 강의 시간 정보
                                let placeList = extractPlaces(timeValue);

                                console.log("📌 추출된 강의실 목록:", placeList);

                                //  태그 개수와 강의실 목록 개수가 다를 경우, 부족한 부분은 첫 번째 강의실로 채움
                                for (let i = 0; i < dataNodes.length; i++) {
                                    let placeAttribute = dataNodes[i].getAttribute("place");

                                    if (placeAttribute) {
                                        let newPlace = placeList[i] || placeList[0]; // 인덱스 초과 시 첫 번째 강의실 사용
                                        console.log(`📌 강의실 수정: ${placeAttribute} → ${newPlace}`);
                                        dataNodes[i].setAttribute("place", newPlace); // 강의실 정보 업데이트
                                    }
                                }
                            }
                        }

                        // 수정된 XML을 다시 문자열로 변환
                        let serializer = new XMLSerializer();
                        let modifiedXML = serializer.serializeToString(xmlDoc);

                        // 서버 응답을 수정하여 반환
                        Object.defineProperty(this, "responseText", { value: modifiedXML });

                    } catch (error) {
                        console.error("❌ XML 처리 중 오류 발생:", error);
                    }
                }
            });
            return open.apply(this, arguments);
        };
    }

    // 📌 2️⃣ Fetch API 가로채기 (XML 응답 수정)
    function interceptFetch() {
        const originalFetch = window.fetch;
        window.fetch = function(...args) {
            return originalFetch(...args).then(response => {
                return response.clone().text().then(text => {
                    let parser = new DOMParser();
                    let xmlDoc = parser.parseFromString(text, "text/xml");

                    console.log("📌 Fetch 요청 감지 (XML)", xmlDoc);

                    let subjects = xmlDoc.getElementsByTagName("subject");

                    for (let subject of subjects) {
                        let timeNode = subject.getElementsByTagName("time")[0];
                        let dataNodes = subject.getElementsByTagName("data");

                        if (timeNode && dataNodes.length > 0) {
                            let timeValue = timeNode.getAttribute("value");
                            let placeList = extractPlaces(timeValue);

                            console.log("📌 추출된 강의실 목록:", placeList);

                            for (let i = 0; i < dataNodes.length; i++) {
                                let placeAttribute = dataNodes[i].getAttribute("place");
                                if (placeAttribute) {
                                    let newPlace = placeList[i] || placeList[0];
                                    console.log(`📌 강의실 수정: ${placeAttribute} → ${newPlace}`);
                                    dataNodes[i].setAttribute("place", newPlace);
                                }
                            }
                        }
                    }

                    let serializer = new XMLSerializer();
                    let modifiedXML = serializer.serializeToString(xmlDoc);

                    return new Response(modifiedXML, {
                        status: response.status,
                        statusText: response.statusText,
                        headers: response.headers
                    });
                });
            });
        };
    }

    // 📌 3️⃣ 강의실 정보 추출 함수
    function extractPlaces(timeValue) {
        let matches = timeValue.match(/\(([^)]+)\)/g); // 괄호 안의 정보 추출
        if (!matches) return [];

        let placeList = [];
        matches.forEach(match => {
            let places = match.replace(/[()]/g, "").split(","); // 괄호 제거 후 강의실 분리
            placeList.push(...places); // 여러 강의실을 리스트에 추가
        });

        return placeList;
    }

    // 📌 4️⃣ MutationObserver로 DOM 업데이트 감지
    function observeDOMChanges() {
        const observer = new MutationObserver(() => {
            console.log("📌 페이지 업데이트 감지 (강의실 수정)");
        });
        observer.observe(document.body, { childList: true, subtree: true });
    }

    // 📌 5️⃣ Tampermonkey 실행 시 초기화
    window.addEventListener('load', () => {
        interceptXHR();    // XMLHttpRequest 가로채기
        interceptFetch();  // Fetch API 가로채기
        observeDOMChanges(); // DOM 변경 감지 시작
    });

})();

정상적용하면 아래 화면과 같다.

이후 [Ctrl + S] 키를 눌러서 저장해준다.

STEP4. 확인해보기

적용전 (예시 시간표 입니다)

적용후 일부 3자리로 표현되던 강의실이 정상적으로 4자리 모두 출력되는 모습

Q: 어라 계속 3자리인데? A1: f5(새로고침)한번 해주세요. A2: 아래사진참고

사진과 같이 초록색바가 표시되어야합니다!

아래 사진과 같이 회색바면 클릭해서 초록색바로 바꿔주세요.

주요 아이디어 설명

(이후 이어질 내용은 준/주전공자들 기준으로 설명드립니다)

일단은 왜 시간표자료가 어긋날까?

🚨 1. 서버에서 XML 데이터가 변형되는 과정에서 발생할 가능성

(1) 서버에서 강의실 정보를 잘못 저장하는 경우 서버에서 강의실 정보를 place="IT융합대학-312"로 저장한 후 클라이언트(브라우저)에서 이를 요청하면, 클라이언트는 그대로 표시. 하지만 place="IT융합대학-3128"로 저장되어야 하는데, 서버 응답에서 마지막 숫자가 잘려서 3자리(312)만 전송될 수 있음.
(2) DB 저장 과정에서 강의실 번호가 잘리는 경우 강의실 번호가 3자리와 4자리가 혼재된 데이터 구조를 가지고 있을 경우, 특정 프로세스에서 4자리가 3자리로 변환되는 버그 발생 가능. 예를 들어, VARCHAR(3)처럼 컬럼 길이가 3자리로 제한되어 있다면, "3128" → "312"처럼 잘릴 수 있음.

🚨 2. 클라이언트(브라우저)에서 강의실 번호를 처리하는 과정에서 발생할 가능성

(3) 브라우저에서 place 값을 렌더링할 때 잘리는 경우 XML 데이터를 받아와서 JavaScript로 파싱하는 과정에서 마지막 숫자가 잘리는 문제 발생 가능. 예를 들어, XMLSerializer()를 사용하거나 innerText를 읽어올 때 숫자가 truncate(잘림)될 가능성 있음.
(4) JavaScript 코드에서 place 값을 parseInt() 같은 방식으로 처리할 경우 강의실 번호가 숫자로만 이루어져 있다면, JavaScript가 이를 자동으로 숫자로 변환할 수도 있음. "5109"를 parseInt()로 처리하면 "510"이 될 수 있음.
(5) HTML 태그 속성에서 place 값이 CSS에 의해 잘리는 경우 overflow: hidden 같은 CSS 속성 때문에 화면에 3자리만 보일 가능성도 있음. 브라우저 개발자 도구에서 실제 place 값이 3자리인지 확인해야 함.

🚨 3. 서버에서 XML을 생성하는 과정에서 생길 가능성

(6) XML 응답을 생성할 때 place 값을 잘못 조합하는 경우 태그와 태그에서 사용하는 강의실 정보가 다른 테이블에서 조합될 경우,

태그는 올바른 4자리 강의실 번호를 가져오고, 태그는 잘못된 3자리 강의실 번호를 가져오는 매칭 오류 발생 가능. 예를 들면, 다음과 같은 잘못된 SQL 조인이 실행될 수 있음:

SELECT time_table.room, data_table.place 
FROM time_table
JOIN data_table ON time_table.class_id = data_table.class_id;

이후 현재 로컬에서 수정가능한것은 1번밖에 없다고 판단

왜냐

2번같은 경우는 브라우저 버그일 확률이 매우 높은데, 브라우저가 버그날 확률은.. 난 들어본 적이 없다
3번같은 경우는 로컬에서 해결할 수 있는 방법이 없다.

html과 Js 삽질을 통해서 서버에서 XML을 불러오는 것은 확인

시간표나와있는 게시판으로 이동 - 개발자 도구 - network - 최하단 table xml 파일을 보면 다음과 같이 뜬다. (당연히 아래는 예시 시간표다)

찾았죠? XML이 문제네요.

다음 코드를 봐보자

time value값이 우리가 찾던 정상적인 시간과 건물이 있는 것을 확인했고 place값이 3자리로 잘리는 버그 확인.

이후 XMLHttpRequest()를 가로채서, 수정을 가하는 코드를 짜면 위에 코드와 같이 짜진다.

매우 쉽게 설명하는 백준[1012] - 파이썬

Mon, 10 Feb 2025 06:16:09 GMT

본격적으로 시작 전에..

이 문제는 DFS 또는 BFS의 매우 정석적인 문제입니다. 따라서 본 문제의 문제풀이 법을 그냥 외우다 시피 공부하는 것을 추천합니다. 기업 코테나, 기사급 자격증에 약방의 감초 처럼 등장하는 매우 스탠다드한 문제라고 할 수 있습니다. 반드시 반복숙달 하시길..

✔️문제

차세대 영농인 한나는 강원도 고랭지에서 유기농 배추를 재배하기로 하였다. 농약을 쓰지 않고 배추를 재배하려면 배추를 해충으로부터 보호하는 것이 중요하기 때문에, 한나는 해충 방지에 효과적인 배추흰지렁이를 구입하기로 결심한다. 이 지렁이는 배추근처에 서식하며 해충을 잡아 먹음으로써 배추를 보호한다. 특히, 어떤 배추에 배추흰지렁이가 한 마리라도 살고 있으면 이 지렁이는 인접한 다른 배추로 이동할 수 있어, 그 배추들 역시 해충으로부터 보호받을 수 있다. 한 배추의 상하좌우 네 방향에 다른 배추가 위치한 경우에 서로 인접해있는 것이다. 한나가 배추를 재배하는 땅은 고르지 못해서 배추를 군데군데 심어 놓았다. 배추들이 모여있는 곳에는 배추흰지렁이가 한 마리만 있으면 되므로 서로 인접해있는 배추들이 몇 군데에 퍼져있는지 조사하면 총 몇 마리의 지렁이가 필요한지 알 수 있다. 예를 들어 배추밭이 아래와 같이 구성되어 있으면 최소 5마리의 배추흰지렁이가 필요하다. 0은 배추가 심어져 있지 않은 땅이고, 1은 배추가 심어져 있는 땅을 나타낸다.

1	1	0	0	0	0	0	0
0	1	0	0	0	0	0	0
0	0	0	0	1	0	0	0
0	0	0	0	1	0	0	0
0	0	1	1	0	1	1	1
0	0	0	0	1	1	1	1

⌨️입력

입력의 첫 줄에는 테스트 케이스의 개수 T가 주어진다. 그 다음 줄부터 각각의 테스트 케이스에 대해 첫째 줄에는 배추를 심은 배추밭의 가로길이 M(1 ≤ M ≤ 50)과 세로길이 N(1 ≤ N ≤ 50), 그리고 배추가 심어져 있는 위치의 개수 K(1 ≤ K ≤ 2500)이 주어진다. 그 다음 K줄에는 배추의 위치 X(0 ≤ X ≤ M-1), Y(0 ≤ Y ≤ N-1)가 주어진다. 두 배추의 위치가 같은 경우는 없다.

🖥️ 출력

각 테스트 케이스에 대해 필요한 최소의 배추흰지렁이 마리 수를 출력한다.

분류

DFS, BFS, 그래프이론, 그래프 탐색

문제풀이 💡

# 재귀 호출의 최대 깊이를 설정 (기본적으로 파이썬의 재귀 깊이는 1000으로 제한됨)
# DFS의 깊이가 깊어질 수 있으므로 설정을 늘려줌
import sys
sys.setrecursionlimit(10**6)

# 입력을 빠르게 받기 위한 sys.stdin.readline 사용
input = sys.stdin.readline

# 방향 벡터 (상, 하, 좌, 우)
# 이를 통해 상하좌우로 이동 가능하도록 설정
dirR = [1, -1, 0, 0]  # 행(y) 방향 이동
dirC = [0, 0, 1, -1]  # 열(x) 방향 이동

# 깊이 우선 탐색(DFS) 함수
# 현재 위치 (y, x)를 기준으로 연결된 모든 영역을 탐색
def dfs(y, x):
    # 현재 위치를 방문했음을 표시
    visited[y][x] = True

    # 상하좌우 4방향을 탐색
    for dirIdx in range(4):
        newY = y + dirR[dirIdx]  # 새 행 좌표
        newX = x + dirC[dirIdx]  # 새 열 좌표

        # 새로운 좌표가 그래프 범위를 벗어나지 않는지 확인
        if 0 <= newY < N and 0 <= newX < M:
            # 배추가 심어져 있고 아직 방문하지 않은 곳이라면 DFS 재귀 호출
            if graph[newY][newX] and not visited[newY][newX]:
                dfs(newY, newX)

# 테스트 케이스 입력 (T: 테스트 케이스 개수)
T = int(input())

# 여러 개의 테스트 케이스 처리
for _ in range(T):
    # M: 가로(열) 크기, N: 세로(행) 크기, K: 배추가 심어진 위치 개수
    M, N, K = map(int, input().split())

    # 2차원 그래프를 초기화 (배추가 심어지지 않은 곳은 False로 설정)
    graph = [[False] * M for _ in range(N)]

    # 방문 여부를 저장할 배열 (모든 위치를 False로 초기화)
    visited = [[False] * M for _ in range(N)]

    # 배추가 심어진 위치 입력받아 그래프에 표시
    for _ in range(K):
        x, y = map(int, input().split())  # x가 열, y가 행 (좌표 순서 주의)
        graph[y][x] = True  # 배추가 심어진 위치를 True로 표시

    # DFS를 통해 연결된 배추 그룹의 개수를 세기 위한 변수
    answer = 0

    # 그래프를 탐색하면서 배추가 심어진 곳을 찾음
    for i in range(N):  # 행(세로) 탐색
        for j in range(M):  # 열(가로) 탐색
            # 배추가 있고 아직 방문하지 않은 곳이라면 새로운 DFS 탐색 시작
            if graph[i][j] and not visited[i][j]:
                dfs(i, j)  # DFS 실행
                answer += 1  # 한 번의 DFS가 끝나면 새로운 그룹이므로 개수 증가

    # 최종적으로 해당 테스트 케이스의 결과 출력
    print(answer)

🔍 코드 설명

1. 입력 최적화

sys.stdin.readline()을 사용하여 입력 속도를 빠르게 처리.
sys.setrecursionlimit(10**6)을 설정하여 DFS가 깊어질 때 스택 오버플로 방지.

2. 방향 벡터 사용

dirR과 dirC를 활용하여 상(↑), 하(↓), 좌(←), 우(→)로 이동 가능하도록 설정.
newY = y + dirR[dirIdx], newX = x + dirC[dirIdx] 형태로 이동 좌표 계산.

3. DFS를 활용한 그래프 탐색

방문한 배추 위치를 visited[y][x] = True로 처리.
상하좌우를 탐색하며 배추가 있고 방문하지 않은 경우 DFS를 재귀적으로 호출.

4. 전체 그래프 탐색

2중 for문을 사용하여 모든 위치를 탐색.
방문하지 않은 배추를 찾으면 DFS 탐색을 시작하고, 연결된 모든 배추를 방문한 후 answer를 증가.

5. 결과 출력

DFS를 수행할 때마다 새로운 연결된 배추 그룹이 하나 증가하므로 answer 값을 출력.

우리 할머니도 이해한다 - [백준]17626 파이썬

Sat, 08 Feb 2025 06:56:22 GMT

✔️문제

라그랑주는 1770년에 모든 자연수는 넷 혹은 그 이하의 제곱수의 합으로 표현할 수 있다고 증명하였다. 어떤 자연수는 복수의 방법으로 표현된다. 예를 들면, 26은 52과 12의 합이다; 또한 42 + 32 + 12으로 표현할 수도 있다. 역사적으로 암산의 명수들에게 공통적으로 주어지는 문제가 바로 자연수를 넷 혹은 그 이하의 제곱수 합으로 나타내라는 것이었다. 1900년대 초반에 한 암산가가 15663 = 1252 + 62 + 12 + 12라는 해를 구하는데 8초가 걸렸다는 보고가 있다. 좀 더 어려운 문제에 대해서는 56초가 걸렸다: 11339 = 1052 + 152 + 82 + 52. 자연수 n이 주어질 때, n을 최소 개수의 제곱수 합으로 표현하는 컴퓨터 프로그램을 작성하시오.

⌨️입력

입력은 표준입력을 사용한다. 입력은 자연수 n을 포함하는 한 줄로 구성된다. 여기서, 1 ≤ n ≤ 50,000이다.

🖥️ 출력

출력은 표준출력을 사용한다. 합이 n과 같게 되는 제곱수들의 최소 개수를 한 줄에 출력한다.

분류

다이나믹프로그래밍(DP), 일반수학(math)

✔️풀이

자세한 풀이는 사진에서 설명합니다. 진짜 저만큼 자세히 설명해주는 블로그 몇개 없습니다.

[빠른 복붙을 위한 전체 코드] pypy로 돌려야 합니다.

n = int(input())
dp = [0, 1]
for i in range(2, n+1):
    min_ = 4
    j = 1
    while (j**2) <= i:
        min_ = min(min_, dp[i-j**2])
        j += 1
    dp.append(min_ + 1)
print(dp[n])

결과

시간 메모리

120ms 112088 KB

시간	메모리
120ms	112088 KB

👁️‍🗨️ 코멘트

i) 제법 어렵다. 인정하자.

???: 아 별로 안 어렵던데~~~ ㅋㅋ? ???: 이걸 못 푸노 ㅋㅋ~~?

이런거에 휘둘리지 말자. 적어도 내가 느끼기에는 충분히 어려운 문제다.

ii) 이런 거는.. 발상문제다. 못 풀어도 괜찮다.

DP에 익숙하지 않으면, 당연히 발상이 잘 안떠오르고, 규칙도 잘 모르는게 당연하다. 너무 위축되고, 자책하지 말고 차근차근 공부해 나가다 보면 그냥 관성적으로 발상이 떠오른다. 딱 거기까지만 힘내보자.

[백준] 9461번 파도반 수열 파이썬

Wed, 29 Jan 2025 14:58:54 GMT

✔️문제

오른쪽 그림과 같이 삼각형이 나선 모양으로 놓여져 있다. 첫 삼각형은 정삼각형으로 변의 길이는 1이다. 그 다음에는 다음과 같은 과정으로 정삼각형을 계속 추가한다. 나선에서 가장 긴 변의 길이를 k라 했을 때, 그 변에 길이가 k인 정삼각형을 추가한다. 파도반 수열 P(N)은 나선에 있는 정삼각형의 변의 길이이다. P(1)부터 P(10)까지 첫 10개 숫자는 1, 1, 1, 2, 2, 3, 4, 5, 7, 9이다. N이 주어졌을 때, P(N)을 구하는 프로그램을 작성하시오.

⌨️입력

첫째 줄에 테스트 케이스의 개수 T가 주어진다. 각 테스트 케이스는 한 줄로 이루어져 있고, N이 주어진다. (1 ≤ N ≤ 100)

🖥️ 출력

각 테스트 케이스마다 P(N)을 출력한다.

분류

다이나믹프로그래밍(DP), 일반수학(math)

✔️풀이

자세한 풀이는 사진을 통해서 설명하겠다.

🧑‍💻풀이 코드

import sys
input = sys.stdin.readline
p = [0] * 101
p[0], p[1], p[2] = 1,1,1
for k in range(3,101,1):
    p[k] = p[k-2] + p[k-3]
for _ in range(int(input())):
     print(p[int(input())-1])

결과

시간 메모리

32ms 32412 KB

시간	메모리
32ms	32412 KB

👁️‍🗨️ 코멘트

i) 일단 문제 이름부터 보자

문제이름부터가 『파도반 수열』이다. 고등학교를 나왔다면 적어도 '수열'이라는 것이 수학이라는 것을 알 것이다. 바로 뒤도 안 돌아보고 brrrrrrr 떨면서 아하! 먜쓰몌뤾!(mathmetics)
ii) 그림을 보자
- 백준같은 문제가 그림을 왜 줄까?
  
  진지하게 고민해봐야 하는 것이다

적어도 문제에 도움이 될려면 된거지, 문제 푸는데 하등 도움이 안될거라면 왜 줬을까? 능지가 있다면 바로 그림을 보고

아하 그림이 뭔가 규칙적이네? 수학이네? DP로구나! 점화식 땅땅땅!!

이 판단이 빨리 서야한다.

iii) 쓰자!
풀이 사진을 보면 p(1)부터 p(10)까지 직접 쓴 게 보일 것이다.

왜 썼을까?

규칙 볼라고 ㅋ

쓰자! 제발 쓰자! 우리들의 머리는 생각보다 멍청하다. 쓰자.

iv) 라이브러리

파이썬은 너무 느리다. 다들 아는 이야기이지만 너무 느리다. 다음과 같은 라이브러리를 불러오면 제법 빨라진다. 알아두자.

import sys
input = sys.stdin.readline

조선대학교 에브리타임 시간표 업데이트

Sat, 02 Nov 2024 20:04:00 GMT

일단 늦어서 죄송합니다.

왜 늦음?

바쁘더라고요..음.. 2학기 시작하기 전에 여행도 다니고하고, 마음좀 추스리고 개발에 전념하고 공부도 좀 하고 알바도 좀 하고 아무튼간에 빨리 만들고 싶었으나 2학기 시작하기 전에는 공부도 덜했고.. 똑똑긔로 변할려고 노력많이 했고요 늦은 감이 있겠으나 하해와 같은 마음으로 이해해 주싶사.. 앞으로는 빨리빨리 업데이트 해보도록 하겠습니다!

그리고 함께 개발을 도와준 DICE한테 감사한다.

번외) 에브리타임 측에서 늦어서 시간표 업데이트 못해준다 하네요~ ㅅㄱ링

~~나만 시간 날린거니깐..괜찮아.. 암파인.. 링링링링링~~

조선대에 다니다 보면..

한가지 의문점이 들것이다.

왜 시간표 업데이트가 느리지..?

시간표 마법사가 안되는데..?

그렇다. 우리는 지금까지 GOAT '종이학'님이 업데이트 해주셨으나, 지금은 잠정 은퇴아닌 일선에서 물러나셨다. ~~그동안 고마웠습니다.~~

이렇게 위에 사진과 같이 에브리타임 시간표가 업데이트가 되지 않았다면 직접추가를 이용해 시간표를 직접 넣어야한다. ~~ㅈㄹ불편~~

그래서 일단 교무처, 전산실에 문의..

나: 엑셀....그냥 통짜로 가공 안된거여도 괜찮아요.. 제공만 해주세요.. 조선대: 응 보안상 문제로 못해줘~ ㅅㄱ.

도대체 시간표가 무슨 문제를 일으킨다고 보안상 제공을 못해주는가..?? 엄... 아무튼 이렇게 몇번의 문의를 넣었다. 그러나 결국 돌아오는 대답은 항상 똑같았다.~~개새끼들~~

아무튼

결국 이렇게 된거 내가 직접 시간표를 만들자!

개발속 난관

그때 멈췄어야 했다..

조선대학교 학생이라면** 종합정보시스템(aka. 종정시)라고 알 것이다. MsEdge(전 인터넷익스플로러)로 접속하는 학생관리시스템인데... 사실 이 사이트를 보고 **크롤링하기도 전에 여러가지 생각이 들었다...

이거... 개 오래된 시스템 쓸거 같은데..

~~제발 내 감이 틀리길 빌었다~~

오오...오오........오ㅗㅗㅗㅗㅗㅗㅗ오오오오오오 무려 나는 2003년 혹은 그보다 더 오래되었을수도 있는 사이트를 크롤링하려던 거시였던 거시였던 거였던 거시였따. ~~나보다 더 늙은 코드다~~아니다 다를까 JavaScript에서 eval문을 쓰고 있었다... ~~컴공 혹은 코딩을 조금이라도 할줄 안다면 이게 얼마나 파괴적인 문법인지 알 것이다.~~ 사용된 html버전이나 JS버전이 확인하기도 겁날 정도로 오래된 시스템이다.
심지여 어떤 기능들은 아예 개발자도구조차 안 열어진다...~~세상에상에~~ 이러면 내가 알기론 JavaScript나 HTML이 만들어지기도 전, 고대 언어로 개발되었을 확률이 높다. 이름도 없는 그냥 본인들만 아는 그런언어로 코딩했을수도 있었던 것이다. ~~그런다고 설마 어샘블리언어로 시스템을 짰겠어..?~~한마디로 지들 ㅈ대로 개발했을 확률 99% 그리고 유지보수 안한 기간도 매우 길어보임.

종정시는 깔끔하게 포기

도저히 크롤링 불가능하다고 판정. 다른 방법을 몰색하던중...우리 학교(조선대)는 종정시와 같이 제2 학생관리 웹으로 사용하는 시스템이 있었으니..!

바로 LMS시스템이다!

lms상에서 강의계획서를 보면...

오오...!! 우리가 찾던 모든 시간표 정보가 나와있던 것이다..!! ~~EGC는 역시 켈리김. 켈리김 교수님 사랑해요~~

개발 시작

주요 개발 언어: python, bs4, by, selenium, pypy3

언어는 일단 파이썬으로 정했다. C언어나 Java도 고민했는데 웹 크롤링은 처음이라서 나한테 제일 익숙한 파이썬으로 정했다.
그리고 여느 프로그램이 그렇듯 개발하고 대가리 깨지고를 무한전 반복. 하루를 꼴딱 세워서 개발하는 일이 있을까 싶었는데 이번에를 통해서 경험하게 되었다. 피곤했지만 나름 괜찮은 것 같았다.

데이터 수집 및 가공

일단 데이터 상으로 제일 다루기 만만한 json파일로 정보를 저장할 것이다. json파일 저장완료..!! 이제 이걸 exel로 예쁘게 변환하면 된다.

아따 고놈 참 이쁘네잉

마치면서

강의계획서는 개강하고 나서도 2주 정도는 계속 조금씩 데이터가 바뀐다. 그래서 변경된 데이터를, 다시 엑셀 파일을 보내줘야 한다.

교수도 장소도 시간도 바뀌고 이래버리면 정보에 문제가 생긴다. 심지어 과목명, 교수명까지 틀려버리면 에브리타임 내에 강의평가 데이터도 틀어져버린다. 데이터가 분리된다.

따라서 학생 여러분들의 끝없는 관심과 참여가 필요합니다..!! 앞으로도 지속적으로 업데이트를 할 것이며, 데이터가 잘못된게 있으면 문의 주십시요!!

[형식] LMS상의 교과목명: 교과코드: 분반: 기존 정보: 수정 요청 정보:

제1관리자: 아직 유지보수기간은 아니기 때문에 비공개 제2관리자: 아직 본인한테 공개의사 안 물어봄

현황

개발: 20241025~~20241103 2024년2학기시간표제출: 20241103 2024년2학기시간표승인: 기간에 지남에 따라 승인거부 유지 및 보수: 20241103~~(현재진행) 업데이트여부: 진행X

1	1	0	0	0	0	0	0
0	1	0	0	0	0	0	0
0	0	0	0	1	0	0	0
0	0	0	0	1	0	0	0
0	0	1	1	0	1	1	1
0	0	0	0	1	1	1	1

1	1	0	0	0	0	0	0
0	1	0	0	0	0	0	0
0	0	0	0	1	0	0	0
0	0	0	0	1	0	0	0
0	0	1	1	0	1	1	1
0	0	0	0	1	1	1	1

hwan_lee.log

Python Websockets 오류해결 - BaseEventLoop.create_connection() got an unexpected keyword argument 'extra_headers'

평화롭게 파이썬 웹소켓 튜닝하던중에 문제가 발생

직감적으로 절대 코드 문제는 아니고 바로 구글링

나처럼 비슷한 증상이 나타나는 사람들이 많다는 것을 확인

결론

어셈블리로 웹 만들기

WebAssembly, 왜 필요할까요? 🤔

WebAssembly, 어떤 점이 매력적일까요? ✨

1. 엄청난 속도! 🚀

2. 다양한 언어 지원! 🌐

3. 보안성! 🔒

4. 경량화! 📦

WebAssembly, 어디에 활용될까요? 💡

WebAssembly 간단 실습: C에서 Wasm으로! 🧑‍💻

1단계: Emscripten 설치

2단계: C 코드 작성 (add.c)

3단계: C 코드를 WebAssembly로 컴파일

4단계: 웹 페이지에서 WebAssembly 사용 (index.html)

WebAssembly Add Example

5단계: 웹 서버 실행 및 확인

마치며... 🌟

구글이 쓰는 10배빠른 데이터 전송법

깃허브의 Trending을 확인하며

이게 사람이 할 짓인가 싶을 정도로 레파지스토리 하나하나가 살인적인 용량을 자랑한다.

오늘은 그중에서 맨 상단 protobuf에 대해서 알아보자

이런 대형 프로젝트 레파지스토리의 정체를 알기위한 꿀팁

바로 README파일 읽어보자!

이런 게 왜 필요한데?

프로토콜 버퍼(Protocol Buffers) 완벽 가이드: 기본 개념부터 고급 아키텍처까지

1. 기본 개념: 프로토콜 버퍼란 무엇인가?

2. 핵심 워크플로우: .proto 파일과 코드 생성

Protobuf 객체 스키마

조선대학교 에브리타임 강의실 버그 픽스

시작하기 앞서..

본격적인 시작(사진 글자가 잘 안보이면 확대해서 봐주세요)

STEP1. Tampermonkey 확장 프로그램 다운로드

SPET2. 스크립트 편집기 들어가기

STEP3. 스크립트 복붙

STEP4. 확인해보기

주요 아이디어 설명

(이후 이어질 내용은 준/주전공자들 기준으로 설명드립니다)

일단은 왜 시간표자료가 어긋날까?

🚨 1. 서버에서 XML 데이터가 변형되는 과정에서 발생할 가능성

🚨 2. 클라이언트(브라우저)에서 강의실 번호를 처리하는 과정에서 발생할 가능성

🚨 3. 서버에서 XML을 생성하는 과정에서 생길 가능성

이후 현재 로컬에서 수정가능한것은 1번밖에 없다고 판단

왜냐

html과 Js 삽질을 통해서 서버에서 XML을 불러오는 것은 확인

다음 코드를 봐보자

이후 XMLHttpRequest()를 가로채서, 수정을 가하는 코드를 짜면 위에 코드와 같이 짜진다.

매우 쉽게 설명하는 백준[1012] - 파이썬

본격적으로 시작 전에..

✔️문제

⌨️입력

🖥️ 출력

분류

문제풀이 💡

🔍 코드 설명

1. 입력 최적화

2. 방향 벡터 사용

3. DFS를 활용한 그래프 탐색

4. 전체 그래프 탐색

5. 결과 출력

우리 할머니도 이해한다 - [백준]17626 파이썬

✔️문제

⌨️입력

🖥️ 출력

분류

✔️풀이

결과

👁️‍🗨️ 코멘트

i) 제법 어렵다. 인정하자.

ii) 이런 거는.. 발상문제다. 못 풀어도 괜찮다.

[백준] 9461번 파도반 수열 파이썬

✔️문제

⌨️입력

🖥️ 출력

분류

✔️풀이

2. 핵심 워크플로우: `.proto` 파일과 코드 생성

1	1	0	0	0	0	0	0
0	1	0	0	0	0	0	0
0	0	0	0	1	0	0	0
0	0	0	0	1	0	0	0
0	0	1	1	0	1	1	1
0	0	0	0	1	1	1	1