클로리셔 작은 공간

어느날 운영하는 홈페이지에 매달 판매 이력정보를 업데이트하는 아카이빙 페이지를 제작했다. 이 페이지는 어떤 기준의 데이터로 분기처리가 되는 방식인데.. 매월 그 달에 맞는 데이터를 불러와서 페이지에 담기도록 작업을 진행하게 되었다. 퍼블 작업 후에 다른 회사 프론트로 앞단 영역을 넘겼는데 나중에 데이터를 확인해보니 매달 달라지는 데이터를 복잡하게 만들어서 업데이트 할때마다 번거로움의 이슈가 발생... 이건 유지보수적으로 개노답이라는걸 파악하게 됨... [노답 데이터 리스트] 아니 매달 변경되는 정보를 넣어야 하는데 이렇게 복잡하게 적용한다는게 말도 안된다고 생각했다. 2-3달은 그렇다 치지만.. 이 페이지가 1년 운영할지 10년 운영할지 모르는데 그때마다 저렇게 하나씩 삼항연산자로 늘어간다니... 이건 ..

둘 다 JS를 사용해서 HTML코드를 DOM에 넣어 조작하는 메서드다. 1. innerHTML = " html " 로 둘러쌓인 텍스트를 클릭 시 태그로 바꾸는 JS를 작성해보았다. click 안녕하세요, 지금은 'span' 태그입니다. 라이브 서버로 확인해보면 클릭 버튼 옆에 텍스트가 나란히 나온다. const btn = document.querySelector("button"); const el = document.querySelector("#el"); btn.addEventListener('click', e => { el.innerHTML = "지금은 'p'태그로 변경되었습니다." }) 클릭하는 순간 태그에서 태그로 덮어씌워진다. innerHTML의 특징 중 하나다. 기존..

회사 또래 직원들끼리 같이 스터디 하기로 했다. 스크립트 미션을 받아서 각자 코드를 짜보고 본인의 코드를 리뷰하면서 더 좋은 방법 알아가는 방식으로 하기로 했다. 첫번째 미션은 자바스크립트를 이용해서 그래프를 만들기 프로젝트!! 일주일동안(~22.02.24) 각자 작업해서 리뷰하기. 하단 이미지처럼만 짜여있는 HTML / CSS 코드를 이용해서, 순수 바닐라 자바스크립트로 하단 바 그래프처럼 표현하기이다. 1) 각 항목에 있는 숫자만큼 바 그래프가 표시되어야한다. 2) 평점 계산, 기준 라인(0, 5, 10, 15…) 표현되어야 한다. 3) 재활용 가능하게 만들어야 한다. 4) 이미지 사용 안된다. - 최대한 HTML을 안건들면서 JS를 이용해 DOM을 조작하..

requestAnimationFrame() 바닐라 자바스크립트로 애니메이션 개념잡기 간단하게 개념을 잡기위해 필요한 기본 HTML 코드는 버튼과 작은 박스 '#box' 를 준비했다. HTML click CSS button{padding: 10px 20px; margin: 50px; } #box{width: 300px; height: 300px; background: aqua;} 01. requestAnimationFrame() 이용해서 반복하는 스크립트 짜보기 JS const btn = document.querySelector('button'); const box = document.querySelector('#box'); let num = 0; btn.addEventListener("click", e ..

01. style(CSS) 속성값을 변경해보기 1) CSS 속성을 추가하기 - element.style.color * [ style.css속성명 ]은 기존 정의 된 style에서 새로운 속성 추가된다. Lorem ipsum dolor sit amet consectetur adipisicing elit. const text = document.querySelector("p"); text.style.color = "hotpink"; 2) CSS 속성 여러개 추가하기 - element.style.cssText * [ style.cssText ]는 기존 정의된 style 지우고, 새로운 속성으로 덮어쓴다. Lorem ipsum dolor sit amet consectetur adipisicing elit. co..

sort( ) / reverse( ) 함수로 순서 정렬하기 01. sort() : 알파벳 순서로 요소 정렬 const names = ["Chloe", "Andy", "Jake", "David"]; names.sort(); console.log(names); // ['Andy', 'Chloe', 'David', 'Jake'] 02. reverse() : 역순으로 요소 정렬 const names = ["Chloe", "Andy", "Jake", "David"]; names.reverse(); console.log(names); // ['Jake', 'David', 'Chloe', 'Andy'] sort( ) 함수로 올림차순/내림차순 최소값/최대값 반환 sort((a, b) => {return a-b}) : ..

addEventListener 이벤트 작업을 하다가 몰랐던 이벤트들도 많길래 한번 정리를 해보았다. 자주보다보면 익숙해지겠지..ㅎㅎ 자주쓰는 메서드는 따로 표시 해두도록 해야지! 이제 나도 이벤트 메서드 전문가!!! 브라우저 UI와 상호작용 이벤트 이벤트 설명 load 웹 페이지 로드 완료되었을때 unload 웹 페이지가 언로드 될 때(새로운 페이지 요청한 경우) error 오류를 만났거나 요청한 자원이 없을 때 resize 브라우저 창 크기를 조정했을 때 scroll 사용자가 페이지를 위아래로 스크롤 할 때 키보드 이벤트 - 사용자가 키보드를 작동했을 때 이벤트 설명 keydown 사용자가 키를 눌렀을 때 keyup 사용자가 키를 뗄 때 keypress 사용자가 눌렀던 키의 문자가 입력 되었을 때 마우..

자바스크립트에 미리 포함 된 함수를 내장함수라 한다. 배열에 사용하는 반복문 내장함수에는 forEach() / map() 이 있는데 알아보자. forEach() / map() 에는 파라미터(인자)값이 3가지가 들어간다. ex) forEach( el, idx, arr ) el : 반복 돌고있는 대상 idx : 순서값 arr : 배열자체 1. forEach() const colors = ["red", "green", "blue"]; colors.forEach((el, idx, arr) => { //파라미터에는 3가지가 default.(반복도는 대상, 순서값, 배열자체 ) console.log(el); //red green blue console.log(idx); // 0 1 2 console.log(arr)..

1. for() 반복문 1-1) 배열에서 for() 이용하기 // 배열에서 사용법 const colors = ["red","green","blue","aqua"]; for( let i=0; i < colors.length; i++ ){ console.log(colors[i]); //red green blue aqua } 1-2) 객체에서 for() 이용하기 // 객체에서 사용법 const classA = [ {name: "Chloe", age: 20, address: "Seoul"}, {name: "Andy", age: 25, address: "Busan"}, {name: "Jane", age: 18, address: "Daegu"}, ]; for(let num=0; num < classA.length;..