[React Native] Layout 다루기(View, margin, padding, ScrollView)

[React Native] Layout 다루기(View, margin, padding, ScrollView)

1. View React Native에서 는 박스(box)와 같은 개념이다.여러 컴포넌트를 그룹화하는 용도로 사용된다.화면의 레이아웃을 만들 때 기본적으로 사용되는 가장 중요한 컨테이너. Hello React Native! 2. margin과 padding☾ padding (박스 내부 여백) 박스 안쪽 공간을 의미한다.텍스트나 이미지가 박스 테두리와 겹치지 않게 한다. 안쪽 여백 적용 ☾ margin (박스 외부 여백)박스 바깥쪽 공간을 의미한다.다른 컴포넌트와의 간격을 만든다. 바깥 여백 적용 margin vs paddingpadding: 안쪽 여백 → 내용물과 경계 사이 거리margin: 바깥 여백 → 다른 박스와의 거리 React Native에서는 margin이 겹치지 않는다 (웹과..

  • format_list_bulleted Front-end/React Native
  • · 2025. 9. 8.
  • textsms
[네트워크] Chap 5 - Data Encoding

[네트워크] Chap 5 - Data Encoding

01_Encoding☾ Encodingdigital data → digital signal digital signalencoding된 discrete(time 측면), discontinuous(value 측면) voltage pulses각각의 데이터를 encoding해서 signal element로 전송 data elementbits0 or 1 data ratebits per seconddata element를 단위 시간 당 얼마나 보낼 수 있는지에 대한 성능 signal elementdigital : constant amplitude의 voltage pulseanalog : constant frequency, phase, amplituded signal rate(modulation rate)signal..

  • format_list_bulleted Lecture
  • · 2025. 9. 8.
  • textsms

[React Native] 텍스트, 이미지, 텍스트 입력창 삽입

1. 텍스트 삽입 app-folder > App.js react-native에서 Text를 임포트한다. 내부에 문자열을 입력하면 화면에 출력된다. fontSize : 텍스트 크기color: 텍스트 색상import { StyleSheet, View, Text } from 'react-native';export default function App() { return ( // 텍스트 삽입 Hello, World Hello, World );} 2. 이미지 삽입react-native에서 Image를 임포트한다.이미지는 파일에서 불러오기(require) 또는 웹 주소로 불러오기(uri) 두 가지 방법이 있다. require : 로컬 프로젝트 안의 이미지 파일을 가져..

  • format_list_bulleted Front-end/React Native
  • · 2025. 9. 8.
  • textsms
[React Native] 개발 환경 세팅

[React Native] 개발 환경 세팅

1. node.js 설치아래 링크에서 node.js를 설치한다. https://nodejs.org/en/download/ Node.js — Download Node.js®Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.org 잘 설치되었는지 확인하고 싶다면 커맨드 창에 가서 npm 명령어를 입력해보면 된다.문제 없이 설치되었다면 다음과 같은 화면이 나온다.>npm 2. App 생성 >npx create-expo-app 폴더이름 만약 빈 템플릿으로 만들고 싶다면..

  • format_list_bulleted Front-end/React Native
  • · 2025. 9. 8.
  • textsms
[네트워크] Chap 4 - Transmission Media

[네트워크] Chap 4 - Transmission Media

01_Transmission Media    02_Guided transmission media☾ Twisted Pair저렴하고 가장 많이 사용되는 guided transmission medium2개의 절연 구리선이 나선형으로 엮여있다.하나의 선이 single communication link건물 내 전화 네트워크에서 주로 사용 Unshielded Twisted Pair(UTP)여러 개의 twisted pair를 모아둔 것일반적인 전화선에서 사용외부 전자기파 간섭에 약함 shielded Twisted Pair(UTP)여러 개의 twisted pair가 있을 때 신호가 다른 회로로 가지 않도록 막는 절연체 존재좋은 성능 but 비쌈  Near-End Crosstalk(NEXT)하나의 신호가 다른 쪽에 영향..

  • format_list_bulleted Lecture
  • · 2025. 3. 19.
  • textsms
[네트워크] Chap 3 - Data Transmission

[네트워크] Chap 3 - Data Transmission

01_Data Transmission(Physical layer) transmission mediumGuided media : 데이터 굴절, 손실 x. 정반사Unguided media : 무선 연결. 먼 곳 통신 x  linkDirect link : 두 개 사이에 다른 장치 없을 때(amplifier, repeater 제외)Point-to-point link : 두 개의 장치 간의 1대1 링크Multi-point link : 두 개 이상의 장치 간의 링크(wifi)  directionalitySimplex : 단방향. 한 쪽은 transmitter, 다른 한 쪽은 receiver 역할만 한다.Half duplex : 두 station이 한 번에 하나씩 전송한다.Full duplex : 두 station이..

  • format_list_bulleted Lecture
  • · 2025. 3. 19.
  • textsms
[네트워크] Chap 2 - Protocol Architecture, TCP/IP, and Internet-based Applications

[네트워크] Chap 2 - Protocol Architecture, TCP/IP, and Internet-based Applications

01_Protocol Architecture☾ Protocol Architecture왜 layering을 할까? 복잡한 시스템 다루려면 관련 있는 기능끼리 나누어야 유지보수가 가능하기 때문이다. Internet Protocol Stack자기 layer와 바로 위, 아래 아니면 신경 안 쓴다. L5 : application 어플리케이션 네트워킹 도와줌(HTTP, IMAP, SMTP) → messageL4 : transport 데이터를 end-to-end로 잘 보냈는지 체크(TCP, UDP) → segmentL3 : network source-to-destination이 어떤 루트로 가야하는지 담당(IP) → datagramL2 : link switch-to-switch로 데이터 전송 담당(Etherne..

  • format_list_bulleted Lecture
  • · 2024. 7. 26.
  • textsms