Persistence

워킹 디렉토리 삭제하기 (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..

콜백함수와 프로미스의 차이 function add10(a, callback) { setTimeout(() => callback(a+10), 100); } add10(5, res=> { console.log(res); }) // 15 function add20(a) { return new Promise(resolve => setTimeout(()=>resolve(a+20), 100)) } add20(5).then(console.log); // 25 add20(5).then(add20).then(console.log); // 45 프로미스의 가장 중요한 특징은 콜백함수와 달리 결과를 값으로 받아 저장할 수 있다는 것이다. 프로미스를 받아 then으로 이어 또 다른 작업을 할 수 있기 때문에, 코드도 간결해질..