onClick hook 예제 className 변경 컴포넌트 분리 onChange ref 1) onClick import React from 'react'; const Test1 = () => { const handleClick1 = () => { alert('HELLO') } const handleClick2 = () => { alert('WORLD') } const handleClick3 = () => { alert('안녕 세상') } const make = (num) => { alert(num) } const make1 = (x, y) => { alert(`${x}, ${y}`) } return ( BTN1 BTN2 BTN3 { console.log(4) }} >BTN4 console.log(5)}..

React 설치 React 기초 React 예제 1) React 설치 1-1) Node.js 설치 https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org * 안정성 때문에 current 버전이 아닌 LTS 버전을 받고 설치했다. 1-2) yarn 설치 js 패키지 관리를 위한 yarn 설치해 준다. https://classic.yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com 1-3) VScode 확..

css / SCSS / Sass css와 차이점 SCSS 사용 방법 SCSS 문법 예제 1) css / SCSS / Sass 기존에 html의 style을 변경하고자 할 때 css를 사용했다. 기본적인 컴퓨터 언어에 대한 이해도가 생긴 지금 react.js를 배우기 앞서 react에서 많이 활용할 수 있는 SCSS / Sass를 배웠다. 간단하게 배운 내용을 복기해 보면 css보다 좀 더 사용성이 좋고 편리하며, 부가적인 기능(함수, 연산자 등)을 쓸 수 있다는 점이 새로웠다. 2) css와 차이점 https://sass-lang.com/guide Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you..

localStorage 기초 localStorage 형식변환 localStorage 예제 1) localStorage 기초 localStorage.setItem('key', 'value') localStorage.getItem('key') localStorage.removeItem('key') localStorage.clear() 전체 제거 localStorage.key( index ) localStorage.length localStorage는 문자값으로 처리되며 { key : value } 형식으로 저장된다. 위 코드처럼 단순 값만 출력하게 되면 새로고침 시 내용이 모두 사라지게 된다. 하지만 localStorage를 사용하게 되면 local에 저장되기 때문에 마지막으로 입력한 값이 나오도록 해 보았..

module 사용법 import default module 합치기 module 예제 1) module 사용법 module을 사용하면 script를 여러 파일로 분리한 후 사용할 수 있다. array, function, class 등을 하나의 파일로 분리해 필요할 때 불러와 사용한다. 확장성, 유지/보수, 디버깅에 용이하다는 장점이 있다. export function make1(msg){ console.log(msg, 'make1'); } export function make2(msg){ console.log(msg, 'make2'); } export function make3(msg){ console.log(msg, 'make3'); } javascript 파일을 따로 만든다. html의 script에 ..

Mdia Query 기초 예제 1 예제 2 css 처리 방법 1) Mdia Query 기초 웹 페이지를 보는 단말기의 해상도에 따라 출력되는 화면의 UI배치, 구성들이 달라지게 된다. 이를 적용시키려면 css style에 media query를 추가해 주면 된다. 위와 같이 @media를 사용해 너비가 1500px이상, 768~1499px, 0~767px 일 때 style을 적용할 수 있다. 2) 예제 1 이처럼 단순하게 color만 바꾸는 것이 아닌 display를 변경해 가로, 세로로 나열할 수도 있다. 3) 예제 2 위에서부터 PC, 태블릿, 모바일 환경에서 각각 다르게 출력되는 것을 구현해 보았다. 4) css 처리 방법 4-1) css 하나에 태블릿, 모바일 작성 media query를 두 개로..

jsonplaceholder news pixabay 1) jsonplaceholder jsonplaceholder post api를 이용해 게시판을 만들어 보았다. https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month. jsonplaceholder.typicode.com await와 fetch를 사용해 비동기통신을 하고, 총 페이지와 페이지당 표시될 post 숫자..

pc버전에선 순수 javascript인 vanilla script로 구현을 했고, mobile 버전에선 swiper 플러그인을 사용했다. 호텔 | 제주시 서부 WH호텔 제주 229,000 원 리조트 | 제주시 동부 한해리조트 88,000 원 펜션 | 제주시 히든클리펜션 301,000 원 let swiper1 = new Swiper(".mySwiper_rec", { slidesPerView: 1, spaceBetween: 30, loop: true, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, on: { ..

async / await fetch axios insertAdjacentHTML 데이터 출력 예제 1) async / await const test = () => { return new Promise((resolve, reject) => { setTimeout(() => { console.log('1번 실행'); resolve(); }, 2000); }); }; const test1 = () => console.log('2번 실행'); console.log('시작'); const make = async () => { await test(); test1(); } make(); 시작 1번 실행 2번 실행 async은 Promise 기반이라고 생각하면 된다. await는 async가 처리 될 때 까지 기다린 ..