본문 바로가기

전체 글350

React(44) 리액트 훅 - useMemo 란? memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. 작성된 컴포넌트 함수는 React 앱에서 랜더링(rendering)이 일어날 때마다 호출이 됩니다. 컴포넌트 함수가 호출이 되면 그 안에 자바스크립트 로직들이 수행되고, 이를 기반으로 JSX로 마크업된 UI가 리턴되는 기본 구조를 가지고 있죠. React에서 컴포넌트의 랜더링은 한 번 일어나고 끝이 아니라 수시로 계속 일어날 수 있습니다. 랜더링마다 호출되는 컴포넌트 함수 useMemo란 성능 최적화를 위하여 연산된 값을 재사용.. 2021. 9. 9.
Git(29) git stash 란 요즘 git 을 중점적으로 사용하다 보니 git 에 대한 포스팅이 많다. 그만큼 지식과 대처능력도 쌓여가리라 믿는다 :) 오늘은 git stash 에 대해 중점적으로 알아보자. Git(29) git stash 란 - git stash 사용하기 git stash 는 내가 작업하던 코드만 싹 긁어서 임시 공간에 저장해준다. (클립보드 같은 느낌이랄까) 내 브랜치는 { 마스터 + 그 뒤로 작업한 코드 } 상태이다. 작업한 코드만 싹 잘라내기(git stash)하고, 임시공간에 따로 저장해놓는다. 내 브랜치는 { 마스터 } 만 남는다. 어딘가에 { 그 뒤로 작업한 코드 } 가 따로 임시 저장된다. 커밋 이 후에 작업을 했다. const ItemDetail = (): ReactElement => { return .. 2021. 9. 8.
React(43) 리액트 훅 - useCallback 이란 내가 사용하면서 느낀 useCallback 은 리액트 전용 콜백함수라는 느낌이 강했다. 보통 자바스크립트만 사용하다가 callback 지옥을 경험해봤다는 목격담을 많이 전해들었다. (후덜덜) 다행히도 리액트에서는 콜백함수가 쓰이지 않는다. 그렇지만 가끔씩 비슷하게 써야할 때가 있다. 자 그럼 useCallback() 이 무엇인지 알아보자. React(43) 리액트 훅 - useCallback 이란 - 내가 이해해본 useCallback() useEffect 는 (() => { 두번째 배열 [test] 라는 변수에 변화가 있을 때만 렌더링을 새로 하는 것 처럼 }, [ test ]) useCallback 도 (function() { 두번째 배열 [test] 라는 변수에 특정 변화가 있을 때만 함수를 새로 .. 2021. 9. 7.
React - 타입스크립트 실행오류 Type 'undefined' is not assignable to type 리액트에서 타입스크립트를 사용하다가 에러가 났다. 강의만 들어봤고, 처음 사용해보았던 터라 당황했지만 차근차근 해결해 나갔다. 처음에는 타입스크립트만 쓰지 않았더라면 이런 고생을 하지 않고 진작에 개발이 끝났을 텐데 하는 불평도 많이 들었다. 그렇지만 쓰다 보니 변수 관리가 훨씬 잘된다는 사실을 깨달았다. 그리고 이 포스팅은 내가 겪은 이슈들의 기록이다. 언젠가는 쌓이겠지 휴 ... (Updated 02/21/22) 오랜만에 예전에 쓴 포스팅을 봤는데 추가할 부분이 있어 수정해보았다. 아직도 부족하다고 생각하지만 몇 개월전의 나를 보니 정말 쌓이긴 하는 것 같다. React - 타입스크립트 실행오류 Type 'undefined' is not assignable to type props 를 넘겨주다 발생한.. 2021. 9. 6.
Git(28) git reset 으로 삭제한 커밋 원래대로 되돌리기 git pull 을 받고 컨플릭트를 해결하려다 git reset --hard 으로 마지막 커밋을 삭제하였다. 자 reset 을 취소하고 삭제했던 커밋을 되돌려보자. 이렇게 취소할 수 있는 이유는 Git 에서 커밋, 체크아웃, 머지, 등의 이력을 모두 기록하기 때문이다. Git(28) reset 으로 삭제한 커밋 원래대로 되돌리기 일단 로그를 확인해야 한다. 돌아가야 할 로그를 확인하고 명령어를 통해 다시 돌아가보자. 1. ref로그 확인하기 HEAD 는 마지막 커밋의 참조로 가장 최신 커밋 을 가리키는 좌표같은 것이다. - HEAD@{0} 은 현재 상태를 가리킨다. ex) reset 해서 마지막 커밋이 삭제된 상태 - HEAD@{1} 은 마지막 명령어가 실행된 상태이다. ex) 마지막 커밋을 한 상태 -.. 2021. 9. 5.
React(42) 리액트 훅 - POST 방식으로 요청 보내기 통신 "영단어 새로 추가해줘" (Create) "영단어 목록 좀 보여줘봐" (Read) "영단어 수정 좀 해줘" (Update) "영단어 지워줘" (Delete) 클라이언트는 서버에게 요청을 보낸다 이 때 API라는 체계를 이용해 클라이언트와 서버 간에 요청과 응답을 주고 받는다. 이 때 CRUD 방식을 사용한다. CRUD 클라이언트가 서버에게 요청을 보낼 때 이 요청들을 크게 4가지 성격으로 분류할 수 있다. CRUD라고 불리는 이 4가지 대표적인 요청에 대해 살펴보자. Create = POST create는 서버에 정보를 올려달라는 요청이다. ( 생성 ) create는 POST 메서드를 사용해 해당 URI를 요청하면 리소스를 생성한다. Read = GET read는 서버에서 정보를 불러오는 요청이다... 2021. 9. 4.
반응형

티스토리툴바