Front-end 68

2. HTML 태그

1. 태그 태그는 태그처럼 특별한 기능을 갖고있지 않고 CSS와 함께 쓰인다. 태그와 차이점은 display 속성이 block이 아닌 inline이라는 것이고 이는 CSS display 항목에서 세부 정보를 알 수 있다. 요약하자면 는 줄 바꿈이 되지만, 은 줄 바꿈이 되지 않는다. 뉴스스탠드 바로가기 주제별캐스트 바로가기 타임스퀘어 바로가기 쇼핑캐스트 바로가기 로그인 바로가기 2. 태그 option 태그는 옵션 메뉴를 제공하는 드롭다운 리스트에서 사용되는 하나의 옵션을 정의할 때 사용한다. 요소는 요소나 요소 내부에만 위치하고 요소는 아무런 속성도 명시하지 않은 채 사용할 수 있지만, value 속성은 명시하는 것이 일반적이다. 검색 통합검색 블로그 카페 - 카페명 - 카페글 지식iN 뉴스 사이트 - ..

여러 함수(Filter, Splice, FindIndex, Find...)

1. filter 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용 const numbers = [1,2,3,4,5,6]; const result = numbers.filter(number => number>3); console.log(numbers); //[1,2,3,4,5,6] console.log(result); //[4,5,6] 2. splice const months = ['Jan', 'March', 'April', 'June']; months.splice(1, 0, 'Feb'); // inserts at index 1 console.log(months); // expected output: Array ["Jan", "Feb", "March", "April", "June"] months.s..

3. CSS(cascading style sheet)

1. style 속성 mozilla 사이트 위에서 아래로 스타일은 전달된다. 자식에서 따로 설정 안하면 부모꺼 상속받음(글자는 상속, 배경 색은 상속 안 받음) 스타일 우선 순위 1) 시스템에서 만든 스타일 -> 제작자 스타일 시트의 중요(속성값 뒤에 !i )스타일 -> 제작자 스타일 시트의 일반 스타일 -> 브라우저의 기본 스타일 2) 인라인 스타일 -> id 스타일 -> 클래스 스타일 -> 태그 스타일 3) 같은 것 정의 하면 소스 순서에 따라 : 나중에 것이 앞에 것 덮어 씀 2. CSS selector 1) 태그 자체로 2) class 줘서 - group으로 사용 (div id로 묶고난 후 그 안에서 또 구별해야할 필요가 생길 때 ex 3) id - 문서 내에서 유일해야 함, class- 클래스 ..

var, let, const 변수 선언 차이

1. var var name = 'hello' console.log(name) // hello var name = 'good night' console.log(name) // good night var는 변수를 선언한 후에 다시한번 var로 선언해도 에러가 나오지 않고 각기 다른 값이 출력된다. 이를 보완하기위해 추가된 변수 선언방식이 아래의 let 과 const이다. let과 const의 공통점은 위에서 이미 변수가 선언되었을 경우 아래서 변수 재 선언이 되지 않는다.(아래의 에러메시지 출력됨) //Uncaught SyntaxError: Identifier '******' has already been declared 차이점(immutable여부)은 아래와 같다. 2. let let은 변수 재할당이 가..

LocalStorage, SessionStorage, Cookie -Jwt

1. LocalStorage vs. SessionStorage 웹 스토리지 객체인 LocalStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다. 페이지 새로고침(sessionStorage)을 하더라도, 브라우저를 다시 실행해도(localStorage)데이터가 사라지지 않고 남아있다. 웹스토리지 객체는 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다. 웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 오리진에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다. 1) LocalStorage의 주요특징 : 오리진(도메인, 포트, 프로토콜)이 같은 경우 데이터는 모든 탭과 창에서 공유된다. 또한, 브라우저나 OS..

location.href vs. location.replace()

1. location.href = 'index.jsp' location.href는 객체의 속성이며, 주소 히스토리가 기록되기 때문에 뒤로 가기 버튼을 누른다면 이전 페이지로 이동이 가능하다. 따라서 일반적인 페이지 이동시에 사용한다. 2. location.replace = 'index.jsp' location.replace()는 메서드로 작동되며, 현재 페이지를 새로운 페이지로 덮어 씌우기 때문에 이전 페이지로 이동이 불가능하다. 따라서 이전페이지로 접근이 필요 없는 경우 보안상 덮어 씌울 때 사용한다. 3. History.back() History.back() 메서드는 브라우저가 세션 기록의 바로 뒤 페이지로 이동하도록 지시한다. 즉, history.go(-1)와 같다. 이전 페이지가 없는 경우 아무것..

1. Vue.js

1. vue.js란 뷰 코어라이브러리는 화면단 데이터 표현에 관한 기능을 중점적으로 지원하지만 프레임 워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공한다. 따라서 라이브러리역할 뿐만 아니라 프레임워크 역할도 한다. 뷰는 앵귤러의 데이터 바인딩(뷰에 표시되는 내용과 모델의 데이터를 동기화) 특성과 리액트의 가상돔 기반 렌더링 특징을 모두 가지고 있다. 리액트나 앵귤러보다 성능이 우수하고 가볍고 빠르고 누구나 쉽게 배울 수 있다. 2. UI 화면단 라이브러리 뷰는 UI화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다. MVVM패턴이란 화면을 모델-뷰-뷰모델(돔리스너, 데이터 바인딩처리)로 구조화해 개발하는 방식을 의미한다. 1) 돔 리스너(..