프론트엔드에서 프레임워크, 라이브러리

  • SPA 3대장 - react, angular, vue.js
  • 프레임워크는 하나의 틀로서, 그 안에서 모든 기능들이 제공되며, 동시에 그 틀안에서 프레임워크마다의 룰에 맞춰 작성해야 한다.
    • angular, vue.js
  • 라이브러리는 툴이 아닌 하나의 기능 단위로 제공하는 것으로서, 룰이 따로 존재하지 않으며, 여러 라이브러리를 유동적으로 합쳐서 개발자의 방식대로 꾸밀 수 있다.
    • react.js

 

React

  • UI를 꾸며주는 하나의 라이브러리로서, 자바스크립트 문법을 기반으로 하기에, 적응이 쉽고, 계속적으로 업데이트 되기에 angular,vue.js와 비교해서도 가장 많이 쓰이는 라이브러리다.
  • 노드로 실행할 수 있는 자바스크립트 파일들을 패키지라고 하며, 그 패키지들을 다운받게 하고 관리해주는 일종의 앱스토어와 같은 역할을 npm이 하고 있다. 또한 리액트 역시 노드로 실행할 수 있는 패키지중 하나이며 npm을 통해 설치해야한다.

 

CRA

  • 개발환경을 구축해주는 툴체인
  • Next, Gatsby
  • npx create-react-app 프로젝트명
    • npx는 npm명령어로서 해당 패키지를 실행해주겠다는 것
    • vs코드의 폴더명이 아닌 임의로 지정해주는 것으로 폴더안의 폴더를 프로젝트만들어줌

 

virtual dom

  • 말 그대로 가상 돔으로서, 바닐라 자바스크립트로 일일히 dom에 접근해서 매번 수정하는 작업으로 걸리는 시간을 react해서 다 처리해놓고 한번에 dom에 적용시키는 방식으로 가용성을 올린다.

 

SPA

  • 기존의 여러 html파일을 왔다갔다 하면서 이동했다면, 리액트에서는 하나의 html파일로 모든 작업을 하겠다는 의미이다.
  • index.html

 

컴포넌트

  • 리액트는 컴포넌트 단위의 프로젝트로서, 하나의 커다란 태그단위(section,header,footer등..)로 함수 하나에 jsx(선언적)방식으로 넣어 놓고 가져다 쓰는 방식
  • 컴포넌트 단위다 보니 재사용이 좋고, 수정을 할 때, 하나만 수정하면 한꺼번에 적용되니 가독성도 좋다.
  • 클래스 컴포넌트
class 이름{   render(){    태그  } }
  • 함수 컴포넌트
function 이름(){    return(     태그  ) }

 

리눅스 기본 명령어

  • npm start
    • 리액트 서버 동작
    • 리액트에서의 터미널 명령어는 package.json에서 정의한 스크립트를 통해 실행되는 것으로서 실제로 실행되는 명령어는 react-scripts start
  • npm build
  • npm test
  • npm eject

 

React프로젝트 구조

  1. node_modules와 .gitignore, package.json
  • node_modules
    • react가 설치되며 만들어진 노드 패키지 파일들을 모아둔것
  • .gitignore
    • 깃으로 관리하지 않을 파일들을 설정하는 곳으로서, 깃헙에 push해도 올라가지 않을 파일들이다. 예를 들면 node_modules가 있으며 여기에는 모든 패키지 파일들을 모아놓았기에 너무 크기가 방대하기에, 따로 깃으로 관리하지 않는다.
  • package.json
    • 현재 프로젝트에 관한 정보나 환경변수를 담는 파일로서, dependencies나 위에서 설명한 스크립트...등이 있다. dependencies는 현재 프로젝트에 적용된 노드 패키지 파일들이 기입되어 있으며, 우리가 깃으로 관리하지 않는 node_modules의 경우, 기존 프로젝트를 클론해올 node_modules가 없기에 dependencies를 보고 설치를 따로 해준다.
  • npm install
    • 클론해서 가져온 프로젝트의 dependencies에 있는 모듈들을 일괄적으로 다운받는 명령어다.
  1. node_modules와 .gitignore, package.json
  • public폴더는 SPA로 지정된 index.html파일이 존재한다.
  • src폴더에는 js파일들을 담아둔 곳으로 특히 index.html과 연결된 (따로 index.html에는 연결태그가 없음) index.js가 존재한다.
//index.js  

//아래 두줄은 경로 없이 바로 파일명이 나왔는데 이는 node_modules에서 가져올 경우 
import React from 'react'; 
import ReactDOM from 'react-dom/client';  

//index.html에 css파일 
import './index.css';  

//src안에 app.js에는 함수안에 jsx형식으로 작성된 html태그들이 있으며 이를 import 
import App from './App';  

//index.html에서 설정된 하나의 div id root를 가져와서 변수에 넣음 
const root = ReactDOM.createRoot(document.getElementById('root')); 

//app.js를 렌더링해서 index.html에 div 태그 안에 app.js에서 작성한 jsx형식에 html태그들을 넣겠다는 의미 
root.render(<App />);

 

//컴포넌트  

// 리액트 함수 사용 
import React from "react";  

// css파일 가져오는데 따로 변수 필요없으니까 바로 가져오면됨 
import "./App.css";  
function App() {   
    const introduce = () => alert("test");    
    // 1-1 태그를 포함시킬때는 무조건 부모 자식 관계로 작성해야 하며, 
         //부모부모로 서로 동등한 관계의 태그를 하나의 함수에 여러개 적용 불가능 
    // 1-2 부모부모의 동등한관계를 여러개 쓰고 싶을 경우는 실제로 dom으로 보내지지는 않음 
         //<React.Fragment>태그로 감싸주면 되고 이 역시 <></>로 요약 가능   
    // 2 return값 안에는 jsx형태 즉, 확장된 자바스크립트 값만 쓸 수 있다.변수에 담을수 있는 값만   
    return (     
        <div className="App">       
        <header className="App-header">         
        {/* 태그 안의 클래스는 class가 아닌 className 대부분의 dom가 겹치는 변수는 카멜케이스로 */} 
        {/* 자바스크립트 변수나 위에서 import로 가져온 변수, 함수를 태그 안에 쓸때는 {}안에 넣어서 쓴다. */}         
        {/* 이벤트도 아래처럼 onClick이라는 카멜케이스로 해서 뒤에는 함수로 가져오는것이 가능하다. 
            introduce안에는 addEventlistenr로 적용할 함수만 써서 가져오면 된다. */}         
        {/* 만약 introduce자리에 함수를 직접넣을려면 {}하나 넣고 직접 입력도 가능한데,  
            이 것은 css의 경우만 가능하다. */}         
        <img src={logo} className="App-logo" alt="logo" onClick={introduce} />         
        <p>Edit <code>src/App.js</code> and save to reload.</p>         
        </header>     
    </div>   
    ); 
}  

// 밖으로 내보낼 함수 설정 
export default App;

 

 

 

React 라우팅

  • 리액트안에서 라우팅을 위해 설치
  • 리액트 자체 모듈은 아니고 서드파티로서, 외부에서 만든 모듈이다.
  • 설치 명령어
    • npm install react-router-dom --save

 

  1. 라우터 파일 구현
import React from "react"; 
import { BrowserRouter, Routes, Route } from "react-router-dom"; 

import Nav from "./components/Nav/Nav"; 
import Footer from "./components/Footer/Footer"; 
import Login from "./pages/Login/Login"; 
import Signup from "./pages/Signup/Signup"; 
import Main from "./pages/Main/Main";  
function Router() {   
    return (     
        <BrowserRouter>      
            //nav와 footer는 변하지 않고 항상 표시해주는 값이기에 라우팅하지 않고 항상 연결       
            <Nav />       
            <Routes>         
                //노드에서 연결했듯이 라우팅을 해준다.         
                <Route path="/" element={<Login />} />         
                <Route path="/signup" element={<Signup />} />         
                <Route path="/main" element={<Main />} />       
            </Routes>       
            //nav와 footer는 변하지 않고 항상 표시해주는 값이기에 라우팅하지 않고 항상 연결       
            <Footer />     
        </BrowserRouter>   
    ); 
} 
export default Router;

   2. index.js에 추가

import Router from "./Router"; 
import { BrowserRouter, Routes, Route } from "react-router-dom"; 
const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<Router />

 

페이지 이동

  • link태그, useNavigate훅 이용
  • 아예 다른 웹어플리케이션, 외부 페이지로 이동할때는 a태그 그대로 사용
1.link태그 
//기존 컴포넌트에 패키지 추가하고 
import { Link } from "react-router-dom"; 
//함수 안에 사용 
<Link to="/signup">회원가입</Link>
2. useNavigate 
//기존 컴포넌트에 패키지 추가 
import { useNavigate } from "react-router-dom";  
function Login() {   
    //훅으로 변수에 넣기   
    const navigate = useNavigate();     
    //클릭이벤트 함수     
    const goToMain = () => {      
        if(response.message === "valid user"){       
            //위에 if문에 따라 라우팅에 따라 /main으로 설정된 페이지로 이동         
            navigate('/main');      
        } else {        
            alert("가입된 회원이 아닙니다. 회원가입을 먼저 해주세요.")        
            //위에 if문에 따라 라우팅에 따라 /signup으로 설정된 페이지로 이동         
            navigate('/signup');      
        }    
    }    

    return (     
        <div>       
            //위에 클릭이벤트를 onClick이라는 jsx형식으로 써서 넣음       
            <button className="loginBtn" onClick={goToMain}>         
            로그인       
            </button>     
        </div>   
    ); 
} 
export default Login;

 

Sass

  • css 전처리기, scss버전 사용
  • 모든 css파일확장자를 scss로 변경
  • Sass 설치 명령어
    • npm install sass --save

 

  1. variables
//변수에 스타일 요소들을 담음 
//$는 컨벤션 
$font-stack: Helvetica, sans-serif; 
$primary-color: #333;
  1. nesting
//nav안에 있는 해당 요소들의 대해 스타일을 적용할때 사용 
//nav ul, nav li처럼 css 선택자를 길게 활용할필요 없어짐 
//또한 어느 태그안의 어느 태그인지 구체화시키기에 css중복도 줄어듬 
nav {   
    ul {     
        margin: 0;     
        padding: 0;     
        list-style: none;   
    }    
    li { 
        display: inline-block; 
    }    
    a {     
        display: block;     
        padding: 6px 12px;     
        text-decoration: none;   
    } 
}
  1. mixin
//theme라는 속성안에 중복되는 css를 담음 
//동시에 인자를 받아 이후 다른 태그들에서 theme를 가져올때 인자를 통해 유동적으로 변환이 가능
@mixin theme($theme: DarkGray) {   
    background: $theme;   
    box-shadow: 0 0 1px rgba($theme, .25);   
    color: #fff; 
}  

//theme를 가져와서 추가 
.info {   @include theme; } 

//theme를 가져와서 추가함과 동시에 theme의 인자를 바꿔줌 
.alert {   @include theme($theme: DarkRed); } 
.success {   @include theme($theme: DarkGreen); }
  • 이미지 링크 걸 때 src에서 js파일에서 링크를 걸때는 상대경로를 src기준이 아닌 public기준이다.
    • jsx안에서는 html태그니까 물론 public기준
  • 훅은 일종의 변수에 넣어서 jsx에 추가하는 것
  • 리엑트는 첫 글자가 대문자인것을 컴포넌트로 인식하기에, 모든 컴포넌트는 대문자로 시작

'Monthly I Learned > 2022.08' 카테고리의 다른 글

8/17 - React Hook개념과 내장Hook  (0) 2022.08.17
8/15 - React 정의 및 설정  (0) 2022.08.16
8/9 - 라우팅과 json형식, request 보내기  (0) 2022.08.11
8/11 - CORS와 구조분해할당  (0) 2022.08.11
8/10 - http  (0) 2022.08.11

라우팅

  • 경로를 찾아가게 하는 과정, 즉 위에서 만든 서버 만들고 url과 메소드에 따라 함수 실행시키고 찾아가게 하는 자바스크립트 파일이 라우팅 파일이 되는 것이다.
  • node 프로젝트를 설정하면 크게 라우팅해서 연결해주는 라우팅 파일과 그 라우팅으로 실행 시킬 함수 파일로 구성된다.

 

 

nodemon - 모듈

  • node의 모듈중 하나로서 서버 실행중, 파일에 수정사항이 생길때 서버를 재접속하는게 아닌, 실행상태에서 수정되게 하는 모듈
//전역설치  
npm install nodemon -g
//프로젝트별 설치  
npm install --save-dev nodemon
  • 실행은 ‘node 파일명’ 대신에 ‘nodemon 파일명’으로 서버를 실행해주면 된다.

 

 

response.json(), JSON.stringify(), JSON.parse()

response.json()

  • 응답이나 요청을 데이터를 주고 받는 특정상황에서만 사용됨
  1. experss 메소드로서, 서버에서 응답으로 보낼 데이터를 json형식으로 바꿔서 보내겠다는 의미, 아래 두 코드를 축소
//축소전 res.setHeader("Content-Type", "application/json"); 
//send 또는 end 
res.end(JSON.stringify({ message: "/ endpoint" }));   

//축소후 
//express모듈 선언 
const express = require("express"); 
const app = express(); 
app.use(express.json());  

res.json({ message: "/ endpoint" });
  1. 클라이언트가 서버에서 받아온 데이터를 파싱해서 사용하겠다는 의미
fetch('api주소', {method: 'GET'}) 
.then(response => response.json()) 
.then(result => //여기에 로직 작성)

 

JSON.stringify()

  • 자바스크립트 객체를 json형태로 변환
  • ()안에는 josn형태로 변환할 자바스크립트 객체가 들어간다.
const stringify = JSON.stringify(자바스크립트객체)

 

JSON.parse()

  • json형태를 자바스크립트 객체로 변환한다.
  • ()안에는 자바스크립트 객체로 변환할 json객체가 들어간다.
const parse = JSON.parse(json객체)

웹끼리 통신을 실제로는 아스키코드로 변경해서 주고받는데 여기서 문자열만 아스키코드로 변경가능하기에 주고받는 것은 무조건 문자열이어야 한다. 그렇기에 응답도 json으로 변환시켜서 보내고 받을때도 json을 파싱해서 사용함

 

 

서버에서 요청데이터를 받아오는 4가지 방법

파라미터와 경로 변수처럼 url로 데이터를 받는 경우는 GET,DELETE 메소드가 주로 쓰이고, 이외는 body나 header로 받는다.

Body로 받기

기본적으로 사용하는 방법으로서, 요청바디에 데이터를 담아서 보내고 서버가 받아온다.

//postman 이용해서 json형식으로 보내기
{ 	
    "data" :{ 	    
        "id": 1, 			
        "content": "노드" 	
    } 
}

경로 변수로 받기 - Path Variable

//뒤에 /로 구분하고 변수명 적지말고 value값만 적어준다. 
//http://localhost:8000/userposting/1 

const userPosting = (req, res) => { 	
    const { userid } = req.params 
}  

//라우팅 파일에 위에 변수명으로 동일하게 :변수명으로 추가 
app.get("/userPosting/:userid", userPosting);

 

파라미터로 받기

  //뒤에 ?로 구분하고 아래 넣어줄 변수명으로 동일한 변수명으로 값을 넣어준다. 
 //http://localhost:8000/userposting?userid=1 

 //1 
 const userPosting = (req, res) => { 	
     const { userid } = req.query; 
 }  
 
 //2 
 const userPosting = ({query : { userid }}, res) => { 	
     //userid 변수로 바로사용 가능 
 }

 

header로 받기

//postman 이용해서 json형식으로 보내기
{ 	
    "data" :{ 	    
        "id": 1, 			
        "content": "노드" 	
    } 
}

 

 

'Monthly I Learned > 2022.08' 카테고리의 다른 글

8/15 - React 정의 및 설정  (0) 2022.08.16
8/16 - React 라우팅, Sass  (0) 2022.08.16
8/11 - CORS와 구조분해할당  (0) 2022.08.11
8/10 - http  (0) 2022.08.11
8/6 - API와 Node.js  (0) 2022.08.08

CORS - Cross-Origin Resource Sharing

  • 다른 도메인에서 날라온 요청을 받고 응답하며, 결과적으로 리소스를 공유하게 해주는 모듈
  • CORS헤더를 포함한 응답을 반환해야하만 본인 도메인이 아닌 다른 도메인에서 날라온 요청도 서버에서 처리하고 응답을 보낼수 있다.
npm install cors
const cors = require("cors"); app.use(cors());

 

CORS를 이용해서 프론트에서 데이터 받아오기

  • 프론트 해당 js에 아래추가
//백엔드에 요청 
fetch('api주소', {method: '보낼method종류'})  
//백엔드 응답을 받아옴 
.then(response=>response.json()) 
.then(result => //여기에 로직 작성)

구조분해할당

const foo = ["one", "two"]; 
//1. 배열  
//1-1 변수할당 
const [a, b] = [10, 20]; const [e, f] = foo;  

//1-2 변수 자리 바꿈 
[a, b] = [b, a];  

//1-3 가운데 인덱스 뺌, c=1,d=3만 들어감 
const [c, , d] = [1, 2, 3]  

//1-4 b는 배열로 받음 
var [a, ...b] = [1, 2, 3]; 
console.log(a); // 1
console.log(b); // [2, 3]   


//2. 객체 
//2-1 변수할당 
var o = {p: 42, q: true}; 
var {p, q} = o;  

//2-2 프로퍼티 변경 - p=42, q=bar 
var o = {p: 42}; 
var {p: foo, q: bar} = o;  

//2-3. req.body.data에서 id,name,email,password 키값의 value를 가져옴 
const { id, name, email, password } = req.body.data 

//2-4. 2-3에 push 사례, key값과 value의 변수명이 같을때 value는 생략가능 
users.push{ id, name, email, password }  

//2-5. userID를 뺀 나머지 프로퍼티 객체 형태로 출력 
const { userId, ...rest } = post(자바스크립트 객체) 
배열.push({         
...rest,       
});

 

'Monthly I Learned > 2022.08' 카테고리의 다른 글

8/16 - React 라우팅, Sass  (0) 2022.08.16
8/9 - 라우팅과 json형식, request 보내기  (0) 2022.08.11
8/10 - http  (0) 2022.08.11
8/6 - API와 Node.js  (0) 2022.08.08
8/5 - 상수, mock 데이터, fetch함수  (0) 2022.08.08

http 특징

  • 웹페이지사이의 정보전송 통신 규약
  • 요청/응답의 특성에 따라 api통신에 쓰이게 됨

 

  1. request / response
  • 양방향 통신이 아닌, 요청이 들어올때, 응답을 보낸다.
  • request에 담기는 것은 start line, headers, body
  • response에 담기는 것은 status line, headers, body
  • status line은 응답에 따른 상태메시지(성공이나 실패)도 세분화해서 보낸다.

 

  1. stateless
  • 상태가 없다는 의미로서, 이전의 요청/응답의 내용들은 다 저장하지 않는다.
  • 즉, 매 통신마다 관련된 모든 정보를 중복해서 보내야한다는 뜻이다.
  • 로그가 없기에 누가 보낸지 모르고, 그에 따른 인증,인가가 필요해진다.(쿠키,세션)

 

request method의 종류

//express 사용시 
app.메소드명("url", (req, res) => { 	
    //콜백함수 - 보낼 body   
    res.json({ message: "/ endpoint" }); 
});

 

  1. get
  • 클라이언트가 서버에게 데이터를 요청한 경우이다.
  • 서버는 그에 맞는 데이터를 응답 body에 붙여서 보내준다.

 

  1. post
  • 클라이언트가 서버에게 특정 데이터를 추가해줄것을 요청하는 것이다.
  • 서버는 데이터를 데이터베이스에 추가하고, 응답body에 응답메시지만 보내준다.

 

  1. put
  • 클라이언트가 서버에게 특정 데이터를 수정해줄것을 요청하는 것이다.
  • 요청 start line에는 특정 데이터의 고유값
  • 서버는 데이터를 데이터베이스에 수정하고, 응답body에 응답메시지만 보내준다.

 

  1. delete
  • 클라이언트가 서버에게 특정 데이터를 삭제해줄것을 요청하는 것이다.
  • 요청 start line에는 특정 데이터의 고유값
  • 서버는 데이터를 데이터베이스에 삭제하고, 응답body에 응답메시지만 보내준다.

 

  1. patch
  • put과 동일하나 다른점은 put은 리소스의 모든 것이 업데이트 되고 patch는 리소스의 일부가 업데이트된다.
  • 즉, 특정 리소스의 프로퍼티만 바꿀려고 하면 patch는 해당 프로퍼티만 업데이트 가능하나 put은 전부를 업데이트하기에, 다른 프로퍼티는 값은 안주었기에 전부 null로 업데이트된다.

method자체에 어떤 기능이 다르거나 그러진 않은 것같다. 즉 동일한 url로 다른 method를 각각 설정할때, 요청 method에 따라 유동적으로 그 method에 맞는 함수를 실행하는 것으로 보인다.

 

response status codes(오류코드)

//1 
res.status(오류코드); 
res.json({ message: "/ endpoint" });  

//2 
res.status(오류코드).json({ message: "/ endpoint" })
  1. 200
  • 요청 문제없이 처리됨
  • get

 

  1. 201
  • 요청 문제없이 처리되고 데이터베이스 반영됨
  • post,put,delete

 

  1. 400 ~
  • 클라이언트의 데이터 오류나 인증/인가 문제로 발생한 오류

 

  1. 500
  • 클라이언트 문제가 아닌 서버문제로 오류가 발생
  • 서버 문제관련 오류 status code는 많으나 보안문제로 서버가 클라이언트에 노출되만 안되니 대부분 오류는 다 500으로 보내는 경우가 많다.

API - application programming interface

  • 응용 프로그램들간의 매개체와 기능 제어 즉, 인터페이스다.
  • 웹에 있어서는 그 응용 프로그램들이 클라이언트와 데이터베이스 사이다
  • API 이외 인터페이스는 HUI, GUI, WUI
  • HUI는 하드웨어 즉 키보드, 마우스 등..., GUI는 우리가 화면에 보여지는 폴더모양, 마우스포인터 등...,
  • WUI는 웹 유저 인터페이스로서 유저와 웹브라우저간의 소통으로서 배너라던가 아이콘, 검색버튼등...

Node.js

  • 비동기 이벤트 기반 크롬 브라우저의 v8 자바스크립트 엔진을 탑재한 서버사이드 오픈소스 런타인 환경이다.
  • 웹개발에 있어서 클라이언트, 즉, 브라우저에서 돌아갈수 있는 것은 html,css, 자바스크립트뿐
  • 거기에서 자바스크립트를 브라우저 만이 아닌 백엔드 환경에서 관리할 수 있게끔 한것이 node.js
  • 또한 자바스크립트로 백엔드 환경을 관리하고 서버를 구축하기에, 자바스크립트 기반인 프론트엔드와 기술 스택 통합 가능
  • 네트워크 서버 구축에 특화되어 있다. MSA 구조에 특화
  • Apache(네트워크 서버 구축 서비스)에서는 만개 이상의 트래픽을 처리할 수 없지만 node는 그 이상 다 핸들링 가능

 

 
V8 javascript engine

구글에서 브라우저에서 자바스크립트가 동작하도록 만든 것

 
MSA - MicroServicesArchitecture

웹사이트에서의 다양한 기능들을 세분화해서 서버를 여러개 띄우는 것

 
NPM

node package manager에 줄임말로, 일종의 오픈소스 라이브러리다. 우리가 흔히하는 여러 내장함수들을 개발자들이 만들고 npm이 올려서 우리가 그 함수를 사용할수 있게되는것이다.

 
repl 명령어

node - 노드를 실행하여 바로 그 다음부터 자바스크립트 문법을 쓰고 실행이 가능

.exit - 노드를 종료

node js 파일명 - 현재 디렉토리에서 해당 js 파일 실행

 
npm명령어

npm install 모듈명 - 해당 모듈 설치, 예로 fetch는 npm install --save node-fetch@2

npm uninstall 모듈명 - 해당 모듈 삭제

npm uninstall --save 모듈명 - 해당 모듈 삭제하고 package.json에 반영

  • pacakage.json은 spring에서 환경변수 설정해줬듯이 해당 프로젝트의 npm 모듈들을 관리,즉 프로젝트마다 모듈이 따로 설치되는것
  • commonjs기반의 모듈과 es6기반의 모듈은 서로 공존하기 힘들다.따로 타입 설정안해주면 기본 타입은 es6기반이다. 별도 commonjs로 바꿀려면 type: commonjs로 해줘야한다.
  • httpie 모듈은 프로젝트가 아닌 시스템 자체에 설치http -v GetorPost방식 실행할 네트워크

Node에 http모듈로 서버 생성 - express(x)

//노드에 http 패키지를 받아온다. - require는 import랑 동일 
//import를 사용해도 require로 변형되서 실행됨 
const http = require("http"); 
const { sendPosts } = require("./sendPosts");  

//서버 만들기 
//req, res는 함수로서 request와 response, 요청과 응답 
const server = http.createServer((req, res) => {  

    //request에서 url과 method 정보 가져옴	
    const { url, method } = req;  

    //헤더 타입 설정 	res.setHeader("Content-Type", "application/json");  

    //end 안에 값이 실제로 클라이언트가 받는 응답 	
    if (url === "/") return res.end(JSON.stringify({ message: "/ endpoint" })); 	
    if (url === "/signup" && method === "POST") return res.end(JSON.stringify({ message: "회원가입 완료!" })); 	
    if (url === "/login" && method === "POST") return res.end(JSON.stringify({ message: "로그인 완료!" })); 	
    if (url === "/products" && method === "GET") return sendPosts(res);  //만든서버 호출 - 매개변수는 포트 번호와 실행할 함수 총 두개 	

    res.end(JSON.stringify({ message: "this response answers to every request" })); });  

server.listen(8000, () => { 	
	console.log("server is running on PORT 8000"); 
}); //ctrl + c하면 서버 꺼짐

express.js

  • 노드 백엔드 프레임워크
  • express없이 노드만으로 서버를 만들려면 순수 자바스크립트로 노드에 패키지만을 이용해서 직접 구현해야한다.
  • npm install express --save
  • 위에 express없이 만든 서버를 express로 만들었을때 아래와 같이

Node에 http모듈로 서버 생성 - express(o)

const http = require("http"); 
const express = require("express"); 
// 다른 js파일을 불러올때 활용, 즉 자바로 치면 클래스를 상속받는 개념 
const { sendPosts } = require("./sendPosts");  

const app = express();  
app.get("/", (req, res) => { 	
	res.json({ message: "/ endpoint" }); 
});  

app.post("/signup", handleSignUp); 
app.post("/login", handleLogin); 
app.get("/products", sendPosts);  

const server = http.createServer(app);  

server.listen(8000, () => { 	
	console.log("server is running on PORT 8000"); 
});  
function handleSignUp(req, res) { 	
	res.json({ message: "회원가입 완료!" }); 
}  
function handleLogin(req, res) { 	
	res.json({ message: "로그인 완료!" }); 
} 

// express객체 변수 생성 - get,post를 지정할때 바로 변수명이 붙임 - stringify과정이 필요없이 바로 핸들링됨 - 그리고 마지막에 express 객체 변수로 서버를 만듬
 
kill terminal 이후 new terminal로 첫 경로를 해당 프로젝트로 지정할 수 있다.
 
노드의 프론트엔드 프레임워크는 react, 백엔드 프레임워크는 express - 정확히는 react는 노드 기반이라기보다는 노드가 가지고 있는 npm을 활용하는 프레임워크다.

 

'Monthly I Learned > 2022.08' 카테고리의 다른 글

8/11 - CORS와 구조분해할당  (0) 2022.08.11
8/10 - http  (0) 2022.08.11
8/5 - 상수, mock 데이터, fetch함수  (0) 2022.08.08
8/4 코드 컨벤션과 preventDefault, classList 메소드  (0) 2022.08.08
8/3 리눅스 용어  (0) 2022.08.03

상수 데이터

  • 정적데이터
  • 예를 들어 사이트에 footer에 회사 소개같은 경우
  • 하드코딩의 단점을 상쇄시킴(가독성이 안좋다. 유지보수가 안좋다.)
  • 모두 대문자에 스네이크 표기법을 쓴다.
  • 내부가 객체로 구성된 배열이다.
1. 상수데이터 생성하고 
export const COMMENT_LIST = [   {     
    id: 1,     
    userName: 'wecode',     
    content: 'Welcome to world best coding bootcamp!',     
    isLiked: true   },   
{     
    id: 2,     
    userName: 'code kim',     
    content: 'Hi there.',     
    isLiked: false   },   
{     
    id: 3,     
    userName: 'hello lee',     
    content: 'Hey.',     
    isLiked: false   
} 
]; 
//실제로 다른 파일에서 다 사용할 수 있게끔 export export default COMMENT_LIST;
2. 실제 파일에서 
import <script type="module">      

//위에 만든 상수 데이터를 해당 파일에서 해당 변수로 가져오는 과정     
import COMMENT_LIST from './commentData.js'          
const comments = document.getElementById("comments");    

COMMENT_LIST.forEach((comment) => {       
    const li = document.createElement("li");      
    li.innerText = comment.content;       
    comments.append(li);     
});   
</script>

//컨벤션은 표기 규칙, 예를 들면 스네이크표기법이라던가
 

fetch 함수

  • fecth는 가져온다는 뜻, 즉 백엔드로 부터 데이터를 가져온다는 뜻
  • 자바스크립트(프론트)에서 서버(백)로 네크워크 요청과 응답을 주고 받을 수 있게 하는 메소드
  • api란 프론트엔드와 백엔드사이의 중간다리 역할을 하는 것, 프론트는 api에 요청해서 api는 백엔드에 요청해서 프론트에 응답을 가져와줌
  • .json()은 자바스크립트 객체로 .stringify()는 json객체로 변환시켜주는 메소드
  • json은 일종의 약속으로, 이 형식으로 우리는 데이터를 주고 받을 것이라는 것
ex) { 		
    "success": boolean, 		
    "user": { 		
        "name": string, 		
        "batch": number 	
    } 
}
//규칙은 무조건 name은 "" 
//객체 형태

mock 데이터

  • 가상의 데이터로서 api가 미완성 됬을때, 임이의 가상데이터로 test해보는 것
  • mock data는 json 객체 형태로 만들어준다.
  • 순서는 먼저 json파일에 mock data를 만들고 이후 실제 파일에서 fetch로 가져오는 것
 
- 상수데이터와 json개체는 형태가 비슷해보이지만 다르다. 상수데이터는 배열, json은 객체
 
- fecth함수는 api로 백엔드와 통신하기에 시간이 많이걸리고 비동기 방식이다. 즉, fetch로 응답을 받아오는데 걸리는 시간동안 아무것도 안하는것이 아니라 fetch함수 이외의 작업을 실행하다가 응답이 오면 fetch함수를 실행한다. 즉, fetch함수에서 처리하는 작업을 외부에서 받아오거나 엮일 경우 정상적으로 실행되지 않는다는 의미이다.
 
- getElementsByClassName은 querySelectorAll과 달리 순간의 값만 저장하는 것이 아니라 값을 참조하기 때문에 값이 이후에 변경되어도 변경된 값을 반환한다. 반대로 querySelectorAll은 순간의 값이기에 위에 fecth함수처럼 비동기처리되는 함수에 있어서 그 내부 실행값을 적용시키지 못한다.

 

'Monthly I Learned > 2022.08' 카테고리의 다른 글

8/11 - CORS와 구조분해할당  (0) 2022.08.11
8/10 - http  (0) 2022.08.11
8/6 - API와 Node.js  (0) 2022.08.08
8/4 코드 컨벤션과 preventDefault, classList 메소드  (0) 2022.08.08
8/3 리눅스 용어  (0) 2022.08.03

1. self 클로징 가능한 태그 self 클로징하기

  • <br>
  • <hr>
  • <img>
  • <meta>
  • <link>
  • <input>

2. css 내부 순서 지키기

  1. Layout Properties (position, float, clear, display)
  1. Box Model Properties (width, height, margin, padding)
  1. Visual Properties (color, background, border, box-shadow)
  1. Typography Properties (font-size, font-family, text-align, text-transform)
  1. Misc Properties (cursor, overflow, z-index)

3. 레이아웃은 bottom-up방식으로 구성

  • 자식요소에 따라 부모 높이나 넓이를 지정. 즉, 자식요소에만 높이나 넓이를 주고 부모가 맞춰감

4. 불필요한 style 속성 작성 지양

  • 예시로 위에 3번에 경우 자식요소에 높이를 줬는데 부모에 또주는것이다.

5. 들여쓰기 잘하기

  • 들여쓰기 주의하고, ‘css선택자: style’처럼 세미콜론하고 한칸 띄우기

6. img tag에 alt 속성 꼭 작성하기

<img alt="apple" src="./images/apple.jpg"/>

alt는 시각장애인들을 위한 요소이며, 이미지에 대한 설명도 될수 있기에 작성한다.

* preventDefault

document.querySelector("#id-checkbox").addEventListener("click", function(event) {   
	document.getElementById("output-box").innerHTML += "죄송합니다! <code>preventDefault()</code> 때문에 체크할 수 없어요!<br>";          
	event.preventDefault(); 
}, false);
  • addEventListener등에서 이벤트가 발생할 경우, 해당이벤트에 발생을 막는다.
  • 예를 들어 체크박스에 클릭이벤트에서 클릭할때 체크박스가 채워지는 것을 막고 input keypress이벤트에서 키를 누를때 input칸이 채워지는 것을 막는다.

** classList

title.classList.add(CLICKED_CLASS);

클래스 요소들을 .className을 해서 관리하는 것보다 효율적으로 내장 메소드를 통해 관리해준다.

 

내장 메소드

add(String)

  • 지정한 클래스 값을 추가한다.
  • 만약 추가하려는 클래스가 이미 존재한다면 무시.

remove(String)

  • 지정한 클래스 값을 제거한다.
  • 존재하지 않는 클래스라면? 에러 발생 X

contains(String)

  • 지정한 클래스 값이 존재하는지 확인.
  • true, false 값을 반환.

replace(old, new)

  • old class를 new class로 대체

item(Number)

  • 인덱스 값을 활용하여 클래스 값을 반환

toggle

  • toggle은 클래스의 유무를 체크해서 없으면 add, 있으면 remove를 자동으로 시켜준다.
function handleClick(){     
	title.classList.toggle(CLICKED_CLASS); 
}

 

 

'Monthly I Learned > 2022.08' 카테고리의 다른 글

8/11 - CORS와 구조분해할당  (0) 2022.08.11
8/10 - http  (0) 2022.08.11
8/6 - API와 Node.js  (0) 2022.08.08
8/5 - 상수, mock 데이터, fetch함수  (0) 2022.08.08
8/3 리눅스 용어  (0) 2022.08.03

+ Recent posts