Persistence

컴퓨터는 binary로 말한다. 즉 2진법, 0과 1밖에는 사용할 줄 모른다. 예를 들어 10진법으로 5인 숫자를 표현하기 위해서, 컴퓨터는 2진법 101로 표현한다. 이 2진법은 스위치를 끄고 키는 방식으로 표현될 수 있다. 즉 스위치를 켜면 1, 스위치를 끄면 0 이렇게 생각할 수 있다. 스위치를 키고 끄기 위해서는 전기가 필요하다. 전기가 들어오면 스위치가 켜지고 1을 나타내고, 전기가 다시 빠져나가면 스위치가 꺼지고 0을 나타낸다고 생각할 수 있다. 이것이 컴퓨터 안의 트랜지스터가 하는 일이다. 컴퓨터에서 0과 1로 2진법 한자리수를 나타내는 단위를 비트(bit)라고 한다. 즉 10진법 숫자 5는 2진법 101로 표현될 수 있고, 이는 3비트가 필요한 것이다. 그런데 커다란 데이터를 표현하기 위해..

URL이란? URL(Uniform resource locator)이란, 리소스 식별자이다. resource locator라는 말에서 알 수 있듯이, 리소스가 어딨는지 알려주는 아이라는 것이다. 우리는 웹에서 무수한 리소스들을 주고 받는다. 이미지, 텍스트, 동영상 등 모든 콘텐츠 소스를 리소스라고 보면 된다. 그런데 우리가 웹에서 보는 이 '리소스'들은 어디에서 오는 것인가? 그 리소스들의 주소를 알려주는 것이 URL이다. HTTP 간단하게 HTTP를 짚고 넘어가자. HTTP란 HyperText Transfer Protocol의 약어로, 인터넷 상에서 데이터를 주고 받기 위한 프로토콜의 일종이다. 프로토콜이란 규약이라는 뜻인데, 인터넷 통신을 하기 위해서는 정해진 형식이 있어야 하고, 널리..

this this란? this는 단어 자체에서 유추할 수 있듯이, 뭔가를 가리키는 대명사다. 이 this가 무엇을 가리키는지 유추하려면 앞뒤 문맥을 알아야 할 것이다. 프로그래밍에서 또한 this는 어떤 컨텍스트(문맥) 내에서 특정 객체나 변수를 가리킨다. Context is always the value of the "this" keyword which is a reference to the object that owns the currently executing code. 컨텍스트는 항상 현재 실행 중인 코드를 소유한 객체를 가리키는 this 키워드의 값이다. * 다만 strict모드를 배제하고 정리하였으며 내가 이해한 부분에 한하여 정리한 것이므로 오류가 있을 수 있음 자바스크립트 this의 특징 ..

스코프란 스코프(Scope, 유효범위)란 식별자(identifier)를 찾아내기 위한 규칙이다. 식별자란 사람으로 따지면 이름, 주민등록번호 같은 것이 될 수 있겠다. 주민등록번호는 단 한개도 겹칠 수 없지만, 이름은 똑같은 사람이 있을 수 있다. 그러면 그 이름이 같은 사람은 어떻게 구별해야 할까? 컴퓨터는 이름이 같은 사람을 어떻게 다르게 구분할 수 있을까? 예를 들어서 강남구에 사는 김나라와 관악구에 사는 김나라는 다르다고 인식할 수 있지 않을까? 프로그래밍할 때도 변수명이나 함수명이 겹칠 수도 있다. 예를 들어 i 같이 흔한 변수명을 사용하는데 모든 코드를 통틀어 i 를 단 한 번밖에 못 쓴다는 건 좀 당황스럽다. 그렇다면 영역을 분리할 수 있지 않을까? 마치 디렉토리 구조를 나누면 각각의 디렉토..

React-Native Tutorial ClickThePaintings Code ClickThePaintingsWithRedux Code 컨트리뷰톤을 통해 RN팀에 참여하였고, RN iOS 예제 앱을 만들어 보게 되었다. RN은 처음이고, 짧은 시간 내에 예제 앱을 구현한 것이기에 기능은 매우 간단하다. 그림 데이터를 가져와서 클릭하면 그림의 세부 정보를 보여주는 것 리액트만 적용한 앱(ClickThePaintings)과 리액트, 리덕스, 리덕스 썽크를 적용한 앱(ClickThePaintingsWithRedux)을 별도로 구현했다. 기본적인 레이아웃은 두 앱 모두 동일하며, 리덕스를 적용한 앱에서는 API를 사용했기에 데이터를 fetch하는 동안 로딩 컴포넌트가 보여지도록 한 것만 다르다. 어쨌든 간단하..

안희종님의 타입스크립트 입문서에서 예제를 가져왔습니다.(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 커맨드를 제공하고 ..

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..

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으로 이어 또 다른 작업을 할 수 있기 때문에, 코드도 간결해질..

useEffect Hook 사용하기 useEffect 훅은 함수형 컴포넌트에서 쓰이며 기존 클래스 컴포넌트의 라이프사이클 메서드들을 대체한다. 이를 정리하기 위해 간단히 라이프사이클 메서드를 설명하고, useEffect 훅의 효용을 적는다. LifeCycle Method - componentDidMount, componentDidUpdate 생명주기 메서드는 크게 두 종류이다. Will 메서드 : 어떤 작업이 실행되기 직전에 호출 Did 메서드 : 어떤 작업이 실행된 직후에 호출 생명주기 메서드에서는 Mount라는 단어가 등장하는데, 여기서 마운트는 리액트가 컴포넌트를 실제 DOM에 삽입한다는 것이다. (리액트는 가상DOM을 사용하니까) 예를 들어 componentDidMount는 컴포넌트가 실제 DOM..