TIL 19 (고차컴포넌트, content-type,express.js) (2021.10.25)

고차 컴포넌트 출처

고차 컴포넌트(HOC, Higher Order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다.

구체적으로, 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

컴포넌트는 props를 UI로 변환하는 반면에, 고차 컴포넌트는 컴포넌트를 새로운 컴포넌트로 변환합니다.

고차 컴포넌트(HOC)는 Redux의 connect와 Relay의 createFragmentContainer와 같은 서드 파티 React 라이브러리에서 흔하게 볼 수 있습니다.

 

=> 보일러 플레이트에서 해당 페이지에 방문할 수 있는 자격이 있는 여부를 확인하기 위해서 Auth 페이지를 higherOrderComponent로 해주고 로그인, 회원가입, 기본화면을 감싸주어서 자격이 없으면 해당 페이지에 방문이 안 되도록 설정해보았습니다.

---

 

클라이언트에서 서버로 전송하려고 할 때(ex POST) request message 안의 content-type은 application/x-www-form-urlendcoded와 application/json가 될 수 있습니다.

 

application/x-www-form-urlendcoded의 경우에는 웹 페이지를 개발할 때, 자바스크립트(제이쿼리)를 사용해서 Ajax로 서버에 데이터를 요청하는 경우(혹은 HTML Form을 사용해서 요청)입니다. content-type을 따로 기입하지 않을 경우에는 default값인 application/x-www-form-urlendcoded로 세팅이 됩니다. 이렇게 전송이 되면 데이터의 payload값은 "key=value&key2=value2" 형태를 띕니다.

 

application/json의 경우에는 보통 안드로이드나 ios앱을 위한 REST API를 개발할 때 입니다. 이렇게 전송이 되면 payload 값은 JSON 객체가 됩니다.

 

출처

---

오늘 express 공식 문서를 통해서 express에 대해서 학습해봤습니다.

const express = require('express')
const cors = require('cors') // cors 미들워어를 이용한다.
const app = express()
const port = 5000;

// req.body를 보려면 express.text나 json을 이용하면 body를 볼 수 있다.
// req.body 는 parse하기 전에 default는 undefined 이다.
// app.use(express.text()) 
// request payload를 문자로 파싱해준다.
// This is a built-in middleware function in Express. It parses incoming request payloads into a string and is based on body-parser.
// Returns middleware that parses all bodies as a string and only looks at requests where the Content-Type 
// header matches the type option. This parser accepts any Unicode encoding of the body and supports automatic 
// inflation of gzip and deflate encodings.


app.use(express.json({strict:false}))
// request를 JSON payload로 파싱해준다.
// This is a built-in middleware function in Express. It parses incoming requests with JSON payloads and is based on body-parser.
// Returns middleware that only parses JSON and only looks at requests where the Content-Type header 
// matches the type option. This parser accepts any Unicode encoding of the body and supports automatic 
// inflation of gzip and deflate encodings.
// strict =>	Enables or disables only accepting arrays and objects; when disabled will accept anything JSON.parse accepts.


app.use(cors()) // cors 미들웨어를 모든 메소드에 적용시킨다.
// Configuring CORS => CORS 조정 방법
// 1. app.use(cors({
	origin : 'http://example.com'
    }))
// 2. var corsOptions = {  
//   origin: 'http://example.com',
//   optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
// }
// 특정 메소드에 대해서만 cors를 적용할 경우, app.get(url, cors() ~~ 이런 식으로도 가능하며,
// 아래는 cors를 조정한 뒤 조정 부분을 특정 메소드에만 적용할 경우 작성 방법.
// app.get('/products/:id', cors(corsOptions), function (req, res, next) {
//   res.json({msg: 'This is CORS-enabled for only example.com.'})
// })

app.post('/lower', (req, res) => {
// res.setHeader('Content-Type','application/json') => 이렇게 입력을 하면 res의 헤더를 변경할 수 있다.
  res.json(req.body.toLowerCase())

})
app.post('/upper', (req, res) => {
  res.json(req.body.toUpperCase())
})

app.use('/', router)

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})
const defaultCorsHeader = {
  'Access-Control-Allow-Origin': '*', // CORS를 허용해주는 ORIGIN에 대해서 나타낸다. * => 모든 ORIGIN
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', // 허용해주는 메소드
  'Access-Control-Allow-Headers': 'Content-Type, Accept', // 허용해주는 헤더
  // Accept 요청 HTTP 헤더는 MIME 타입으로 표현되는, 클라이언트가 이해 가능한 컨텐츠 타입이 무엇인지를 알려줍니다. 
  // Content-Type 개체 헤더는 리소스의 media type을 나타내기 위해 사용됩니다.
  'Access-Control-Max-Age': 10 // 허용해주는 시간 => 길면 PreFLight 보내는 횟수가 줄어들 수 있다. 
};

금요일에 구축했던 서버를 express형식으로 변환을 해봤습니다. 현재는 express 공식문서를 통해서 구현하는 것에 대해서만 학습을 했는데, 추후에 학습했던 내용이 익숙해지면, 미들웨어나 라우팅을 적용한 코드를 통해서 리뷰해보겠습니다.

---

-2021.10.25 오늘의 코플릿-
정수를 요소로 갖는 배열을 입력받아 오름차순으로 정렬하여 리턴해야 합니다.
삽입 정렬을 구현해야 합니다.
arr.sort 사용은 금지됩니다.
입력으로 주어진 배열은 중첩되지 않은 1차원 배열입니다.

삽입 정렬(揷入整列, insertion sort)은 자료 배열의 모든 요소를 앞에서부터 차례대로

이미 정렬된 배열 부분과 비교하여, 자신의 위치를 찾아 삽입함으로써 정렬을 완성하는 알고리즘이다.

// 이중반복문을 돌린다.
// 첫번째는 1번째 요소부터 순회를 한다.
// 0번째 요소랑 비교했을 때, 작다면 앞으로 간다.
// 만약에 크다면, 해당 숫자까지만 for문을 돌린다. => 자신보다 큰 수가 나오면 그 앞으로 간다.

첫 수도코드 => 첫 번째 요소를 제외하고 순회를 하면서 요소를 바꿔주려고 하니 원하는 대로 출력이 되질 않았습니다. 맨 첫 요소랑 비교해서 작으면 정렬은 가능한데, 첫 요소보다는 크고, 앞 번에 정렬된 요소보다 작으면 정렬이 쉽지 않았습니다. 한 시간동안 고민해본 후, 레프런스를 통해서 답을 확인하고 해당 방법에 대해서 학습해보았습니다.

  const insertionSort = function (arr) {
  let sorted = [arr[0]];
  for (let i = 1; i < arr.length; i++) {
    if (arr[i] >= sorted[i - 1]) {
      sorted.push(arr[i]); // arr[i] 요소가 soted의 마지막 요소랑 비교를 한다. arr[i]가 더 크면 뒤에 넣고,
    } else { // 더 작다면,
      for (let j = 0; j < i; j++) {
        if (arr[i] <= sorted[j]) { // arr[i]보다 더 큰 요소를 찾는다.
          const left = sorted.slice(0, j); // 더 큰 요소의 앞 부분을 자르고,
          const right = sorted.slice(j); // 더 큰 요소의 뒷 부분도 잘라서
          sorted = left.concat(arr[i], right); // sorted 자체를 새로 정의한다.
          break; // j 반복문은 끝 마친다.
        }
      }
    }
  }

  return sorted;
};

=> 레프런스를 통해서 학습을 하니, 삽입정렬에 대해서 이해를 할 수 있었습니다. 아직 정확하게 구현하지는 못하겠지만, 주말을 통해서 복습한 다음, 꼭 혼자서도 구현할 수 있도록 노력하겠습니다.

27일 수요일 저녁에 다른 스터디원의 코드를 보았습니다. 해당 코드가 더 간결하고 직관성이 있는 거 같아 해당 코드도 리뷰하고 학습하도록 하겠습니다. 최대한 다른 코드들을 안 보고 구현하려고 노력을 하는데, 도저히 안되겠다 싶을 때, 다른 분들의 코드를 활용하고 이후에 레프런스랑 비교를 해서 best practice를 위해 노력해야겠습니다.

const insertionSort = function (arr, callback = (item) => item) {
  for ( let n = 1; n < arr.length; n++ ) {
    let temp = arr[n]; // 배열의 1번째 인덱스를 기준으로

    for (let i = n - 1; i >= 0; i-- ) {
      if ( callback(temp) < callback(arr[i]) ) {
        arr[i + 1] = arr[i]; // temp 앞에 있는 요소들을 비교하면서, 해당 요소가 더 크다면
        arr[i] = temp; // 자리를 바꿔준다
      }
    }
  }
  return arr;
}

---

오늘 첫 스터디를 통해서 학습한 내용입니다. 매주 월 수 금 진행하는데, 새롭게 학습하는 내용이 있으면 블로깅하도록 하겠습니다.

 

Set 출처

Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다.

let arr = [1, 1, 1, 1, 2, 2, 3, 4]

let newSet = new Set(arr)

newSet
Set(4) {1, 2, 3, 4}

 

구문

new Set([iterable]);

매개변수

iterable반복 가능한 객체가 전달된 경우, 그 요소는 모두 새로운 Set에 추가됩니다. 만약 매개변수를 명시하지 않거나 null을 전달하면, 새로운 Set은 비어 있는 상태가 됩니다.

반환 값

새로운 Set 객체.

설명

Set 객체는 값 콜렉션으로, 삽입 순서대로 요소를 순회할 수 있습니다. 하나의 Set 내 값은 한 번만 나타날 수 있습니다. 즉, 어떤 값은 그 Set 콜렉션 내에서 유일합니다. => set 내부의 모든 요소들은 유일한 요소들이다.

---

Set.prototype.has() 출처

has() 메서드는 Set 객체에 주어진 요소가 존재하는지 여부를 판별해 반환합니다.

구문

mySet.has(value);

매개변수

valueSet 객체에서 존재 여부를 판별할 값.

반환 값

Set 객체에 값이 존재하면 true, 아니면 false.

---

Set.prototype.add()

add() 메서드는 Set 개체의 맨 뒤에 주어진 value의 새 요소를 추가합니다.

구문

mySet.add(value);

매개변수

valueSet 객체에 추가할 요소의 값.

반환 값

Set 객체.

---

Set.prototype.clear()

clear() 메서드는 Set 객체를 비웁니다.

구문

mySet.clear();

---

Set.prototype.delete()

delete() 메서드는 지정한 요소를 Set 객체에서 제거합니다.

구문

mySet.delete(value);

매개변수

valueSet 객체에서 제거할 요소의 값.

반환 값

요소를 제거했으면 true, 아니면 false.

---

Set.prototype.forEach()

forEach() 메서드는 주어진 함수를 Set 요소 각각에 대해 삽입 순서대로 실행합니다.

구문

mySet.forEach(callback[, thisArg])

매개변수

callback각 요소에 대해 실행할 함수. 다음 세 가지 인수를 받습니다.currentValue, currentKey처리할 현재 요소. Set은 키를 갖지 않으므로 두 인수 모두에 값을 전달합니다.setforEach()를 호출한 Set.thisArgcallback을 실행할 때 this로 사용할 값.

반환 값

undefined