디자인 패턴이란 프로그램을 개발하는 과정에서 사용되는 설계 패턴들을 정의한 것입니다. 1. Presentation & Container React 디자인 패턴 중 가장 기본적인 패턴으로, 데이터 로직을 수행하는 Container 컴포넌트와 데이터를 출력하는 Presentation 컴포넌트를 분리하여 구현하는 디자인 패턴 Container 컴포넌트 - API호출, State 관리, 이벤트 처리 등의 작업을 수행하는 컴포넌트 입니다. - 변경된 상태 값을 props를 통해 Presentation 컴포넌트로 전달해줍니다. Presentation 컴포넌트 - UI를 표시하는 컴포넌트입니다. - 직접 상태값을 관리하지 않고 Container 컴포넌트가 전달해준 props를 받아 출력합니다. 특징 - 컴포넌트간 의..

SEO (search engine optimization) 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정 크롤링 검색엔진이 온라인에 있는 문서를 수집하는 과정 색인 검색엔진에서 수집한 데이터를 백과사전 형태로 등록하는 과정 검색엔진 최적화 가이드 문서 웹문서가 정제되지 않은 데이터로 존재하면 검색엔진이 의미 있는 데이터를 뽑아내기가 어려움 => 구글이나 네이버에서 검색엔진 최적화 가이드 문서를 제공 메타태그 - 검색 포털이 잘 가져갈 수 있게 구조화를 하는 과정 title meta name="decription" meta name="author" meta name="keywords" - sns 미리보기를 꾸미는 과정 meta name="og:site_name" ..

data 전송 형식 (CSV, XML, JSON) Server와 Client는 주고 받을 data의 형식을 맞춰야 함 대표적인 data의 형식은 CSV, XML, JSON등이 있음 CSV (Comma Separated Values) 각 항목을 쉼표(,)로 구분해 데이터를 표현하는 방법 다른 두 형식에 비해 굉장히 짧다. 많은 양의 데이터 전송 시 유리 단, 각각의 데이터가 어떤 내용인지 파악하기 어렵다. (서버와 클라이언트가 완벽히 데이터 구조를 공유할 경우 가능) XML(eXtensible Markup Language) xml은 tag로 data를 표현함 tag를 보면 각 data가 무엇을 의미하는지 파악 가능 tag에 사용자 정의 속성을 넣을 수 있으므로 복잡한 data 전달 가능 JSON(JavaS..

fetch() 브라우저에서 fetch() 함수를 지원하기 이전에는 XMLHttpRequest를 이용하여 직접 HTTP 요청하고 응답을 직접 구현 복잡한 구현때문에 jQuery와 axios등과 같은 라이브러리를 사용 브라우저가 fetch() 함수를 지원하면서 위와 같은 라이브러리를 쓰지 않아도 간단히 구현 가능 사용법 fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 options 객체를 받음. options에 아무것도 넘기지 않으면 요청은 GET방식으로 진행되며 url로 부터 contents가 다운로드 됨 실행 결과 Promise 타입의 객체를 반환 반환된 Promise 객체는 API호출이 성공했을 경우 응답객체(response)를 resolve하고, 실패 했을 경우 예외(error) 객체를 r..

JavaScript AJAX XMLHttpRequest는 자바스크립트가 Ajax 방식으로 통신할 때 사용하는 객체 XMLHttpRequest 객체는 Ajax 통신 시 전송방식, 경로, 서버로 전송할 data등 전송정보를 담는 역할 실제 서버와의 통신은 브라우저의 Ajax 엔진에서 수행 httpRequest의 속성값

AJAX(Asynchronous Javascript And XML) Ajax는 언어나 프레임워크가 아닌 구현하는 방식을 의미 Ajax는 웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법을 의미 JavaScript의 XMLHttpRequest(XHR) 객체로 데이터를 전달하고 비동기 방식으로 결과를 조회 화면 갱신이 없으므로 사용자 입장에서는 편리하지만, 동적으로 DOM을 구성해야 하므로 구현이 복잡 Ajax 소개 일반 요청에 대한 응답 data 입력 후 event 발생 Ajax를 적용하지 않은 요청은 서버에서 data를 이용 하여 logic 처리 logic 처리에 대한 결과에 따라 응답 page를 생성하고 client에 전송(화면 전환이 일어 남) Ajax 요청에 대한 응답 data를..

Bootstrap Bootstrap은 빠르고 쉬운 웹 개발을 위해 구조를 미리 만들어준 무료 프런트 엔드 프레임 워크이다. Bootstrap에는 typography, forms, buttons, tables, navigation, modal, image 및 기타 여러 가지를 위한 HTML 및 CSS 기반 디자인 템플릿(css style과 layout 정렬을 class만으로 제어)과 선택적 JavaScriptㅇ 플러그인이 포함되어 있다. Bootstrap은 또한 반응형 디자인을 쉽게 만들 수 있는 기능(그리드)을 제공한다.(휴대폰, 태블릿, PC등에서 모두 사용 가능) Bootstrap 장점 사용하기 쉬움 : HTML과 CSS에 대한 기본적인 지식만 있으면 누구나 Bootstrap을 사용할 수 있다. 반응..

반응형 웹의 장단점 모든 스마트 기기에서 접속 가능 - 반응형 웹에서 사용하는 기술들은 W3C에서 웹 표준으로 지정한 HTML과 CSS로 이루어져 있음 - 스마트 워치 같은 웨어러블 기기 뿐 아니라 스마트 TV나 게임 콘솔 등 웹표준을 지원하는 모든 기기 사용가능 가로 모드에 맞추어 레이아웃 변경 가능 - 스마트폰이나 태블릿에서 가로 모드를 돌렸을 때 너비 값이 커지면 그에 맞추어 레이아웃을 자동으로 변경 사이트 유지, 관리 용이. - PC용, Mobile용 코드가 따로 있는 것이 아니기 대문에 유지, 관리가 쉽다 - 서버 쪽 코드가 아닌 HTML과 CSS로만 되어 있어 복잡하지 않다. 뷰포트 (viewport) PC화면에 보이는 내용을 모바일 기기에서 그대로 볼 수 없는 이유는 PC화면과 모바일 화면의..