# spa

128개의 포스트

AJAX / SSR & CSR

AJAX Asynchronous JavaScript And XMLHttpRequest JavaScript, DOM, Fetch, XMLHttpReqest, HTML 등 다양한 기술을 사용하는 웹 개발 기법으로 비동기적으로 특정 데이터만 화면에 그려낼 수 있다. 핵심기술 JavaScript, DOM, Fetch 이전에는 ` 태그를 이용하여 서버에 데이터...

2021년 10월 18일
·
0개의 댓글

CSR, SSR의 개념적 차이와 동작 방식

CSR은 클라이언트 사이드 렌더링의 약자이다.브라우저에서 렌더링을 진행한다는 개념이다.최초 로딩 시 브라우저가 서버에 HTML을 비롯한 CSS, Javascript등 각종 리소스들을 받아오는 방식이다.SSR은 서버 사이드 렌더링의 약자이다.서버에서 렌더링을 진행한다는

2021년 10월 14일
·
0개의 댓글
post-thumbnail

[React #8] React-Router로 SPA 구현하기

SPA SPA(Single Page Application)은 페이지가 한개인 어플리케이션을 뜻한다. HTML에서는 페이지 수만큼 HTML 파일이 존재하지만, React에서 .html 파일의 개수는 1개다. 즉, React는 SPA 기반으로 작동된다. 한 웹페이지 안에서

2021년 10월 12일
·
0개의 댓글

CSR / SSR, SPA/MPA, PWA 에 대하여

CSR / SSR, SPA/MPA, PWA

2021년 10월 11일
·
0개의 댓글
post-thumbnail

Next.js 시작하기

Next.js를 사용하게된 계기(TMI)와 프로젝트 생성에 대해서 알아보도록 하자!

2021년 10월 10일
·
0개의 댓글
post-thumbnail

[Series1. DashBoard 만들기] - 21. SPA 프로젝트 만들기 (3)

이번 포스팅에서는 프론트에서 서버로 데이터를 보내는 로직을 작성해 보도록 한다.여러가지 방법이 있겠지만 우리는 node 환경에서 작동하는 http client인 Axios 라이브러리를 써보자.Axios는 무엇일까?Axios 공식 사이트로 이동하기Axios 는 Promi

2021년 10월 10일
·
0개의 댓글

[Series1. DashBoard 만들기] - 20. SPA 프로젝트 만들기 (2)

저번에 기본적인 SPA 세팅을 하였으니, 이번 포스팅에서는 SPA 프로젝트에 꼭 필요한 뼈대를 만들어 보자. SPA에서 풀어줘야 하는 역할은 아래와 같을 것이다.유저가 서버에 전송할 데이터를 입력할 수 있는 장치가 있어야 한다유저가 입력한 데이터를 검증한다유저가 입력한

2021년 10월 9일
·
0개의 댓글

[Series1. DashBoard 만들기] - 19. SPA 프로젝트 만들기 (1)

이번 포스팅에서는 관점을 백엔드에서 프론트엔드로 옮겨서, SPA 프로젝트 생성을 해보도록 한다.회원가입 폼과 로그인 / 로그아웃 폼을 만들어서 우리가 지금까지 만들었던 django 서버와 연결해 본다.

2021년 10월 2일
·
0개의 댓글
post-thumbnail

SPA

다른 누군가처럼 나도 SPA라고는 패션밖에 몰랐지. COS, ZARA, h&m, ...

2021년 10월 1일
·
0개의 댓글

[항해99] 2주차 WIL (2021.09.20~2021.09.26)

1. 과제 관련 2주차 과제 설명 (업데이트 필요) 과제 관련 연습 코드 모음 @ Notion 2. 주요 개념 DOM 서버리스 Single-Page Application (SPA) 3. 주요 개념 - DOM 3-1. DOM vs. VDOM DOM 트리 중 하나가 수정될 때마다 모든 DOM이 파싱되며 수정한다면 불필요한 연산이 너무 많이 발생하게됨 ...

2021년 9월 26일
·
0개의 댓글
post-thumbnail

CSR, SSR

각 두개의 단어는 서로의 대척점에 있다고 볼 수 있다. CSR 와 SSR SPA 와 MPA 해당 개념에 대해 헷갈리지 않도록 조금 더 쉽게 작성해보기로 하였다. 웹 브라우저(크롬, 웨일, 파이어폭스, IE, ...)에서 실제로 우리가 볼 수 있는 화면이 있다.

2021년 9월 20일
·
0개의 댓글
post-thumbnail

[SPA] SPA(Single Page Application)이란?

전통적인 과거의 웹 사이트는 문서 하나에 전달되는 파일의 용량이 작았음→ 어떤 요소를 한 번 클릭하면 Server에서 완전히 새로운 페이지를 전송 (용량이 작았기 때문에 부담X)→ SSR(Server Side Rendering, 서버 사이드 렌더링) 방식으로 화면에 보

2021년 9월 19일
·
0개의 댓글

TIL. 43 CSR, SSR

💡 SPA (Single Page Application) 말 그대로 하나의 페이지로 이루어진 웹 애플리케이션으로, 서버에서 최초에만 페이지를 받아온 후 이후에는 동적으로 구성해 새로운 페이지를 받아오지 않는다.(데이터를 수정, 조회할 때 새로 고침되지 않음) 쉽게 말해, 처음 불러왔던 페이지의 내용만 변경하는 방식이고, 페이지 이동간 서버에 요청을 하지...

2021년 9월 17일
·
0개의 댓글
post-thumbnail

[React] 2. React Router, Sass]

🔍 React Router >- path속성으로 자신이 원하는 URL 주소를 만들고 그 해당 URL에 들어갈 컴포넌트들을 지정하고 브라우저 이동 없이 빠르게 페이지 전환이 이루어지도록 도움을 준다. CRA(Create React App)에는 routing을 위한 로

2021년 9월 17일
·
0개의 댓글

TIL. 4주차 목요일

1. React SPA Single Page Application의 줄임말로 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트를 말한다. 2. SPA의 장점 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트...

2021년 9월 16일
·
0개의 댓글
post-thumbnail

React SPA

SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다.SPA의 장, 단점에 대해 이해하고 설명할 수 있다.와이어프레임을 보고 어느 부분을 컴포넌트로 구분할 지 스스로 정할 수 있다.Traditional: 과거에는 페이지 이동시 페이지 전체

2021년 9월 16일
·
0개의 댓글
post-thumbnail

TIL 검색최적화를 위한 빌드업 #2 SPA,CSR,SSR(feat...Next.js)

이름 그대로, 단일 html페이지에서 전체 웹 사이트/ 서비스를 구현한 것이 SPA이다.웹사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다.클라이언트 사이드 랜더링은 최초 로드시 필요한 파일들을 모두 받고 사용자의 인터랙션에 따라 클라이언트

2021년 9월 15일
·
0개의 댓글

SPA

SPA는 'Single Page Application'의 약자로 단일 페이지로 구성된 웹 애플리케이션을 말한다.SPA가 등장하기 전 웹 애플리케이션을 구성하던 방식인 서버 사이드 렌더링(SSR)의 경우, 화면에 리소스를 서버로 요청하고 서버로 부터 받아온 리소스를 렌더

2021년 9월 14일
·
0개의 댓글
post-thumbnail

프론트엔드 라면 알아야 할 검색과 SEO

검색크롤러(검색봇) 웹사이트를 돌며 어떤 사이트인지 목록화 한다. 현재 검색 알고리즘 크롤러가 돌아다니며 자료들을 수집 -> 링크도 다 수집된다. 구글 알고리즘을 페이지랭크하며 여러개의 알고리즘으로 구성된다. 신뢰할수 있는 사이트인지, 태그나 css 신경써서 노출

2021년 9월 9일
·
0개의 댓글