JavaScript

자동화 : 팝업 높이 계산해서 아래로 쌓기

상황 매번 새로운 팝업이 올라올 때마다 1200px 아래의 팝업 top값을 그 위 팝업의 높이값만큼 수동으로 업데이트하고 있던 상황이었다. 위의 형태의 팝업이 있으며, 각 팝업은 absolute로 표시된다. 팝업 ID 번호는 유연하며, ID 번호는 항상 변경될 수 있다. (관리자사이트에서 사용자인 클라이언트가 맘대로 써넣는다) 각 팝업이 브라우저 너비 1200px 이하로 떨어지면 첫 번째 팝업이 위에서 아래로 순서대로 배치된다. 하단 배치는 css top:npx로 제어되며, 첫 번째 팝업은 top:60px로 시작하고 두 번째 팝업은 top:(위에 있는 팝업의 높이 값 + 20px)로 계산되어야 한다. 1차 해결 const popups = document.querySelectorAll('[id^="pop_..

React : map 사용해서 div 반복생성하기

map의 기능 var 어레이 = [2,3,4]; var newArray = 어레이.map(function(a){ return a * 10 }); console.log(newArray) map은 array의 자료개수만큼 코드를 반복실행한다. 파라미터를 각 자료로 가진다. return 우측의 코드를 array에 담고 map 쓴 자리에 남겨준다. map 사용해서 div 반복생성하기 array자료인 state도 array.map으로 활용할 수 있다. (array 개수만큼 반복생성된다) function App (){ let [title, sortTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); return (..

React : 동적인 UI 만들기 (현재 상태, 조건문 삼항연산자)

현재 상태 작성하기 // 전부 가능 let [Modal, setModal] = useState(0); let [modal, setModal] = useState('닫힘'); let [modal, setModal] = useState(false); state를 만들고 현재 UI의 상태정보를 저장한다. 현재 모달창의 상태만 표현할 수 있으면 어떤 자료든 상관없다. 삼항연산자 JSX 안에서는 if / else / for 등 문법을 사용할 수 없다. 그러나 중괄호 안에 삼항연산자는 사용할 수 있다. // 조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드 3 > 1 ? console.log('맞음') : console.log('아님') function App (){ let [modal, s..

React : 복잡한 html을 한 단어로 치환하는 Component 문법

어떨 때 Component를 쓸까? 반복적인 html 축약할 때 큰 페이지들 자주 변경되는 것들 Component 만들기 function App() { return ( {/* */} ); } function Modal(){ return ( ) } const Modal = () => { return ( ) } 주의점 function을 function App() {} 바깥에 만든다 function명은 첫글자를 대문자로 작성한다. function안에는 div를 병렬기입하면 안된다 중요 주의점 state 가져다 쓸 때 문제가 생긴다. -> A 함수에 있던 변수는 B 함수에서 맘대로 가져다 쓸 수 없다. function 하나 안에 div 병렬기입하기 return ( ) 내부는 하나의 태그로 시작해서 하나의 태그로..

Level 3 : 9 장바구니버튼 구현하기(localStorage, array, forEach, JSON)

9. 장바구니 기능 만들기 조건 장바구니 버튼을 누르면 localStorage에 배열 형태로 상품이름이 담기고, cart.html을 따로 만들어 해당 html에 상품이 뿌려지도록 만들기 풀이 상품리스트 // 여러개의 장바구니 버튼들을 buttonCarts 변수로 선언 let buttonCarts = document.querySelectorAll('.btn-cart'); // buttonCarts 안의 각각의 buttonCart elements들에게 함수를 실행 buttonCarts.forEach(function(buttonCart){ // buttonCart를 클릭하면.. buttonCart.addEventListener('click', function(){ // localStorage의 cart를 ke..

[코딩애플] Local Storage 사용법 (Session Storage, IndexedDB, Cookies, Cache Storage)

브라우저 안에 유저 몰래 데이터를 저장할 수 있다. F12 개발자 도구에서 Application(애플리케이션) > Storage(저장용량) 카테고리를 보자. 1. Local Storage key : value 형태로 데이터를 저장할 수 있다. 5MB 이하의 문자/숫자 데이터만 저장할 수 있다. (array, object 저장 불가능) 사이트를 재접속해도 유지된다. 2. Session Storage key : value 형태로 데이터를 저장할 수 있다. 5MB 이하의 문자/숫자 데이터만 저장할 수 있다. (array, object 저장 불가능) 사이트를 나가면 삭제된다. 3. IndexedDB 구조화된 대용량데이터를 저장한다. 3. Cookies 유저의 인증정보(로그인정보 등)를 저장한다. 4. Cache..