본문 바로가기

분류 전체보기339

타입스크립트 기본 내용과 헷갈리는 부분 정리 타입 스크립트 기본 let 변수명 :타입지정 = let 변수명:string[] let 변수명:{key:string} let 변수명: string | number type 키워드를 사용하면 타입을 변수처럼 사용 가능하다, type 변수타입 = string let 변수명: 변수타입 = 'hello-kk' 내가 만든 타입도 가능한데, 이 경우에는 타입으로 넣어준 값만 대입 가능하다. type helloType = 'hello-kk' let 변수명: helloType = 'hello-kk' 함수 타입 function 함수명(x :string) :void{ console.log(x) } 함수에서 타입이 확실하지 않은 경우, narrowing 또는 assertion 문법을 사용해야 오류가 없다. if (typeof.. 2023. 3. 28.
Virtual DOM 실제 DOM을 복사한 게 가상 돔 수정할 element, 그의 하위 element를 찾아서 교체 가상돔은 실제 브라우저 화면에 접근하는게 아니기 때문에 가볍다. 리액트는 2개의 가상돔 객체를 갖고 있다. 1. 렌더링 이전 가상돔 2. 렌더링 이후 가상돔 Diffing: 둘을 비교해서, 어떤 지점이 바뀌었는지 찾아낸다. Batch Update: 만약 10개의 요소가 바뀌었다면 10번에걸쳐서 바꾸는게 아니라, 변경된 모든 부분을 한번만에 집단으로 바꾼다) 변경된 돔만 수정 Reconsiliation 재조정 과정: Diffing 파악 후, Batch(집단) Update하는 과정 2023. 3. 23.
Ant-Design InternalTable https://github.com/ant-design/ant-design/blob/master/components/table/InternalTable.tsx https://ant.design/components/table 2023. 3. 22.
state 란? 무엇인가 . . .🙄 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다. 거의 내가 알고있는 개념에 부합하는데, 최근에 데이터를 state로 관리하면서.. 코드를 분리할 때 데이터와 state에 대한 고민을 많이 했다. 초반 고민은 데이터 관련된 로직이 너무 길었기 때문에 코드를 다른 파일로 분할하는 것 이었다. 1. axios로 받은 500개 가량의 객체 데이터들을 받고 2. 해당 데이터를 state로 저장한다. 3. 데이터를 필터링 한다. (해당 데이터를 state로 저장한다.=> 동적인 데이터라고 생각) 4. 데이터를 정렬한다. (해당 데이터를 state로 저장한다.=> 동적인 데이터라고 생각) 5. 렌더링을 한다. 그래서 코드를 분리하려고 했고, 시도해본 방법은 크게 두가지였다... 2023. 3. 22.
커링 curring 의문점1. 왜 매개변수를 쪼개서 사용해야 하지? 2. 사용되는 형태를 찾아보기 3. 헷갈리는 점은 매개변수에 콜백 함수가 들어올 때 인 것 같다. 4. 모던 javascript 예제는 어렵게 느껴진다.. 쉬운 글부터 찾아서 읽어봐야지 5. 리턴 되고나면.. 그 이후의 상황.. 이전 매개변수를 어떻게 사용할수가 있지? => 그러면 무조건 const 함수2 = 함수1(x) 형태의 표현식을 사용해서 할당해야 하는건가?.. 그렇다고 하더라도.. 매개변수가 유지되는 건가? 일단 매개변수 n개 중 m개만 미리 받아둠 나중에 n-m개를 받아서 중간에 리턴문이 들어갈수가 있나? 아니면 중간 클로저 어딘가에 지역변수가 사용되거나? const FuncA = (x) => (y) => { return x + y } const.. 2023. 3. 17.
React.memo 실험 이전에도 React.memo 개념글을 작성한 적이 있는데, https://hello-kk.tistory.com/679 리-렌더링을 막기 위한 방법으로 다시 접근해보니 새로워서 다시 정리했다. //App.jsx import { Fragment, useState } from "react"; import Tmp from "./Components/Tmp"; function App() { const [state, setState] = useState(1); const handleButton = () => { setState((prev) => prev + 1); }; return ( hi~ {state} 버튼 ); } export default App; (1) React.memo를 사용하지 않은경우 버튼을 매번 클.. 2023. 3. 17.
state 관리 대상 줄이기를 고민하다가 => useMemo, useCallback까지 useState를 사용해서 state를 관리할 때, 렌더링을 고민하게 되면서 state 변수와 관련되어 있지만 직접적으로 렌더링에 관여하지 않아도 되는 함수 혹은 변수에 관심이 생겼다. 'state와 구분해서 사용한다면 렌더링 되는 횟수를 줄일 수 있지 않을까?' 같은 의문에서 포스팅을 시작했던 것 같은데.. 어떤 변수 혹은 함수를 state로 관리하지 않을 수 있을까? 모든 것을 state로 관리하지는 않아도 될텐데. 일단 index.js에서 React.StrictMode를 삭제한다. 그렇지 않으면 두번 실행되어서 값에도 영향을 미치게 된다. //src/index.js const root = ReactDOM.createRoot(document.getElementById("root")); root.ren.. 2023. 3. 17.
git에서 특정 브랜치만 clone하는 방법 https://www.slipp.net/questions/577 git에서 특정 브랜치만 clone하는 방법 git을 사용하다 브랜치 전체를 clone하지 않고 특정 브랜치 하나만 clone하는 것이 가능하다. 특히 브랜치가 많은 경우 이 방법을 사용할 수 있다. git clone -b {branch_name} --single-branch {저장소 URL} ex) git www.slipp.net git clone -b {branch_name} --single-branch {저장소 URL} 2023. 3. 16.
The current branch feature has no upstream branch. fatal: The current branch feature has no upstream branch. To push the current branch and set the remote as upstream, use git push --set-upstream origin featuregit push --set-upstream origin feature 업스트림 저장소에 feature이라는 브랜치가 없으니 해당 명령어로 업스트림에 feature이라는 브랜치를 생성하라는 의미이다. 커맨드 라인에서 알려주는 대로 복사 붙여넣기 하면 해결할 수 있다. 2023. 3. 16.

티스토리툴바