기록하는 개발자

https://mingmeng030.tistory.com/249 SSR과 CSR, MPA와 SPA react로 개발을 하면서 spa는 많이 들어봤지만 single page application이라는 것만 알았지 정확히 무엇이고, 왜 사용해야하는지, 장단점은 무엇인지 등에 대해 모르고 있었다. 블로그 정리를 위해 서치 mingmeng030.tistory.com 바로 이전 포스트에서 SPA, MPA 등을 소개했다. 서치하며 공부하던 중 SSG라는 것도 있어서 기록해보려한다. SSG: Static Site Generator SSG로 생성되는 웹사이트는 모든 웹페이지를 미리 모두 만들어놓고 요청이 들어오면 만들어 놓은 웹페이지를 그대로 응답만 해준다. 특징 서버와 클라이언트 측 모두 렌더링을 위해 할 일이 별로..

react로 개발을 하면서 spa는 많이 들어봤지만 single page application이라는 것만 알았지 정확히 무엇이고, 왜 사용해야하는지, 장단점은 무엇인지 등에 대해 모르고 있었다. 블로그 정리를 위해 서치 중 MPA와 SPA 그리고 SSR과 CSR을 같이 정리하는 것이 맞다고 생각해서 글 주제를 SPA 에서 좀 더 넓혀보았다. SSR(Server Side Rendering) SSR의 과정 - 페이지를 이동할 때마다 새로운 페이지를 요청한다. - 모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다. 장점 - 초기 로딩 속도가 빨라 사용자가 빠르게 컨텐츠에 접근할 수 있다. - SEO(Search Engine Optimization) → MPA는 브라우저에서 JavaSc..

자바스크립트에는 HTTP Requests를 위한 방법으로 Fetch와 Axios있다. 두 가지를 모두 사용해보면서 장점과 단점을 느꼈었는데 정확히 어떤 점이 더 낫고 다른지 자세히 알아보자! Fetch ES6부터 들어온 JavaScript 내장 라이브러리다. Promise 기반으로 만들어졌기 때문에 데이터를 다루기가 쉽다. fetch("https://localhost:3000/dashboard/post", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: "mingmeng030", title: "fetch and axios", description : "what's the differe..

↓이전 글 https://mingmeng030.tistory.com/244 [vanillaJs] 프레임워크없이 SinglePageApplication 만들기-1. 라우팅 설정하기 폴더 구조 1. frontend 폴더 내부에 index.html 파일 생성 후 아래와 같이 구성 // index.html SPA with no framework Home Posts Settings - url 이동에 사용하게 될 a 링크들에 대하여 data-li.. mingmeng030.tistory.com https://mingmeng030.tistory.com/245 [vanillaJs] 프레임워크없이 SinglePageApplication 만들기-2. 라우팅 페이지 구성 https://mingmeng030.tistory.co..

Regular Expression: Regex 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. 1. 정규표현식 형식 / 패턴 / 플래그 - 슬래시(/)와 슬래시(/) 사이에는 매칭시킬 패턴을 써준다. - 슬래시(/) 다음에는 옵션을 설정하는 플래그를 써준다. *플래그는 하나만 찾을지, 모두 다 찾을지 등을 설정하는 옵션이다. 2. 정규표현식 매칭 패턴(문자, 숫자, 기호 등) 매칭 패턴을 사용하면, 문자/숫자/기호를 보다 쉽게 표현할 수 있다. 패턴 의미 a-zA-Z 영어알파벳(-으로 범위 지정) ㄱ-ㅎ가-힣 한글 문자(-으로 범위 지정) 0-9 숫자(-으로 범위 지정) . 모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두! 단, 줄바꿈X) \d 숫자 \D 숫자가 아닌..

https://mingmeng030.tistory.com/244 [vanillaJs] 프레임워크없이 SinglePageApplication 만들기-1. 라우팅 설정하기 폴더 구조 1. frontend 폴더 내부에 index.html 파일 생성 후 아래와 같이 구성 // index.html SPA with no framework Home Posts Settings - url 이동에 사용하게 될 a 링크들에 대하여 data-li.. mingmeng030.tistory.com ↑위 글과 이어지는 내용이다 파일 구조 1. AbstractView.js 생성 후 아래와 같이 추상화된 view 작성 export default class { constructor() {} setTitle(title) { document..

폴더 구조 1. frontend 폴더 내부에 index.html 파일 생성 후 아래와 같이 구성 // index.html Home Posts Settings - url 이동에 사용하게 될 a 링크들에 대하여 data-link 속성을 지정해준다. +) data-* 속성 참고 글 (https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes) 2. node.js project 생성 : Npm init -y 3. express 설치 : Npm i express 4. server.js 파일 root 폴더에 생성 후 아래와 같이 구성 const express = require("express"); const path = require("pa..

CSS(Cascading Style Sheets) css는 문서의 스타일을 구현하는 스타일 시트 언어이다. 프로그램의 크키가 커질수록 css 파일들이 지저분해지고, 유지보수가 힘들어지는 경험을 해본 적이 있다. 불필요한 선택자(Selector)의 과도한 사용과 연산 기능의 한계, 구문(Statement)의 부재 등이 그 이유이다. CSS 전처리기는 그러한 CSS 작업을 보다 쉽게 해주며 가독성과 재사용성을 높여 유지보수가 용이해지도록 도와준다. CSS 전처리기 위에서 설명한 CSS의 부족한 점들을 해결하기 위해 만들어졌다. 종류 : SASS(SCSS), Less, Stylus, PostCss 장점 - 재사용성 : 공통 요소 또는 반복적인 항목을 변수, 함수로 대체 가능하다. - 시간적 비용 감소 : 임의..