본문 바로가기

분류 전체보기811

[Web] 네트워크 - 통신 프로토콜 MQTT 기본 개념 웹앱에서 다른 앱이나 서버 등과 통신할 수 있는 다양한 프로토콜 서비스가 있지만, Restful, 웹소켓, MQTT가 자주 사용됩니다. 그중에서 MQTT 관련해서 정리를 해보면, MQTT는 웹앱뿐만 아니라 광범위하게 사용됩니다. MQTT(Message Queuing Telemetry Transport) : 누군가 어떤 주제(topic)로 메시지를 발행하면 해당 주제를 구독 중인 디바이스들만 메시지를 받게 됩니다. 발행(Publish)-구독(Subscribe) 구조로 이루어져 있으며, 메시지를 전달해주는 메시지 브로커(MQTT Broker)가 있습니다. ※ 발행자가 MQTT-Broker에 토픽(TOPIC)과 메시지(Message)를 전달하면 해당 토픽을 구독하는 구독자가 메시지를 받을 수 있습니다. MQT.. 2022. 8. 17.
[Javascript] ARIA(Accessible Rich Internet Applications) ARIA(Accessible Rich Internet Applications) : 장애를 가진 유저가 웹 콘텐츠와 웹 애플리케이션에 더 쉽게 사용할 수 있도록 도와주는 방법입니다. ​ 웹접근성은 웹사이트를 장애인들도 이용할 수 있도록 HTML, CSS 등 요소들에 접근성 규칙을 준수하라는 지침입니다. ※ 접근성은 장애나 나이와 상관 없이 누구나 서비스를 활용할 수 있어야 한다는 것입니다. 🟩 모바일 스크린리더 Android: TalkBack(안드로이드에서 제공하고 있는 접근성 기능) iOS: VoiceOver(iOS에서 제공하고 있는 접근성 기능) 관련 글: 2023.02.15 - [Programming 개발은 구글로/Web[프론트엔드&백엔드]] - [HTML&CSS] aria-hidden & aria-.. 2022. 8. 12.
[React] redux-toolkit 설치 및 사용방법(ConfigureStrore, createAsyncThunk) redux-toolkit : redux에서 공식적으로 지원하는 redux 개발 도구입니다. 아래의 4개의 함수에 대해서 정리합니다. createAction createReducer createSlice creatAsyncThunk 참고 글: Redux Toolkit https://redux-toolkit.js.org ■ 설치방법 1. 프로젝트 생성 시 설치하기 - create-react-app 으로 프로젝트 생성 시, template 옵션에 redux를 추가하면 됩니다. npx create-react-app my-app --template redux 2. 기존 프로젝트에 추가하기 # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit ■ .. 2022. 8. 9.
[React] React 에러 처리 - unable to resolve dependency tree React 에러 처리 unable to resolve dependency tree npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: ################# npm ERR! Found: react@18.2.0 npm ERR! node_modules/react npm ERR! react@"^18.1.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4 n.. 2022. 8. 5.
[정보] 공동작업(협업)에 유용한 Tool - MS 팀즈(Microsoft Teams) Microsoft Teams :기업 및 학교를 위한 채팅 스레드 방식의 업무협업툴이다. 쉽게 생각하면 소기업에서는 간이 인트라넷으로 쓸 수 있고, 대기업에서는 업무 소통용 메신저로 쓸 수 있는 서비스라고 생각하면 된다. 학교에서는 재택수업 툴로도 사용되며 온라인 수업 용도로도 사용된다. 마이크로소프트 계정만 있다면 개인도 가입해서 쓸 수 있으며, 무료버전의 경우 사용자당 2GB, 팀즈에 10GB의 공간이 제공 된다. 엄밀하게 말해서 Microsoft Office의 일부이기는 하지만 MOS 설치시 팀즈 프로그램이 같이 설치되지는 않고 별개로 운영된다. 화면 공유 시, 제어권 기능을 통해 상대방 컴퓨터를 원격으로 조작할 수도 있다. 하기 사이트에서 사용 용도에 맞는 버전을 다운로드하시면 됩니다. https:.. 2022. 8. 1.
[Typescript] 2. 타입스크립트 변수 선언 정리 타입스크립트 변수 : var, const, let 3개의 변수 Type이 있습니다. 1. var var는 할당을 먼저 하고 나중에 선언하는 코드입니다. 아래와 같은 현상으로 인해 var를 사용하지 않는 것이 좋습니다. if 문 내에 있는 변수에도 영향을 줄 수 있습니다. 동일한 이름을 가진 변수를 유저가 실수로 중복 선언할 수도 있습니다. // var는 함수 레벨 스코프를 지원 var myName = "copymaster"; function change() { var myName = "militarymaster"; // 스코프가 달라 변경이 되지 않음 } change(); console.log(myName); Result: copymaster ==================================.. 2022. 7. 29.
[Web] VS Code Git 기능 추가 및 History 관리 VS Code Git 기능 추가 및 History 관리 1. Git 기능 추가 ■ git-scm.com 에서 현재 최신 버전인 2.37.1 릴리즈를 다운로드 후 설치합니다. ■ 파일 - 기본설정 - 설정에서 Exclude로 검색 후 **/.git 항목 제거합니다. 소스 제어 탭에서 변경 내용 스테이징 및 스테이징 제외, Commit 메시지 작성을 해서 Commit를 할 수 있습니다. ※ user.name이랑 user.email 이 저장되어 있지 않을 경우 터미널 창에서 아래의 명령어들을 입력해주세요. git config --global user.name "copymaster" git config --global user.email "copymaster@gmail.com" 2. Git History 관리 .. 2022. 7. 28.
[Web] React 에러 처리 : 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. React Error 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. npm install 후 npm start 진행 시 해당 에러가 발생이 된다면, 아래 명령어들을 입력하면 됩니다. npm update npm start npm install -g react-scripts 2022. 7. 26.
[Web] Web 개발 관련 유용한 Study 자료 Web 개발 관련 동영상 강좌 Web 개발을 하는 중에 필요한 강좌를 찾다가 아래의 동영상 강좌를 알게 되었습니다. 많은 분들에게 도움이 되었으면 좋겠습니다. 만약 게시물로 인해 누군가의 피해나 손해가 발생이 된다면 댓글로 남겨주세요. 해당 게시물을 바로 삭제하도록 하겠습니다. 2022. 7. 25.
[Web] WebView 사용 관련 Android, iOS 관련 정리 WebView : 프레임워크에 내장된 웹 브라우저 컴포넌트로 뷰(View)의 형태로 App에 Embedding 하는 것을 말합니다. 즉 모바일 앱 애플리케이션의 Part, Page를 웹 애플리케이션 및 웹 페이지로 제공하는 기능을 말합니다. WebView 장점 배포 주기가 빠르다. 네이티브 앱을 수정해서 배포하려면 거쳐야 하는 절차들이 있는 반면, WebView로 구성된 부분은 Web 배포만 하면 바로 수정된 내용이 반영이 됩니다. 개발 기간이 줄어든다. Android/iOS를 둘다 서비스하는 제품인 경우 WebView만 수정이 되면 동시에 반영이 되기 때문에 개발 기간이 줄어들 수 있습니다. WebView 단점 네이티브 App 과 동일한 기능을 제공하지 못한다. 네이티브 API를 직접 가져와서 사용할 .. 2022. 7. 20.
[Typescript] 1. 타입스크립트란? TS(타입스크립트) : MS(MicroSoft)가 개발하고 유지하고 있는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 오픈소스 프로그래밍 언어입니다. 🟩 자바스크립트 대비 타입스크립트가 좋은 이유 버그를 줄일 수 있음 쉬운 유지 보수 퀄리티가 좋은 코드 타입 표기: 변수 값에 데이터 타입 지정 가능 예제코드) // Javascript function add(a, b) { return a+b; } console.log(add('3', '5')); 결과값: 35 // Typescript function add(a: number, b: number) { return a+b; } console.log(add('3', '5')); Compile error 발생 🟥 객체 지향 프로그래밍 지.. 2022. 7. 19.
[Web] 하이브리드 앱과 Cordova 하이브리드 앱 : 앱의 기반이 되는 콘텐츠 영역은 HTML 기반의 웹 앱으로 제작, 최종 앱 배포에 필요한 패키징 처리만 아이폰, 안드로이드 플랫폼 안에서 처리하는 애플리케이션입니다. ​네이티브 앱과 비교되어 사용되며 운영체제별로 각각 개발해야 하는 네이티브 앱과는 달리 하이브리드 앱은 외부 형태는 네이티브 앱이지만 별도의 하이브리드 앱 프레임워크를 통해 내부는 모바일 웹 앱으로 실행되기 때문에 반응속도에 차이가 있습니다. (반응속도 : 하이브리드 앱 2022. 7. 18.
728x90

티스토리툴바