jineecode

IE 비활성화 '에지'로 전환…IE 기반 웹사이트는 2029년까지 지원 (서울=연합뉴스) 홍지인 기자 = 한때 인터넷 세상을 주름잡았던 웹브라우저 '인터넷 익스플로러(IE)'가 내년 6월로 27년간의 생을 마감한다. 마이크로소프트(MS)는 19일(현지 시간) 공식 블로그에서 "IE 11 데스크톱 애플리케이션은 2022년 6월 15일부로 지원을 종료하게 된다"고 밝혔다. 이날 이후 PC에 설치된 IE는 비활성화되고, 실행하면 자동으로 MS의 다른 웹브라우저 '에지'로 전환된다. 단, IE 기반으로 만든 웹사이트를 지원하는 에지의 'IE 모드'는 최소 2029년까지는 쓸 수 있게 할 방침이다. 1995년 처음 나온 IE는 인터넷 초창기엔 웹 브라우저의 대명사로 여겨졌지만, 지금은 파이어폭스·크롬 등 경쟁 브..

코드부터 살펴보기 const array = [3, -1, 10, 5, 0]; const sum = array.reduce((acc, cur) => { return acc + cur; }); console.log(sum); //17 const array = [3, -1, 10, 5, 0]; const sum = array.reduce((acc, cur) => { console.log(acc); return acc + cur; }); 3 2 12 17 const array = [3, -1, 10, 5, 0]; const sum = array.reduce((acc, cur) => { console.log(cur); return acc + cur; }); -1 10 5 0 초기값을 이용한 응용 const arr..

BOM (Browser Object Model) 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체모델 이다. 이를 통해서 브라우저의 새 창을 열거나 다른 문서로 이동하는 등의 기능을 실행시킬 수 있다. 전역객체로 window 가 있으며 하위 객체들로 location , navigator , document , screen , history 가 포함되어 있다. DOM (Document Object Model) 웹페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체모델 이다. 최상위 인터페이스로 Node가 있으며 이는 아래와 같은 구조로 나타난다. 이미지 출처 위의 트리구조를 보면 엘리먼트 뿐만 아니라 텍스트와 주석도 있는 것을 알 수 있는데, 이런 것들까지도 DOM 트리에 포함된다. ..

브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진 을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path) 라는 프로세스를 사용하며 다음 단계들로 이루어진다. HTML 파싱 후, DOM(Document Object Model) 트리 구축 CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축 Javascript 실행 주의! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다. DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축 주의! display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트..

본 게시글은 유튜버 '드림코딩 by 엘리' 님의 '서버사이드 렌더링 (개발자라면 상식으로 알고 있어야 하는 개념 정리 ⭐️)' 영상을 요약해 적은 게시글 입니다. MPA (Multiple Page Application) 사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션이다. SPA (Single Page Application) 하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션이다. 전통적인 방식을 이용한다면, SPA가 사용하는 렌더링 방식은 CSR이고, MPA가 사용하는 렌더링 방식은 SSR이다. 웹의 역사 ⏲ 🔍 1990년대 중반 모두 Static Sites였음. 서버..

TypeError: Cannot read property 'name' of undefined 상황: axios로 API를 불러오고자 할 때, API를 불러오기도 전에 렌더링 되어 undefined를 보게 되는 상태 import React, { useState, useEffect } from "react"; import axios from "axios"; const Emote = ({ match, history }) => { let [emote, setEmote] = useState([]); useEffect(() => { axios .get(`https://ffxivcollect.com/api/emotes/${match.params.id}`) .then((res) => { console.log(res.d..

&& 연산자 좌 우 모두 true 면 true true && false; true && true; 자료형에서의 결과 true && '안녕'; false && '안녕'; 이를 이용해서 간단한 삼항연산자를 대신할 수 있다. function Component() { return ( { 1 === 1 ? 참이면 보여줄 HTML : null } ) } //위와 아래는 같은 기능을 한다. function Component() { return ( { 1 === 1 && 참이면 보여줄 HTML } ) } 왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남으며 왼쪽 조건식이 false면 false가 남는다. (false가 남으면 HTML로 렌더링하지 않음)

react 작업 시, Warning으로 따라다니는 경고 메시지. a태그에 target=_blank 속성만 넣으면 나타나는 메시지로 보안 이슈로 알려져 있다. 원인: Tabnabbing 피싱 공격에 노출될 수 있기 때문. Tabnabbing 피싱 공격이란 target_blank인 태그를 클릭하였을 때 새롭게 열린 탭에서 기존 페이지를 피싱페이지로 바꿔 정보를 탈취하는 피싱공격입니다. 해결방법: rel=”noopener noreferrer” 속성을 추가하여 문제를 해결. rel=”noopener noreferrer”는 rel=noopener 속성이 부여된 링크를 통해 열린 페이지는 opener의 location변경과 같은 자바스크립트 요청을 거부함. 디버깅 완료