LEO Devlog LEO Devlog

React SPA SPA의 등장 배경과 개념 전통적인 웹사이트들은 페이지 이동 시 매번 '페이지 전체'를 불러와야 했다. -> 모든 페이지들은 매번 다시 불러오면 느린 반응성을 갖게 되고, 트래픽 증가와 사용자 경험의 저하를 일으켰다. SPA는 업데이트 시 전체를 다시 불러오지 않고 업데이트가 필요한 부분만 새로 불러온다. 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML요소를 생성해서 화면에 보여주는 방식이 개발되었다. (1990년대 후반에 개발) SPA (Single Page Application) 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사..

React 리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다. React의 3가지 특징 선언형 기존처럼 HTML/CSS/JS로 나눠 적는 것이 아닌, 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향 컴포넌트 기반 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다 유지보수에 용이 범용성 리액트는 JavaScript 프로젝트 어디에든 유연하게 적용된다. Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능하다. JSX란..? JavaScript를 확장한 문법 JSX는 H..

고차 함수 함수를 리턴할 수 있는 함수 고차함수 = 함수를 전달받거나 함수를 리턴한다 = 사고(함수)에 대한 복잡한 로직은 감추어져 있다 = 사고 수준에서의 추상화 콜백 함수 다른 함수의 인자로 전달되는 함수 '함수를 리턴하는 함수'와 '함수를 인자로 받는 함수' 모두, 용어를 고차 함수로 사용 고차함수 map 하나의 데이터를 다른 데이터로 맵핑(mapping) 할 때 사용 배열의 각 요소가 특정 로직에 의해 다른 요소로 지정(map)된다. 고차함수 filter 조건에 맞는 데이터만 분류(filtering) 할 때 사용 true인 경우만 따로 분류한다. 고차함수 reduce 여러 데이터를, 하나의 데이터로 응축(reduce)할 때 사용 배열의 각 요소를 특정 로직에 따라 원하는 하나의 형태로 응축한다.

DOM 정리 DOM HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 방식이다 DOM은 자바스크립트를 사용해서 웹 화면의 구조를 추가,수정,삭제하거나 이벤트를 처리할 수 있도록 프로그래밍 인터페이스를 제공 HTML을 동적 구조로 조작할 수 있게 도와주는 모델 DOCUMENT window의 document 속성은 창이 포함한 문서를 참조 document는 모든 종류의 문서에 대한 공통의 속성과 메소드를 제공 document의 querySelector 메소드는 선택자를 인자로 전달받아 전달받은 선택자와 일치하는 문서 안의 첫 번째 요소(element)를 반환한다. textContent 속성은 노드가 포함하고 있는 텍스트 컨텐츠를 표현 EVENT 이벤트란 '시스템 내에서 일어나는 사건' (클릭,..

DOM DOM (Document Object Model) : 이름에서 유추해보자면, HTML의 엘리먼트를 객체로 가져와서 사용 가능한 모델 DOM으로 HTML을 조작할 수 있다. createElement - CREATE querySelector, querySelectorAll - READ textContent, id, classList, setAttribute - UPDATE remove, removeChild, innerHTML = "" , textContent = "" - DELETE appendChild - APPEND innerHTML과 textContent의 차이 -> 가급적 textContent를 사용하는 것이 좋다. 성능과 보안에 강점이 있고, innerHTML은 보안에 취약하다. DOM (..

Spread 문법 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용 spread 문법은 기본 배열을 변경하지 않는다. (immutable) 테스트 함수 expect 함수 사용법 expect(테스트하는 값).기대하는 조건 expect(isMost(3)).to.be.true // => 'isMost(3)'의 결과값은 참(true)이어야 한다'. expect(1 + 2).to.equal(3) // => 'sum(1, 2)의 결과값은 3과 같아야(equal) 한다'. -> '기대하는 조건'에 해당하는 함수를 matcher라고 한다. '참인 것이어야 한다' => to.be.true '3과 같아야 한다' => to.equal(3) expect('테스트하는 값).to.equal('기대하는..

원시 자료형과 참조 자료형 원시 자료형 -> string, number, boolean, undefined, (null) : 모두 각각 하나의 데이터를 가지고 있다. 데이터 보관함 안에 하나의 데이터만 넣을 수 있다. 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담긴다. 참조 자료형 -> 배열([])과 객체({}), 함수(function(){}) (원시 자료형이 아닌 모든 것) : 참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장합니다. 변수에 넣을 수 있는 데이터 크기가 제한되기 때문에 "데이터의 크기가 동적으로 변하는" 특별한 데이터 보관함이 필요해서 등장! 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다. 원시 자료형의 변수에 값 자체가 담기는 예시..

CSS Selector 셀렉터 h1 { } div { } 전체 셀렉터 * { }​ Tag 셀렉터 section, h1 {}​ ID 셀렉터 #only {}​ class 셀렉터 .widget { } .center { } attribute 셀렉터 (암기할 필요 x) a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { }​ 후손 셀렉터 header h1 {} 자식 셀렉터 (후손 셀렉터와의 차이를 반드시 알고 있어야 합니다) header > p {}​ 인접 형제 셀렉터 section + p {}​ 형제 셀렉터 section ~ p {..