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에 모든 설정을 몰아넣게되면 관리하기가 어려우므로, 먼저 주..

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는 호출되는 함수의 작업 완료 여부를 누가(호..

Cross Browsing이란? 한국소프트웨어진흥원의 "Cross Browsing 가이드"에 따르면 다음과 같이 설명하고 있다. Cross Browsing이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다. 이는 인터넷 환경 자체가 일반 테스크톱 웹 브라우저뿐만 아니라 모바일, 임베디드 기기, 홈 네트 워킹용 장비 등 아주 다양한 인터넷 환경이 존재하며, 일반인, 장애자,..

Renderer Process(이하 렌더러 프로세스)의 내부 작동 렌더러 프로세스는 웹 퍼포먼스의 많은 측면을 다룬다. 이것은 렌더러 프로세스의 내부에서는 많은 작업들이 존재하기 때문이다! 렌더러 프로세스에는 어떤 일들이 벌어질까? 렌더러 프로세스는 웹 콘텐츠들을 다룬다 렌더러 프로세스는 탭의 내부에서 발생하는 모든 것들에 대해 책임을 가지고 있다. 렌더러 프로세스에서 Main thread(이하 메인 스레드)는 당신이 사용자에게 보내는 코드의 대부분을 다룬다. 만약 당신이 web worker 또는 service worker를 사용한다면, 자바스크립트의 코드 일부는 때때로 Worker thread가 다루게 된다. Web Worker와 Service Worker Web Worker와 Service Worke..