Flutter 맛보기 1
직방 기술지원팀 기술공유 세미나 중 플러터를 소개한 내용입니다
인터넷과 관련된 프로토콜을 모아놓은 것
대부분, IP프로토콜을 사용한 통신에서 사용되고 있는 프로토콜을 총칭해서 TCP/IP라고 함.
설계를 편하게 하고 유지보수를 위해서 계층화가 되어있음.
이더넷 어댑터 이더넷:
연결별 DNS 접미사. . . . : 링크-로컬 IPv6 주소 . . . . : fe80::c160:8c0f:cef4:7ce8%13 IPv4 주소 . . . . . . . . . : 192.168.1.1 서브넷 마스크 . . . . . . . : 255.255.248.0 기본 게이트웨이 . . . . . . : 192.168.0.1
위의 IPv4주소가 내 컴퓨터의 IP주소. 192.168.1까지가 네트워크 주소, 맨뒤의 1이 호스트 주소.
네트워크 주소란?
: 공통적인 부분(중복이 되는 부분)
호스트 주소란?
: 식별할 수 있는 부분(중복이 없고 유일무이한)
예시 : 경기도 용인시 수지구 죽전동 A아파트 101동 1301호 네트워크 주소 : 경기도 용인시 수지구 죽전동 A아파트 101동 호스트 주소 : 1301호
IP는 32자리 2진수로 표현.
예시 172.16.254.1 | 172. | 16. | 254. | 1 | |—-|—-|—-|—-| | 10101100. | 00010000. | 11111110. | 00000001 |
## TCP(Transfer Control Protocol)
* 신뢰성을 담당
* 바이트 스트림 서비스
\: 큰 데이터를 보내기위에 TCP세그먼트라고 불리우는 단위 패킷으로 작개 분해하여 관리하는것. 대용량의 데이터를 보내기 쉽게 작게 분해하여 상대에게 보내고, 정확하게 도착했는지 확인하는 역할.
* TCP Three way hand shaking (STN/ACK 플래그 사용)
\: SYN으로 보내면 SYN/ACK 플래그로 패킷 수신한 사실을 전하면 ACK 플래그를 다시 보내 완료되었음을 전송. 도중에 끊키면 다시 반복
![TCP Three way hand shaking (STN/ACK 플래그 사용)](/assets/images/3way_hand_shake.png)
## DNS(Domain Name System)
: 도메인을 주면 IP주소를 반환해줌
## HTTP
* 클라이언트(웹브라우저)에서 서버까지 일련의 흐름을 결정하는 프로토콜
* HTTP자체는 잘 변하지 않음. 현재는 1997년 공개된 HTTP/1.1을 대부분 쓰고있음. 2.0이 탄생되었지만 표준화까지 시간이 오래걸림
> [HTTP 세션에 대한 설명](https://tobewiseys.tistory.com/72)
> [쿠키와 세션](https://sdevstudy.tistory.com/27)
## URI, URL
URI(Uniform Resource Identifiers)
스키마를 나타내는 리소스를 식별하기 위한 식별자.
스키마: 리소스를 얻기위한 수단에 이름을 붙이는 방법. (http, ftp, mailto, file, telnet 등).
* Uniform
* 통일된(Uniformity) 서식을 결정하는 것. 여러가지 종류의 리소스 지정을 구별없이 같은 맥락에서 사용할 수 있게 한다. (응??) 또한, 새로운 스키마(http:와 ftp등) 도입을 용이하게 함
* Resource
* 식별가능한 모든 것. (도큐먼트 파일, 이미지, 서비스(ex. 오늘의 일기예보) 등 다른 것과 구별할 수 있는 것은 모두 리소스) 단일한 부분만 아니라 복수의 집합도 리소스임
* Identifier
* 식별자. 식별 가능한 것을 참조하는 오브젝트.
URI는 리소스를 식별하기 위해 문자열 전반을 나타내는데 비해
URL은 리소스의 장소(네트워크상의 위치)를 나타낸다.
URL은 URI의 서브셋이다. (URI = URL + URN)
<br><br>
URL 포맷<br><br>
![URL_syntax](/assets/images/URL_syntax.png)
<br><br>
URL 설명<br><br>
![URL_explain](/assets/images/URL_explain.png)
<br><br>
예시
http://user:pass@www.aaa.com:80/dir/index.html?uid=12#head1
<br>
예시 풀이
http:// user:pass @www.aaa.com :80 /dir/index.html ?uid=12 #head1 스키마(http), 자격정보, 서버주소, 서버포트, 계층적파일경로, 쿼리문자열, 프래그먼트식별자(#head1) ```
TCP는 데이터를 주고 받을 양단 간에 먼저 연결을 설정하고 설정된 연결을 통해 양방향으로 데이터를 전송하지만, UDP는 연결을 설정하지 않고 수신자가 데이터를 받을 준비를 확인하는 단계를 거치지 않고 단방향으로 정보를 전송한다.
하나의 트랜젝션
TCP커넥션 연결 (쓰리웨이 핸드쉐이킹)
HTTP요청
HTTP응답
TCP커넥션 종료
클라이언트 상태 파악하기 위함.
서버에서 리스폰스로 보내진 Set-Cookie라는 헤더필드에 의해 쿠키를 클라이언트에 보존.
다음번에 클라이언트가 같은 서버로 리퀘스트를 보낼 때, 자동으로 쿠키값을 넣어서 송신.
서버는 클라이언트가 보내온 쿠키를 확인해서 어느 클라이언트가 접속했는지 체크하고 서버상의 기록을 확인해서 이전 상태를 알 수 있음.
참고 : 위키백과 HTTP 상태코드
서버와 클라이언트 사이에서 중계 프로그램. 웹 보안, 어플리케이션 통합, 성능 최적화에 쓰임.
모든 웹 트래픽 흐름속에서 신뢰할 만한 중개자 역할을 한다.
요청과 응답을 필터링한다.
무언가를 다운받을 때 애플리케이션 바이러스를 검출하거나, 초등학교 학생들에게서 성인 콘텐츠를 차단한다.
프록시서버와 클라이언트 로컬디스크에 보관된 리소스 사본.
자주 찾는 것의 사본을 저장해두는 특별한 종류의 http프락시 서버다.
리소스를 가진 서버에 엑세스를 줄이는 것이 가능하기 때문에 통신량과 통신시간을 절약할 수 있다.
다른 서버들의 중개자. 주로 HTTP 트래픽을 다른 프로토콜로 변환하기 위해 사용.
게이트웨이는 언제나 스스로가 리소스를 갖고있는 진짜 서버인 것처럼 요청을 다룸.
클라이언트는 자신이 게이트웨이와 통신하는 것을 알지못함.
예를들어 HTTP/FTP 게이트웨이는 GTP URI에 대한 HTTP요청을 받아들인 뒤, FTP 프로토콜을 이용해 문서를 가져옴. 받아온 문서는 HTTP메시지에 담겨 클라이언트에게 보냄.
직방 기술지원팀 기술공유 세미나 중 플러터를 소개한 내용입니다
직방 기술지원팀 기술공유 세미나 중 D3.js를 소개한 내용입니다
직방에서 작성했던 블로그 글을 공유합니다.
회사에서 프론트엔드 개발원칙을 SFC(Single File Component)에서 UI 컴포넌트를 기준으로 CDD(Component Driven Development)를 진행하려고 한다. 그래서 체계적으로 관리하기위해 Storybook과 Bit을 도입해보고자 한다. 각각의 역할은 ...
작성 배경 회사의 작업구조를 페이지 중심 개발에서 UI 컴포넌트 중심 개발로 변경하면서 Workflow를 개선할만한 환경을 구성해야했다. 폐쇄망 기반에서 개발자간 UI 명세서 역할을 할 수 있는 Storybook과 그것을 공유할 Verdaccio라는 구축형 NPM Pri...
Git 시스템 이해하기
CDD(Component Driven Development)란?
GraphQL? RESTful?
회사 프로젝트를 작업하기 전 프론트엔드 개발자들 간의 코드 규칙을 Eslint와 Prettier 설정을 맞춰 관리해가는 방향을 정했다. 아직 협업을 할 경우는 없지만 미래에 인수인계 받거나 협업을 진행할 경우 코드관습이 달라 고생할 경우를 대비하기로 했다. 설정은 작업을 진행하며 ...
공부겸 코딩테스트 사이트에서 토요일 오전 10시에 백엔드 포지션 테스트를 해준다기에 참여해봤다. SQL문제가 나왔는데 더 좋은 답이 있는것 같아 나중에 기록해두고 수정해보기로 한다.
WebRTC란?
동적 프로그래밍(Dynamic Programming)
알고리즘 공부를 하며 부족했던 개념을 다시 정리
문제 : 피보나치 수열 제 1항부터 입력한 자연수(N)까지의 피보나치 수열 항들의 합을 구하여라.
각 반복문의 용도
참고 5 ways to exclude your own visits from Google Analytics How to exclude your own [dynamic] ip from Google Analytics
문제1 문제를 알려줄 수 없다는 답변 받음. github에서 네이버 핵데이 검색하면 나옴.
문제3 문제를 알려줄 수 없다는 답변 받음. github에서 네이버 핵데이 검색하면 나옴.
오픈채팅방 문제 바로가기 링크 카카오의 설명 블로그 나의 첫답안 function solution(N, stages) { let st = stages, stats = []; for(let i=1;i<N+1;i++){ // n let selectedN...
chaning comparison 파이썬은 chaning comparison이라는 신기한 문법이 있다. 참고 if a < b and b < c : (...) 라는 구문이 if a < b < c : (...) 으로 연산된다. 직관적인 문법이 인상적. ...
문제 정수 배열이 주어지면 인덱스 i에 해당하는 값 이외의 모든 값들의 곱인 배열을 구하여라. 보너스 : 나눗셈을 안쓰고 풀기
Set vs Array - 관련기사 Set 유일값들의 배열이 필요할때(distinct) 집합의 개념이 필요할때(차집합, 교집합 등등 자체 메서드들이 많음.) index가 필요 없을때 Array에서 중복값을 없앨때 => ...
문제 list라는 행렬과 k라는 자연수가 주어짐. list의 두 값을 합하여 k값을 만들 수 있으면 true, 없으면 false를 리턴해라. 보너스 : 한줄 표기
문제 정수 배열(int array)가 주어지면 가장 큰 이어지는 원소들의 합을 구하시오. 단, 시간복잡도는 O(n).
<!– ## 설명 각 문자열의 알파벳을 재배열하였을때 같은 단어가 되는 단어들. 예시 tab - bat github - hbuitg
오픈채팅방 문제 바로가기 링크 카카오의 설명 블로그 나의 답안 ```javascript function solution(record) { let accounts = [], events = [], answer = []; function setEn...
문제 설명 별(*) 박스 만들기 입력값 a(rows)와 b(cols)에 해당하는 별박스 만들기
SGIS에서 받은 지도데이터(.shp)를 geojson으로 변경하는 작업 내용