서스포PAR_개발블로그

저번에 API에 대해서 알아봤습니다. 자바스크립트에서 HTTP Requests를 위한 방법이 두가지가 존재하는데 🎁 오늘은 어떤것이 존재하고 어떤 차이점이 존재하는지 알아보겠습니다. 🎁 💖 Fetch ES6부터 들어온 JavaScript 내장 라이브러리입니다. Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터 다루기가 쉽고, 내장 라이브러리라는 장점으로 상당히 편리합니다. fetch("https://localhost:3000/user/post", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: "asd123", description: "hello world", }..

API를 사용하는데 이것이 어떤 내용인지 처음엔 자세히 몰랐다. 하지만 알아야겠다는 마음을 먹고 기본 개념부터 정리하자고 마음먹었다 🎁 기본이론부터 호출방법까지 차차 알아보도록 하자 🎁 💖 API (Application Programming Interface) API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다. 구글에 API가 뭔지 쳐보자. 위키백과에는 다음과 같은 설명이 있다. 🔊 위 이미지를 통해 간단하게 설명하자면, API는 손님(프..

MPA vs SPA 을 정리하다가 계속나오는 SSR과 CSR... 서버에 대한 지식이었으나 알아보면 더 자세히 알 수 있기에 오늘은 SSR과 CSR을 알아보기로 하였다. 📑 SSR VS CSR 🔊 SSR (Server Side Rendering) 말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다. 🔊 CSR (Client Side Rendering) SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다. 즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다. 🎠 SSR (Server Side Rendering) 1. User가 Website 요청을 보냄. 2. Server는 'Ready to Render'. 즉, 즉시 렌..

build를 진행하다가 새로운 이슈에 직면하였다. 그것을 해결하기 위해 어떤것을 하였는지 과정을 나열하였다. 📑 serve -s build 오류 메세지 serve : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\win10\AppData\Roamin g\npm\serve.ps1 파일을 로드할 수 없습니다. 자세한 내용은 http://go.microsoft.com/ fwlink/?LinkID=135170의 about_Execution_Policies를 참조하십시오. 위치 줄:1 문자:1 + serve -s build + ~~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedA..

리액트 프로젝트를 하기 위해서 화면을 전환을 위해 사용하는 React-router-dom을 사용하는데 🎁 기본이론부터 v6로 업데이트까지 알아보자! 🎁 💖 React-Router 1. 가장 많이 사용되는 라이브러리 중 하나로, 클라이언트 사이드에서 이루어지는 라우팅을 간단하게 해주며 서버 사이드 렌더링을 도와주는 도구들을 제공합니다. 2. React-Router 를 통해 Link 태그를 사용하여 화면을 전환한다. 리액트는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로 페이지 이동 시 굳이 화면 전체를 새로고침 할 필요가 없습니다. (주소값의 변경에 따라 페이지 혹은 컴포넌트의 변화를 제공하기 위한 라이브러리) 3. react-router는 페이스북에서 공식으로 지원하고 있는 라이브..

넵플러스 학원에서 수업을 듣다가 SPA (Single Page Application) 혹은 MPA (Multi Page Application)에 대해서 선생님이 프론트엔드에게 필수적으로 알 필요가 있다하였다. SPA, MPA가 무엇인지 한번알아보자 📑 MPA VS SPA 🔊 MPA(Multiple Page Application)는 여러 개(Single)의 Page로 구성된 Application이다. MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드된다. 매번 전체 페이지가 다시 렌더링 된다. 그래서 MPA를 SSR(Server Side Rendering) 방식으로 렌더링한다고 말한다. 🔊 SPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Appli..

21년 12월 14일에 create-react-app이 4.0.3 버전에서 5.0.0로 업데이트 되었습니다. 그럼 기존에 사용하는 사람이 어떻게 해결하는지에 대해서 알아봅시다! 🎁 create-react-app 페이스북 깃허브 🎁 https://github.com/facebook/create-react-app GitHub - facebook/create-react-app: Set up a modern web app by running one command. Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub. github..

프론트엔드 개발자가 되기위해 나는 리액트를 선택하였다. ✨리액트에 대해서 천천히 알아보자 ✨ 💖 React 1. React는 페이스북에서 제공하는 프론트엔드 라이브러리다. 2. React는 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는 데 사용된다. - 즉 싱글페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 사용. 3. React 는 웹을 만드는 데 꼭 필요한 도구들이 전부 기본적으로 제공되지 않는다. 4. React의 주요 목적은 가볍고, 빠르고 확장 가능하며 단순 것 입니다. 5. React를 사용하면 개발자가 페이지를 다시 로드하지 않고도 데이터를 변경할 수 있는 대규모 웹 어플리케이션을 만들 수 있다. 6. React는 컴포넌트 기반으로 컴포넌트에 데..