1. 오늘 한 것 (What I Did)React 프로젝트 생성: [Vite] npm create vite@latest my-react-app -- --template reactHTML 페이지("꾸준히 씁시다 클럽" OT 페이지)를 React JSX 컴포넌트로 변환컴포넌트별 데이터 구조화 및 분리 작업 조건부 렌더링으로 동적 UI 그리기 → type에 따라 다른 화면 보여주는거 Header, TimeTable, ClubIntroduction, MiniWorkshop, Declaration 컴포넌트 완성2. 새로 이해한 것 (What I Learned)2-1. React의 동작 원리2-1-1. public/index.html - 웹 페이지의 기본 골격 제공 브라우저가 이해할 수 있는 표준 HTML..

1. 오늘 한 것 (What I Did)컴포넌트 만들기컴포넌트는 반드시 하나의 요소만 return해야 함로 감싸거나 빈 태그 사용하기 다른 파일에서 import/export 해봤음HTML을 JSX로 바꿔봤음class → className (JS예약어 충돌 방지)모든 태그 반드시 닫기 → → App.js 실행까지 성공React 앱을 실제로 브라우저에서 돌려봤음npm install / npm run dev 명령어 사용 (꼭 실행 위치 폴더를 잘 확인하자!) 내가 만든 컴포넌트가 화면에 나타나는 걸 봤음2. 새로 이해한 것 (What I Learned)React 앱 실행 흐름 컴포넌트 파일 만들기App.js에서 import하기npm run dev로 실행하기브라우저에서 결과 확인하기컴포넌트의 의미컴포넌트 ..

1. 오늘 한 것 (What I Did)HTML로 만들어둔 페이지를 JSON 파일(데이터)과 JavaScript 함수로 쪼개서 다시 만들기 → 동적 렌더링자바스크립트 최신 문법들 (템플릿 리터럴, 구조 분해 할당) 써보기http-server으로 로컬 서버 돌려서 파일 불러오는 방법 배우기 → CORS 문제 해결, 올바른 폴더에서 실행하기JSON 파싱 오류부터 JavaScript 문법 오류까지 다양한 디버깅 경험2. 새로 이해한 것 (What I Learned)왜 HTML을 쪼개서 만들까?내용만 바꾸고 싶으면 JSON 파일만 수정하면 됨, 관리하기 편해짐 같은 틀에 다른 데이터만 넣어서 여러 페이지 만들 수 있음, 재사용 가능 HTML 태그 직접 건드릴 일이 없어짐, 실수 줄어듦 자바스크립트 새로운 문법들..

정답은 없다. 하지만 원칙은 있다. 그리고 혼자 할 때와 팀으로 할 때는 완전히 다른 게임이다.Claude 선생님이 알려주신 대원칙 51. 관심사 분리 (Separation of Concerns)핵심 각 파일/폴더는 하나의 명확한 책임을 가져야 한다의미’아, 이 기능 바꾸려면 저 파일들을 수정하면 되겠구나’라고 미리 알 수 있는 것‘어디어디에 같은 코드가 또 있을까?’ 하고 걱정하지 않아도 되는 것예시// ✅ 관심사가 잘 분리된 구조src/├── utils/│ └── dateHelper.js // 날짜 관련 로직만├── api/│ └── eventApi.js // 서버 통신만├── components/│ └── EventCard.vue // 화면 표시만..

나는 왜 쓰레드가 필요한가?상황 1: 순차적 크롤링 (쓰레드 없음)온오프믹스 크롤링 (3초) → 이벤터스 크롤링 (4초) → 데브이벤트 크롤링 (2초)총 소요시간: 9초상황 2: 동시 크롤링 (쓰레드 사용)온오프믹스 │ 이벤터스 │ 데브이벤트 (모두 동시에)총 소요시간: 4초 (가장 오래 걸리는 작업 기준)크롤링 작업에서 가장 큰 병목은 보통 네트워크 대기 시간예를 들어 3개의 사이트를 순차적으로 크롤링하면, 각 요청이 끝날 때까지 기다려야 하므로 시간이 누적된다.그래서 ‘동시에 여러 일을 처리하는 구조’, 즉 쓰레드가 필요하다.쓰레드의 핵심 개념쓰레드(Thread) = 프로그램 실행의 최소 단위프로세스(Process) = 하나의 독립된 프로그램 (예: 크롬 브라우저)하나의 프로세스 안에 여러 쓰레드가 ..

AOP가 무엇인가 - "코드 중복을 없애는 똑똑한 방법"📍 AOP 한 줄 정의"모든 함수에 공통으로 필요한 코드를 한 곳에 모아서 자동으로 적용하는 기법"📍 간단한 Before/AfterBefore: 로깅 코드를 10개 함수에 복사-붙여넣기After: @log 데코레이터 하나로 해결📍 핵심 개념 2가지만- 핵심 관심사: 함수가 진짜 하려는 일- 횡단 관심사: 모든 함수에 공통으로 필요한 일실제 개발할 때 겪는 문제📅 1주차: "간단한 크롤러 만들어주세요"def crawl_data(): return requests.get("...")😊 "쉽네!"📅 2주차: 팀장 "로그 좀 남겨주세요" def crawl_data(): print("시작") result = requests.get(..