브래의 슬기로운 코딩 생활

소켓 및 TCP 프로그래밍 - TCP 서버 – 클라이언트 응용 - 프로세스 생성(복사) 프로세스 생성 함수: fork() • 실행중인 프로세스로부터 새로운 프로세스를 생성 • 자신과 동일한 프로세스를 자식 프로세스로 생성 • 호출된 위치에서부터 자식프로세스가 실행됨 • 결과 값: – 성공(부모) : 자식프로세스의 ID – 성공(자식) : 0 – 실패 : -1 스레드 기법 스레드 생성 및 종료 함수 : pthread_create() • 프로세스내 새로운 스레드를 생성하고 실행 • 인자: – *thread : 스레드 변수 – *attr : 스레드의 속성을 제어 – *start_routine : 스레드용 함수 – *arg : 스레드 함수에 전달할 변수 함수 : pthread_join() • 자식 스레드의 종료..

위 자료는 인덕대학교 컴퓨터소프트웨어 학과 배윤성 교수님께서 제작하신 강의 자료입니다.

Shared State shared state •하나의 데이터를 여러 개의 컴포넌트에서 표현해야 하는 경우 -각 컴포넌트의 state에서 데이터를 각각 보관하지 않고, 공통된 부모 컴포넌트의 state를 공유해서 사용하는 것이 효율적 •어떤 컴포넌트의 state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용 •하위 컴포넌트가 공통된 부모 컴포넌트의 state를 공유하여 사용 하위 컴포넌트에서 State 공유하기 state를 공유하는 컴포넌트 만들어 보기 1. 물의 끓음 여부를 알려주는 컴포넌트 1-1. 사용자의 입력값을 받아서 물이 끓는지 판별하는 컴포넌트 2. 입력 컴포넌트 추출하기 - 섭씨/화씨온도를 입력받기 위해 재사용 가능한 컴포넌트로 추출 2-1. 추출한 입력 컴포넌트 적용 - 사..

폼(Forms) 폼이란? Form •사용자로부터 입력을 받기 위해 사용하는 양식 •리액트와 HTML 폼의 차이 - 리액트는 컴포넌트 내부에서 state를 통해 데이터를 관리 - HTML 폼은 엘리먼트 내부에 각각의 state가 존재 제어 컴포넌트 제어 컴포넌트(Controlled Components) •React에 의해서 값이 제어되는 컴포넌트 (input form element) •제어 컴포넌트를 사용하면 입력값이 리액트 컴포넌트의 state를 통해 관리할 수 있음 •사용자의 입력을 직접적으로 제어할 수 있음 -입력 양식의 초기값을 원하는대로 지정 -어떤 양식의 값이 변경되었을 때 다른 양식의 값을 자동으로 변경할 수 있음 textarea 태그 textarea 태그 - 여러 줄 입력을 통해서 긴 텍스트..

합성 vs 상속 합성에 대해 알아보기 합성(Composition) •여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 Containment 하위 컴포넌트를 포함하는 형태의 합성 방법 •Sidebar, Dialog 같은 박스 형태의 컴포넌트는 어떤 자식 엘리먼트가 들어올지 예상할 수 없음 •이러한 컴포넌트에서는 Containment 합성 방법을 사용 - 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달 Specialization 범용적인 컴포넌트를 만들어 놓고 이를 특수화(구체화)시켜서 컴포넌트를 합성하는 방식 •범용적인 Dialog 컴포넌트 – 모든 종류의 Dialog를 포함하는 개념 •Welcome Dialog는 환영을 위한 구체화된 Dialog 컴포넌트 •Alert..

컨텍스트(Context) 컨텍스트란 무엇인가? 컴포넌트 간 데이터 전달 방식 리액트 컴포넌트 사이에서 props를 통해 데이터를 전달하는 방식 부모에서 자식으로 단방향 전달 여러 컴포넌트에 걸쳐 자주 사용되는 데이터의 경우 depth가 깊어질수록 반복적인 코드 생성, 사용하기 불편 Context - React 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있도록 고안된 방법 - 컴포넌트 트리를 통해 곧바로 컴포넌트에 데이터를 전달하는 방식 어떤 컴포넌트든지 데이터에 쉽게 접근할 수 있음 데이터를 한곳에서 관리 - 코드가 단순해지고 디버깅에 유리 언제 컨텍스트를 사용해야 할까? 여러 컴포넌트에서 자주 사용하는 데이터를 사용할 경우 사용자의 로그인 여부, 로그인 정보, UI 테마, 현재 선택된 언어 e..

TCP 프로그래밍 소켓 생성 및 TCP 클라이언트용 APIs 통신 모델 서버/클라이언트 모델 Server : 서비스 제공자 Client : 서비스 요청자 방식에 따른 서버의 종류 복잡성(서버 vs 클라이언트) - 서버는 일반적으로 클라이언트의 요청에 맞는 서비스를 제공 - 다양한 클라이언트의 요청에 대한 응답을 처리해야 함 - 서버는 클라이언트대비 복잡한 제어와 구조를 가짐 네트워크 프로그래밍 - 원거리 프로세스간 상호 통신을 위한 기법 - 운영체제는 원거리 프로세스간 통신을 위해 소켓(socket)을 지원 네트워크 시험 네트워크 시험 툴 명령어: nc {-options} [hostname] [port] • NC: Net Cat • 네트워크 시험을 위한 도구 – 일반적으로 프로그램 검증 도구(debugg..

네트워크용 기본 API 주소체계 변환 문자열형 주소의 32비트 정수형 주소로 변환 함수: inet_addr() • Dotted-Decimal Notation을 Big-Endian의 32비트 정수형 데이터로 변환하는 함수 인자값 • *cp : 문자열 형태의 IP 주소 값(“xxx.xxx.xxx.xxx”, 길이 ≤ 15) 결과값 • 성공: 4바이트 정수(Big-Endian) • 실패: INADDR_NONE (0xFFFFFFFF) 함수: inet_network() • Dotted-Decimal Notation을 호스트 데이터 형태의 32비트 정수형 데이터로 변환하는 함수 • 네트워크 사용을 위해서는 htonl() 함수 호출이 필요 인자값 • *cp : 문자열 형태의 IP 주소 값(“xxx.xxx.xxx.xxx..

리스트와 키란 무엇인가? 리스트(List) •같은 아이템을 순서대로 모아놓은 것 •리스트를 위해 사용하는 구조 – 배열 •배열 – 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것 ◦키(Key) •각 객체나 아이템을 구분할 수 있는 고유한 값 - 리액트에서는 배열과 키를 사용하여 반복되는 다수의 엘리먼트를 쉽게 렌더링할 수 있음 여러 개의 컴포넌트 렌더링하기 컴포넌트 반복 구조 Array.map() •배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 currentValue : 처리할 현재 요소 index : 처리할 현재 요소의 인덱스 array : map()을 호출한 배열 리스트의 키에 대해 알아보기 리스트의 키 •리스트에서 아이템을 구분하기 위한 고유한 값 ..

조건부 렌더링이란? 조건부 렌더링(Conditional Rendering) •어떠한 조건에 따라서 렌더링이 달라지는 것 •조건문의 결과 true/false에 따라서 렌더링을 다르게 하는 것 ex. 조건문의 값이 true이면 버튼을 보여주고 false이면 버튼을 가림 자바스크립트의 Truthy와 Falsy truthy - true는 아니지만 true로 여겨지는 값 - { } (empty object) - [ ] (empty array) - 42 (number, not zero) - “0”, “false” (string, not empty) flasy – flase는 아니지만 flase로 여겨지는 값 - 0, -0 (zero, minus zero) - 0n (Bigint zero) - ‘ ‘, “ “, ` ..