goldenkiwi-coder 님의 블로그

[ 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, 자바스크립트와 그 외 여러 파일로 이루어져 있다. 이 파일들은 웹 페이지에 그리기 위해 렌더링 엔..

[ TERMS 09 ]  크롤링1. 크롤링(crawling)의 정의 크롤링은 Crawl(=엎드려 기다) 에서 유래된 단어이다. 크롤링은 웹 크롤링의 줄임말로 웹을 기어 다니며 정보를 수집하는 프로그램을 의미한다. 그리고 크롤링을 하는 친구를 '크롤러(crawler)'[ 동의어 : '스파이더', '웹 스파어더', '스파이더 봇' ]이다.원하는 정보를 가져올 수 있다는 점이 크롤링의 활용도를 무궁무진하게 만든다. 정적인 데이터부터 API와 같은 서비스까지 웹상에 표시되는 모든 데이터를 파싱할 수 있다.  크롤링을 공부할 때에는 스크래핑(scraping)과의 관계를 명확하게 알아야 한다. 크롤링(crawling)스크래핑(scraping)웹을 돌아다니는 목적정보를 탐색하는 것정보를 추출하는 것웹에서의 행동하나의..

[ TERMS 08 ] SEO1. SEO(Search Engine Optimization)의 정의SEO(검색 엔진 최적화)는 웹 사이트가 검색 결과에 더 잘 노출되도록 최적화하는 과정 => 웹 사이트를 검색 엔진에 더 잘 노출시키기 위한 과정 같은 콘텐츠도 어떻게 웹 페이즈를 만드느냐에 따라서 검색했을때 노출되는 정도가 다르다. 2. SEO는 어디서 접하게 될까?네이버나 구글에서 키워드 검색을 하면 항상 상위권에 올라오는 웹 페이지들은 대부분은 웹 페이지를 개발할 때 소스 코드를 검색 엔진이 내호은 가이드에 맞춰 태그에 부가설명을 추가하는 등 검색 엔진 크롤러가 찾기 쉽도록 최적화 작업을 해 놓았을 확률이 높다. 키워드 검색을 했을 대 상위에 뜨는 웹 페이지의 비밀 중 하나는 SEO에 담겨 있다. 3. ..

[ TERMS 07 ] DOM / Virtual DOM1. DOM (Document Object Model) / Virtual DOM의 정의 DOM은 HTML, XML(eXtensible Markup Language) 문서에 접근하기 위해 웹 브라우저에 내장된 API이다. => DOM을 사용해서 HTML 문서의 각 항목을 생성, 변경, 수정, 삭제할 수 있다.  DOM에서 'Document'는 HTML의 문서, 'Object'는 HTML 내의 객체를 의미한다. 이 객체 모델은 문서 내의 모든 요소를 저의하고 각각의 요소에 접근하는 방식을 제공한다.  Virtual DOM은 DOM의 구조를 간략히 흉내 낸 자바스크립트 객체이다( React.js, Vue.js : Virtual DOM을 사용하는 대표적인 라..