본문 바로가기

전체 글99

[React] useEffect의 cleanup, useLayoutEffect 최근 React 프로젝트를 진행하면서, useEffect에 대해 좀 더 유심히 알게 되었다. React 라이프 사이클 또는 useEffect의 클린업에대해 간단히 정리해보려 한다. useEffect를 자주 쓰게 되면 렌더링이 무분별하게 발생하고, 메모리 누수가 대량으로 일어나게 할 수 있다. 이를 방지하기 위해서는 useEffect 후 클린업 함수를 사용해 주어야 한다. useEffect(() => { const subscription = props.source.subscribe();//subscribe 이벤트 발생 return () => { // Clean up the subscription subscription.unsubscribe(); //subscribe 이벤트 해제 }; }); React 공식.. 2023. 3. 21. 00:37
[React] 디바운스(Debounce), 쓰로틀(Throttle) 디바운스(Debounce)와 쓰로틀(Throttle) - 디바운스와 쓰로틀 React상의 onChange 이벤트로 api의 요청을 계속해서 보낼 시, 서버의 과부하를 막기위해 사용한다. 쉽게 말하면 api 요청을 과도하게 할 경우 서버에 부담이 가기때문에, 이를 막기위한 하나의 방식이라고 생각하면 된다. 디바운스(Debounce) 이벤트가 일어나기 시작할때 여러번 호출이 발생한다면, 제일 마지막이나 제일 처음에 호출된 것만 실행하게 하는 것 디바운스 예제 function Input() { const [text, setText] = useState(''); const [tmpText, setTmpText] = useState(query); useEffect(() => { const debounce = se.. 2023. 3. 19. 21:38
컴퓨터 그래픽스 - 수학적개념 데카르트 좌표계 하나의 점(원점) 에서 수직으로 교차하는 직선 축으로 표현되는 좌표계 2차원 : x 축 y 축으로 이루어진 2차원 좌표게 3차원 : x축 + y축 + z축 동차좌표 - n차원 투영공간을 n + 1개의 좌표로 나타내는 좌표 - 2차원 동차좌표: (Xh, Yh, h ), h != 0 2차원 데카르트 좌표와 동차좌표 - 데카르트 좌표(x,y)에 대한 동차좌표는 다음과 같이 표현한다 (hx, hy, h) , h != 0 3차원 동차좌표 표현 데카르트 좌표 표현 동차좌표표현 (x, y, z) (xh, yh, zh, h) xh = hx, yh = hy, zh =hz, (h != 0) 예 데카르트 좌표 동차 좌표 (2, 8 ,4) => 동차 파라미터가 1일때 (2, 8, 4, 1) (1, 4, 2) .. 2023. 3. 19. 14:20
[Javascript] 웹 화면 캡쳐하기 (Javascript, Html2Canvas) 웹 화면 캡처하기 (Javascript, Html2Canvas) HTML의 특정 태그(div, canvas) 영역의 차트를 이미지로 다운로드하는 요구사항이 있어서, 그 방법을 찾고 정리해보려 한다. 방법은 두 가지가 있다. 1. javascript 코드로 이미지 다운 받기 2. html2canvas 라이브러리를 이용해 특정 영역 이미지로 다운받기 현재 내가 개발중인 프로젝트는 toast-ui chart와 chart.js 라이브러리를 사용하는데 chart.js 는 canvas 위에 그리고 toast-ui chart는 이전버전을 사용하고 있어서 div 태그 영역을 캡쳐 해야하는 상황이 생겼다. 그래서 두 가지 방법 모두 사용하였다. 첫 번째 방법 자바스크립트와 a태그를 이용한 다운로드 방법이다. 예시 ima.. 2022. 12. 28. 15:25
[Next.js] Vercel로 배포한 환경에 .env 환경 변수 등록하기 React + Next.js 기반의 프로젝트를 Vercel로 배포하려 하는데 개발 환경에서는. env가 잘 동작하지만 배포 시에는 Vercel이 이를 알지 못하고 github의. env파일도 읽지 못하기 때문에 따로 환경 변수의 Key와 값을 설정해 주어야 한다. - .env : 특정 API의 키 값 및 환경을 설정할 세팅값을 KEY와 VALUE로 저장하게 되는 파일이다. 기본 React를 사용할 때 env의 key값을 설정할 때는 "REACT_APP_ " 이라는 네이밍 규칙이 존재하고 Next.js 환경일 때는 "NEXT_PUBLIC_" 이라는 네이밍 규칙이 존재한다. 등록 방법 현재 배포되어있는 Vercel의 프로젝트로 들어간다. 그 다음 Settings를 클릭한다. 아래로 조금 내리다보면 왼쪽에 E.. 2022. 12. 22. 15:00
객체 지향 프로그래밍(OOP) 객체 지향 프로그래밍에 대해 정리해보려한다. 학원이나 객체 지향 프로그래밍에 대해 접할때는 이론적으로 추상화, 캡슐화, 다형성, 상속등의 특징들을 가지고 공부를 하였다. 이러한 특징들은 머리속에 둥글게 존재하고 있지만, 막 나에게 와닿지는 않았다. 그래서 다시 정리해 보려한다. 객체 지향 프로그래밍(Object-Oriented Programming) 객체 지향 프로그래밍은 현실 세계에 존재하는 모든 사물이나 객체(Object)를 코드로 표현하기 위해 객체의 기능이나 개념을 추출해 추상화하여 모델링하는 프로그래밍을 말한다. 우리가 현실 세계에서 보는 사물들을 인지하는 방식을 프로그래밍에 접목하려는 사상을 의미한다. 예를 들면 주변에 존재하는 사물 자동차, 옷, 건물 등 모든 것을 객체라고 할 수 있다. 이.. 2022. 12. 15. 00:37
[React] React 반응형 레이아웃 사용하기 + Typescript React에서 미디어쿼리나 화면 사이즈에서 대해 바뀌는 화면을 구현하기 위해 react-responsive 라이브러리를 사용했다. https://www.npmjs.com/package/react-responsive react-responsive Media queries in react for responsive design. Latest version: 9.0.2, last published: 10 days ago. Start using react-responsive in your project by running `npm i react-responsive`. There are 1036 other projects in the npm registry using react-responsive. www.npm.. 2022. 12. 9. 16:57
[인프런 강의] zerocho Slack 클론 코딩 (11) - 로그인 페이지 만들기 [인프런 강의] zerocho Slack 클론 코딩 (11) - 로그인 페이지 만들기 이번 시간에는 로그인 페이지를 구현 하도록 한다. SPA상에서 태그를 사용하면 화면이 새로고침이 되는 문제가 발생한다. 따라서 React-router의 Link 태그를 사용하면 SPA가 유지된다. 로그인하는 컴포넌트를 다음과 같이 작성한다 /aleacture/Login/index.tsx import useInput from '@hooks/useInput'; import { Success, Form, Error, Label, Input, LinkContainer, Button, Header } from '@pages/SignUp/styles'; import fetcher from '@utils/fetcher'; impor.. 2022. 12. 9. 13:48
React-activate 사용 중 'decorators-legacy' 오류 문제 상황 개발 도중 캐시를 구현하기 위해 React-activate 라이브러리를 사용하던 도중 @withActivation 어노테이션을 추가하니 Support for the experimental syntax 'decorators-legacy' isn't currently enabled (33:1): 와 같은 에러가 발생하였다. 해결 방법 해결 한 방법은 다음과 같다. 1. package-json의 babel ["@babel/plugin-proposal-decorators", { "legacy": true }] 을 추가해준다. "babel": { "presets": [ "react-app" ], "plugins": [ "react-hot-loader/babel", ["@babel/plugin-propo.. 2022. 12. 8. 14:58
728x90

티스토리툴바