바다바다

React와 Next를 비교하면서 CSR과 SSR 이해하기 서론1. Express 와 ejs(Express의 템플릿 엔진)을 사용하여 웹페이지를 보여줄 경우 => 서버사이드 렌더링 위 사진은 experss generator로 파일을 생성하고 처음 서버를 실행시킨 모습입니다. 저 화면이 바로 서버사이드 렌더링으로 보여주는 화면입니다 !! 즉 , 서버사이드 렌더링은 서버 측에서 화면을 그리는데 필요한 것들을 보내줍니다. 서론 2. 클라이언트 – 프론트(프론트서버) – 백엔드(벡엔드서버) 구조에 익숙해지기 !! 지금은 “클라이언트 – 서버” 구조에 익숙하셔서 아래 사진과 같은 구조가 잘 이해 안 되실 수도 있는데 React (or Next) 로 개발한 웹은 아래 사진처럼 되어있습니다 !! 본론 React (C..

React Component, state, props에 대해 처음 공부하시는 분에게 설명한다고 생각하고 쓴 글입니다. 컴포넌트(component) 컴포넌트(component) 컴포넌트는 말 그대로 구성요소예요! 리액트로 만든 웹사이트는 컴포넌트들의 합으로 되어있어요 더 쉽게 생각하면 컴포넌트는 일종의 ‘조각’이라고 보시면 돼요. 큰 조각도 있고 작은 조각들도 있고 다양한 크기의 조각들이 합쳐져 하나의 화면을 구성해요 리액트로 웹사이트를 만든다면 위 사진 처럼 조각조각 화면을 쪼개서 만들 수 있어요! 부모 컴포넌트를 큰 조각 자식 컴포넌트를 작은 조각으로 생각하시면 돼요 ! Q .이렇게 화면을 잘게 쪼개서 만들면 뭐가 좋을까요 ? A. 바로 재사용성이 높아져요 . 만약 다른 화면을 만드는데 내비게이션 바 ..

RDS를 안쓴다면… 우선 RDS를 사용하지 않고 EC2에 데이터베이스를 설치해서 사용하는 경우를 먼저 살펴볼게요 EC2는 쉽게 말해서 AWS한테 컴퓨터를 빌리는 거잖아요 (일반 컴퓨터에도 리눅스OS 설치해서 서버 컴퓨터로 만들 수 있습니다. 리눅스뿐만 아니라 다른 운영체제로 된 컴퓨터도 서버 컴퓨터로 사용하는 게 가능) 빌린 컴퓨터에 ssh로 원격 접속한 후 Database를 설치하고 사용하는 것도 물론 가능합니다 근데 보안 같은 것도 신경 써야 되고 세팅해줘야 될 게 많습니다 무엇보다 서비스가 커져서 DB를 추가할 때 아래 사진처럼 서버에 부담이 많이 가게 됩니다 RDS를 사용하면 RDS를 이용하면 비교적 쉽게 보안설정 (보안그룹 인바운드,아웃바운드)도 할 수 있고 DB를 확장하기 쉽습니다.

Express는 라우팅을 편하게 하려고 사용해요. 라우팅이 클라이언트에서 보내주는 주소에 따라 다른 처리를 하는 것이라고 말했죠 여기서 실제로 처리하는 녀석이 '미들웨어'함수에요 . 그래서 Express는 미들웨어 함수로 구성되어 있다고 말하는 겁니다. 미들웨어는 크게 4가지 유형이 있어요 1. application (app) 미들웨어 2. router 미들웨어 3. error 처리 미들웨어 4. third-party 미들웨어 1. application (app) 먼저 app 미들웨어는 어플리케이션 전역에서 처리가 가능한 미들웨어로 어플리케이션 자체에 request가 발생할 때마다 실행돼요 app.use() app.METHOD() 이 둘의 차이 주목!! app.use('/index')는 /index 로의..

Express를 간단하게 설명하면 라우팅을 쉽게 할 수 있도록 도와주는 프레임워크입니다 라우팅을 편하게 하려고 쓰는 겁니다 !!!! *라우팅 : 클라이언트에서 보내주는 주소에 따라 다른 처리를 하는 것을 말해요 var express = require(‘expess’) // express 모듈을 불러오고 var app = express() // express객체 생성한 후 변수 app에 넣어줍니다. 변수app을 가지고 express 프레임워크의 기능들을 사용할 수 있습니다. Express App 은 여러 개의 미들웨어가 결합되어 있는 형태입니다. 미들웨어는 중간에서 어떤 동작을 해주는 프로그램인데 Express에선 그냥 요청과 응답 사이에서 어떠한 처리해주는 함수라고 생각하시면 돼요. 어떤 요청은 미들웨어..

아주 상세하게 적어놨다 ~ const http = require('http'); // nodejs는 자바스크립트 런타임(javascript Runtime)입니다 . // 일단 자바스크립트 '실행기'라고 생각하시면 됩니다. // 예전에 javascript는 html문서 안에 종속되어 있었는데, // nodejs 덕분에 독립적으로 활용할 수 있습니다 . // (터미널에 node sample1치면 자바스크립트 코드 실행되잖아요ㅋㅋ 전에는 html문서 태그 안에서 // html */ // 암튼 근데 nodejs를 흔히 서버라고 하잖아요 ~ (자바스크립트 런타임이라고 안하고) // 그건 저 위의 http모듈 덕분이에요 ~!! // http모듈 안에 있는 함수들을 사용하면 서버 역할을 하는 프로그램을 만들 수 있어..

Gson : Gson은 자바 객체를 JSON으로 변환하거나 ,JSON을 자바 객체로 변환할 때 사용하는 라이브러리다. Gson을 사용하면 한 번의 파싱을 통해 JSON에서 곧바로 자바 객체를 얻을 수 있는 장점이 있다. 또한 반대로 서버로 데이터 요청을 보낼 때도 해당 자바 객체를 JSON으로 간단히 변환할 수 있다. 아마 Gson을 직접 사용하기보다 사용하는 라이브러리가 Gson을 사용하는 경우가 많을 것이다. Gson 사용방법 1. Gson 설정 compile 'com.google.code.gson:gson:2.3.1' 2. Gson에서 사용할 클래스 선언 public class Person { private String name; private String sex; private int age; @..

Retrofit : Retrofit은 앱과 서버 간의 API통신을 쉽게 만들어주는 라이브러리다. Retrofit의 구성 1 ) 네트워크 통신에 필요한 전반적이 설정을 관리하는 Retrofit Client (Retrofit 객체 생성) 2 ) 통신할 API의 HTTP Method를 정의하는 Service Interface. (API Service) 3 ) Request & Response (Call, CallBack java 코드) 4 ) DTO ( Data Transfer Obejct ) : 데이터 송/수신시 서버에 (User) 정의해 놓은 Object의 데이터 형식에 맞게 작성해 놓은 클래스 @SerializedName - json 으로 serialize 될 때 매칭되는 이름을 명시하는 목적으로 사용되..