goldenkiwi-coder 님의 블로그

[ 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을 사용하는 대표적인 라..

[ TERMS 06 ] 반응형 웹 디자인1. 반응형 웹 디자인의 정의하나의 웹 사이트가 사용자의 디바이스(데스크톱, 모바일, 태블릿)의 해상도에 반응하여 콘텐츠의 크기 및 배치를 최적화하여 제공하는 기술 2. 반응형 웹 디자인은 어떻게 접하게 될까?반응형 디자인이 적용되어 있지 않다면, 데스크톱 버전이 그대로 사용자의 스마트폰에서 나타난다. 최근 사용자들은 다양한 기기로 서비스를 이용하기 때문에 반응형 웹 디자인은 필수이다.[ e.g. 반응형을 적용하지 않은 웹사이트를 스마트폰으로 접속하면, 스마트폰 가로 비율에 맞게 보이지 않고 페이지의 일부만 나타나서 상하좌우로 스크롤 하면서 화면을 봐야한다.] 3. 반응형 웹 디자인 알아보기>  등장 배경1990년대 중반까지 대부분의 웹 페이지는 데스크톱용으로 제작..

[ TERMS 05 ] 디자인 시스템1. 디자인 시스템의 정의웹이나 앱과 같은 서비스 디자인에 적용되는 디자인 원칙, 규격을 의미.[ e.g. 일괄적인 디자인을 위해 UI 가이드라인, UX 가이드라인,  컴포넌트들을 모아 놓은것] 2. 디자인 시스템은 어디서 접하게 될까?디자인 시스템은 우리가 사용하는 대부분의 서비스에서 접할 수 있다. 네이버의 초록색, 카카오의 노란색과 같은 색상 또는 디자인이 네이버 지도, 카카오 맵과 같은 다른 서비스들에서도 일관성있게 확인 가능하다. => 각각의 서비스가 디자인 시스템을 이용하여 제작되었기 때문 3. 디자인 시스템 알아보기> 구성 요소디자인 시스템은 색상, 타이포그래피, 스타일, 일관된 UI,UX요소 등을 포함한다. 기업은 추구하는 목표나 이미지등을 디자인을 통ㅊ..

[TERMS 04] UI/UX1. UI(사용자 인터페이스) / UX(사용자 경험)의 정의UI(User Interface) : 정보 기기와 소프트웨어의 화면 같은 사용자와의 접점을 의미 UX(User experience) : 정보 기기와 서비스를 사용하는 사람이 느끼는 경험을 의미 2. UI / UX는 어떻게 접하게 될까?앱 간에 차이를 만드는 요소 : UX + UI [ e.g. 카카오톡, 네이버, 유튜브 등 많은 사람이 사용하는 앱은 사용성이 좋다. 다른 앱에 비해서 메뉴, 배경 디자인도 예쁘고 각 요소가 이용하기 편하게 배치되어 있다.] 3. UI / UX 알아보기> 개념UI와 UX는 항상 같이 등장하는 개념이다.  그만큼 밀접하게 관련되어 있지만 역할은 다르다. UI  : 사용자와 전자 기기가 상호 ..

[TERMS 03] 웹 서버 / WAS1) 웹 서버(Web Server) / WAS (Web Application Server)의 정의웹 서버와 WAS는 사용자(클라이언트)의 요청을 받고 요청에 적절한 결과를 사용자에게 전달하는 프로그램이다. 2) 웹 서버 / WAS는 어디서 접하게 될까?서버는 서비스 운영에 꼭 필요!브라우저를 이용하여 웹 서핑을 하거나, 모바일 앱을 활용하여 하는 모든 행위는 서버를 통해서 이루어진다. 서버는 사용자의 요청을 받아들이고 요청에 맞는 결과를 사용자에게 전달한다. 또한 웹 페이지를 만들 때 서버를 통하여 사용자에게 웹 페이지를 제공한다. 3) 웹 서버 / WAS 알아보기>  개념웹 서버란? 웹 서버는 자판기와 유사하다. 자판기가 돈을 넣고 물건을 고르면 원하는 물건을 그대..

[TERMS 02] 웹 표준 / 웹 접근성 1) 웹 표준/ 웹 접근성의 정의> 웹 표준웹상에서 지켜하는 표준 규칙.웹 표준을 잘 준수한 사이트 = 국제 표준화 단체인 W3C(World Wide Web Consortium)에서 지정한 표준안을 지키며 제작된 사이트 > 웹 접근성웹 접근성은 장애인과 비 장애인 모두가 웹 사이트를 이용할 수 있게 하는 방식.올바르게 설계되어 개발, 편집되었을 때 모든 사용자가 정보와 기능에 동등하게 접근 할 수 있다. 2) 웹 표준/ 웹 접근성은 어디서 접하게 될까? 웹 표준을 준수해서 개발한  사이트 = 웹 브라우저(크롬, 사파리 등)에 상관없이 동일하게 이용할 수 있다.웹 표준을 준수하는 이유 = 사용자가 어떤 웹 브라우저를 사용하든지 웹 사이트를 정상적으로 이용하게 하기..

[TERMS 01] 웹 1.0, 웹 2.0, 웹 3.01) 웹 1.0, 웹 2.0, 웹 3.0웹 뒤에 붙어 있는 숫자는 웹의 발전 단계를 의미한다.웹 1.0 : 읽기 전용(Read-only) 웹 2.0 : 쓰기 기능 추가(write) => 상호 작용 측면으로 성장 웹 3.0 : 시맨틱 마크업 및 웹 서비스에 중점 2) 웹은 어디서 접하게 될까?컴퓨터와 스마트폰 세상 속에 살고 있는 우리 주위에 항상 존재 3) 웹 1.0, 웹 2.0, 웹 3.0 알아보기웹(Web) 정의 :  'World Wide Web'의 줄임말로 인터넷 위에서 동작하는 서비스이다. 웹(Web) 역할 :  사용자들이 정보를 나누는 정보의 공간을 제공해준다.>  웹 1.0웹 1.0의 키워드 : '읽기 전용'가장 초기 버전, 정보를 소유권자..