목록Brae's repository (463)
브래의 슬기로운 코딩 생활
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/lumDQ/btsABA7AJIw/DavE2HDz1DKHfxx3QWV9Z1/img.png)
스타일링 CSS CSS (Cascading Style Sheets) •HTML – 콘텐츠의 구조와 의미를 정의 •CSS – 스타일과 레이아웃을 정의 •CSS는 크게 선택자(selector)와 스타일로 구성 Selector - 스타일을 어떤 엘리먼트에 적용할지를 선택하게 해주는 것 Selector의 유형 •Element selector •ID selector •Class selector •Universal selector •Grouping selector •Element의 상태와 관련된 selector •Element selector 특정 HTML 태그를 선택 •ID selector element에 고유한 id를 정의하고 이 id를 기반으로 선택 / #뒤에 id를 붙여서 사용 •Class selector ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/p6byd/btsAJDamzgh/TvkF1shAsOSQQKrkowf1q1/img.png)
Multiplex 서버 - poll 기법 - Poll 기법 폴링 함수 함수: poll() • 등록된 파일 기술자(FD: File Descriptor)를 이용하여 이벤트를 감지 • 해당 기술자의 입/출력 상태를 모니터링하여 결과를 기록 • 인자: – *fds : 모니터링하고자 할 파일기술자를 갖는 구조체변수들 – nfds : 파일기술자의 개수(구조체 변수의 개수) – timeout : 모니터링 시간(밀리초) • 결과 값: – 성공 : 0 또는 그 이상(이벤트의 개수) – 실패 : -1 구조체: struct pollfd poll() 함수의 파일기술자 모니티링용 구조체 • 구조체 멤버: – fd : 모니터링할 파일기술자 – events : 모니터링할 이벤트 종류 – revents : 발생한(감지된) 이벤트 타..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c2HkcE/btsAFrJsyy7/06SLtEPKfPnax25dApmAZK/img.png)
Multiplex 서버 - select 기법 - 다중 접속 서버 멀티플렉싱(Multiplexing) 데이터를 처리하는데 있어서 하나의 프로세스가 동시에 여러 개의 동작을 수행 블록킹(blocking) 현상 방지 종류: • 시간 분할(TDM: Time Division Multiplexing) – 시간을 슬롯(slot)이라는 개념으로 분류 – 슬롯의 크기만큼 각 주어진 일을 처리 – 대표적 예: select, poll 기법 • 이벤트 분할(EDM: Event Division Multiplexing) – 외부의 신호를 인식하여 그 신호에 등록된 일을 처리 – 주로 입/출력 처리에 선호 – 대표적 예: 인터럽트 멀티플렉스 서버 Vs. 멀티프로세스 서버 멀티프로세스 방식 • 클라이언트의 개수에 따라 독립적인 프로..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/CmBS9/btsAJASaw97/NKzDNwFo3fnv4n0tsh9vX1/img.png)
소켓 및 TCP 프로그래밍 - TCP 서버 – 클라이언트 응용 - 프로세스 생성(복사) 프로세스 생성 함수: fork() • 실행중인 프로세스로부터 새로운 프로세스를 생성 • 자신과 동일한 프로세스를 자식 프로세스로 생성 • 호출된 위치에서부터 자식프로세스가 실행됨 • 결과 값: – 성공(부모) : 자식프로세스의 ID – 성공(자식) : 0 – 실패 : -1 스레드 기법 스레드 생성 및 종료 함수 : pthread_create() • 프로세스내 새로운 스레드를 생성하고 실행 • 인자: – *thread : 스레드 변수 – *attr : 스레드의 속성을 제어 – *start_routine : 스레드용 함수 – *arg : 스레드 함수에 전달할 변수 함수 : pthread_join() • 자식 스레드의 종료..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cSQuYV/btsz6PRxUKf/kYQKEMpOddcuu9oUwWFUak/img.png)
위 자료는 인덕대학교 컴퓨터소프트웨어 학과 배윤성 교수님께서 제작하신 강의 자료입니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/crTmzW/btsz6gu5itn/nsnx1MhWOU8PjncBJdlOCK/img.png)
Shared State shared state •하나의 데이터를 여러 개의 컴포넌트에서 표현해야 하는 경우 -각 컴포넌트의 state에서 데이터를 각각 보관하지 않고, 공통된 부모 컴포넌트의 state를 공유해서 사용하는 것이 효율적 •어떤 컴포넌트의 state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용 •하위 컴포넌트가 공통된 부모 컴포넌트의 state를 공유하여 사용 하위 컴포넌트에서 State 공유하기 state를 공유하는 컴포넌트 만들어 보기 1. 물의 끓음 여부를 알려주는 컴포넌트 1-1. 사용자의 입력값을 받아서 물이 끓는지 판별하는 컴포넌트 2. 입력 컴포넌트 추출하기 - 섭씨/화씨온도를 입력받기 위해 재사용 가능한 컴포넌트로 추출 2-1. 추출한 입력 컴포넌트 적용 - 사..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/nUTNL/btsAbaNmTjL/e6XBQQJ9Alj05DsUCN5l4K/img.png)
폼(Forms) 폼이란? Form •사용자로부터 입력을 받기 위해 사용하는 양식 •리액트와 HTML 폼의 차이 - 리액트는 컴포넌트 내부에서 state를 통해 데이터를 관리 - HTML 폼은 엘리먼트 내부에 각각의 state가 존재 제어 컴포넌트 제어 컴포넌트(Controlled Components) •React에 의해서 값이 제어되는 컴포넌트 (input form element) •제어 컴포넌트를 사용하면 입력값이 리액트 컴포넌트의 state를 통해 관리할 수 있음 •사용자의 입력을 직접적으로 제어할 수 있음 -입력 양식의 초기값을 원하는대로 지정 -어떤 양식의 값이 변경되었을 때 다른 양식의 값을 자동으로 변경할 수 있음 textarea 태그 textarea 태그 - 여러 줄 입력을 통해서 긴 텍스트..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bRM5Xx/btsAeBcBDhV/67hLROVNBsW5QQdcmwYU6k/img.png)
합성 vs 상속 합성에 대해 알아보기 합성(Composition) •여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 Containment 하위 컴포넌트를 포함하는 형태의 합성 방법 •Sidebar, Dialog 같은 박스 형태의 컴포넌트는 어떤 자식 엘리먼트가 들어올지 예상할 수 없음 •이러한 컴포넌트에서는 Containment 합성 방법을 사용 - 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달 Specialization 범용적인 컴포넌트를 만들어 놓고 이를 특수화(구체화)시켜서 컴포넌트를 합성하는 방식 •범용적인 Dialog 컴포넌트 – 모든 종류의 Dialog를 포함하는 개념 •Welcome Dialog는 환영을 위한 구체화된 Dialog 컴포넌트 •Alert..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dj69ZG/btsAaiLR7cP/SghBRU9wLMiKhlOV8uuf6K/img.png)
컨텍스트(Context) 컨텍스트란 무엇인가? 컴포넌트 간 데이터 전달 방식 리액트 컴포넌트 사이에서 props를 통해 데이터를 전달하는 방식 부모에서 자식으로 단방향 전달 여러 컴포넌트에 걸쳐 자주 사용되는 데이터의 경우 depth가 깊어질수록 반복적인 코드 생성, 사용하기 불편 Context - React 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있도록 고안된 방법 - 컴포넌트 트리를 통해 곧바로 컴포넌트에 데이터를 전달하는 방식 어떤 컴포넌트든지 데이터에 쉽게 접근할 수 있음 데이터를 한곳에서 관리 - 코드가 단순해지고 디버깅에 유리 언제 컨텍스트를 사용해야 할까? 여러 컴포넌트에서 자주 사용하는 데이터를 사용할 경우 사용자의 로그인 여부, 로그인 정보, UI 테마, 현재 선택된 언어 e..