개발몰입과정 개념스터디/4차 (6) 썸네일형 리스트형 CSR, SSR (React, Next.js) https://brash-wanderer-5cd.notion.site/CSR-SSR-62307cc44a004db9adbcda252ed7c97b PWA란? PWA란? 프로그레시브 웹 앱(progressive web app)의 줄임말. 웹과 앱의 장점을 결합함. 네이티브 앱 느린 네트워크에서도 작동하며, 백그라운드에서 푸시 알람을 보내준다. 카메라, 마이크 등에도 쉽게 접근하여 다양한 기능을 수행할 수 있다. ⇒ Capability(능력)가 뛰어나다라고 할 수 있다. 웹 URL을 통한 접근이 간단 설치 과정이 없다. ⇒ Reach(범위)가 넓다라고 할 수 있다. PWA, 예를 들면? 우리가 온라인에서 볼 수 있는 많은 사이트들도 실제로는 PWA이다. ex) 트위터닷컴(twitter.com) 스마트폰으로 이 사이트에 들어가면, 홈 화면에 트위터닷컴을 추가할 수 있다. 그러고 나서 스마트폰에 저장된 트위터 사이트를 열어 보면, 모양도 네이티브 앱처럼 보이고, 기.. Tailwind CSS이란? TailwindCSS이란? Tailwind란 컴포넌트 위주의 디자인 대신 HTML 문서에 저수준의 유틸리티 클래스를 정의하는 것으로 디자인을 구성할 수 있다. 부트스트랩같이 기존 디자인을 빠르게 가져와서 구성할 수는 없음 커스터마이징이 아주 편하고, 직관적임 실제 코드 Tailwind를 사용하지 않은 CSS ChitChat You have a new message! Tailwind를 사용한 CSS ChitChat You have a new message! 사전에 만들어진 디자인의 컴포넌트나 기능을 빠르게 가져와서 사용할 수 있도록 만들어진 프레임워크가 아니다. 그 대신, CSS의 각 속성들을 직관적이고 효과적으로 사용할 수 있도록 만들 수 있다. 장점 학습 난이도가 낮다. 정확하게는, CSS만 알고 있다.. Styled-Component란? Styled-Component란? Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다. 설치 $ npm install --save styled-components 기본문법 const {위에서 지정해준 component명} = styled.{태그명} ``; HTML 엘리먼트를 스타일링 모든 알려진 HTML 태그에 대해서 이미 속성이 정의되어 있기 때문에 해당 태그명의 속성에 접근합니다. import styled from "styled-components"; styled.button` // HTML 엘리먼트에 대한 스타일 정의 padding: 4em; background: papayawhip; ` Re.. SCSS (CSS Modules)란? SCSS란? Sassy CSS(멋진 CSS)의 줄임말 SASS 후 SCSS가 나왔고 여러가지 문법의 차이가 있지만 SCSS가 더 넓은 범용성과 CSS의 호환성 등의 장점으로 SCSS를 사용하기를 권장한다. Sass(SCSS)를 CSS pre-processor(전 처리기)라고도 하는데 이는 Sass(scss)자체로 브라우저에 적용하는 것이 아니라 CSS를 확장해서 쉽고 편리하게 쓰기 위해 쓰는 스크립팅 언어이기 때문(아래 그림 참고) ⇒ SASS(SCSS)로 작성한 코드는 컴파일을 해서 일반 CSS의 문법으로 바꾼 뒤 적용한다. CSS, SASS, SCSS 차이 CSS nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-.. SEO와 SSG, 그리고 Gatsby.js SEO란? Search Engine Optimization (검색엔진 최적화) 검색자 (검색 유저)의 의도를 이해하고 이에 충실히 맞춰 웹 페이지의 콘텐츠를 제작하고, 이 페이지가 검색 결과 페이지에서 잘 노출 되도록 웹페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘리는 시책 SEO의 목적 광고 비용을 들이지 않고 자신의 콘텐츠를 검색 결과의 상위에 표시함으로써 사이트 유입을 늘림 검색 키워드에 관련된 콘텐츠를 제공해, 검색에 대한 니즈를 만좀시켜줌으로써 브랜드 인지도 향상 및 신뢰도 상승, 상품 구매까지 이어지게 할 수 있는 전략. SEO에서 중요한 2가지는 검색 니즈에 맞춘 콘텐츠 (contents)와 기술적 요소 SEO의 과정 검색엔진이 검색 결과를 제공하는 주요 프로세스에는 크롤링(C.. 이전 1 다음
