낮에는 일 하고, 밤에는 코드를 씁니다.

첫 번째 시행착오: 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는 기본적으로 모든 애플리케이션을 웹 애플리케이션으로 간주합니다. 웹 애플리..

프로젝트 배경과 문제 정의해결하려던 실제 문제글쓰기 스터디 그룹을 운영하면서 매주 반복되는 수작업이 있었습니다. 매주 월요일마다 디스코드 포럼에 "이번 주 기록 공유" 포스트를 만들고, 참여자들이 자신의 글 링크를 공유할 수 있는 공간을 제공해야 했습니다. 24주 동안 지속되는 프로젝트에서 이 작업을 빼먹지 않고 정확한 주차 정보와 함께 일관된 형식으로 만드는 것이 생각보다 까다로웠습니다.기능 요구사항 정의정확한 스케줄링: 매주 월요일 자정(한국시간)에 자동 실행일관된 포맷: "꾸씁-클 X주차 기록 (MM.DD ~ MM.DD)" 형식시각적 요소: 주차별 고유 이미지 첨부사용자 참여 유도: 자동 이모지 리액션으로 참여 분위기 조성관리 편의성: 테스트 및 디버깅을 위한 수동 명령어확장 가능성: 향후 링크 트..

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(..