Life and IT

Web Hosting?💡웹 사이트를 구성하는 여러 파일을 다양한 디바이스에서 엑세스할 수 있도록 하는 서비스웹사이트에 엑세스하는 과정과 원리💡웹사이트를 본다 === IP 주소를 통해 서버에 페이지를 요청한다 하지만 우리는 보통 IP 주소를 입력하여 웹사이트에 접근하지 않는다.1. 유저가 브라우저 URL 주소를 입력한다.💡URL의 2가지 형태도메인 (ex. naver.com)IP 주소 (ex. 172.0.0.1) 거의 대부분의 서비스들은 URL 주소로 IP를 직접 노출시키지 않는다.사용자의 편의성을 위하여, 인식하기 쉬운 naver.com과 같은 도메인을 사용한다. 도메인으로 웹사이트에 접근하는 원리도메인은 IP 주소와 매칭되어있다.DNS 서버를 통해 해당 도메인과 매칭되는 IP 주소를 찾을 수 있다..

1. Sentry의 역할빌드 파일은 기존 코드를 난독화하고, 압축하기 때문에 정확한 에러 지점을 파악하기 어렵다.Sentry에 소스맵을 업로드하면, 에러가 발생한 코드에 대한 원본 코드 위치를 소스맵을 통해 알 수 있다.또한 에러 발생 즉시 리포트가 이루어지기 때문에 즉각적인 대응이 가능하다.2. 소스맵 업로드각 버전별로 소스맵을 Sentry에 업로드할 수 있다.다만, 아래 2가지 상황별로 소스맵 업로드 방식이 다르게 존재한다.2-1 EAS Cloud 빌드자동으로 Sentry에 소스맵이 업로드 된다.별도의 소스맵 업로드 처리가 필요하지 않다.2-2 EAS UpdateEAS Update 명령 실행 시 소스맵이 생성된다. (위치: root/dist/bundles)bundle 폴더에 생성된 소스맵 파일은 An..

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