LEO Devlog LEO Devlog

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

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 (..

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 {..

계산기 만들면서 ... 계산기의 작동에 대한 컴퓨터의 관점에서 사고하고 코드짜기 경우의 수 대비하여 코드 짜기 CSS로는 디자인적 요소를 최대한 가져가고, 자바스크립트로는 작동에 대한 완벽한 코드를 짜야 한다 내 생각만큼 잘 나오진 않았지만, hover만 조금 건드려봤다. 디자인의 세계란...만만치 않은 것 같다 CSS의 세세한 속성들이 많기 때문에 천천히 더 보자 !

CSS CSS의 사용 목적 ---> 웹페이지의 구조의 외부와 내부를 꾸미는 역할, 스타일링을 담당 HTML 내부에 직접 CSS를 정의하는 것은 좋지 않다 id와 class? CSS의 문법 구성 CSS 간단 속성 정리 텍스트의 가운데 정렬을 하기 위한 속성 text-align: center;​ 글자 색을 바꾸기 위한 속성 color: #4a4a4a;​ 배경 색을 바꾸기 위한 속성 background: #fff;​ background 속성과 background-color 속성은 어떻게 다른가요? : background-color는 단순히 색깔 옵션만 부여한 반면, background는 다른 color / image / repeat / attachment / position과 background 옵션을 추가적..

HTML 기초 HTML 은 웹 페이지의 틀을 만드는 마크업 언어 "구조를 표현하는 언어" How to use HTML? HTML은 tag들의 집합 Tag : 부등호()로 묶인 HTML의 기본 구성 요소 html 확장자 사용 Most used tags in HTML : div 태그는 한 줄을 차지합니다 / : span 태그는 컨텐츠 크기만큼 공간을 차지 합니다 / : : 구글 & : unordered list, list : (text, radio, checkbox) : input 과는 다르게 줄바꿈이 되는 입력폼이다. : 로그인