분류 전체보기
-
Electron with React (+TypeScript)Archive/메모노트 데스크탑 앱 2022. 6. 29. 20:02
기본 설정 Electron에서 화면을 render 하는 방법으로는 html 파일을 사용하거나, 특정 웹페이지의 URL을 사용하는 방법이 있다. 이때 React는 Build를 통해 완성된 html, css, js파일을 생성해낼 수 있기 때문에 이렇게 Build 된 파일을 Electron이 읽도록 하기만 하면 된다. 하지만 문제는 개발환경에서 React를 사용할 때 발생한다. React를 통해 개발을 할 때는 보통 일일이 Build를 진행하지 않고, DevServer를 이용하여 변경점을 즉각적으로 반영해가며 개발을 진행한다. 따라서 이렇게 개발환경에서는 Build에 의해 만들어진 static 한 파일이 존재하지 않기 때문에, Electron에서는 URL방식을 이용하여 개발서버의 주소를 연결하는 방식을 사용해..
-
Passport를 이용한 로그인 작업Archive/캡스톤디자인 2022. 6. 25. 17:19
Passport.js Node JS를 이용하여 웹서버를 구성할 때, 로그인 기능을 구현하기 위해 passport라는 라이브러리를 사용할 수 있다. Passport Passport is authentication middleware for Node.js. Extermely flexible and modular, Passport can be unobtrusively dropped in to any Express-based web application. A comprehensive set of strategies support authentication using a username and password, Facebook, Twitter, and more. Passport.js Simple, unobtrus..
-
JS 자식요소 이벤트 제어기타/메모장 2022. 5. 21. 16:31
currentTarget HTML의 부모 요소에 마우스 이벤트를 걸어 현재 마우스 이벤트가 적용 중인 target을 e.target과 같은 방식으로 확인할 수 있다. 하지만 이 경우 부모 요소 안에 자식 요소가 있는 경우, 마우스가 자식 요소로 간다면 target이 자식 요소로 변하게 된다. 따라서 실제 이벤트를 건 요소만 확인하기 위해서는 currentTarget을 사용하는 것이 적절하다. const parentElement = document.getElementById("parent"); parentElement.addEventListener("mousemove", (e) => { console.log(e.target); console.log(e.currentTarget); }); pointer-ev..
-
CORS Policy (교차 출처 리소스 공유 정책)컴퓨터 공학/네트워크 2022. 5. 20. 18:43
CORS란? CORS란 Cross-Origin Resource Sharing의 줄임말로, 교차 출처 리소스 공유라고 번역할 수 있다. 이는 쉽게 풀어서 설명하면 서로 다른(Cross) 출처(Origin)에서 리소스(Resource)를 제공받는(Sharing) 행위를 의미한다. CORS 정책 위반으로 에러가 발생한다는 뜻은, 서로 다른 출처에서 리소스를 동시에 제공받으려고 시도했기 때문이다. 이때 왜 이러한 점을 금지하는 정책이 생겼는지는 아래에서 다시 설명한다. 출처(Origin) 여기서 말하는 출처란, 리소스를 제공하는 서버의 위치를 의미한다. 웹에서는 이러한 서버의 위치나 리소스의 위치를 나타내기 위해서는 URI라는 방식을 사용하는데, 통합 자원 식별자(Uniform Resource Identifie..
-
MongoDB 데이터베이스 연결 (Express JS + Mongoose)Archive/캡스톤디자인 2022. 5. 20. 02:43
Mongo DB Atlas mongo DB 데이터베이스를 클라우드로 사용하기 위해, Mongo DB에서 제공하는 Atlas 서비스를 이용한다. MongoDB Atlas | Multi-cloud Application Data Platform MongoDB Atlas is the only multi-cloud application data platform that accelerates and simplifies how you build with data. Get started for free today! www.mongodb.com 회원가입 후 새로운 Project와 Cluster를 생성한다. 이번 프로젝트에서는 Free Tier 옵션을 사용해서 무료로 클라우드 데이터베이스 서비스를 사용하였다. 이후 Net..
-
API 서버 구축 (with Node JS + Express JS)Archive/캡스톤디자인 2022. 4. 19. 20:45
Node JS 프로젝트 준비 Node JS 이번 프로젝트에서는 웹서버를 구축하기 위해 Node JS와 Express JS를 사용한다. 이를 위해 가장 기본적으로 Node JS를 설치한다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org npm init 프로젝트를 진행할 디렉터리를 하나 생성하고, 그곳에서 npm init을 실행하여 Node JS 프로젝트를 시작한다. npm init시 물어보는 옵션은 모두 기본값으로 설정하였다. Express JS 이번 프로젝트에서 웹서버를 구현하는 핵심기능은 Express JS 라이브러리를 이용할것이다. 이를 위해 npm을 이용해 Express를 설치한다...
-
안드로이드 앱 개발 연습 - 12 | CoroutineArchive/캡스톤디자인 2022. 4. 4. 17:21
Coroutine Coroutine 안드로이드에서 사용하는 스레드를 경량화한 새로운 도구 하나의 스레드에 여러 개의 코루틴이 존재할 수 있으며, 작업이 각 코루틴으로 넘어가더라도 해당 공간을 제공하는 스레드는 멈추지 않고 계속 움직일 수 있음 build.gradle (:app) dependencies { implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.9" ... } Coroutine Scope GlobalScope.launch { // 여기에 작성된 코드가 코루틴으로 실행됨 } CoroutineScope(Dispatcher).launch { // 여기에 작성된 코드가 코루틴으로 실행됨 } GlobalScope 앱의 생명 주기와 ..
-
안드로이드 앱 개발 연습 - 11 | Thread (Looper & Handler)Archive/캡스톤디자인 2022. 4. 4. 16:23
Thread Thread 시스템상의 실행 중인 프로그램인 각 프로세스에서 동작하는 독립적인 실행 흐름을 의미 Main Thread Main Activity를 비롯한 모든 컴포넌트가 동작하는 Thread로 아래와 같은 특징과 제약사항이 있다. 화면의 UI를 그리는 처리를 담당 안드로이드 UI 툴킷의 구성 요소와 상호작용하고, UI 이벤트를 사용자에게 응답 작업에 대한 응답이 수 초 내에 이루어지지 않으면 'ANR(Application Not Responding; 응답 없음)' 팝업창이 뜨게 됨 Background Thread 메모리 이외의 다른 곳에서 데이터를 가져오는 등의 처리 시간이 걸리는 모든 작업은 Background Thread에서 처리하는 것을 권장한다. 이때 Background Thread의 ..