본문 바로가기

전체 글351

React(90) useEffect 알아보기 (공식문서 정리) React 를 만지면서 useEffect 는 사실 1년 이상을 동거동락해왔다. 하지만 처음 강의를 들을 때 공부하거나 실무에서 그때그때 얻은 조각난 지식말고는 제대로 아는 게 없다는 것을 깨닫고 부끄러웠다. 그래서 리액트 공식문서 구버전과 신버전(beta) 을 참고하여 useEffect 에 대해서 조각난 퍼즐을 맞춰 정리해보았다. React(90) useEffect 에 대해서 (공식문서 정리) useEffect 는 리액트 16.8 에서 도입된 Hook(리액트의 내장함수)이다. 코드를 짜다보면 화면이 새로고침되거나(렌더링) 데이터가 뭐가 바뀔 때(업데이트), 어떤 함수가 실행되야 할 때가 있다. 얘는 그런 needs 가 탄생시킨 함수이다. side effects 는 렌더 후에 일어나는 코드의 실행을 말하고.. 2023. 1. 19.
JavaScript - 조합 구하기 (재귀함수) 조합은 순서 상관없이 경우의 수를 구하는 것이다. 그림을 보면 한번에 이해가 될 것이다. [1,2,3] 배열의 경우 [1,2], [2,3], [1,3] 이렇게 세가지 조합이 나온다 JavaScript - 조합 구하기 (재귀함수) 조합을 구하기 위해서는 재귀함수를 응용한다. 반복문으로 구할 수 있지만 일일이 구하고자 하는 숫자만큼 반복해주어야되어 코드가 길고 복잡해질 수 있기 때문이다. // 1 function getCombination(arr, selectNum){ const result = []; // 결과값을 담은 배열선언 if(selectNum === 1) { // selectNum 이 1 일 떄 (재귀함수의 종료조건, 탈출구!) return arr.map(item => [item]) // ex) .. 2023. 1. 4.
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.
반응형

티스토리툴바