분류 전체보기
크로스 브라우징(Cross Browsing) 알아보기
크로스 브라우징(Cross Browsing)이란? 현재 다양한 브라우저(크롬, 파이어폭스, 사파리, 오페라 등..)들이 존재하며, 어떤 브라우저에서든지 호환성을 높혀 화면이 깨지지않고 동등한 서비스를 사용가능할 수 있게 작업하여 다양한 웹의 접근성일 높히는 작업이다. 이러한 작업이 필요한 이유는 각 브라우저마다 렌더링 엔진이 다르기 때문이다. 1.Can I Use 사용하기 Can I Use에서 HTML 요소 및 속성이나, CSS 기능들, JavaScript 기능들의 브라우져에서 지원 여부를 버전 별로 보여주어 사전에 호환성문제를 예방할 수 있다. 스크롤을 내리면 상세정보도 나와 웹페이지 작업 시 매우 유용한 사이트이다. 2. 브라우저 트랜드 파악 및 대응순서 가장 점유율이 높은 브라우저를 최우선순위로 두..
브라우저의 동작 원리
브라우저(Browser)? 우리가 흔히 아는 브라우저로는 대표적으로 애플의 Safari, 구글의 Chrome, 마이크로소프트의 IE(지금은 사망), Edge 등 있지만 firefox, Opera, Dolphin 등이 있다. 브라우저의 기본 구조 1. 사용자 인터페이스(User Interface) - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등.. - 요청한 페이지를 보여주는 창을 제외한 부분을 보여준다. 2. 브라우저 엔진(Browser Engine) - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. 3. 렌더링 엔진(Rendering Engine) - 요청한 컨텐츠를 표시한다. - HTML을 요청할 경우 HTML과 CSS를 파싱(해석)하여 화면에 표시한다. 4-1. 통신(Netwrokin..
HTML 5의 시멘틱 요소
Sementic Tag 시맨틱(Semantic)은 "의미의, 의미론적인" 을 의미하는데 시맨틱 태그는 의믜를 가진 HTML의 태그를 뜻한다. 시맨틱한 태그를 사용하여 자신의 컨텐츠를 명확하게 정의한다. HTML5의 시맨틱 태그가 등장하기 전, 기존에 , 엘리먼트로 레이아웃을 나누고, id나 class 속성 명을 담아주어 구분짓는 방식으로 웹페이지가 개발되었다. 그러나 일관성이 떨어지고 개발자들 간의 혼동으로 , 같은 시멘틱한 엘리먼트들로 설계하도록 약속되었다. 주요 시맨틱 요소들(Sementic Elements) 섹션의 주제를 나타내는 태그이다. h1~h6를 그룹짓는다. , 와 는 전체 웹페이지나 특정영역의 부가정보를 표기하는데 사용한다. 태그에는 제목, 로고, 작성일과 같은 메타 정보를 배치하고, 은 ..
var, let, const 차이점과 TDZ(작성중)
변수 선언 방식 var로 변수를 선언하는 방식에서는 큰 단점을 가지고 있다. var tg1 = '나는 var로 선언된 변수' console.log(tg1) // 나는 var로 선언된 변수 var tg1 = '나는 var로 선언된 변수가 아니다.' console.log(tg1) // 나는 var로 선언된 변수가 아니다. 위의 예제처럼 같은 변수명으로 한번 더 선언을 했음에도 불구하고, 값이 재할당이 되어 출력되는 것을 볼 수 있다. 코드량이 많아지게 된다면 해당 변수가 중복되어 값이 바뀔 우려가 있으며, 어디에 어떻게 쓰이는지 알기 어렵게 된다. 이러한 문제를 보완하기 위해 ES6에서 let과 const를 새로 추가되었다. 이 두 변수 선언방식의 공통점으로는 재선언이 되지 않는 다는 점이다. let or ..
React-Hook의 useState와 useEffect
useState() 이전 React에서 상태를 관리할때는 Class 컴포넌트에서 setState를 통해 상태를 구현했었지만, Hook에서는 useState라는 함수를 사용하여 Function 컴포넌트에서도 사용이 가능하다. 기본 문법 let [number, setNumber] = useState(0); let [breath, setBreath] = useState(true); 기본 문법은 비구조화 할당을 사용하 첫번째 요소는 현재 상태, 두번째 요소는 Setter 함수로 동작한다. const setIncrease = () => { setNumber(number + 1); } const setDecrease = () => { setNumber(number - 1); } return ( {number} ) ..
SPA 웹 구성을 위한 React-router-dom
우선 SPA가 무엇인지 간략하게 알아보고 진행하려고한다. SPA(Single Page Application)란? SPA(Single Page Application) 는 말그대로 페이지가 하나인 애플리케이션을 뜻한다. SPA개념등장 이전까지만 해도 웹애플리케이션은 여러 페이지로 구성되었으며, 요청할 때 마다 새로고침이 발생하고 서버로부터 리소스를 받아 렌더링 하는 방식이었다. 서버가 해당하는 html을 주는 방식을 SSR(Server Side Rendering) 이라고한다. 그러나 웹에서 제공하는 정보가 많아지게 되면서 용량이 커져갔고, 모바일의 등장으로 이런 전통적인 방식은 성능상 한계를 맞이하게 되었다. 그래서 이러한 문제를 해결하기 위해 CSR(Client Side Rendering)이라는 방식이 도..