goldenkiwi-coder 님의 블로그

[ TERMS 03 ] 프로토콜 1. 프로토콜(Protocol)의 정의 프로토콜은 컴퓨터, 통신장비 간의 원활한 소통을 위한 약속이다. 본래 프로토콜은 외교상의 의례나 약속을 의미했지만, 인터넷의 발달로 그 의미가 확대되었다.2. 프로토콜은 어디서 접하게 될까?>  TCP / IP TCP와 IP는 인터넷에서 가장 중요한 역할을 하는 프로토콜이다. 과거 냉전 시절, 미국에서 서킷 통신의 단점을 보완하고자 패킷 통신을 고안하였다.  서킷 통신은 일대일로 연결되는 방식이며, 선이 연결되어있어야 하고 교환원을 통해서 연결을 해야한다. 반면 패킷 통신은 데이터를 보낼 때 잘게 쪼개서 보낸다. 데이터를 쪼개서 보내면 도착할 때는 순서나 데이터가 달라질 수 있다. 이를 보완하기 위해서 TCP / IP가 등장한다.  ..

[ TERMS 02 ] TCP / UDP1. TCP / UDP의 정의 TCP와  UDP는 '수신 측에 데이터를 전달한다'는 목표를 갖고 있지만 성질이 다른 트랜스포트 층의 프로토콜이다. 2. TCP / UDP는 어디서 접하게 될까? TCP/UDP는 눈에 보이지 않지만 웹 사이트 접속, 모바일 게임, 이미지 다운로드, 영상 재생, 이메일 등 일상에서 자주 사용되고 있다. TCP/UDP를 설명하기 전에 먼저 알아야 할 배경지식에 대해서 소개하겠다. >  네트워크 '네트워크'라고 하면 컴퓨터 용어 또는 시민단체나 동아리 등 일반적인 의미가 떠오른다. 네트워크는 한 단어이지만 '통신망', '관계', 방송'등 다양한 뜻을 가진다. 사전을 찾아보면 네트워크에는 '망'이라는 의미가 있다. 앞서 언급한 의미와 연결하여..

[ TERMS 01 ] OSI 계층1. OSI( Open Systems Interconnection ) 7계층의 정의 OSI는 개방형 시스템 간의 상호 연결을 의미한다. 국제 표준화 기구인 ISO에서 개발한 모델로 컴퓨터 네트워크의 프로토콜 디자인과 통신을 계층으로 나누어 설명한 것이다. 간단하게 네트워크에서 통신이 일어나는 과정을 7단계로 나눠서 설명한 모델이다. 2. OSI 7계층은 어디서 접하게 될까? OSI 7계층은 컴퓨터 과학 분야인 네트워크/통신과 정보처리기사 시험 등을 준비하면 접하게 되는 개념이다. 통신이란 2개 이상의 컴퓨터가 데이터를 주고 받는것을 의미한다. 이때 각 컴퓨터를 '호스트'라고 부르고 송신하는 호스트에서 OSI 7계층을 이용하여 수신하는 호스트로 데이터를 전달한다. 3. O..

[ TERMS 16 ]  PWA1. PWA( Progressive Web App )의 정의 PWA는 구글 크롬 엔지니어 알렉스 러셀과 디자이너 프랜시스 베리만이 소개한 웹의 새로운 개념으로 네이티브 앱( Native App ) 수준으로 웹 기술이 발전해 나갈 수 있게 방향성을 제시하는 최신 웹 개발 방법이다. 궁극적으로는 웹에서 네이티브 앱 수준의 사용자 경험을 제공하는 것이 목적이다. 2. PWA는 어떻게 접하게 될까? 웹 사이트에 접속했는데 앱을 설치하겠냐고 물어보며 팝업창을 띠우고, 클릭시 스토어를 거치지 않고 설치된다면 PWA이다. 대표적으로는 스타벅스가 PWA로 만들어진 웹 앱을 서비스하고 있다. PWA는 웹 앱의 화면과 동일하지만 주소창이 사라지고 네이티브 앱처럼 더 쾌적하게 사용할 수 있다...

[ TERMS 15 ]  SPA1. SPA(Single Page Application)의 정의 SPA는 웹 사이트의 전체 페이지를 하나의 페이지로 구현하고, 새로운 콘텐츠를 요구할 때마다 하나의 페이지 안에서 필요한 부분만 동적으로 처리하는 개발 방법이다. 2. SPA는 어떻게 접하게 될까? 초기의 웹 사이트는 단순한 문서 작성 용도로 활용되었기에 웹 페이지를 이동할 때마다 서버로부터 새로운 페이지를 받아와도 큰 문제가 없었다. 하지만 최근 웹 사이트가 고도화 됨에 따라 한 페이지가 처리해야 하는 데이터의 크기 및 복잡도가 점점 증가하여 기존의 웹 개발 방식으로는 사용자 경험을 만족시킬수가 없어졌다. SPA는 웹에서도 모바일과 같은 사용자 경험을 제공하기 위해 등장했다. 3. SPA 알아보기>  개념 S..

[ TERMS 14 ]  MVC 1. MVC(Model-View-Controller)의 정의 앱 개발을 세 개의 영역으로 분할하고 각 요소에 고유의 역할을 부여하는 방식이다. MVC 패턴은 M(Model)은 데이터 영역, V(View)는 사용자에게 보여지는 UI영역, C(Controller)는 비즈니스 로직 처리 영역으로 분리해서 개발을 진행한다. MVC패턴을 도입하면 UI 영역과 도메인(비즈니스) 처리 영역이 분리되므로 서로 영향을 주지 않고 유지 보수 할 수 있다. MVC는 소프트웨어 디자인 패턴 중 하나이다. (디자인 패턴을 잘 활용하면 가독성과 간결성을 갖출 뿐만 아니라 설계적 측면에서도 이점이 있다. 즉, 확장과 유지 보수가 용이하여 효율적인 소스 코드를 작성할 수 있다.) 2. MVC는 어떻게..

[ TERMS 13 ]  모듈 / 웹팩1. 모듈(Module) / 웹팩(Webpack)의 정의> 모듈 한 파일에 들어가는 코드의 줄 수가 많아지면 가독성을 위해 복잡한 코드들을 여러 파일로 분리시켜야 한다. 이렇게 나눠진 여러 파일 각각을 '모듈'이라 부른다. 모듈은 그 자체로 완전히 독립적인 기능을 하기도 하고, 필요할 때 다른 본체에 합류하여 그 기능을 수행한다. > 웹팩 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)이다. 모듈 번들러는 웹 앱을 구성하는 자원( HTML, CSS, 자바스크립트, Images)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구이다. 2. 모듈 / 웹팩은 어디서 접하게 될까?모듈 : 함수 파일들을 내..

[ TERMS 12 ]  웹 스토리지  1. 웹 스토리지(Web Storage)의 정의웹 페이지의 데이터를 저장하는 곳은 일반적으로 서버이다. 하지만 일시적으로 사용되는 모든 데이터를 서버에 저장하고 불러오게 된다면 트래픽과 서버 공간의 낭비가 심해진다. 이를 해결하기 위해 일시적으로 클라이언트 단에만 저장하는, 즉 웹 브라우저 내에서 데이터 저장을 가능하게 해주는 것이 바로 웹 스토리지이다. 2. 웹 스토리지는 어디서 접하게 될까?[ e.g. 쇼핑몰 사이트에서의 최근 본 상품 목록 : 상품 조회시 조회 기록을 웹 스토리지에 저장, 장바구니에 담은 목록 : 장바구니에 담을시 상품목록이 웹 스토리지에 저장, 웹 사이트의 자동 로그인, 블로그 글의 임시저장 ] 3. 웹 스토리지 알아보기> 개념 웹 스토리지 ..

[ TERMS 11 ]  캐시 / 쿠키 / 세션1. 캐시(Cache) / 쿠키(Cookie) / 세션(Session) 의 정의 캐시는 이전에 사용했던 데이터들을 보관하는 사용자의 저장 공간이다. 웹 사이트나 앱에서 서비스를 이용할 때 재사용할 수 있는 데이터(이미지, HTML, 파일 등)들을 캐시에 저장한다. 서버에 재 요청했을 때 캐시를 이용하면 시간과 비용을 절약할 수 있다.  쿠키는 http 통신의 특성(무상태(Stateless)와 비연결성(Connetionless)) 때문에 서버가 기억하지 못하는 사용자의 정보를 알기 위해 사용자에게 저장하는 크기가 작은 문자열 파일이다.  세션은 사용자가 사이트에 로그인했을 때 일정 기간동안 서버에서 사용자에 대한 정보를 기록하고 보관하여 사용자를 관리하는 서버..

[ TERMS 10 ]  CSR / SSR1. CSR(Client Side Rendering) / SSR(Server Side Rendering)의 정의 웹 페이지의 렌더링 방식은 렌더링 과정을 수행하는 위치에 따라 CSR(클라이언트 사이트 렌더링)과 SSR(서버 사이드 렌더링)로 나뉜다. 2. CSR / SSR 은 어떻게 접하게 될까? 웹 개발자는 웹 앱 개발에 앞서 제공하는 웹 앱의 특성에 적합한 렌더링 방식을 선택해야 한다. 때로는 하나의 앱 내에서도 특정 페이지는 CSR 방식으로, 또 다른 특정 페이지는 SSR로 제공된다. 3. CSR / SSR 알아보기> 렌더링이란? 웹 페이지는 HTML, CSS, 자바스크립트와 그 외 여러 파일로 이루어져 있다. 이 파일들은 웹 페이지에 그리기 위해 렌더링 엔..