반응형 영상리뷰13 [우아한테크] 곤이 : DOM&BOM https://www.youtube.com/watch?v=q1fQnGG1bgU 해당 영상을 시청하고 내용을 정리해보았다. 1. DOM 1) DOM이란? 웹은 html(뼈대), scc(옷), js(기능)으로 구성되어있다. 이때, Java script는 DOM을 통해 확장자가 다른 html과 css파일의 내용을 읽고, 수정하는 것이 가능하게 된다. DOM은 Documemt Object Model의 약자로, 문서(XML, HTML , XTML)에 대한 모든 내용을 담고있는 객체이다. 텍스트 파일로 만들어진 문서를 브라우저가 이해할 수 있는 구조로 구성한 것이며, 바로 이 문서 객체 모델이 html과 css의 파일의 내용을 읽고 수정하는것을 가능하게 해준다는 의미이다. 자바 스크립트는 아래 사진에 있는 객체 모.. 2022. 2. 16. [우아한테크] 빙봉 : 정규 표현식 https://www.youtube.com/watch?v=CjoDIgDOHA4 해당 영상을 시청하고, 영상에서 다루어진 내용을 기반으로 정리해보았다. 1. 정규 표현식 1) 개요 특정 패턴을 가지고, 문자열을 찾을 수 있는 검색패턴으로 정의된다. 이러한 검색 패턴은 모든 종류의 문자열 검색이나 교체 등의 작업에서 사용할 수 있다. 쉽게 이해를 하기 위해 만일 전화번호를 입력받는 로직을 구현한다는 가정을 세워보자. 유효성 검증 요구사항을 충족하기 위해서는 앞자리는 무조건 010이 사용되어야하고, 하이픈(-)이 쓰여야하며, 뒤의 두 단락은 4자리로 구성되어야한다. 만일 정규표현식을 사용하지 않고, 유효성을 충족하기 위해서는 다수의 if문이 사용될 것이며, 해당 예시가 아닌, 실제로 사용될때는 생각보다 더 방.. 2022. 2. 15. [우아한테크] 신세한탄 : CSR & SSR https://www.youtube.com/watch?v=YuqB8D6eCKE 해당 영상을 보고 랜더링 방식에 대한 내용을 정리해보았다. 1. SPA와 MPA SPA란 Single Page Application의 약자로, 하나의 페이지로 구성된 웹 애플리케이션이다. 헤더에 존재하는 카테고리를 클릭했을때, 페이지의 이동 없이 state만 변경되는 페이지가 있는데, 이를 spa라고 한다. MPA란 Multi Page Application의 약자로, 탭 하나를 이동할 때마다 새로운 html을 새로 받아와 페이지를 이동하는 웹페이지 구성 방식이다. 이는 전환시마다 화면의 깜빡임 등 다양한 단점들을 야기하므로 AJAX의 등장 이후로는 SPA가 더 선호되는 추세이다. 2. CSR과 SSR CSR이란 Client S.. 2022. 2. 14. [우아한테크] 그루밍 : 상태관리와 반응형 프로그래밍 https://www.youtube.com/watch?v=alsCMx6vpG4 해당 영상을 시청한 후 영상 내용을 정리해보았다. 1. 상태관리란? 1) 상태(state) "변화하는 데이터"이며, 풀어서 설명하면 ui에 동적으로 표현되는 데이터(사용자의 action)에 따라서 변경될 수 있는 컴포넌트의 부분을 나타내는 자바스크립트의 객체라고 할 수 있다. 2) 상태관리 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 것이다. 즉, 데이터들을 알맞게 관리하기 위해 나타난 개념이다. 이전동안에는 한 번에 클릭마다 원하는 값을 찾기 위해 매번 페이지가 변경되는 웹이 사용되고 있었다. 이는 로딩의 시간을 길게 하며, 이런 불편함을 해소하기 위해 변화된 부분만 변경되도록 하는 현재의 웹이 많이 .. 2022. 2. 13. [우아한테크] 동동 : CSS 방법론 https://www.youtube.com/watch?v=B70h37mpD74 영상에 대한 내용을 간략하게나마 정리해보았다. 1. CSS방법론이란? 1) CSS의 등장 CSS는 html의 각 요소를 꾸미는 스타일언어이다. CSS등장 전에는 html요소들마다에 스타일을 부여했다. 이 경우 유지보수가 불리하다는 단점이 있고, html은 본래 문서구조를 의미하므로 스타일 지정하는 것은 바람직하지 않다는 문제점또한 있다. 그러한 이유로 스타일을 따로 적용할 수 있는 CSS가 등장하게 되었다. CSS는 기본적으로 전역범위이기에 유지보수가 용이하다. 2) CSS방법론의 등장_CSS의 문제점 위에서 서술되었다싶이 CSS는 기본적으로 전역범위라서, 페이지수가 늘어남에 따라 CSS가 점점 복잡해지고 관리하기 어렵다. 유.. 2022. 2. 12. [우아한테크] 브랜 : Component https://www.youtube.com/watch?v=2C1tXVHu9XQ 페이지 소스코드 분석 과제를 앞두어, 추천해주신 영상을 시청하고 내용을 정리할 목적이다. 이 영상에서는 레이아웃보다 조금 더 세부적일 수 있는 기능을 구성하는 단위들에 대한 내용을 다루었다. 1. 컴포넌트 사전적으로 "전체의 부분"이라고 정의되어있다. 하나의 작업물을 구성하는 작은 단위(부분)이며, 이 컴포넌트는 더 작은 단위로 구성되어있다. 해당 개념을 프론트엔드에서도 적용시킬 수 있는데, 의미는 아래와 같다. 페이지를 구성하고 있는 하나의 섹션(그룹)단위이며, 이는 더 세세한 element로 구성되어있다. element그룹을 반환하는 자바스크립트 함수라고 정의한다. 2. 컴포넌트의 분리 분리 단계에서 접근방법은 다양하게 존.. 2022. 2. 11. 이전 1 2 3 다음 반응형
