프론트엔드(HTML, CSS, JavaScript)

아래 내용은 HTML 문서의 기본 뼈대(DOCTYPE, html, head, body)를 먼저 정리한 뒤, 실습 예제를 통해 “문서 구조 → 텍스트 태그 → 서식 태그 → 엔티티(특수문자) → div/span” 순으로 한 흐름으로 정리한 글이다.실습 코드 (전체 예제)

아래 내용은 style 속성을 이용한 간단한 인라인 스타일링을 먼저 정리한 뒤, 링크/이미지 삽입(a, img), 리스트(ul, ol), 테이블(table, caption, colgroup, thead, tbody)을 실습 코드로 한 흐름으로 정리한 글이다.실습 코드

아래 내용은 form 태그의 핵심 속성(action, method, enctype)을 먼저 정리한 뒤, 회원가입 폼 예제를 통해 label, input, select/option, textarea, button을 “입력 → 제출 → 전송 형태” 흐름으로 정리한 글이다.

아래 내용은 CSS 적용 방법(인라인/내부/외부)과 선택자(selector)의 기본을 정리한 뒤, JavaScript 적용 방법(인라인/내부/외부)과 DOM 로드 순서에 따른 실행 차이를 실습 코드로 한 번에 확인하는 글이다.실습 코드 (전체 예제)CSS(Cascadi

아래 내용은 CSS의 기본 텍스트 스타일(font-style, font-family, font-size)을 먼저 정리한 뒤, 글자/박스에서 자주 쓰는 길이 단위(px, %, em, rem, vw, vh)와 박스 모델(margin, padding)을 실습 코드로 확인하고

아래 내용은 JavaScript의 “타입이 유연한 변수 모델”을 먼저 정리한 뒤, 원시 타입(primitive)과 객체 타입(object), 배열(Array), 그리고 타입 변환(명시적/묵시적)을 예시 코드로 확인하는 흐름으로 정리한 글이다.https://ji

이번 포스트에서는 JavaScript 연산자 중에서도 실무에서 가장 자주 헷갈리는 포인트인 비교 연산자(동등/일치), 문자열 비교 규칙, 삼항 연산자, 그리고 typeof/void 같은 기타 연산자를 정리한다.마지막에는 “입력값(문자열) → 숫자 변환(Number) →

자바스크립트에서 함수는 “특정 기능을 수행하도록 묶어둔 독립적인 실행 블록”이고, Java의 메서드와 비슷하지만 클래스에 종속되지 않고도 어디서든 정의/호출할 수 있다는 점이 큰 차이다. 아래 글은 요청한 순서(함수 개념 → 함수도 타입 → window 내장 함수 →

개요 웹 개발에서 서버와 데이터를 주고받을 때 가장 흔한 포맷이 JSON이고, 프론트엔드에서는 이를 “객체로 변환(파싱)”해서 화면에 뿌리거나, 반대로 “객체를 JSON 문자열로 변환(직렬화)”해서 서버에 전송한다. 이번 실습은 아래 3단계를 목표로 한다. JSON

멀티/싱글 스레드 → 콜백 개념 → 동기/비동기 예시 → 일반함수/콜백함수 실습 → forEach → setTimeout → 콜백지옥 순서로 실습을 진행하였다.https://jiyean99.github.io/HTML-CSS-Javascript/실습 시트 전체

Ajax 요청(jQuery, Axios)은 기본적으로 비동기적으로 실행된다.즉, “요청을 보낸 코드 줄”이 실행되고 나서 응답을 기다리는 동안에도 다음 코드가 계속 실행될 수 있다.이 글은 다음 흐름으로 정리한다.AJAX 요청이 왜 비동기인지, 실행 순서가 왜 뒤바뀌는

Axios로 POST 요청을 보내는 방식은 크게 HTML 기본 form 전송과 JS로 직접 Axios를 사용하는 방식(JSON, x-www-form-urlencoded, FormData)로 나눌 수 있다. 브라우저는 자바스크립트 없이도 <form> 태그만으로 P

Repository URL : https://github.com/jiyean99/order-system-fe 1. 자동 토큰 갱신 로직 (Axios Interceptor) OrderSystem에서 가장 중요한 기능 중 하나는 세션 유지를 위한 토큰 관리임. 사용자

Repository URL : https://github.com/jiyean99/order-system-feVuetify의 v-form, v-card, v-text-field를 활용해 깔끔한 상품 등록 UI를 구성함.핵심:v-model.number: 숫자 입

Repository URL : https://github.com/jiyean99/order-system-fe화면 하단 200px 도달 시 자동으로 다음 페이지 데이터를 로드함.상태 관리:isLoading: 중복 요청 방지isLastPage: 더 이상 데이터

Repository URL : https://github.com/jiyean99/order-system-fePinia를 활용해 장바구니 데이터를 화면 간 공유하고 새로고침에도 유지함.핵심:실시간 반영: totalCount, totalPrice가 getProd