본문 바로가기

분류 전체보기213

[React] 5. 반복되는 부분 축약하기 (map) 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object) 2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용) 3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component) 4. 2023.05.28 - [🌌 | WEB DEV/React] - .. 2023. 5. 28.

[React] 4. 동적인 UI 제작하기 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object) 2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용) 3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component) 전 포스팅에서 다루었던 컴포넌트의 예시로 모달(Modal)창을 제작하.. 2023. 5. 28.

[React] 3. 컴포넌트 (Component) 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object) 2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용) 1. Component 문법 html을 작성하다보면 반복적으로 사용하거나 블록 단위로 제작하고 싶은 부분이 있다. React에서는 긴 HTML 블록을 하나의 단어로 치환하도록 하는 문법을.. 2023. 5. 28.

[React] 2-1. array state 정렬하기 ( .sort()활용) 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object) array state를 정렬하고 싶을 때는 어떻게 해야할까? 가장 보편적인 방법인 sort()메서드를 이용해보자. 1. sort() 활용하여 array state 정렬하기 let [music, setMusic] = useState( [{"type": "Rock", "title": "Summer", "singer": "The Volun.. 2023. 5. 27.

[React] 2. state (변수, array, object) 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 1. state React의 JSX를 이용하여 템플릿을 작성할 때 중요한 자료들을 잠시 저장해야할 때가 있다. 자료 저장 방법_1) 변수를 이용한다. let, const 등을 활용한다. functoin App(){ let name = "Kassid" return ( ... ); } 자료 저장 방법_2) state를 이용한다. 변수 외에도 state를 활용하여 자료를 저장할 수 있다. 먼저 useState를 import한다. import { useState } fro.. 2023. 5. 26.

[Python] BLE 통신 하기 with bleak (MacOS) - 2) 데이터 받기 2023.05.24 - [🐍 | Python/파이썬 초간단 프로젝트] - [Python] BLE 통신 하기 with bleak (MacOS) - 1) 탐색, 연결 지난 포스트에서는 bleak 모듈을 이용해 주변 기기를 탐색하고 연결하는 것을 해보았다. 이번에는 현재 Kit의 서비스 정보를 알아보고 그를 활용하여 kit로부터 데이터를 받아보자! 1. 연결한 장치의 서비스 1) 연결된 서비스 확인 import asyncio from bleak import BleakClient, BleakScanner async def main (): devices = await BleakScanner.discover() for idx, device in enumerate(devices): print(f'{idx}\t\t',.. 2023. 5. 24.

[Python] BLE 통신 하기 with bleak (MacOS) - 1) 탐색, 연결 파이썬의 모듈 중 bleak을 이용하여 Mac에서 BLE 통신을 해보자! 1. BLE란 무엇인가 BLE는 Bluetooth Low Energy의 약자로 블루투스와 같지만 더 빠르고 가볍게 통신하는 방법이다. 때문에 스마트 워치, 태그, 작은 장치들에 주로 이용한다. 이를 이용해서 심전도, 메시지 통신 등 다양한 서비스를 제공할 수 있다. 2. bleak 모듈 이용하기 bleak는 파이썬에서 블루투스 LE를 지원하는 모듈이다. 이 라이브러리르 통해서 MacOS, Windows, Linux 등에서도 간편하게 장치에 연결하고 데이터를 통신할 수 있다. 아래에서는 bleak을 이용한 간단한 예시들이다. --- 실습환경 python 3.9.6 bleak 0.20.2 수행 단계 요약 1. Bluetooth 장비 O.. 2023. 5. 24.

[React] 1. JSX 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 본격적으로 React를 이용해 웹페이지를 만들어보자! 1. JSX 웹사이트의 뼈대를 구축할 때 html과 css를 이용하여 구성한다. React라고 해서 다를 것은 없다! 똑같이 html과 css를 이용한다. 하지만 다른 점은 저번 포스트에서 다뤘던 것 처럼 js파일에 코드를 작성한다. 이것이 바로 JSX이다. JSX(JavaScript XML)는 JS에 XML을 추가한 문법이다. JSX에 XML 코드를 입력하면 브라우저에서 실행하기 전 바벨을 통해 일반 js형태의 코드로 변환된다. App.js import './App.css'; function App() { return ( ..... 2023. 5. 7.

[React] 0. React를 사용하는 이유 & 초기 세팅 현재 웹 프레임워크 중 가장 많이 사용하고 시장에서 원하는 React에 대해서 알아보자! 1. React를 사용하는 이유 장점 1_ 리액트는 SPA(Single Page Application)를 만들 수 있다. 즉, 모바일 어플처럼 새로고침을 하지 않고 페이지 전환 등이 부드럽게 구현이 되도록 제작할 수 있다. 물론 Vanilla JS로도 SPA를 구현할 수 있지만 React를 이용하는 쪽이 훨씬 간편하게 만들 수 있다. 장점 2_ Html의 재사용이 편리해진다. html을 함수, array, object 등에 담아서 활용할 수 있기 때문에 재사용이 편리하다. 장점 3_React Native를 이용해 모바일 어플 구현도 가능하다. 이러한 장점들 뿐아니라 시장이 가장 요구하는 기술이기 때문에 웹 개발자로서.. 2023. 5. 5.

이전 1 ··· 3 4 5 6 7 8 9 ··· 24 다음

티스토리툴바