분류 전체보기69 [JavaScript] 문자 중간에 변수 집어넣기 보호되어 있는 글 입니다. 2024. 10. 7. [JavaScript] Array, Object 자료형, 데이터 바인딩 Array 자료형- 여러가지 자료를 한 곳에 저장하고 싶을 때 사용하는 자료형var fruit = ['사과', 5000, 'apple']; - 대괄호를 열고 자료를 콤마로 구분해서 넣으면 여러 자료를 엑셀처럼 저장 가능하다.var fruit = ['사과', 5000, 'apple'];console.log(fruit[1]);- array 자료에서 데이터를 꺼낼 때는 대괄화 뒤에 [x]를 붙이면 된다. x번째 자료를 출력해 준다.var fruit = ['사과', 5000, 'apple'];fruite[1] = 7000;console.log(fruit[1]);- array 자료를 수정하거나 추가하고 싶으면 등호를 이용하면 된다.- 여러 자료를 하나의 변수에 저장하고 싶을 때 array를 사용하면 편리하다. .. 2024. 10. 7. [JavaScript] 이벤트 버블링, 이벤트 관련 함수들, dataset https://heeccup.tistory.com/72 [JavaScript] UI 애니메이션🌱 들어가기 전에버튼을 누르면 모달창을 띄워 보자.로그인 로그인하세요 닫기 .black-bg { display: none; width : 100%; height : 100%; padding: 30px; background : rgba(0,0,0,0.5); position : fixed; top: 0; left: 0; z-index : 5;heeccup.tistory.com이전 포스팅에서 모달창을 하나 만들어서 띄웠었다. 오늘은 모달창의 검은 배경을 누르면 모달창이 닫히는 기능을 추가해 보자. (생략) ▲ 모달창 HTML 부분이다. 모달창 오픈할 때 show-modal 클래스명을 넣어서.. 2024. 9. 30. [React] To Do List 만들기 - 2 리액트로 To Do List 만들기📖 사용 기술Editor : VScodeLanguagehtmlcssReact.js배포: Github.io 클릭 📂 컴포넌트 구조 📂 src ├── 📂 components │ ├── 📄 AddTodo.js # 할 일 추가 컴포넌트 │ ├── 📄 Container.js # 레이아웃을 담당하는 컨테이너 컴포넌트 │ ├── 📄 Title.js # 타이틀 컴포넌트 │ ├── 📄 TodoList.js # 할 일 목록 컴포넌트 └── 📄 App.js # 메인 애플리케이션 컴포넌트 📖 기능할 일 추가할 일 삭제할 일 수정할 일 완료 여부 체크할 일 목록 표시로컬 스토리지 활용 : 페이지를 새로고침하거나 브라우저 닫.. 2024. 9. 30. [React] To Do List 만들기 - 1 리액트로 To Do List 만들기📖 사용 기술Editor : VScodeLanguage htmlcssReact.js배포: Github.io 📂 컴포넌트 구조App├── header└── container ├── TodoForm # 할 일 추가 컴포넌트 └── TodoList # 할 일 목록 컴포넌트 📖 기능할 일 추가할 일 완료 여부 체크할 일 삭제할 일 목록 표시그리고 localStroage에 데이터를 저장해서 새로고침을 해도 데이터가 유지될 수 있도록 했다. 📖 기능 구현1. 할 일 추가(Create)- 할 일을 입력하고 추가 버튼을 클릭하면 list 상태가 업데이트되고 새로운 할 일이 목록에 추가된다. 그리고 입력 필드는 초기화되어 사용자는 다시 새로운 할 일을 입력할 .. 2024. 9. 26. [JavaScript] for 반복문에서 var 대신 let 사용하는 이유 보호되어 있는 글 입니다. 2024. 9. 25. [JavaScript] for 반복문 (+탭 기능) 탭 기능을 만들어 보면서 for 반복문을 배워 보자. Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc;}ul.list::after { content: ''; display: block; clear: both;}.tab-button { display: block; padding: 10px 20px 10px 20px; float: left.. 2024. 9. 25. [JavaScript] 스크롤 이벤트 스크롤 이벤트 리스너스크롤바를 조작하면 scroll 이벤트가 발생한다. scroll 이벤트 리스너를 전체 페이지에 달면 전체 페이지를 스크롤할 때마다 원하는 코드를 실행할 수 있다.아래의 코드를 실행하면 스크롤바를 만질 때마다 '안녕'이 출력된다.window.addEventListener('scroll', function(){ console.log('안녕')}); (참고) window, document는 전체 페이지를 의미한다. window가 약간 더 큰 개념인데, scroll 이벤트 리스너는 관습적으로 window에 붙임. 스크롤 관련 유용한 기능들1. scrollY() (= pageYOffset)window.addEventListener('scroll', function(){ console... 2024. 9. 24. [JavaScript] 함수의 return 문법 & 소수 다루기 함수 function 문법- 긴 코드를 짧게 축약해서 쓸 수 있고,- 파라미터로 기능 업그레이드도 가능하다.- 오늘 배울 return을 쓰면 함수를 쓰고나서 원하는 값을 그 자리에 퉤 뱉을 수도 있다. 함수 안에서 쓸 수 있는 return 문법함수 안에서 return이라는 문법을 사용할 수 있다.return 오른쪽에 아무거나 적으면 함수가 실행되고 난 자리에 return 오른쪽에 있던 값이 남는다.function 함수(){ return 123}console.log(함수());진짜인지 확안하기 위해 함수() 실행하고 나서 123을 남기라고 적었다.출력해 보니 진짜 123이 출력된다.이렇게 함수() 실행하고 나서 그 자리에 뭔가 결과를 남기고 싶으면 return 문법을 쓰면 된다. function 함수.. 2024. 9. 23. [JavaScript] 캐러셀(이미지 슬라이드) 만들기 보호되어 있는 글 입니다. 2024. 9. 23. [React] custom hook으로 코드 재사용하기 custom hook이란?- 리액트에서 제공하는 기본 Hook들(useState, useEffect, useContext 등)을 조합해 특정 기능을 구현하고, 이를 여러 컴포넌트에서 재사용할 수 있도록 만든 것.- 함수 이름은 반드시 use로 시작해야 한다.리액트는 함수 이름이 use로 시작하면 해당 함수가 Hook이라는 것을 인식하고, 그 안에서 Hook을 사용할 수 있도록 허용한다. 이렇게 생긴 좋아요 버튼과 기능을 만들어 보며 알아보자.function Detail(){ let [like, setLike] = useState(0) return ( (생략) {like} { setLike((a) => { return a + 1 }) }}>❤ )}state를 만들고 +1 버튼도.. 2024. 9. 11. [React] state 변경 함수 사용할 때 주의점: async 자바스크립트의 sync / async 관련 상식자바스크립트는 일반적인 코드를 작성하면 synchronous(동기 방식)하게 처리하는데, 코드 적은 순서대로 코드가 실행된다는 뜻이다. 하지만 몇몇 함수(ajax, 이벤트 리스너, setTimeout 등)들을 쓸 때는 asynchoronous(비동기 방식)하게 코드가 실행된다. 이런 함수들은 처리 시간이 오래 걸리기 때문에 코드들이 순차적으로 실행되지 않고 완료되면 실행된다.console.log(1+1)axios로 get요청하고나서 console.log(1+2) 실행console.log(1+3)예를 들어 이런 코드를 실행하면 2, 4가 바로 출력되고 그 다음에 3이 출력된다.3을 출력하는 코드가 asynchoronous 처리를 지원하는 코드이기 때문이다. 3.. 2024. 9. 11. 이전 1 2 3 4 5 6 다음
