AI랑 같이하는 코딩

12일차에서는 매일 반복하는 습관을 체크할 수 있는 목록을 만듭니다. 할 일은 그날그날 바뀌지만, 습관은 반복된다는 점이 다르기 때문에 고정 항목 + 체크 상태 저장 흐름을 따로 구현하는 것이 핵심입니다.오늘 기능이 들어가면 하루 관리 웹앱이 단기 작업 관리에서 생활 루틴 관리까지 확장됩니다. 초보자도 체크박스 이벤트와 localStorage 저장 패턴을 재사용해 안정적으로 구현할 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘은 물 마시기, 스트레칭, 책 읽기 같은 습관 항목을 고정 리스트로 표시하고, 항목별 체크 상태를 저장/복원하는 기..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개개인 프로젝트에서는 Git을 백업 도구처럼 쓰더라도 큰 문제가 없을 수 있지만, 협업 환경에서는 Git 흐름 자체가 생산성을 결정합니다. 같은 기능을 개발해도 브랜치 전략과 커밋 품질, PR 작성 방식이 정리되어 있으면 리뷰 속도가 빨라지고 배포 사고가 줄어듭니다. 반대로 기준 없이 작업하면 충돌 해결에 시간이 소모되고, 변경 의도를 파악하느라 팀 전체가 지칩니다. 그래서 Git 실무의 핵심은 명령어 암기가 아니라 팀이 이해하기 쉬운 변경 기록을 만드는 습관입니다.특히 주니어 개발자가 자주 겪는 어려움은 “코드는 다 했는데 PR이 어렵다”는 지점입니다. 이는 실력이 부족해서가 아니라 흐름이 정리되지 않았기 때문인 경..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개웹앱에서 날씨, 지도, 결제, 로그인 같은 기능이 동작하는 이유는 대부분 API 덕분입니다. API는 어렵게 보면 복잡하지만, 핵심은 단순합니다. API는 서로 다른 프로그램이 약속된 방식으로 데이터를 주고받는 창구입니다.2. 핵심 내용요청(Request)과 응답(Response)클라이언트(브라우저/앱)는 필요한 데이터를 API 서버에 "요청"하고, 서버는 결과를 "응답"으로 돌려줍니다. 이 흐름이 웹 데이터 통신의 기본입니다.HTTP 메서드로 의도를 전달GET은 조회, POST는 생성, PUT/PATCH는 수정, DELETE는 삭제에 주로 사용합니다. 메서드는 "무엇을 하고 싶은지"를 서버에 명확히 알리는 신호입니..

11일차에서는 집중 타이머를 추가해 생산성 기능을 강화합니다. 할 일과 메모를 정리하는 것에서 한 걸음 더 나아가, 집중 시간을 직접 측정하고 관리하는 흐름을 웹앱에 붙이는 단계입니다.오늘은 25분 타이머 기준으로 시작, 정지, 초기화 버튼을 구현합니다. 초보자에게도 적합한 `setInterval` 패턴을 익히면 이후 카운트다운/알림 기능 확장도 쉬워집니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 핵심 기능은 카운트다운 타이머입니다. 25:00에서 시작해 1초마다 시간이 줄어들고, 00:00이 되면 자동으로 멈추게 만듭니다. 버튼은 `시작`, ..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개개발을 하다 보면 거의 매일 같은 고민을 하게 됩니다. “코드는 돌아가는데 구조가 아쉽다. 지금 고칠까, 그냥 기능부터 끝낼까?” 이 판단을 잘못하면 두 가지 문제가 생깁니다. 무조건 지금 고치면 일정이 밀리고, 무조건 미루면 기술 부채가 쌓여 이후 작업이 느려집니다. 그래서 리팩터링은 감으로 결정하는 일이 아니라, 비용과 리스크를 비교해 타이밍을 고르는 의사결정으로 접근해야 합니다.특히 실무에서는 완벽한 코드보다 안정적인 전달이 중요하기 때문에, “좋아 보이는 개선”과 “당장 필요한 개선”을 구분하는 기준이 필요합니다. 이 기준이 없으면 팀원마다 판단이 달라 리뷰가 길어지고, 결국 중요한 이슈보다 취향 논쟁에 시간..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개프로그램은 항상 위에서 아래로만 실행되는 것처럼 보이지만, 실제로는 조건에 따라 다른 길을 선택합니다. 그 선택을 만드는 문법이 if문입니다. 조건문은 컴퓨터에게 "이럴 때는 A, 아니면 B"를 알려주는 규칙이라고 생각하면 이해가 쉽습니다.2. 핵심 내용if: 조건이 참일 때 실행if는 괄호 안 조건이 true일 때만 코드 블록을 실행합니다. 로그인 여부 확인, 재고 여부 판단, 입력값 유효성 검사 같은 기본 로직에 자주 쓰입니다.else: 조건이 거짓일 때 실행else는 if 조건이 false일 때 대체 동작을 수행합니다. 예를 들어 권한이 없으면 경고 메시지를 보여주는 방식입니다.else if: 여러 갈래 선택조..

10일차에서는 오늘의 기분을 버튼으로 기록하는 기능을 만듭니다. 지금까지 할 일과 메모를 쌓았다면, 오늘은 감정 상태까지 한 화면에서 관리해 하루 대시보드의 개인화 수준을 높이는 단계입니다.복잡한 분석 기능 없이도 "기분 선택 → 화면 표시 → 저장" 흐름만 구현하면 실사용성이 크게 올라갑니다. 초보자에게도 부담이 적고, localStorage 재활용 연습까지 함께 할 수 있는 좋은 확장 과제입니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 기능은 사용자가 기분 버튼을 누르면 선택 상태가 표시되고, 그 값이 저장되는 구조입니다. 예를 들어 😀 ?..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개프론트엔드 실무에서 API 연동은 단순히 `fetch`를 호출하는 작업이 아닙니다. 요청이 성공하더라도 데이터 구조가 예상과 다르면 화면이 깨지고, 실패 처리가 느슨하면 사용자 경험이 급격히 나빠집니다. 특히 서비스가 커질수록 같은 API를 여러 화면에서 공유하기 때문에, 처음 연동할 때 기준 없이 구현하면 나중에 유지보수 비용이 크게 늘어납니다. 그래서 중요한 것은 코드 한 줄보다 호출 전·중·후 체크리스트를 갖추는 일입니다.초보 단계에서는 “응답만 오면 된다”는 관점으로 시작하기 쉽습니다. 하지만 실전에서는 인증 토큰 만료, 네트워크 지연, 예외 응답 포맷, 재시도 정책 같은 변수들이 항상 존재합니다. 이 변수들..

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개JavaScript에서 데이터를 다룰 때 가장 자주 만나는 구조가 배열(Array)과 객체(Object)입니다. 둘 다 값을 담지만 기준이 다릅니다. 순서가 중요하면 배열, 이름(키)로 찾고 싶으면 객체라고 기억하면 실무 판단이 빨라집니다.2. 핵심 내용배열(Array): 순서가 있는 목록배열은 인덱스(0, 1, 2...)로 데이터를 관리합니다. 게시글 목록, 댓글 리스트, 장바구니 상품처럼 "여러 항목을 순서대로" 다룰 때 적합합니다.객체(Object): 속성 이름이 있는 묶음객체는 키(key)-값(value) 형태로 데이터를 보관합니다. 사용자 정보처럼 name, email, role처럼 의미 있는 이름으로 접근..

9일차에서는 하루 관리 웹앱에 메모장 기능을 추가합니다. 지금까지 할 일 목록을 중심으로 만들었다면, 오늘은 짧은 생각이나 기록을 남길 수 있는 공간을 붙여 개인 대시보드로서의 활용도를 높이는 단계입니다.핵심은 복잡한 에디터가 아니라 "빠르게 쓰고 저장하는 메모"입니다. 초보자 기준에서는 textarea, 저장 버튼, localStorage 연동만 제대로 구현해도 실사용 가능한 기능이 됩니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 메모 입력 영역과 저장 흐름을 만드는 것입니다. 사용자가 textarea에 텍스트를 입력하고 저장 버튼을 누..