본문 바로가기

전체 글

 (99)
[Android] 블루투스 개념 1. 블루투스란? 블루투스는 2.4GHz 무선 링크를 통해 데이터를 주고 받는 근거리 무선통신 기술로 보안 프로토콜이며 단거리, 저전력, 저비용으로 다양한 장치들을 무선으로 연결하게 해준다. 최근에는 다양한 장치들이 무선으로 연결되어 편의를 제공해주고 있으며, 이 무선기술에는 블루투스가 대부분을 차지한다. 이어폰, 헤드셋, 마우스, 키보드, 스피커 등 다양한 장치들이 블루투스로 연결된다. 2. 블루투스의 작동원리 블루투스는 Unlicensed ISM Frequency Band - 2.4GHz 주파수 대역에서 작동하고, 이 주파수 대역은 WiFi 등에서도 작동하는 RF 대역이다. 따라서 블루투스는 다른 프로토콜과 분리되어 작동하도록 별도의 표준이 만들어져 있으며 표준에 대한 상세내용은 다음과 같다. htt..
[Python] Flask를 사용하여 RESTful API 만들고 통신하기 개요 Python으로 웹서버를 띄울 때 Flask와 django를 많이 사용한다. 본래 Spring Boot로 REST API를 제작해서 많이 사용해왔으나 이는 안정적인 대신 프로젝트 구조가 복잡하고 배우는데 많은 시간이 걸린다. Spring Boot로 REST API를 만든다고 하면 보통 다음과 같은 로직으로 구성된다. Flask는 Controller, Service, DAO를 포괄하여 하나의 함수로 잡는 개념처럼 보인다. 물론 ORM은 별도로 구성해야 한다. Flask 사용 전 설치할 패키지 Flask를 사용하기 위해 패키지 설치가 필요하다. $ pip3 install flask $ pip3 install flask_cors flask_cors는 브라우저의 CORS 정책을 우회(?)하기 위하여 사용한..
[JavaScript] 바닐라 JS로 AJAX 통신하기 예시 AJAX 통신을 할 때 jQuery가 사용하기 편리해서 자주 사용했으나 이번에 바닐라 JS로 어떻게 구현하는 지 궁금해서 대강 코드를 작성해보았다. AJAX 통신 테스트하기 버튼 하나를 두고 버튼을 클릭하면 AJAX 통신이 이루어지는 방식이다. POST로 요청을 보낼 때는 헤더 설정이 반드시 필요하다. 4-1을 참조하면 된다.
[Android] Android 12에서 강화된 블루투스 퍼미션 블루투스를 켜고 끄거나 통신을 하여 정보를 가져오고 보내주는 작업을 하려한다. Android 개발자 문서에 나와있는대로 하였을 때 앱이 팅기면서 Security Exception을 터뜨리게 된다. Manifest에 권한 부여하기 Android 12 이상부터 블루투스 관련 Permission이 강화되었기 때문에 별도의 권한을 더 부여해야 한다. 화면 구성하기 우선은 다음과 같이 버튼 4개만 넣어두었고, 이 포스팅에서는 블루투스를 켜고 끄는 것까지만 구현할 것이다. 기능 구현하기 이제 블루투스 관련 모듈을 사용하기 위해 BluetoothAdapter를 사용할 것이며 블루투스 관련 변수를 1로 주어 전역에 설정해 둘 것이다 class MainActivity : AppCompatActivity() { priva..
[React.js] 이미지 / 파일 업로더 구현 이미지나 파일을 업로드해서 뷰로 보여주는 라이브러리가 존재하지만 라이브러리에 너무 의존하다보니 에러가 발생하면 에러를 극복하는데 시간을 허비하기 때문에 답답하기 마련이다. 이미지와 파일을 업로드했을 때 이미지는 뷰로, 파일은 리스트 형태로 보여주는 기능을 구현해보았다. 여기서 이미지는 클릭했을 때 파일 탐색기를 열어 파일을 불러와 64비트 인코딩을 통해 문자열로 나타내준다. 일반적인 파일 업로더는 파일 이름과 닫기버튼이 함께 보인다. https://github.com/htwenty-1/react-file-uploader
[React.js] React Router 기본, 중첩 Router 사용하기 1. Routing이란? 웹을 사용할 때 전통적인 링크 연결방식은 HTML에서 a 태그를 사용하여 href 속성에 연결할 링크를 넣어주는 방식이다. 이러한 방식은 웹사이트의 규모가 크지 않을 때는 사용하는데 크게 불편함이 없지만 로드되는 컨텐츠나 페이지의 용량자체가 크다면 불편함을 초래할 수 있다. 애초에 링크로 연결되는 방식은 각각의 HTML 파일을 로드하는 것이기 때문에 새로운 페이지로 이동할 때마다 화면 깜빡임이 지속될 것이며 해당 페이지 자체 또는 로드할 컨텐츠의 용량이 크다면 사용자 입장에서는 불만이 생길 수 밖에 없을 것이다. 위에서 구현한 예시는 간단한 예제이기 때문에 그러한 불편함을 느끼기 어려울 것이나, 페이스북이나 인스타그램처럼 퓨어 텍스트보다 압도적으로 높은 용량의 이미지/영상 컨텐..
[JavaScript] 웹소켓 사용하기 API를 통해 서버에서 받아온 어떤 정보를 화면에 뿌려주려고 할 때 fetch 메소드를 사용해서 데이터를 받아오거나, axios 모듈을 사용하는 경우가 많다. 서버가 RESTful API를 지원한다면 API KEY 등을 사용해서 정보를 받아올 수 있는데, 개인 서비스라면 모르겠지만 상용으로 개발된 것은 프론트단에서 API키를 공개하여 던져주게 된다면 보안결함 등 이슈가 충분히 발생할 수 있다. 때문에 어떤 곳에서는 웹소켓을 사용해서 API_KEY 등이 요구되는 개인적인 정보를 제외한, 공공정보를 개발자가 사용할 수 있도록 제공하고 있다. 웹소켓을 사용해본적이 한번도 없으며 이번 기회에 맛을 보고(?) 기억해둘 겸 정리하고자 한다. 1. 웹소켓이란? 웹소켓(WebSocket)은 하나의 TCP 접속에 전이중..
[React.js] NavBar 예제 네비게이션바를 만들 때 초기에 접속중인 메뉴 목록에는 색깔을 입혀주고 그렇지 않은 경우에는 색을 빼주는 경우가 있다. 예를 들면 구글에서 어떤 키워드로 검색을 시도 했을 때 결과 화면의 네비게이션은 최초에 이렇게 전체라는 메뉴에 파란색으로 스타일이 들어가고 이미지 탭으로 옮기게 되면 이렇게 전체라는 메뉴에서 스타일이 빠지고 이미지에만 스타일이 들어간다. 처음에는 boolean 타입의 배열을 생성해서 조작하였으나 처음에 아무곳에도 스타일이 들어가지 않고 클릭했을 때만 스타일이 들어갔다. 그래서 시도한 방법은 useLocation을 사용해서 현재 페이지의 URL과 아이템 배열의 to 값을 비교해서 같을 때만 활성화된 스타일이 적용되도록 했다. 스타일드 컴포넌트에 props로 값을 넘겨서 값을 비교해주는 방식..

티스토리툴바