728x90 JavaScript97 [JavaScript] Number(), parseInt() 함수의 차이점 ? Number() 와 parseInt() 는 문자열을 숫자로 변환시켜 주는 역할을 한다. 1. Number() Number()은 숫자 객체를 생성하는 생성자 함수이다. 인자로 들어온 값을 number 타입으로 변환해준다. 변환될 수 없는 값이 들어오면 NaN(Not a Number)을 리턴한다. 2. parseInt() parseInt()는 문자열 타입의 매개변수를 정수로 리턴해주는 함수이다. Number()와 달리 두 가지 매개변수를 받을 수 있으며, 두 번째 매개변수는 옵션이다. 숫자와 다른 문자가 섞여있을 경우 (e 제외) Number(): 변환하지 못하고 NaN을 리턴한다. Number('13px'); // NaN parseInt(): 무시하고 숫자만 찾아내 그것만 숫자로 바꾸어 리턴한다. 16진수.. 2023. 9. 23. [React] 다시보지않기 / 24시간보지않기 팝업 Home 접근 시 뜨는 팝업 구현 Local Storage에 날짜 및 시간을 담고 Home에 접근 시 Local Storage에 있는 Date을 현재 날짜/시간과 조회하여 조건에 따라 팝업을 노출해준다. 일단 Home에서 state를 만들어주고 제어를 해 준다. // Home.js import { useEffect, useState } from "react"; import MainPopup from "../components/mainPopup"; function Home() { const [showMainPop, setShowMainPop] = useState(false); // 기본 세팅 값은 false const HOME_VISITED = localStorage.getItem("homeVisited".. 2023. 8. 30. [JavaScript] aiax 사용하여 더보기 구현하기 HTML 리스트 더 보기 test1 dddd test2 dddd test3 dddd test4 dddd test5 dddd test6 dddd test7 dddd test8 dddd test9 dddd test10 dddd test11 dddd test12 dddd test13 dddd test14 dddd test15 dddd test16 dddd test17 dddd test18 dddd test19 dddd test20 dddd test21 dddd test22 dddd test23 dddd test24 dddd test25 dddd 더보기 (C) by ddory CSS .js-load { display: none; } .js-load.active { display: block; } .is_comp.. 2023. 8. 26. [JavaScript] CKEditor5 텍스트에디터 사용하기 https://ckeditor.com/ WYSIWYG HTML Editor with Collaborative Rich Text Editing Rock-solid, Free WYSIWYG Editor with Collaborative Editing, 200+ features, Full Documentation and Support. Trusted by 20k+ companies. ckeditor.com CKEditor란? 콘텐츠를 웹 페이지나 온라인 애플리케이션에 직접 작성할 수 있게 하는 위지위그 리치 텍스트 에디터이다. 일반적으로 게시판에 글을쓸때 쉽게 편집을 할 수 있도록 도와주는 툴이다. 만들기 npm create-react-app react-board app.js import './App.css'.. 2023. 8. 25. [Next.js] Next.js의 장점과 렌더링 과정 Next.js 정적 랜더링과 서버 사이드 랜더링을 제공하는 React Framework다. 장점 서버사이드 렌더링 pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올 수 있게 해주므로 사용자에게 더 좋은 경험을 주고, 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO의 장점을 가질수 있다. Hot reloading 개발 중 저장 되는 코드는 자동으로 새로고침 된다. 구성 _app.tsx 최초로 실행되는 것이 _app.tsx 인데, _app.tsx 에서 렌더링 하는 값은 모든 페이지에 영향을 준다. _document.tsx meta태그를 정의하거나, 전체 페이지에 관련한 컴포넌트이다. Next.js 렌더링 과정 Pre-Rendering Next.js 는 서버 사이드에서 먼저 페이지를 P.. 2023. 8. 24. [jQuery] 제이쿼리로 최상단으로 부드럽게 스크롤 이동하기 상단으로 $("html, body").animate({scrollTop:0}, '500'); : 페이지의 상단으로 스크롤을 부드럽게 이동하는 애니메이션을 시작한다. {scrollTop:0}는 스크롤의 Y 좌표를 0으로 이동시키는 것을 의미하며, '500'은 애니메이션의 지속 시간을 밀리초 단위로 설정한다. 즉, 0.5초 동안 애니메이션이 진행된다. return false; : 클릭 이벤트 후에 기본 동작을 취소한다. 버튼 클릭 시 페이지의 스크롤 이동을 방지한다. 요약 : '상단으로' 버튼 클릭 시 페이지가 맨 위로 부드럽게 스크롤되는 효과를 구현하였다. https://sorydory.tistory.com/entry/%E3%84%B1-21 [JavaScript] 간단하게 최상단으로 위치 이동하기 oncl.. 2023. 8. 14. [JavaScript] 간단하게 최상단으로 위치 이동하기 onclick사용 TOP div가 아니라 span이나 td 등을 사용해도 됨. cursor:pointer 는 마우스 커서를 손가락 모양으로 변경해 주는 스크립트다. onclick 이벤트에 window.scrollTo 를 사용해서 (x,y) 를 (0,0) 으로 이동 시켜 주는 스크립트. 클릭시 최상단으로 이동된다. 2023. 8. 13. [JavaScript] javascript:void(0); 란? void ? : “아무것도” 반환하지 않는다. 함수가 비어있단(void) 뜻은, 그 함수가 아무것도 반환하지 않은 것을 의미한다. 자바스크립트에서 함수가 직접적으로 undefined을 반환하는 것과 비슷하다. javascript:void(0) 란? javascript: 이것은 가상 URL이라고 할 수 있다. 브라우저에서 태그의 href의 값으로 javascript:을 받는다면 이 값을 참조된 경로로 취급하지 않고, 쌍점(:) 뒤에 오는 것을 자바스크립트의 코드로 해석한다. void(0) 란? void 연산자는 주어진 표현식을 평가하고 undefined를 반환한다. const result = void (1 + 1); console.log(result); // undefined 1 + 1의 연산은 실행이 되.. 2023. 8. 3. [JavaScript] 함수 선언식 vs 함수 표현식 ? 함수 선언식, 함수 표현식? 1. 함수 선언식 (function declartion) 함수명이 정의되어 있고, 별도의 할당 명령이 없는 것 function sum(a,b) { return a + b; } 2.함수 표현식 (function Expression) 정의한 function을 별도의 변수에 할당하는 것 const sum = function(a,b) { return a + b; } 차이점 ? 호이스팅에서 차이가 발생한다. 함수 선언식은 함수 전체를 호이스팅 한다. 정의된 범위의 맨 위로 호이스팅되서 함수 선언 전에 함수를 사용할 수 있다는 것이다. 함수 표현식은 별도의 변수에 할당하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅 하게 된다. 선언부만 호이스팅하게 된다. 2023. 7. 25. [React] useReducer (React Hooks) useReducer 훅 ? - useState를 대체할 수 있는 함수 - React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 state이다. - 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용할 수 있다. ( 콜백대신 dispatch를 전달할 수 있기 때문이라고 볼 수 있다.) - reducer는 이전 상태와 Action을 합쳐, 새로운 state를 만드는 조작을 말한다. useReducer를 사용하기 위한 구성요소 ? 1. useReducer 함수 import React, { useReducer } from "react"; const [state, dispatch] = useReducer(reducer, initialState, init); 1. state -.. 2023. 7. 24. 이전 1 2 3 4 ··· 10 다음 728x90
