맨땅헤딩 프로그래밍

CBD SPA Library

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. CBD SPA Library 추상 컴포넌트 구현 (./core/Component.js) 리액트에서 클래스형 컴포넌트를 작성할 때 React.Component를 상속 받는다. , , , , 을 구현할 때 상속해줄 추상 컴포넌트를 구현했다. 모든 클래스형 컴포넌트는 render 메서드를 필수로 구현해야한다. class Component { constructor() { this.init(); this.render = this.render.bind(this); } init() {} render() { throw new Error(`'render' 메서드를 구현해야 합니다.`); } bin..

News Viewer

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. News Viewer IntersectionObserver API IntersectionObserver API는 타겟 요소와 상위 요소 또는 최상위 document의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법이다. 즉, IntersectionObserver란 화면(viewport) 상에 내가 지정한 target이 보이고 있는지를 관찰하는 API다. 뷰포트에 $observer가 100% 보이면 다음 뉴스를 가져와 추가했다. 1️⃣ isIntersecting isIntersecting은 target이 루트 요소와 교차 상태로 들어가거나 교차 ..

Calendar & DatePicker

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. Calendar & DatePicker 달력 계산하기 렌더할 년도(year)와 월(month)의 달력을 배열 형태로 생성한다. 전월의 마지막 주(lastWeekOfPrevMonth) 당월 1일의 요일(startWeekDay)과 전월의 마지막 날짜(endDateOfPrevMonth)을 통해 전월의 마지막 주 달력을 배열로 생성한다. const startWeekDay = new Date(thisYear, thisMonth, 1).getDay(); // date를 0으로 지정하면 전월의 마지막 날짜를 반환 const endDateOfPrevMonth = new Date(thisYear,..

Star Rating

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. Star Rating css 파일 동적으로 추가 하기 1️⃣ 마지막 가져오기 마지막 태그를 가져오기 위해 querySelectorAll메서드로 요소들을 받아와서 배열로 변경한 후 at메서드를 사용하여 마지막 요소만을 가져왔다. const $link = [...document.querySelectorAll('link')].at(-1); 2️⃣ 마지막 뒤에 theme.css 추가하기 insertAdjacentHTML은 HTML 같은 특정 텍스트를 파싱하고, DOM tree 안의 특정 위치에 원하는 node를 추가 한다. 이를 통해 첫번째 인수로 afterend를 전달하여 마지막 의 다..

Tree View

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. Tree View 트리 travel 알고리즘 tree 배열(트리 구조로 되어 있음)을 travel할 때 dfs 알고리즘으로 구현했다. 자식 노드 렌더하기 트리를 재귀를 통해 순회하여 렌더하다가 children.length === 0 조건을 만족하면 재귀를 종료한다. #createChildrenNode({ children, isOpen }) { // base case if (children.length === 0) return ''; return ` ${this.#createDomString(children)} ` } isOpen 토글하기 트리를 재귀를 통해 순회하여 node.nam..

Analog Clock

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. Analog Clock 시계 시, 분, 초 각도 계산 [hour] 시계는 원 모양이므로 360도 이다. 따라서 360도를 12등분(360 / 12)하면 30도 이므로 시간 당 30도를 움직인다. 추가적으로 시침의 각도를 계산하는 경우, minute과 second가 증가함에 따라 시침도 점점 증가시킨다. 이를 표현하기 위해 시침의 각도를 계산할 때 minute과 second도 고려했다. 정각과 다음 정각과의 거리가 1시간(30도)이어서 1시간이 다 채워지지 않는 경우 minute과 second를 각각 60, 3600로 나눈 값을 반영했다. (정확히 정각이 되면 minute과 seco..

Drag & Drop

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. Drag & Drop 피셔-예이츠 셔플 알고리즘 유한 순열의 무작위 순열을 생성하는 알고리즘으로 편향되지 않는 순열을 생성한다. 초기 알고리즘 1️⃣ 범위: 1 - 8, 난수: 3 A B C D E F G H -> C 2️⃣ 범위: 1 - 7, 난수: 4 A B D E F G H -> C E 3️⃣ 범위: 1 - 6, 난수: 5 A B D F G H -> C E G 4️⃣ 범위: 1 - 5, 난수: 3 A B D F H -> C E G D 5️⃣ 범위: 1 - 4, 난수: 4 A B F H -> C E G D H 6️⃣ 범위: 1 - 3, 난수: 1 A B F -> C E G D ..

Accordion Menu

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. Accordion Menu component UI의 재사용 가능한 독립적인 모듈로 내부 상태와 프로퍼티를 가질 수 있고 다른 컴포넌트와 조합하여 애플리케이션을 개발하는데 사용된다. 컴포넌트 기반 개발(CBD)는 애플리케이션의 복잡도를 낮추고 재사용성을 높일 수 있으며 컴포넌트의 재사용을 통해 빠르고 효율적인 개발을 할 수 있다. 대표적인 자바스크립트 라이브러리로 React, Vue.js, Angular 등이 있다. class component vs function component [역할] 클래스형 컴포넌트와 함수형 컴포넌트는 동일하게 컴포넌트를 생성하는 역할을 한다. [문법] 클..

Tic Tac Toe

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. Tic Tac Toe 상태(state) vs 변수 상태는 컴포넌트의 동적인 데이터를 나타내고, 변수는 임시 데이터나 계산 결과를 나타내는 데 사용된다. [변경 가능성] 상태는 변경 가능한 값이며, 변수는 변경 가능하거나 변경 불가능한 값일 수 있다. 상태는 값이 변경되면 컴포넌트 렌더링이 일어나고, 변수는 변경되어도 렌더링이 일어나지 않는다. [범위] 상태는 보통 컴포넌트 내부에서만 사용되지만, 변수는 전역 변수, 지역 변수, 매개 변수 등으로 사용된다. [생명주기] 상태는 컴포넌트의 생명주기에 따라 생성, 변경, 삭제되고 변수는 해당 범위가 종료될 때까지 유지된다. HTML 동적..

Toggle Side Navigation

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. Toggle Side Navigation 상태(state) 컴포넌트 내 변경 가능한 데이터 저장소로 UI에 반영하기 위해 유지해야할 값들이다. 상태가 변화하면 UI는 자동으로 갱신(리렌더링)된다. .preload를 사용해야하는 이유 HTML이 정적으로 작성되어 있기 때문이다. 따라서 해당 문제를 해결하기 위해서는 자바스크립트를 통해 HTML을 동적으로 생성한다. beforeunload beforeunload 이벤트는 사용자가 웹페이지를 떠날 때(새로고침, 앞/뒤로 가기, 브라우저 닫기, form submit 등)발생한다. $toggleBtn이 클릭될 때마다 isNavActive를 ..

Form Validation

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. 11. Form validation TIL 1. .icon/ .error 선택 -> e.target.parentNode의 자식으로 검사 다음과 같은 계층구조를 가진 html이 있다. input 요소에서 input 값을 받아오면 그에 맞게 .icon과 .error를 바꾸어주려고 한다. SIGN IN document.querySelectorAll('.icon-success'); document.querySelectorAll('.icon-error'); document.querySelectorAll('.error'); 이 HTML에서 .icon-success, .icon-error, ...

Carousel Slider

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 JS PairProgramming과제를 진행하며 회고를 정리하는 글이다. 10. Carousel Slider TIL 1. transition const setSlideNext = slideLength => { if (slideIndex === slideLength + 1) return; slideIndex += 1; setSlide(slideIndex); setTransition(TRANSITIONDEFAULT); }; const checkSlideMove = slideLength => { if (slideIndex === slideLength + 1) { setTransition(0); slideIndex = 1; setSlide(slideIndex)..