본문 바로가기

전체 글55

정적 웹? 동적 웹? 정적 웹: 언제 접속해도 같은 리소스를 건네주는 웹 사이트 ex) 회사나 학교 소개 페이지, 댓글 기능이 없는 블로그 페이지 → 개발자가 HTML, CSS, JS를 사용자에게 보여질 모습 최종본으로 코딩해서 서버에 올려놓음 동적 웹: 새로운 정보가 들어오면 서버가 해당 정보를 반영하여 보여주는 웹 사이트 ex) sns, 게시판 페이지 → 데이터베이스에 새로운 내용이 입력되면, 새로고침할 때 업데이트 되도록 코딩해놓음 단점 1. 계속해서 새로운 데이터를 보관해야하는 데이터베이스를 관리하기 까다로움 2. 같은 글을 보여주는데 서버가 매번 일을 하도록 코딩하는 것이 번거로움 → 요즘, 동적 웹의 문제점을 해결하기 위해 정적 웹 생성 툴(Jekyll, HUGO 등)로 블로그 많이 운영 2022. 12. 30.
HTTP 헤더2 - 캐시와 조건부 요청 캐시 기본 동작 캐시가 없을 때 데이터가 변경되지 않아도 계속 네트워크 통해서 데이터를 다운로드 받아야 함 인터넷 네트워크는 매우 느리고 비싸다 브라우저 로딩 속도가 느림 느린 사용자 경험 캐시 적용 1. 첫 번째 요청 시, 웹 브라우저가 요청한 데이터를 서버가 응답을 해줄 때, cache-control(캐시 유효 시간)을 같이 보냄 2. 서버로 부터 온 응답결과를 브라우저 캐시에 캐시 유효 시간동안 저장해 놓음 3. 웹 브라우저가 동일한 데이터를 요청 할 때, 브라우저 캐시에 있는 요청정보이면 캐시 유효 시간을 검증 한 후 브라우저 캐시에서 해당 데이터를 가져옴 캐시 덕분에 캐시 가능 시간동안 네트워크를 사용하지 않아도 됨 비싼 네트워크 사용량을 줄일 수 있음 브라우저 로딩 속도가 매우 빠름 빠른 사용.. 2022. 12. 19.
styled-components styled-components: JS 안에 CSS를 작성하는 라이브러리 (CSS in JS 관련 라이브러리 중 가장 인기 있는 라이브러리) → emotion, styled-jsx Tagged Template Literal : 문자열 조합을 더욱 쉽게 할 수 있게 해주는 ES6 문법 Template Literal 사용 할 때, ${} 안에 일반 문자열이나 숫자가 아닌 객체를 넣는 경우 const object = {a:1}; const text = `${object}` console.log(text); // "[object Object]" Tmeplate Literal: 내장된 표현식을 허용하는 문자열 리터럴 → 여러 줄로 이뤄진 문자열과 문자 보간 기능 사용 가능 • 백틱(` ` Template Lite.. 2022. 12. 8.
CSS Module CSS Module: 리액트 프로젝트에서 컴포넌트를 스타일링 할 때 사용하는 기술 → CSS 클래스가 중첩되는 것을 방지 ⭐️ CRA(create-react-app)로 만든 프로젝트에서 CSS Module를 사용할 때, CSS파일 확장자를 .module.css로 하면 됨 사용법 [Box.module.css] .Box { background: black; color: white; padding: 2rem; } [Box.js] import React from "react"; import styles from "./Box.module.css"; function Box() { return {styles.Box}; } export default Box; → className을 설정 할 때에는, styles.Box.. 2022. 12. 8.

티스토리툴바