Ted's Codding study

정규표현식의 정의정규표현식은 문자열을 처리할 때 사용하는 문법복잡한 문자열 패턴을 정의하고 검색, 대체, 추출 작업을 수행하는 역할+) 역사정규표현식은 1950년대 후반 수학자 스티븐 클레이니에 의해 처음 소개이후 UNIX 운영 체제의 텍스트 처리 도구들에서 사용JavaScript에서는 1990년대 후반부터 정규표현식 지원 시작 1. 기본 용도 & 응용 분야검색(Search): 특정 패턴이나 조건에 맞는 문자열을 찾기검증(Validation): 이메일 주소, 전화번호 등 입력된 데이터의 형식이 올바른지 확인분리(Splitting): 문자열을 특정 패턴을 기준으로 여러 부분으로 나누기대체(Replacement): 문자열 내의 특정 패턴을 찾아 다른 문자열로 대체+) 응용 분야웹 개발: 폼 데이터 검증, U..

1. DOM의 정의1) 문서 객체HTML 안에서는 요소(Element)로 불리는 객체를 JS에서는 문서 객체라고 불림2) 문서 객체 모델(Document Object Model: DOM)웹 페이지를 프로그래밍 방식으로 조작하고 관리할 수 있는 인터페이스(상호작용, 규약)2. DOM의 사용JS를 사용하여 DOM에 접근하는 경우 웹 페이즈이 요소를 선택, 추가, 수정, 삭제하는 데 사용할 수 있는 메소드와 속성에 접근이 가능CRUD - Create(생성), Read(읽기), Update(수정), Delete(삭제)3. DOMContentLoaded 이벤트문서 객체를 조작할 때 사용하는 이벤트HTML의 모든 문서 구조(내용)가 모두 로드된 이후에 해당 이벤트가 발생웹 브라우저가 문서 객체를 모두 읽고 나서 실..

깃허브 : https://github.com/SeungjuShin93/imageGallery-vanilaJS데모 : https://seungjushin93.github.io/imageGallery-vanilaJS/HTML과 CSS는 간략하게 다루고 자바스크립트 위주로 글을 작성하겠습니다요약 : 이미지 5장을 가지고, 서브 이미지 박스에서 이미지를 클릭하면 가운데 큰 이미지가해당 클릭된 이미지로 바뀌는 이미지 갤러리 구현추가적으로 다크 모드 버튼을 누르면 토글 버튼으로 써 다크 모드와 라이트 모드 구현 1. HTMLHTML 코드 Image Gallery Practice 다크 모드 ..

렌더링의 원리 초간단 요약!1. HTML 파싱과 DOM 트리 구축HTML 파싱: 브라우저는 HTML 파일을 받고 태그들을 해석하여 파싱 DOM 트리 구축: 파싱된 HTML 요소들은 DOM(Document Object Model) 트리로 변환 이 트리는 문서의 구조적 표현이며, JavaScript를 통해 동적으로 조작 가능2. CSS 파싱과 CSSOM 트리 구축CSS 파싱: 브라우저는 모든 CSS를 읽고 CSS 규칙(선택자와 속성)을 파싱 CSSOM 트리 구축: 파싱된 CSS는 CSS 객체 모델(CSSOM) 트리로 변환 CSSOM은 각 DOM 요소에 적용될 스타일을 결정하고, DOM과 병합되어 렌더 트리를 형성하는 데 기여3. 렌더 트리 구축렌더 트리 생성: DOM 트리와 CSSOM 트리가 결합하여 렌더 ..

콘솔에 찍어보는 초간단 장바구니 리스트 프로젝트1. 장바구니 리스트를 담을 carts 배열 생성let carts = []; 2. addCart 함수 생성기본 로직addCart의 파라미터로는 id, name, price, quantity를 받을 것index 변수를 생성 후 carts 배열에 추가하고자 하는 상품의 id가 carts에 있는지 확인 후 할당만약 index가 -1이면, 즉 해당 상품의 id가 존재하지 않는다면 정상적으로 아이템을 추가index가 -1이 아니라면, 즉 해당 상품의 id가 이미 존재한다면 가격은 덮어쓰기, 갯수는 추가하는 로직으로 작성할 것임콘솔에 보여주기 위해서 displayCart() 함수 호출 (아직 만들지 않았음)function addCart(id, name, price, q..