리액트

[JS] 마우스 이동 방향 판단하기

마우스 이동방향을 감지하는 가장 쉬운 방법은 이전에 위치했던 마우스 좌표값과 현재 마우스 좌표 값의 대소를 비교하는 것입니다. 코드 See the Pen mouse movement direction by hyukson (@hyukson) on CodePen. 코드 풀이 // 이벤트 생성 window.addEventListener("mousemove", getMouseDirection); 마우스의 이동을 감지하는 대표적인 이벤트로는 mousemove가 존재합니다. addEventListener 함수를 이용해서 마우스 이벤트를 생성해줍니다. let prevX = 0, prevY = 0; // 이전에 있던 좌표 function getMouseDirection(event) { const xDir = prevX

[JS] 드래그 이동이 가능한 draggable 요소 만들기

JQuery에 존재하는 draggable 메서드를 직접 순수 자바스크립트로 제작할 수 있습니다. draggable 메서드는 지정한 요소를 드래그로 이동시킬 수 있도록 만들어줍니다. 이때 draggable로 설정된 요소는 position: absolute 속성을 가지게 되며, left, top 속성으로 움직이게 됩니다. 코드 See the Pen Draggable HTML Element by hyukson (@hyukson) on CodePen. 코드 풀이 drag 먼저 드래그 이동이 가능하도록 만들 요소를 하나 생성해줍니다. let isPress = false, // 마우스를 눌렀을 때 prevPosX = 0, // 이전에 위치한 X값 prevPosY = 0; // 이전에 위치한 Y값 const $tar..

[JS] 클립보드에 특정 텍스트 복사하기

코드블럭 오른쪽 상단바에 존재하는 "복사 아이콘"을 클릭해보세요! "Ctrl + C" 단축키와 같은 기능 또는 블로그에 새로 추가한 "코드 복사" 기능을 웹 상에서 구현하기 위해서는 특정 텍스트를 클립보드에 추가시켜줘야 합니다. 코드 클립보드와 상호작용하는데 가장 많이 사용되는 document.execCommand() 방법을 사용하여 쉽게 구현할 수 있습니다. document.execCommand("copy") - 클립 보드에 텍스트 복사 기능 document.execCommand("cut") - 클립 보드에 텍스트 잘라내기 기능 document.execCommand("paste") - 클립 보드에 이미 존재하는 내용을 붙여넣기 기능 해당 기능은 input, textarea와 같은 입력창에 입력된 값 중..

[React] 동적으로 HTML 코드 추가하기

html 태그를 유동적으로 사용하기 위해서 기존 JavaScript에서는 innerHTML을 사용하여 바꿔주었지만, React에서는 해당 방법을 사용하는 것은 엄청나게 비효율적입니다. 텍스트로 구성된 HTML 태그를 추가하기 위해서는 React에서 정한 특정 규칙을 사용해야 합니다. 코드 React에서 dangerouslySetInnerHTML={{ __html: Code }} 와 같은 형식으로 사용하면 됩니다. const html = "가나다라"; const Main = () => { return ( ); } export default Main;

[JS] 두 날짜 사이의 일수 구하기

코드 const getDateDiff = (d1, d2) => { const date1 = new Date(d1); const date2 = new Date(d2); const diffDate = date1.getTime() - date2.getTime(); return Math.abs(diffDate / (1000 * 60 * 60 * 24)); // 밀리세컨 * 초 * 분 * 시 = 일 } getDateDiff("2021-09-01", "2021-10-01"); // 30 코드 풀이 두 날짜의 밀리초의 차이(date1 - date2 수식)를 통해서 두 날짜의 차이 값을 계산해 주는 방법입니다. 차이 값을 하루의 밀리초인(1000 * 60 * 60 * 24)으로 나눠주면 밀리초가 아닌 일 단위 값을 얻..

[React] 컴포넌트(Component) 에 대해

컴포넌트는 템플릿 이상의 기능을 수행합니다. 데이터를 UI로 만드는 가장 최소한의 단위 모듈을 의미합니다. 독립적이며, 재사용 가능하게 만든 부품 조각들을 의미하며 리액트로 만들어진 홈페이지는 즉 컴포넌트의 조합입니다. 근본적으로 컴포넌트는 데이터를 입력받아 DOM Node를 출력하는 함수를 뜻합니다. Props를 받아 Node를 랜더 하는 함수에 가까운 개념입니다. props React에서 props는 변하지 않는 데이터입니다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용합니다. 컴포넌트에 props로 전달하는 방식은 아래와 같이 사용합니다. // const Modal = (props) => { return ( { props.name } ); } 컴포넌트에 전달되는 props는 객체 형태로 전달되며..

[React] 리액트를 사용하는 이유

1. 리액트를 사용하는 이유 흔히 우리가 자주 보는 Instagram, facebook 같은 사이트의 새로고침이 없이 변경되는 모습, 마치 앱처럼 보이는 동적인 웹 페이지 SPA(Single Page Application), CSR(Client Side Rendering)의를 사용한 페이지라고 할 수 있습니다. 정적인 페이지는 웹 서버에 이미 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지입니다. 단순한 기업소개 페이지는 유저의 인터랙션은 중요하지 않는 요소로 볼 수 있기에 단순한 HTML과 CSS로만으로도 구현이 가능합니다. 정적, 동적 페이지. 동적인 페이지는 유저의 행동과 흐름에 따라 웹페이지의 구성을 달리해주어야 하는 페이지를 말합니다. 즉 유저의 요청 정보를 처리한 후 제작한 ..

[JS] 현재 날짜, 시간 포맷 (YYYY-MM-DD hh:mm:ss)

YYYY-MM-DD HH:MM:SS const TIME_ZONE = 9 * 60 * 60 * 1000; // 9시간 const date = new Date('2021-08-05 09:51:31'); new Date(date.getTime() + TIME_ZONE).toISOString().replace('T', ' ').slice(0, -5); // 2021-08-05 09:51:31 toISOString() 메서드는 "YYYY-MM-DDTHH:mm:ss.sssZ" 형식으로 정보가 반환되며, replace(), slice(0, -5)으로 불필요한 정보를 제거해줍니다. 해당 메서드에서 출력되는 시간은 UTC(미국) 기준으로 출력됩니다. 이를 대한민국 서울 시간에 맞추기 위해서 3240 * 10000(9시간..