본문 바로가기

분류 전체보기50

SPA & MPA / SSR & CSR SPA  SPA는 Single Page Application의 약자로써, 하나의 페이지로 이루어져 있는 애플리케이션을 뜻합니다.대표적으로 React, Vue, Angular가 있어요.React에 대해 본격적인 학습에 들어가기 전, SPA 아키텍쳐의 동작원리를 이해하는 것은앞으로 React를 이해하는 데에 큰 도움이 될거에요!   (1) SPA에 들어가기 전, MPA와 SSR에 대해 MPA(Multi Page Application)란, 2개 이상의 페이지(html)로 구성된 애플리케이션을 의미합니다. 요청 : 클라이언트(브라우저)에서 네모를 눌러 서버에 응답을 요청합니다.생성 : 서버(웹서버)에서는 요청에 따라 새로운 html 파일을 만듭니다.응답 : 새로 만든 html 파일을 클라이언트(브라우저)에게 보.. 2024. 5. 14.
React의 주요 개념 익히기 1. 가상 DOM - 가상 DOM은 실제 DOM을 흉내 낸 가상의 DOM입니다.- React 같은 라이브러리는 가상 DOM을 사용해서 실제 DOM보다 빠르게 UI 변경사항을 관리해줍니다.- 가상 DOM은 변경이 필요한 부분만 실제 DOM에 반영해줘서, 페이지 전체를 새로 불러오는 것보다 훨씬 효율적입니다.- 개발자 입장에서도 DOM을 직접 다루는 대신, React가 가상 DOM을 이용해 필요한 부분만 자동으로 업데이트를 해주니 훨씬 편리하게 그리고 높은 생산성으로 서비스를 만들 수 있어요.  2. JSX - JSX는 Javascript를 확장한 문법으로, React에서 UI 구조를 표현하는데 사용됩니다.- HTML 태그와 유사하게 생겼지만, 실제로는 Javascript의 확장입니다.- JSX는 React.. 2024. 5. 13.
라이브러리와 프레임워크 React JS 웹과 네이티브 UI를 위한 Library이다.공식 홈페이지에서는 React를 UI를 만들기 위한 라이브러리라고 소개하고 있습니다.​ 프레임워크 개발자가 기능 구현에만 '딱' 집중할 수 있도록 필요한 모든 프로그래밍 재원을 지원하는 '기술의 조합'.​ Spring Framework  : Java 기반의 웹(백엔드) 프레임워크- FE까지 가능한 full stack coverage framework- JSP, Thymeleaf​ Vue js, Angular js  : Javascript 기반 웹 프론트엔드 SPA 프레임워크​ Django, Flask  : Python 기반의 웹 프레임워크  Express js, Nest js  : Javascript 기반 웹 백엔드 프레임워크​ 라이브러리? 공.. 2024. 5. 10.
DOM과 Class, Closer 1. DOM (1) DOM의 기본 개념javascript브라우저에서 쓰려고 만들어진 JS에요!본연의 역할 : 웹 페이지를 동적으로 만들기 위해! 즉, HTML문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어에요.웹 페이지가 뜨는 과정사용자가 브라우저에 ‘www.naver.com’ 주소를 입력합니다.클라이언트가 서버에게 ‘요청(request)’를 했네요.여러분이 크롬을 통해 클라이언트의 역할을 하는 것이랍니다 🚀💡 사용자 = 브라우저 = 클라이언트, 같은 의미로 생각해주세요🙂HTML 문서를 서버로부터 수신합니다.네이버서버는 여러분(=브라우저 =클라이언트)에게 ‘응답(response)’를 줬네요.그 응답은 HTML 문서(document)랍니다.브라우저가 HTML 파일을 해석(parsing 파싱).. 2024. 5. 7.

티스토리툴바