Vanilla Project

Webpack에 시작 파일, 결과 파일 이름 / 경로 설정라이브러리 설치 및 설정css-loader style-loader fild-loader html-webpack-plugin clean-webpack-pluginsass/scss dev-serverbabellint

vanilla js 노션 클론 프로젝트에서 컴포넌트를 생성할 때 생성자 함수를 썼기 때문에타입스크립트로 생성자 함수를 작성하는 방법을 찾아봤는데 적합한 타입이 없었고, class로 구현하는 방법 밖에 없었다.필드와 constructor에 프로퍼티를 정의할 수 있다con

전체 설계 SPA의 형태 하나의 Web App을 만들 것 메인 페이지에 프로젝트들의 제목이 적힌 카드 리스트가 나열되어 있고, 카드를 클릭하면 해당 프로젝트 페이지가 나타나도록 구현할 것 class를 이용한 컴포넌트 방식으로 구현할 것 언어는 TypeScrtipt

HexColors 레퍼런스 알게된 점 css animation을 처음 사용해봄 → css만으로 글씨색을 자동으로 바꿀 수 있음 문제는 state(배경색 코드)가 바뀔 때마다 모든 html이 다시 렌더링되도록 구현하니까 글씨 컬러 애니메이션도 처음부터 시작하게 됨

Random Quotes 래퍼런스 알게된 점 constructor함수 내에서(처음 컴포넌트가 만들어질 때 실행) this.render함수가 실행되는데, handleClickButton함수가 addEventListener의 콜백함수로 등록되는 로직이 포함되어있다. 그

ImageSlider 래퍼런스 구현 방법 초기 로직 세팅 각 슬라이드는 li에 해당한다 maxLength는 슬라이드 이미지의 총 갯수 state에 (슬라이드 이미지의) 초기 index(1)를 설정한다. prev, next버튼에 이벤트를 걸어주는데 prev는 stat

Digital Clock 래퍼런스 알게된 점 현재의 날짜+시간 데이터를 가져오는 함수 구현 원하는 대로 모양대로 포맷해주는 함수도 있었다 내가 구현한 방법처럼 일일이 구하는 것보다 훨씬 편한 방법 같다 setInterval의 콜백함수 관련 트러블 반복 함수를 걸

리팩토링한 템플릿 컴포넌트 클래스로 기존 작업을 전환했다 기존에는 이벤트로 변경된 부분만 돔에 접근해 속성을 바꿔주었는데, 컴포넌트 디자인 패턴으로 프로젝트를 진행할거라면 상태에 의존해 리렌더링을 하도록 구현하는게 맞다는 생각이 들었다. 가상돔이 없으면 효율이 매우 떨

이전 방법의 문제점 파라미터로 받아온 부모 돔에 innerHTML로 템플릿을 생성하고, 부모 돔에 이벤트를 걸어주어 위임하는 방식으로 구현을 했었지만 여러 문제점이 있었다 한 컴포넌트에 여러 자식을 연결해주려면 해당 부모 컴포넌트 템플릿에서 자식을 연결해줄 태그를 매

이전 방법의 문제점 constructure함수에서 컴포넌트 자신의 dom을 만들고, 자식 컴포넌트를 생성해 연결해주려면 인스턴스 생성 시에 해당 컴포넌트가 사용할 태그 이름을 props으로 넣어줘야하는데, 그럴 경우 같은 컴포넌트여도 각자 다른 태그로 생성될 수 있어

history API를 이용해 url이동시키기 1. 필요한 함수 선언 route-push라는 커스텀 이벤트를 발생시키고 이동할 url을 event객체에 할당하는 함수 window객체에 route-push 커스텀 이벤트의 리스너 콜백함수를 등록하는 함수. 리스너

Vanilla JS ShoppingMall SPA 구현 과정 fetch 함수 추상화 시도 1 클래스 constructor함수 내에서 비동기 처리 시 문제점 setup함수에서 비동기가 다 끝나고 나서 다음 메소들이 실행되는게 아닌, 비동기 로직이 끝날 동안 다음 메소

리팩토링한 컴포넌트 구조로 기존 코드를 수정했다.ImageSlide최상위 부모인 ImageSliderPage의 상태로 현재 슬라이드 index와 슬라이드의 갯수를 저장해주었다.슬라이드, 넘김 버튼, 포인터 3가지의 컴포넌트를 만들어 ImageSliderPage의 해당