Life and IT

expo에서 카카오 로그인을 구현하고자 했다. 로그인 구현 방식은 웹뷰/앱 내부로 크게 두 가지로 구현이 가능하다. 웹뷰로 로그인을 구현하게 되면 카카오 앱으로 넘어가기 때문에 웹뷰가 아닌 앱 내부에서 로그인을 처리하고 싶었다. (참고링크) 서치한 결과 @react-native-seoul/kakao-login을 사용하면 expo에서도 앱 내부에서 카카오 로그인이 구현 가능하다는 것을 알게 되었다. yarn add @react-native-seoul/kakao-login 이후에 로컬 빌드를 하였으나 아래의 에러를 마주하게 되었다. * What went wrong: Could not determine the dependencies of task ':app:processDebugResources'. > Cou..

회사에서 리액트 네이티브 프로젝트를 시작하면서 eslint, husky, lint-staged, commitlint를 적용해보았다. eslint 프로젝트 할 때마다 설정하는건데 항상 찾아보는 것 같다.. 우리는 타입스크립트를 사용하기 때문에 타입스크립트 관련 eslint 패키지도 함께 설치해준다. yarn add -D eslint eslint-plugin-react-hooks eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint를 설정하기 위해 .eslintrc.js를 구성한다. .eslintrc.js에 모든 설정을 몰아넣게되면 관리하기가 어려우므로, 먼저 주..

const app = Vue.createApp({ data() { return { count: 4 } }, methods: { increment() { // `this`는 컴포넌트 인스턴스를 참조합니다. this.count++ } } }) Up vote 위 코드에서 methods 내부 메서드의 this를 보았듯이, 항상 컴포넌트 인스턴스를 참조할 수 있도록 this 값을 자동으로 바인딩한다. 하지만 내부 메서드를 화살표 함수로 정의하는 경우 this가 존재하지 않기 때문에 화살표 함수를 자제해야 한다. Debounce & Throttling Vue에서 Debounce & Throttling을 ****자체적으로 지원하지 않지만, lodash와 같은 라이브러리를 사용하여 구현할 수 있다. 컴포넌트가 한 번만..

새로운 컴포넌트 인스턴스 생성 시 자체 state를 가지는 경우, data 함수를 호출한다. data 메서드는 하나의 객체만을 반환한다. 반환된 객체는 $data로 저장된다. 만약 아래와 같이 data 메서드를 정의하고 $data를 확인해본다면, data() { return { num: this.number, }; } console.log(this.$data); console.log(this.num); 아래와 같은 결과를 얻게 된다. 결과를 보면 this.$data가 Proxy인 것을 확인할 수 있다. Vue는 주어진 객체의 모든 프로퍼티를 proxy로 변환한다. 이 proxy는 es6 이상에서만 지원하는 기능이다. 따라서 IE에서도 Vue3를 사용할 수 있게 하기 위해 Object.definePrope..

Vue는 React와 마찬가지로 하나의 div 안에서 동작한다. 그리고 해당 div에 연결하는 방식은 조금 다르지만 비슷한 원리를 가지고 있다. 1) index.js(React) → main.js(Vue) 2) 부가 기능 없이 연결했을 때 // React ReactDOM.render( , document.getElementById("root"), ); // Vue createApp(App).mount("#root"); 3) store 또는 router 연결했을 때 // React ReactDOM.render( , document.getElementById("root"), ); // Vue createApp(App).use(store).use(router).mount("#root"); React는 rend..

객체의 프로퍼티에는 두 종류로 나뉜다. 1. 데이터 프로퍼티 2. 접근자 프로퍼티 우리가 지금까지 사용했던 프로퍼티는 데이터 프로퍼티이다. 접근자 프로퍼티는 본질이 함수이며, 값을 획득(getter)하고 설정(setter)하는 역할을 한다. 객체 리터럴 안에서 getter와 setter는 각각 get과 set으로 나타낼 수 있다. let user = { name: "John", surname: "Smith", get fullName() { return `${this.name} ${this.surname}`; } }; alert(user.fullName); // John Smith 위 코드를 보면 get 프로퍼티를 일반 프로퍼티처럼 호출하여 사용할 수 있다. 그 뒤의 로직은 getter 메서드가 처리하기 ..

자바스크립트는 싱글 스레드라는 것은 개념을 외우듯이 알고 있었다. 하지만 자바스크립트 언어를 만든 브렌던 아이크 선생님은 왜 싱글 스레드를 선택했을까? 우선 그전에 프로세스와 스레드의 개념을 알고 가야 할 것 같다. 프로세스와 스레드 프로세스는 운영 체제로부터 할당받은 작업의 단위이다. 프로세스 내부에는 Code, Data, Stack, Heap이라는 네 가지 리소스가 존재한다. 프로그램을 실행했을 때 보조 기억장치(ex. 하드 디스크)에서 프로그램의 코드를 컴파일하여 주 기억장치인 메모리에 옮겨가면, 그것을 프로세스라고 한다. 스레드는 프로세스가 할당받은 자원을 사용하는 작업의 흐름 단위이다. 스레드는 Stack을 가지며 나머지 Code, Data, Heap 리소스를 사용하며 작업을 처리한다. 이때 ..

Status Code, 즉 상태 코드는 http 요청 시에 request가 아닌 response에서 요청의 처리 상태를 알려주는 기능이다. 100 ~ 5xx번 대의 상태 코드가 존재하며 숫자 맨 앞자리의 번호에 따라 처리 상태의 종류가 달라진다. 1xx (informational): 요청이 수신되어 처리 중 요청을 받았으며 작업을 계속한다는 의미를 가지고 있다. HTTP/1.0 이래로 1xx 상태 코드들은 정의되지 않았다고 하니, 실험적인 상태를 제외하고 HTTP/1.0 클라이언트로 보내면 안 된다. 2xx (Successful): 요청 정상 처리 클라이언트가 요청한 동작을 수신하여 이해했고 승낙했으며 성공적으로 처리했음을 가리킨다. 200(성공): 서버가 요청을 제대로 처리했다는 뜻이다. 이는 주로 서..

Firebase는 원래 데이터 베이스였다. 하지만 구글이 인수를 한 뒤에 데이터 베이스뿐만 아니라 다양한 백엔드 기능을 제공해주는 플랫폼으로 바뀌었다. Firebase를 이용하면 사용자 인증, 데이터 베이스, 스토리지 등과 같은 백엔드 단에서 필요한 기능을 구축하는 데에 쓰이는 시간을 아낄 수 있고, 오직 프런트엔드에서의 비즈니스 로직만을 구현하는 데에 집중할 수 있다. 이러한 특징으로 Firebase는 Serverless BaaS(Backend as a Service)의 한 예이기도 하다. Serverless BaaS에서는 Firebase가 가장 대중적이고 커뮤니티 또한 많이 활성화 되어 있다고 한다. 나는 팀 프로젝트에서 로그인 인증 방식을 Firebase를 활용하여 구글 로그인을 구현하였다. 많은 ..

개요 다른 관심사 Blocking/NonBlocking과 Sync/Async 두 그룹은 관심사가 다릅니다. 즉 동작은 비슷하지만 서로 관련이 없는 개념입니다. Blocking/NonBlocking Blocking/NonBlocking은 호출되는 함수가 바로 리턴하느냐 마느냐가 관심사다. 호출된 함수가 바로 리턴해서 호출한 함수에게 제어권을 넘겨주고, 호출한 함수가 다른 일을 할 수 있는 기회를 줄 수 있으면 NonBlocking입니다. 그렇지 않고 호출된 함수가 자신의 작업을 모두 마칠 때까지 호출한 함수에게 제어권을 넘겨주지 않고 대기하게 만든다면 Blocking입니다. Synchronous/Asynchronous Synchronous/Asynchronous는 호출되는 함수의 작업 완료 여부를 누가(호..