본문 바로가기

분류 전체보기346

JavaScript - 소수구하기 (에라토스테네스의 체) 소수는 자기 자신과 1 로만 나뉘어지는 수이다. 예를 들어 5 는 1 로만 나뉘어 질 수 있다. 자, 소수를 구하는 판별식을 정리해보았다. 이제 당신은 이걸 가지고 응용하기만 하면 된다 :) JavaScript 에서 소수인지 검사하기 위해서는, For 문으로 검사를 할 때, { number 이 0, 1 이면 탈락 → 1은 소수가 아님 number 가 2 이면 소수이다 → 2은 소수이다 number % index === 0 이라는 조건에 들거든 탈락 → 자기자신과 1로만 나뉘어져야 된다는 소수의 조건 성립이 X) } 방법 1) 반복문 함수 판별식 함수는 보기에 너무 간단하다. 하나하나씩 다 돌려서 소수에 부합하는 것을 찾아낸다. 시간복잡도는 O(N) 으로 무난하지만, 해당하지 않는 숫자까지 일일히 하나하나.. 2022. 12. 30.
React(89) 글 작성시간 계산함수 만들기 (몇분전/몇시간전/몇일전) 게시글 작성 시간을 현재시간 기준으로 표시해주는 유틸성 함수를 만들어 보려고 한다 moment.js 라이브러리를 활용하면 아 - 주 간편하게 시간계산함수를 만들수있다 그럼 몇 분 전, 몇 시간 전, 몇 일 전 을 표시하는 함수를 만들어보자 결과화면 미리보기 React(89) 글 작성시간 계산함수 만들기 (몇분전/몇시간전/몇일전) Date 객체로 작성시간을 매개변수로 받아오자 today 날짜를 구한뒤 diff 내장함수로 day, hour, minute 의 차이를 구하면 된다. export const getDayMinuteCounter = (date?: Date): number | string => { if (!date) { return ''; } const today = moment(); const pos.. 2022. 12. 28.
JavaScript - e.preventDefault() 와 e.stopPropagation() 의 차이점 특정 이벤트를 막고 다른 동작을 실행해야 하는 상황이 있다. 아래와 같이 안의 를 클릭하면, onClick 이벤트가 실행되야 하지만 현실은 다르다. href 를 통해 링크로 이동한다. console.log('클릭'}/> 그 이유는 이벤트 버블링 때문이다. 자식 → 부모 순으로 이벤트가 실행이 된다. 자식(온클릭) 이벤트 후, 부모(링크 이동) 이벤트까지 순서대로 실행되는 것이다 이럴 때 우리는 e.preventDefault()와 e.stopPropagation() 를 사용해서 부모까지의 흐름을 끊어주어 해결하였다. 그 시점에서 정확히 그 둘의 차이가 무엇인지 궁금해졌다. 실제 버블링 이슈를 어떻게 해결했는지 궁금하시다면 ... ? (아래 포스팅 클릭 ↓↓↓) React(55) 겹친 영역에서 자식 이벤트만.. 2022. 12. 26.
웹 최적화 - 구글 폰트 속도 빠르게 만들기 (TEST) 웹 사이트의 성능을 측정해 보았더니 구글 폰트를 다운 받는데 시간이 꽤 걸렸다. 브라우저 렌더링을 할 때, 폰트 다운로드가 끝날때까지 기다렸다가 다음 태그를 읽어와서 그런 것 같았다. 참고 블로그를 읽고 속성을 몇가지 수정해주었더니 놀랄만큼 개선 되었다. 최적화라는 게 대단한 기술과 지식을 요하는 거라고 생각했었는데, 약간의 관심을 더 가지고 찾아본다면 누구나 충분히 할수있는 개선점이라는 생각이 들었다. 자, 느낀점은 여기까지로 해놓고 얼마나 개선되었는지 확인하러 가보자 다음은 폰트 최적화를 위한 노력의 과정을 순서대로 담은 포스팅이다 :) 1. 구글 폰트 속도 빠르게 만들기 (Making Google Font Faster In 2022) - 이론을 먼저 공부해보자 웹 최적화 - 구글 폰트 속도 빠르게 .. 2022. 12. 13.
웹 최적화 - 구글 폰트 속도 빠르게 만들기 (Making Google Font Faster In 2022) 얼마전 웹사이트 속도를 측정하면서 구글폰트에 많은 시간을 할애한다는 것을 발견했다. 개선을 위해 이 아티클을 읽게 되었고, 아티클 기반으로 직접 테스트도 해본 과정을 포스팅해보려고 한다. 다음은 폰트 최적화를 위한 노력의 과정을 순서대로 담은 포스팅이다 :) 1. 구글 폰트 속도 빠르게 만들기 (Making Google Font Faster In 2022) - 이론을 먼저 공부해보자 웹 최적화 - 구글 폰트 속도 빠르게 만들기 (번역) 얼마전 웹사이트 속도를 측정하면서 구글폰트에 많은 시간을 할애한다는 것을 발견했다. 개선을 위해 이 아티클을 읽게 되었고, 아티클 기반으로 직접 테스트도 해본 과정을 포스팅해보려고 한 devbirdfeet.tistory.com 2. 구글 폰트 속도 빠르게 만들기 (TEST.. 2022. 12. 13.
JavaScript - 정규식 전화번호 입력시 하이픈(-) 추가하기 하이픈 (-) 없이 전화번호를 숫자만으로 입력했을때, 하이픈(-) 을 자동으로 추가해주는 정규식을 알아보자 아래와 같이 숫자로만 입력하면 → 하이픈이 붙어서 리턴된다. 정규식을 이용해보았다. const phone = 01012340000; phone .replace(/ /g, '') // 공백이 들어있다면 지워주고 .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`); // 숫자그룹을 나눠 사이에 하이픈(-)추가 // 결과 010-1234-0000 관련 개념 포스팅 정규식을 자세히 파보기 위해 관련 개념을 정리한 포스팅이다. JavaScript - 정규식 Regular expression updated 07/30/22 오늘은 정규식의 날이었다 정규식이 나를 애먹였지.. 2022. 12. 2.
React 실행오류 - rendered fewer hooks than expected (feat. Hook의 규칙) 어느날 새발자는 커스텀 훅을 만들다가 다음 메시지와 에러를 만나게 되었다. rendered fewer hooks than expected. this may be caused by an accidental early return 원인은 훅의 규칙를 몰랐던 것에서 비롯되었다. → 반복문 / 조건문 / useEffect 등 에서는 사용을 하면 안되고, 리액트 컴포넌트 내에서만 호출해야 된다. React 실행 오류 - rendered fewer hooks than expected. this may be caused by an accidental early return (feat. Hook의 규칙) 훅(Hook) 이라는 개념은 처음에는 어렵고 생소했지만 리액트 형식으로 포장된 커스텀 함수 정도로 이해를 하고 사용.. 2022. 11. 30.
JavaScript - 문자열인 숫자 여부 확인하기 타입은 String 인데 무늬만 숫자인 경우가 있다. '153' 이런 경우가 그렇다. 숫자인 척 위장한 스트링 녀석들의 값이 숫자인지 확인해주는 내장 메소드를 알아보자. (실제로 적용해본 코드 중심으로 하나씩 업데이트해나갈 예정) isNaN() console.log('aaa', isNaN('aaa' as any)); // true console.log('132', isNaN('13579' as any)); // false console.log('1,399', isNaN('1,399' as any)); // true ** BUT 여기서 '1,234' 세자리 콤마로 분리되는 숫자값이 들어가게 되면 isNaN('1,234' as any)는 string 으로 취급한다. 2022. 11. 26.
React(88) KST 에서 UTC 로 시작일/종료일 변환하기 (feat.moment) Updated 12/27/22 시작일과 종료일이 표시된 캘린더 컴포넌트가 있다. 당연히 유저입장에서는 한국시간(KST)으로 표기된다. 하지만 데이터를 넘길때는 UTC(국제표준시간)으로 변환해주어야 한다. 자 그럼 변환하려 가보자! (기본적인 지식으로 KST = UTC + 9시간 이라는 것을 기억하자) React(88) KST 에서 UTC 로 시작일/종료일 변환하기 (feat.moment) 자, 유저가 선택한 시작일과 종료일이다. 서버로 넘기는 결과일은 아래와 같이 UTC 로 변경되어야 한다. 특히 종료일은 선택한 날짜인 11 / 3 일(KST 기준) 의 23: 59: 59 초 까지로 표기 되어야 한다. (서버에서는 일(Date)까지가 아닌 시간(Time)까지도 보내줘야 하기 때문이다.) moment 라이.. 2022. 11. 17.
반응형

티스토리툴바