Persistence

[파이썬] 힙큐(heapq) 이해하기 tree 힙큐 모듈은 이진 트리 기반의 자료구조이기 때문에 일단 트리를 이해해야 한다. 트리는 그래프와 함께 비선형 자료구조이고 루트 노드로부터 밑으로 가지를 뻗어나가는 형태를 하고 있다. _트리의 종류 중 이진 트리(binary tree)는 최대 2개까지만 자식 노드를 가질 수 있다. _(왼쪽 자식 노드, 오른쪽 자식 노드) 이진 트리 중 완전 이진 트리(complete binary tree)는 노드가 위에서 아래로, 왼쪽에서 오른쪽으로 채워진다. heap 힙은 기본적으로 완전 이진 트리를 기본으로 한 자료 구조이다. 일반적으로 배열로 구현되며, 파이썬의 경우에는 리스트이다. 힙에는 max heap과 min heap이 있는데, max heap(최대힙)은 부모 노드의..

Git log 예쁘게 보기 Before After 적용하는 법 터미널에 입력 git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)%Creset' --abbrev-commit" 실행시킬 때는 git lg 실행하면 그냥 git log --graph했을 때보다 직관적이고 하이라이팅된 형태로 볼 수 있다. 바뀐 내용을 상세히 보고 싶을 때에는 git lg -p를 입력하면 된다.

Fork한 깃허브 소스 동기화 & PR 날리기 일단 fork한 다음 내 레포로 간다. clone or download 버튼을 통해 주소를 복사한다. git clone [내 레포 주소] 폴더를 만들고자 하는 위치에서 git clone을 해서 로컬 레포를 만든다. cd [폴더 이름] git remote -v 해당 폴더로 이동한 뒤 remote 를 체크한다. 그러면 origin [내 깃헙 레포 주소] 이렇게 나올 것이다. 즉 포크해서 가져온 내 레포와 기본적으로 연결되어 있는 것이기 때문에 원래의 소스가 있는 레포랑 연결하려면 별도로 추가해주어야 한다. git remote add upstream [원래 소스 깃허브 주소] 포크해온 원래 소스가 있는 깃허브로 이동해서 주소를 복사한 뒤 위 명령어를 실행한다. 그..

안희종님의 타입스크립트 입문서에서 예제를 가져왔습니다.(ahheejong.gitbook/io/ts-for-jsdev) 타입스크립트의 장점 타입 제공 function preferTypeScript(person) { return person.favoriteLanguages.includes('TypeScript') } 플레인 자바스크립트로 코드를 쓰면 위와 같다. 위의 함수를 보고 예측할 수 있는 점은 preferTypeScript라는 함수의 패러미터는 Object 형태이며, favoriteLanguages 라는 키를 갖는다. (닷노테이션으로 오브젝트 키에 접근하는 방식 사용) 그리고 favoriteLanguages 키는 배열을 값으로 갖는다. (배열 메서드인 includes 사용) 함수는 true나 fals..

Expo에서 React-Native CLI로 바꾸기 실패 앞서 리액트 네이티브 시작하기에서는 expo cli로 빌드했었는데, 팀에서 react-native-cli를 사용하자고 해서 다시 프로젝트를 eject해보았다. expo가 필요하지 않은 상황은 다음과 같다. 설치를 커스터마이즈하고 싶을 때 커스텀 모듈을 설치하고 싶을 때 커스텀 리액트 네이티브 모듈을 사용할 때 커뮤니티에 의해 디벨롭된 모듈과의 일관성을 원할 때 ReactJS의 새로운 피처를 사용하고 싶을 때 커스텀 CI/CD 가 필요할 때 expo 없이 rn앱을 빌드하려면 처음부터 react-native-cli를 사용해서 빌드하거나 expo 프로젝트를 eject하면 된다. Successfully copied template native code. ..

RN 개발 환경 세팅 크게 두 가지 방법이 있다. expo-cli react-native-cli expo-cli (formerly create-react-native-app) 장점과 단점 비기너 친화적. 리액트 프로젝트를 해봤으면 알겠지만 CRA가 환경 셋팅을 얼마나 쉽게 해주는가… 그것의 RN버전인 셈인 듯하다. expo cli의 주요 특징 중 하나는 큐알코드를 생성해서 이를 통해 디바이스로 앱을 실행할 수 있게 해주는 것, 그리고 코드가 변경될 때마다 자동적으로 디바이스 앱에 반영된다는 것이다. 반면 단점은 순수 자바스크립트 앱에서만 작용한다는 것이다. 어느 순간 스위프트나 오브젝트C, 자바, 코틀린 등을 사용해야 할 때가 오면 이 것을 걷어내야 한다. expo cli는 eject 커맨드를 제공하고 ..

Upstream, Downstream의 일반적인 개념 upstream과 downstream은 두 레포간의 관계에 따라 정의되는 상대적인 개념이다. 어떤 한 레포가 절대적으로 업스트림이거나 다운스트림이 아니라는 소리이다. 비유적으로 설명하자면 upstream은 영어 뜻 그대로 하천의 윗부분(상류?)라고 할 수 있다. 물줄기가 위에서 밑으로 내려올 때, 그 위에서 원천이 되는 source를 upstream이라고 칭하는 것이다. 내 래포가 myRepo이고 다른 레포가 otherRepo라 하자. 내가 otherRepo로부터 pull from 해오고(당겨오고) push to한다면 내 myRepo가 downstream, otherRepo가 upstream으로 정의된다. 하나의 업스트림에 여러 개의 다운스트림이 있을..

[Git] Rebasing 리베이스는 머지랑 비슷한 개념이지만 조금 다르다! 머지랑 리베이스는 다른 브랜치의 작업 내용을 합친다는 면에서 비슷하다. 내가 이해한 바로는 주요하게 다른 점은 크게 2가지이다. 머지는 fast-forward가 아닌 이상 두 개의 브랜치로 갈라진 모양이 남게 된다. 반면 리베이스는 하나의 linear한 히스토리로 남게 된다. 머지는 merge commit을 필요로 한다. 즉 머지하기 위해서는 커밋을 반드시 해야되는데 별 의미없는 커밋메세지만 남기기 십상이다. 리베이스를 하면 이 merge commit이 필요 없다. 그럼 언제 머지를 하고 언제 리베이스를 하지? 여러 명의 사람이 같이 작업을 할 때에는 리베이스가 추천된다고 한다. 여러 커미터가 있을 때에 머지를 사용하게 되면 깃..

워킹 디렉토리 삭제하기 (Git) git init을 한 로컬 디렉토리 자체를 삭제하고 싶을 때에 Window git bash 기준으로 삭제하고자하는 해당 디렉토리의 상위 폴더에서 rm -rf [삭제하고자 하는 디렉토리명] 을 친다. 만약 디렉토리 삭제가 아니라 해당 디렉토리 내부 git만 삭제하고 싶으면, 그 디렉토리 내부로 이동해서 rm -rf .git 이라고 하면 된다. 옵션을-rf라고 해야하는데 -r만 치는 바람에 시간을 허비했으므로 기록으로 남겨봄(...) +) 깃헙 레포에 폴더 구조가 이상하게 올라가서 레포를 아예 삭제, 재생성한 다음 다시 파일을 업로드 해보려고 했는데, git 히스토리를 아예 삭제하지 않으면 고쳐지지 않았다. 계속 시도를 해도 로컬 디렉토리 구조대로 올라가지 않고, 잘못된 상..

TypeScript 특징 오픈소스 프로그래밍 언어(from Microsoft) Typed superset of JavaScript그러니까 자바스크립트의 모든 feature를 포함 + 더 확장된 feature를 포함하는 것이 타입스크립트라는 것 superset: A programming language that contains all the features of a given language and has been expanded or enhanced to include other features as well. 타입스크립트로 작성 > 플레인 자바스크립트로 컴파일 커피스크립트와 달리 extended JavaScript 커피스크립트는 자바스크립트가 아닌 새로운 다른 언어지만, 타입스크립트는 .ts확장자를 ...

useCallback 다음의 경우 버튼이 클릭될 때마다, Clicked와 Button rendered가 둘다 출력된다. App이 리렌더링될 때마다 Button도 리렌더링된다. class App extends Component { handleClick() { console.log("Clicked") } render() { return ( this.handleClick} /> ) } } class Button extends Component { render() { console.log('Button rendered'); return 버튼 } } 그러나 constructor 을 만들어 bind하면 버튼은 최초에 렌더된 후 버튼이 클릭될 때마다 Clicked만 출력된다. handleClick이라는 함수가 한 번..

react-redux connect를 Custom HOC로 만들기 react-redux의 connect함수는 리덕스 스토어와 리액트 컴포넌트를 연결해준다. 그래서 각 리액트 컴포넌트에서 바로 스토어로 쉽게 접근할 수 있다. 다만 connect함수를 통해서 접근하고 싶은 state나 action creator가 있는 경우 mapStateToProps나 mapDispatchToProps 로 연결해야 한다. 그리고 보통은 각 함수 내에서 연결하고 싶은 state 프로퍼티나 action creator를 특정한다. 그러다보면 connect가 쓰이는 컴포넌트마다 mapStateToProps, mapDispatchToProps 가 반복적으로 쓰이면서 코드가 중복될 수 있다. 일반적으로 connect함수가 쓰이는 모습..

Custom Hook 만들기 - 1 date-fns를 이용한 시간 표시 기능을 컴포넌트로 추출 후 이를 처리하는 커스텀 훅 만들기 Datetime Component 시간표시(eg. 몇분 전) 기능을 컴포넌트로 따로 추출 import distanceInWords from 'date-fns/distance_in_words_to_now'; import useUpdate from '@/hooks/useUpdate' // date-fns 함수 호출을 distance라는 함수 내에 넣기. 그래야 distance 함수가 불렸을 때 비로소 실행되도록 할 수 있다. const distance = (time) => { distanceInwords(time, { locale, addSuffix:true }); } // cr..

오랜만에 쓰는 TIL 7월 25일부터 본격적으로 리액트, 리덕스를 공부하겠다고 마음 먹은 후 약 약 20일 경과 후 느낀 점을 적어보자 어려움 물론 새로운 걸 배우는 거니까 당연히 어렵다. 그래도 토이프로젝트긴 하지만 리액트 웹앱을 만들어 보긴 했고, redux 튜토리얼을 뗐으니까 할 만할 거라고는 생각했는데, 생각보다 더 어렵다. 일단 토이프로젝트한 뒤로 시간이 많이 지나서 많이 까먹은데다, 그 뒤로 Hook이 새로 나와서 기존 라이프사이클 메서드랑 훅을 익히고 적용하는 것도 쉽지 않았다. 그리고 HOC 도 처음 봤다. 그리고 redux-thunk도.. 새로운 개념도 개념이지만, 이번에 배우면서 가장 크게 느낀 건 설계에 관한 부분이다. 상태를 어떤 구조로 가져갈 것인지, 컴포넌트 트리 구조를 어떻게 ..

ES6 모듈 시스템 export default 디폴트로 export하면 {} 없이 임포트할 수 있고, 이름도 마음대로 지을 수 있다. 예를 들어 export default a 하면 임포트하는 쪽에서 import b 라고 할 수 있다. export 변수명 디폴트를 붙이지 않고 export하면 임포트하는 쪽에서는 {}를 사용해야 하고 이름도 그대로 사용해야 한다. 하지만 이름을 변경하고 싶을 경우 as를 사용하면 된다. 예를 들어 export const c 는 임포트하는 쪽에서 import {c as d} 라고 할 수 있다. import *, export * * 로 import, export할 수 있다. 기본적으로 파일 내의 모든 것을 지칭하고, default도 포함한다. 예를 들어 actionTypes.j..