본문 바로가기

전체 글108

if문과 조건문, ‘컴퓨터의 선택’ 이해하기 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개프로그램은 항상 위에서 아래로만 실행되는 것처럼 보이지만, 실제로는 조건에 따라 다른 길을 선택합니다. 그 선택을 만드는 문법이 if문입니다. 조건문은 컴퓨터에게 "이럴 때는 A, 아니면 B"를 알려주는 규칙이라고 생각하면 이해가 쉽습니다.2. 핵심 내용if: 조건이 참일 때 실행if는 괄호 안 조건이 true일 때만 코드 블록을 실행합니다. 로그인 여부 확인, 재고 여부 판단, 입력값 유효성 검사 같은 기본 로직에 자주 쓰입니다.else: 조건이 거짓일 때 실행else는 if 조건이 false일 때 대체 동작을 수행합니다. 예를 들어 권한이 없으면 경고 메시지를 보여주는 방식입니다.else if: 여러 갈래 선택조.. 2026. 5. 9.
[바이브코딩 HTML 웹앱 20일 챌린지] 10일차 - 오늘의 기분을 기록하는 버튼 만들기 10일차에서는 오늘의 기분을 버튼으로 기록하는 기능을 만듭니다. 지금까지 할 일과 메모를 쌓았다면, 오늘은 감정 상태까지 한 화면에서 관리해 하루 대시보드의 개인화 수준을 높이는 단계입니다.복잡한 분석 기능 없이도 "기분 선택 → 화면 표시 → 저장" 흐름만 구현하면 실사용성이 크게 올라갑니다. 초보자에게도 부담이 적고, localStorage 재활용 연습까지 함께 할 수 있는 좋은 확장 과제입니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 기능은 사용자가 기분 버튼을 누르면 선택 상태가 표시되고, 그 값이 저장되는 구조입니다. 예를 들어 😀 ?.. 2026. 5. 8.
API 연동 체크리스트: 호출 전/중/후 반드시 확인할 것들 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개프론트엔드 실무에서 API 연동은 단순히 `fetch`를 호출하는 작업이 아닙니다. 요청이 성공하더라도 데이터 구조가 예상과 다르면 화면이 깨지고, 실패 처리가 느슨하면 사용자 경험이 급격히 나빠집니다. 특히 서비스가 커질수록 같은 API를 여러 화면에서 공유하기 때문에, 처음 연동할 때 기준 없이 구현하면 나중에 유지보수 비용이 크게 늘어납니다. 그래서 중요한 것은 코드 한 줄보다 호출 전·중·후 체크리스트를 갖추는 일입니다.초보 단계에서는 “응답만 오면 된다”는 관점으로 시작하기 쉽습니다. 하지만 실전에서는 인증 토큰 만료, 네트워크 지연, 예외 응답 포맷, 재시도 정책 같은 변수들이 항상 존재합니다. 이 변수들.. 2026. 5. 8.
배열(Array)과 객체(Object), 실무에서 어떻게 구분해 쓸까? 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개JavaScript에서 데이터를 다룰 때 가장 자주 만나는 구조가 배열(Array)과 객체(Object)입니다. 둘 다 값을 담지만 기준이 다릅니다. 순서가 중요하면 배열, 이름(키)로 찾고 싶으면 객체라고 기억하면 실무 판단이 빨라집니다.2. 핵심 내용배열(Array): 순서가 있는 목록배열은 인덱스(0, 1, 2...)로 데이터를 관리합니다. 게시글 목록, 댓글 리스트, 장바구니 상품처럼 "여러 항목을 순서대로" 다룰 때 적합합니다.객체(Object): 속성 이름이 있는 묶음객체는 키(key)-값(value) 형태로 데이터를 보관합니다. 사용자 정보처럼 name, email, role처럼 의미 있는 이름으로 접근.. 2026. 5. 8.
[바이브코딩 HTML 웹앱 20일 챌린지] 9일차 - 오늘의 메모를 남기는 공간 만들기 9일차에서는 하루 관리 웹앱에 메모장 기능을 추가합니다. 지금까지 할 일 목록을 중심으로 만들었다면, 오늘은 짧은 생각이나 기록을 남길 수 있는 공간을 붙여 개인 대시보드로서의 활용도를 높이는 단계입니다.핵심은 복잡한 에디터가 아니라 "빠르게 쓰고 저장하는 메모"입니다. 초보자 기준에서는 textarea, 저장 버튼, localStorage 연동만 제대로 구현해도 실사용 가능한 기능이 됩니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 메모 입력 영역과 저장 흐름을 만드는 것입니다. 사용자가 textarea에 텍스트를 입력하고 저장 버튼을 누.. 2026. 5. 7.
폼 처리 실전: 입력 검증과 에러 메시지 UX 기본기 목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개회원가입, 문의 등록, 결제 정보 입력처럼 폼은 대부분의 서비스에서 전환율을 좌우하는 핵심 구간입니다. 기능은 같아 보여도 입력 검증과 에러 메시지 UX를 어떻게 설계했는지에 따라 완료율이 크게 달라집니다. 사용자가 실수했을 때 “왜 안 되는지”를 즉시 이해할 수 있으면 다시 시도하지만, 이유를 모르면 이탈합니다. 그래서 폼 처리의 본질은 값 저장이 아니라 사용자가 끝까지 완료할 수 있도록 돕는 흐름 설계입니다.초보 개발자가 자주 겪는 문제는 검증 로직을 나중에 붙이는 방식입니다. 화면을 만든 뒤 제출 버튼에서만 한 번에 검사하면 에러가 한꺼번에 쏟아지고 사용자는 어디부터 고쳐야 할지 모르게 됩니다. 반대로 입력 시.. 2026. 5. 7.

티스토리툴바