첫 번째 시행착오: Heroku 배포 실패문제 상황로컬에서는 완벽하게 작동하던 봇이 Heroku에 배포하자 다음과 같은 오류가 발생했습니다:Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 secondsState changed from starting to crashed문제 분석 과정이 오류 메시지를 분석해보면:Boot timeout: 애플리케이션이 지정된 시간 내에 시작되지 않음failed to bind to $PORT: HTTP 포트에 바인딩하지 못함Web process: Heroku가 이 앱을 웹 애플리케이션으로 인식함근본 원인 이해Heroku는 기본적으로 모든 애플리케이션을 웹 애플리케이션으로 간주합니다. 웹 애플리..

1. 오늘 한 것 (What I Did)1. 스위치문 학습기본 문법과 구조 이해if-else와의 차이점 비교fall-through 현상과 break의 중요성실제 코드 예시를 통한 활용법 학습2. While문 동작 원리 파악i-- 위치에 따른 실행 결과 차이 분석무한루프 방지 방법초기값 → 조건 확인 → 실행 → 변경 순서의 중요성3. 코드 디버깅 실습문법 오류 찾기 (따옴표 불일치, 문자열 미완성)if-else 문법 오류 수정return문의 부적절한 사용 발견4. JavaScript 기본 개념 정리var, let, const의 스코프 차이호이스팅 개념과 함수 선언문 vs 표현식자동 형변환 규칙 (특히 + 연산자)const 배열/객체 수정 가능 원리5. MDN 공식 문서 읽기문법과 자료형 문서 분석Java..

0. 개발 목표 React에서 HTML5 input 속성만으로 이메일/비밀번호 유효성 검증 구현사용자 입력과 동시에 실시간 검증 피드백(에러 메세지) 제공라이브러리 없이 브라우저 내장 기능만 활용1. 오늘 한 것 (What I Did)React에서 로그인 폼 컴포넌트 구현이메일 형식 검증 (type="email", required)복잡한 비밀번호 규칙 검증 (pattern, minLength, required)실시간 입력 검증 기능 구현브라우저의 checkValidity(), reportValidity() API 활용폼 제출 시 전체 검증 로직 구현2. 새로 이해한 것 (What I Learned)2-1. JavaScript 변수 스코프의 함정const handleChange = (e) => { let..

1. 오늘 한 것 (What I Did)Props 전달하는 부분 해부이벤트 핸들러의 'e' 매개변수 이해2. 새로 이해한 것 (What I Learned)Props는 "함수의 인자"와 똑같다!// 일반 JavaScript 함수function greet(name, age) { return `안녕하세요, ${age}살 ${name}님!`;}greet("철수", 25); // 함수 호출 시 인자 전달// React 컴포넌트 (똑같은 원리!)function Welcome(props) { return 안녕하세요, {props.age}살 {props.name}님!;}// 컴포넌트 사용 시 props 전달Props 전달 과정 step by step// 1단계: 부모 컴포넌트에서 데이터 준비function ..

1. 오늘 한 것 (What I Did)사용자 이벤트를 처리하는 방법컴포넌트가 state를 이용하여 정보를 “기억”하는 방법React가 UI를 업데이트하는 두 가지 단계state가 변경된 후 바로 업데이트되지 않는 이유여러 개의 state 업데이트를 대기열에 추가하는 방법state에서 객체를 업데이트하는 방법state에서 배열을 업데이트하는 방법2. 새로 이해한 것 (What I Learned)React가 리렌더링하는 동작 원리를 이해하니 State를 왜 그렇게 쓰는지 이해할 수 있었다.1. 사용자 이벤트를 처리하는 방법이벤트 핸들러는 사용자의 행동(클릭, 타이핑 등)에 반응하는 함수다.함수 참조 vs 함수 호출: onClick={handleClick} (O) vs onClick={handleClick(..

1. 오늘 한 것 (What I Did)React 공식 문서 'UI 표현하기' 파트 읽고 실습하기첫 React 컴포넌트를 작성하는 방법다중 컴포넌트 파일을 만드는 경우와 방법JSX로 JavaScript에 마크업을 추가하는 방법컴포넌트에서 JavaScript 기능을 이용하기 위해 JSX에 중괄호를 사용하는 방법Props를 사용하여 컴포넌트를 구성하는 방법조건부 렌더링을 하는 방법여러 개의 컴포넌트를 한 번에 렌더링하는 방법컴포넌트를 순수하게 유지하여 혼란스러운 버그를 피하는 방법트리로서 UI를 이해하는 것이 유용한 이유2. 새로 이해한 것 (What I Learned)2-1. React의 핵심 아이디어컴포넌트 = 재사용 가능한 UI 블록기존: HTML/CSS/JS 따로따로 관리React: 관련된 것들을 하..