메이쁘

안녕하세요. 지난 글에서는 ReactJS를 사용하여 View를 만들고, 포트를 열어 웹에 띄워보는 것까지 진행했습니다. 그래서 터미널에서 npm start 명령어로 클라이언트 브라우저(로컬호스트 서버 및 포트) 를 출력할 수 있었죠. 이번 글은 뷰가 아닌 서버를 만들어 서버를 열고, 서버 뷰 통신하는 것 까지 진행하는 단계를 설명드리겠습니다. 참고로, 서버는 NodeJS 방식으로 사용할 것입니다! 이전 글을 한 번 보고 올래요! 서버 통신에 필요한 모듈 설치하기 - 기본적으로 import 할 모듈은 크게 3 가지가 있습니다. - express, body-parser, cors - 하나하나 설치하면서 이 모듈이 어떤 역할을 하는지 간단하게 짚고 넘어가겠습니다. express - NodeJS의 웹 어플리케이..

안녕하세요. React하면 사용하는 컴포넌트. class TestComponent extends React.Component { render() { return ( Hello React! ) } } 와 같이, 컴포넌트를 만들기 위해 React.Component 를 extends 해서 사용하는데요. 이 React.Component 에도 안드로이드의 Activity, iOS의 AppDelegate 처럼 생명 주기(Life Cycle) 가 존재합니다. 이 생명 주기에 대해 알아보겠습니다. 컴포넌트의 전체 생명 주기 컴포넌트가 생성되고, 업데이트(새롭게 랜더링) 되며 제거되는 전 단계를 요약한 사진입니다. (생성 -> 업데이트 -> 제거) 이렇게 보게 되면 헷갈릴 수 있으니까, 하나씩 정리해보겠습니다. 그 전에..

안녕하세요. CORS 대신 proxy 를 사용해 클라이언트에서 서버 사용을 가능하게 하고, 더 편하게 만들어봅시다. proxy란? - 클라이언트가 자기 자신 안에서 다른 네트워크 서비스에 간접적으로 접근하게 해주는 것. - 보통, 시스템이나 프로그램을 사용한 것을 proxy, 서버를 사용한 것은 proxy server 라고 하는데 요즘 거의 대부분은 proxy server를 사용하기 때문에 proxy server 를 proxy 라고 부르기도 합니다. - 즉, 클라이언트 -> 서버 로 바로 접근할 수 없고, 클라이언트 -> 프록시 -> 서버 과정을 통해 클라이언트가 서버에 접근할 수 있습니다. **** 자바스크립트는 정책 상 같은 출처(프로토콜, 도메인 이름, 포트) 로만 접근이 가능하기 때문에, Reac..

******************** MAC 사양 : MacBook Pro(16인치, 2019) 프로세서 : 2.6 GHz 메모리 : 16GB ******************** 안녕하세요. React JS는 간단히 설명드리자면, Facebook에서 개발한 웹 / 앱의 View를 만들기 위해 사용하는 JavaScript 기반 라이브러리 입니다. 대표적인 React JS의 특징은 1) 가상 DOM 사용 2) 선언형 3) 컴포넌트를 활용한 웹 / 앱 의 View 제작 가능 4) SPA(Single Page Application) *** SPA에 대해 헷갈리시나요? [WEB CS] SPA(Single Page Application) 에 대해 간단 개념 정리! 안녕하세요. 스파 브랜드의 그 SPA가 아닌 웹에..