본문 바로가기

개발64

[React] useTransition 알아보기 useTreansition hook api useTransition은 React 18에 들어오면서 새로 도입된 함수이다. 바로 공식문서의 예제를 보면서 정리하겠다. function App() { const [isPending, startTransition] = useTransition(); const [count, setCount] = useState(0); function handleClick() { startTransition(() => { setCount(c => c + 1); }); } return ( {isPending && } {count} ); } useTreansition 함수의 반환값은 isPending , startTransition 으로 설정된다. isPending은 현재 작업이 지연.. 2023. 3. 26. 23:18
[IntelliJ] 프로젝트 properties 파일 유니코드 한글 변환법 인텔리제이를 처음 사용하면서, 사용방법이나 환경설정에 대해 간단하게 정리해보려 한다. 인텔리제이를 설치하고, .properties파일의 한글이 유니코드로 보이는 경우에 환경설정에 대해 정리한다. 보통 메세지를 프로퍼티 파일로 정리해 놓는데 이 파일이 유니코드로 변환되어 저장된다. [/resource/messages/해당 properties]파일이 경로에 존재한다. properties에는 다음과같이 유니코드 형태로 나온다 해결 방법 1. inteliJ 상단에 환경설정 아이콘을 누른다. 2.preferences를 클릭한다. 3. preferences 에서 File Encodings를 클릭하고 - Global Encoding : UTF-8 - Project Encoding : UTF-8 - 하단 Transpa.. 2023. 3. 24. 10:48
[React] lodash를 활용한 debounce lodash를 활용한 debounce 이전 포스팅에서 디바운스와 쓰로틀링에 대해 정리하였다. Javascript를 사용할 때 아주 유용한 라이브러리 lodash란 라이브러리가 있다 이 라이브러리를 이용하면, debounce 이외에도 자바스크립트에서 지원하지 않는 편한 함수들을 지원해 준다. 공식 사이트는 아래와 같다. https://lodash.com/ Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences &.. 2023. 3. 23. 00:21
[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
728x90

티스토리툴바