전체 글
CSR/SSR in NextJS 검색 엔진 최적화와 사용자 UX 관점에서, 리액트의 적합한 사용을 알아보자. 1. CSR/SSR Client-Side Rendering(CSR)은 검색 엔진 최적화에서, Server-Side Rendering(SSR)에 비해 큰 단점이 존재한다.CSR은 초기 웹 서버 요청시 빈 HTML과 동적 렌더링을 위한 Javascript를 불러오기때문이다.또한, 서버에서 보내는 리소스들의 양이 많이 때문에 SSR에 비해서 초기 로딩 속도가 느리다.검색 엔진 최적화(SEO)와 초기 저하된 로딩 속도를 감수 할 수 있으면 CSR을 사용한다.페이지 렌더링시 기존 동적 요소들을 이용하기 때문에 사용자 경험이 좋은편이다. SSR은 페이지 렌더링 또는 라우팅마다 매번 완성된 HTML을 가져오기..
json의 기본적인 특징을 기억하자 배울 내용 JSON과 Date 객체의 기본적인 특징. date-fns 라이브러리 1. JSON과 Date 객체의 기본적인 특징 테스트용 REST API를 위해 json-server 라이브러리를 사용하고, 더미용 json파일을 만들 때 고민이 생겼다. new Date()로 현재 시간의 값을 json에서는 어떻게 표현해야할까? json의 데이터 타입은 string, number array, boolean, object, null 타입이 사용된다. json data로 Date 타입이 들어올 수 없다는 뜻이다. 결론적으로, 우리는 아래와 같이 날짜 데이터를 string타입이고 UTC(날짜를 표현하는 형식 중 하나)로 표현해야한다. //db.json { "note": [ { "..
본 포스팅에 쓰이는 Github 주소입니다. https://github.com/CheoljongPaek/Frontend-Basics/tree/main/about-webpack CheoljongPaek/Frontend-Basics Contribute to CheoljongPaek/Frontend-Basics development by creating an account on GitHub. github.com 웹팩, 로더와 플러그인? 배울 내용 loader와 plugin, 차이를 중점으로. 목차2 1. loader와 plugin, 차이를 중점으로. 위의 그림을 천천히 꼼꼼하게 살펴본 뒤 아래 웹팩의 주요 속성 4가지를 보기 바란다. 웹팩은 (1)entry를 최초 진입점인 .js 파일 경로로 인식한다. ent..
본 포스팅에 쓰이는 Github 주소입니다. https://github.com/CheoljongPaek/Frontend-Basics/tree/main/about-webpack CheoljongPaek/Frontend-Basics Contribute to CheoljongPaek/Frontend-Basics development by creating an account on GitHub. github.com 웹팩과 설정 방법 배울 내용 웹팩이란? 웹팩 설정 1. 웹팩이란? 효율성, 우리는 작업하는 프로젝트 내에서 최대한의 효율성을 올릴려고 노력한다. 우리는 특정 단어를 모를 때 그 단어를 대신할 다른 뭉텅이의 단어들을 섞어 표현한다. 사전적 의미에서 '정의'를 필자를 이렇게 생각한다. 웹팩은 어렵다. 우리..
본 포스팅에 쓰이는 Github 주소입니다. https://github.com/CheoljongPaek/TypeScript2021 CheoljongPaek/TypeScript2021 타입스크립트의 기본에 대한 모든것. Contribute to CheoljongPaek/TypeScript2021 development by creating an account on GitHub. github.com 기본 타입, 함수 타입? 배울 내용 기본 타입 [문자열, 숫자, 배열, 튜플, 객체, 진위값] 함수 타입 [파라미터와 반환값, 파라미터를 제한하는 특성, 옵셔널 파라미터] 1. 기본 타입 [문자열, 숫자] 우선, 변수를 선언하고 그 변수의 타입을 지정해보자. // TS Declare of STRING const s..
본 포스팅에 쓰이는 Github 주소입니다. https://github.com/CheoljongPaek/TypeScpt2021 CheoljongPaek/TypeScript2021 타입스크립트의 기본에 대한 모든것. Contribute to CheoljongPaek/TypeScript2021 development by creating an account on GitHub. github.com 타입스크립트? 본 포스팅은 시작하기 전에 비쥬얼 스튜디오(VS Code)와 ESLint 플러그인 설치를 적극권장합니다. 배울 내용 타입스크립트는 어떤 언어인가? tsconfig.json을 통한 기본 설정 1. 타입스크립트는 어떤 언어인가? 공식홈페이지 메인에 표현한 한 문장은 아래와 같다. By understandin..
