프론트엔드
client 들이 볼 수 있는 화면을 설계 구현하는 사람
구조적 관점에서는 Client 와 Backend 를 연결해주는 사람.
기능적 관점에서는 Client 들이 Backend 로 Request 를 보낼 수 있게 해주고 반대로 Response 를 수령할 수 있게 구현하는 사람.
이 모든 것들에 대한 비주얼 스크린을 구현하는 사람.
구성요소
- Markdown Document : HTML
- Styles Sheets : CSS
- Bundle : Javascript
가장 기본적인 구조는 html, css, javascript 가 따로 있는 것이다.
하기 파일을 별도로 생성하고 작성한 후 html 파일에서 연결하면 된다.
- index.html
- index.css
- index.js
프레임워크
Angular, Vue 및 React 등을 이용하면 특이한 성질을 가진 사이트를 디자인할 수 있다.
프레임워크
Angular, Vue 및 React 등을 이용하면 특이한 성질을 가진 사이트를 디자인할 수 있다.
라이브러리
각 문서를 효율적으로 작성할 수 있게 해주는 라이브러리도 있다.
PUG 나 SCSS 같은 것이고 그냥 사용할 수는 없고 별도의 셋팅이 필요하다.
express 프레임워크를 이용한 view engine 셋팅으로 PUG 를 사용할 수 있고
node-sass 같은 라이브러리로 SASS 를 적용시킬 수 있다.
- React 사용시 SASS 에 관한 최선의 선택은 Styled-components 를 사용하는 것 같다.
백엔드
client 들이 볼 수 없는 화면을 설계 구현하는 사람
구조적 관점에서는 Frontend 와 Database 를 연결해주는 사람.
기능적 관점에서는 Frontend 에서 Cleint 들이 보낸 Request 들에 대한 적절한 Response 를 구현하는 사람.
구성요소
- Server
- DB
- ETC
가장 기본적인 구조는 Server 와 DB 그리고 기타 파일들로 구분하는 것이다.
Server 파일에서 Node.js 기반 백엔드 프레임워크를 호출하여 서버를 생성하고
DB 파일에서 connect-Mongo 등을 사용하여 데이터베이스 서버와 연결한다.
그리고 백엔드의 기능적 구현부를 ETC(기타 파일)에 전부 포함시킨다.
프레임워크
아직 express 밖에 배운 것이 없다.
라이브러리
express-session 을 이용해 세션을 설정하거나
bcrypt 들을 통해 비밀번호 암호화 등을 하고
mongoose 등을 이용해 스키마, 모델링 등을 하는 등의 기능적 지원을 해준다.
데이터 질의어
GraphQL 과 같은 데이터 질의어를 사용하여 API GET,POST 의 효율성을 증대시킬 수 있다.
연결
백엔드에서 API 셋팅을 하고
프론트엔드에서 API 호출을 하는 방식으로 연결한다.
