전체 글

https://print-blue.tistory.com/191 [JavaScript ] 예시 1. 순수한 자바스크립트 페이지# p240530/react/ex01-javascript.html 상품 1 페이지 추가 🤍  기본 페이지기능 1. 좋아요 버튼 클릭시 하트 색 변경&이미지 추가된 모습\print-blue.tistory.com 그 전 작업과 동일하지만 component 기반으로 수정해보자 !이 전 작업은 생략 ! script 영역function H1(props) { return 상품 1페이지{ props.children }}function H1(props) { return 상품 1페이지{ props.children }} const Form = () => { // 함수 표현식 익명 함수 ret..

Babel Babel is a JavaScript compiler. 즉 자바스크립트 컴파일러이다 ! 자바스크립트는 인터프리터 언어인데 왜 컴파일러가 필요하지 ? 라는 생각을 가질 수 있다 !정확히는 babel 이 javascript 로 결과물을 만들어주는 컴파일러다 트랜스파일(transpile) 라 불림 ! https://bravenamme.github.io/2020/02/12/what-is-babel/ babel 이란 무엇인가?들어가며 최근에 react 프로젝트와 typescript 프로젝트를 거치면서 webpack 을 자주 써보고 세팅해보게 되었습니다. 처음에는 동작의 원리보다 요즘 잘나가는 프론트엔드 개발 환경 만들기라는 목표bravenamme.github.io

1. 자바스크립트로 구현# p240530/react/ex01-javascript.html 상품 1 페이지 추가 🤍  기본 페이지기능 1. 좋아요 버튼 클릭시 하트 색 변경&이미지 추가된 모습 2. 자바스크립트를 리액트 JSX 문법으로 변환head 영역React 추가하기 위해 스크립트 태그 추가 !(https://ko.legacy.reactjs.org/docs/add-react-to-a-website.html) body 영역추가할 위치(element)..

1. 내장타입우선 자바스크립트에서 내장타입이라고 불리는 7가지 자료형이 존재한다.nullunderfinedbooleannumberstringsymbol(es6부터)object7가지 중 object 를 제외한 모든 값은 변경 불가능한 값(불변값) 이며, 이 6가지 자료형은 기본 자료형이라 한다 ! 2. 네이티브(native) native 는 다른 언어로 되어 있기 때문에 보여지지 않는다

JavaScript 1. 모달 띄우기 버튼 클릭 시 모달창 활성화, 모달창 닫기 버튼 클릭시 비활성화변수명에 element 저장const modal = document.querySelector('.modal');const overlay = document.querySelector('.overlay');const btn_modal = document.querySelector('#btn-modal');const btn_close = document.querySelector('.btn-close');const close_elements = [btn_close, overlay];https://print-blue.tistory.com/186 [Javascript] Element.classList 속성, 자바스크립..

console.log('>');console.log('null : ', Boolean(null));console.log('0 : ', Boolean(0));console.log('-5 : ', Boolean(-5));console.log('빈 배열 [] : ', Boolean([]));console.log('빈 객체 [] : ', Boolean({}));

웹 브라우저는 Application 에 web local storage 에 정보가 남아있는데, 여기서 가져올 것 ! 가져오는 함수가 있음 !단점 : 다른 웹 브라우저 사용시 보여지지 않음[저장하기 / 가져오기]localStorage.setItem(key, value);localStorage.setItem('문자열', '문자열');localStorage.getItem(key);localStorage.getItem('문자열'); 값 저장하기/가져오기// 1-1. 저장하기localStorage.setItem('name', '홍길동'); 확인해보면 개발자 도구에서 Application 에 Storage -> local storage 에 보면 저장된 값을 확인할 수 있다 !새로 고침해도 저장된 값이 지워지지 않는..

Element.classList 속성다양한 메서드를 통해 클래스를 간편하게 제어할 수 있다 !classList 자체는 읽기 전용 속성이지만 add() 와 remove() 메서드를 이용해 변형할 수 있다 ! 1. add()classList.add('클래스명') : 클래스 하나 추가classList.add('클래스명a', '클래스명b', '클래스명c',) : 클래스 여러개 추가2. remove()classList.remove('클래스명') : 클래스 하나 제거classList.remove('클래스명a', '클래스명b', '클래스명c',) : 클래스 여러개 제거