전체 글 (112) 썸네일형 리스트형 CSR과 SSR의 차이 SSR이란 ? 서버에서 렌더링을 작업하는 렌더링 방식, 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 각각의 페이지에 대한 요청을 하며 서버에서 HTML 및 JavaScript 파일 등을 모두 다운로드해서 화면에 렌더링 하는 방식. 참고로 웹 서버에 요청할 때마다 브라우저에서 새로고침이 일어나고 서버에 새로운 페이지에 대한 요청을 하는 방식이다. SSR 장점 검색엔진최적화(SEO) 가능 초기로딩속도가 빠름 처음 렌더링된 HTML을 클라이언트에게 전달해주기 때문에 초기 로딩 속도를 줄일 수 있다. 또한 JavaScript파일을 불러오고 렌더링 작업이 완료되지 않아도 사용자가 콘텐츠를 이용할 수 있다. SSR 단점 프로젝트 구조가 복잡해진다. 단순 렌더링만 한다면 문제가 .. 웹팩과 바벨 Webpack이란 ? 모듈 번들링이라고 한다. html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다. 쉽게 말하면, 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것을 Webpack 이라고 한다. 그럼 Webpack을 왜 사용해야 할까 ? 옛날에는 페이지마다 새로운 html을 요청해서뿌려 주는 방식이였다면, 요새는 SPA 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함한다. 연관 되어 있는 자바스크립트 종송석 있는 파일들을 하나의 파일로 묶어줘서 관리하기 편하다. 파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸린다. 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다.. 브라우저 랜더링 과정 브라우저 렌더링 과정 1. 파싱, 렌더 트리 생성 파싱(Parsing)은 구문 분석이라고도 불리며, 일련의 문자열을 의미 있는 토큰(token)으로 분해하고 토큰 간의 위계 관계를 분석해 구조를 결정하는 것이다. 파싱 과정 · 변환 : 문서를 가져와서 지정된 인코딩 방식으로 읽는다. · 토큰화 : 표준에 맞춰 지정된 태그들을 토큰화한다. · 렉싱(lexical analysis) : 토큰을 해당 속성 및 규칙을 정의하는 노드로 만든다. · 트리 생성 : root 노드를 기준으로 생성된 노드들의 계층을 연결한다. (좌) HTML 파싱 과정 (우) 토큰화 과정 1-1. HTML 파싱 렌더러 프로세스의 메인 스레드가 HTML을 파싱해 DOM(Document Object Model)으로 변환한다. 파싱의 최종 결.. undefined와 null의 차이점 undefined와 null의 차이점을 설명하세요 undefined은 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다. 즉, undefined는 자료형이 없는 상태이다. 따라서 typeof를 통해 자료형을 확인해보면 null은 object로, undefined는 undefined가 출력되는 것을 확인할 수 있다. typeof null // 'object' typeof undefined // 'undefined' null === undefined // false null == undefined // true null === null // true null == null // true !null // true isNaN(1 + null) // fals.. 반응형 디자인과 적응형 디자인의 차이점 반응형 웹 디자인 (Responsive Web Design) 다양한 사이즈의 태블릿과 모바일에서 웹사이트를 이용하는 사용자가 많아지며 반응형 웹 디자인이 중요시되고 있다. 반응형을 고려하지 않으면 컨텐츠가 잘려나가거나 빈 공간이 보일 수 있으며 사용자가 일일이 스크롤을하며 컨텐츠를 확인해야하는 일이 생길 수 있다. 그래서 반응형 웹이 뭐냐하면 !! 해상도 별로 보여질 화면을 정의하여 모바일, 태블릿, 데스크탑 모든 기기에 대응할 수 있는 웹이다. 해상도란? 이미지를 표현하는데 얼마나 많은 픽셀로 이루어졌는지를 폭 넓게 나타내는 용어 어떤 그릇에 담기냐에 따라 그 형태가 유동적으로 변화하는 물처럼 컨텐츠 또한 그래야한다는 것이 반응형 웹 디자인의 컨셉이라고 생각하면 될 것 같다. 컨텐츠가 작아지다가 어느 .. CSS Flex 및 Grid활용 참고 링크 https://d2.naver.com/helloworld/8540176 - css flex https://heropy.blog/2019/08/17/css-grid/ - css grid CSS 포지션 속성 설명: absolute, fixed, relative 차이 링크 : https://oneroomtable.tistory.com/entry/CSS-%ED%8F%AC%EC%A7%80%EC%85%98-%EC%86%8D%EC%84%B1-%EC%84%A4%EB%AA%85-absolute-fixed-relative-%EC%B0%A8%EC%9D%B4-%EC%84%A4%EB%AA%85 캐시란? 캐시(Cache) 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소 아래와 같은 저장공간 계층 구조에서 확인할 수 있듯이, 캐시는 저장 공간이 작고 비용이 비싼 대신 빠른 성능을 제공한다. 캐시(Cache)의 등장 Cache란 나중에 요청할 결과를 미리 저장해둔 후 빠르게 서비스 해주는 것을 의미합니다. 즉, 미리 결과를 저장하고 나중에 요청이 오면 그 요청에 대해서 DB 또는 API를 참조하지 않고 Cache를 접근하여 오청을 처리하게 됩니다. 이러한 cache가 동작 할 수 있는 철학에는 파레토 법칙이 있습니다. 파레토 법칙이란 80퍼센트의 결과는 20퍼센트의 원인으로 인해 발생한다는 말입니다. 즉, 이것은 Cache가 효율적일 수 있는 이유가 될 수 있습니다. 모든 결과를 캐싱할 필요는 없으.. 이전 1 2 3 4 ··· 14 다음
