- 리덕스 미들웨어 청크란

해당 미들웨어는 객체 대신 함수를 생성하는 액션 생성함수를 작성할수 있도록 도와줍니다.

리덕스에서는 기본적으로 액션 자체를 디스패치합니다.

일반 액션생성자는 파라미터를 가지고 액션 객체를 생성하는 작업만 합니다.

만약 특정 액션이 몇초뒤에 실행하게 하거나, 현재 상태에 따라 무시되게 하려면 일반 액션생성자로는 할 수 없습니다.

redux-thunk 는 이를 가능하게 합니다.

이러한 동작방식을 활용하여 Redux에서 비동기적인 프로그래밍을 구현할 수 있습니다

- 비동기와 프로미스 차이

비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 
하지만 콜백 패턴은 가독성이 나쁘고, 비동기 처리 중 발생한 에러의 예외처리가 곤란하며, 
여러개의 비동기 처리 로직을 한꺼번에 처리하는 것도 한계가 있다. 
그래서 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입하였다. 
프로미스는 비동기적으로 요청한 결과(성공/실패)를 나타내는 객체로서, 
콜백 패턴이 가진 단점을 보완하며, 비동기 처리 시점을 명확하게 표현한다.

- tmz

TDZ는 스코프의 시작 지점부터 초기화 시작 지점까지의 사각지대 구간을 뜻한다.
비유하자면 선언 단계와 초기화 단계 사이에 잠시 머물러 있는 것이라고 할 수 있다.
let과 const는 var와는 다르게 선언단계와 초기화 단계가 따로 분리되어 실행된다. 
그래서 선언 단계와 초기화 단계 사이에서는 실행 컨텍스트에는 변수를 등록했지만 
메모리가 할당되지 않은 상태라 `ReferenceError` 가 나오는 것이다. 
이런 사각지대를 TDZ(Temporal Dead Zone) 라고 하는 것이다.


- rest API 의 정의와 특징
정의=rest 기반으로 서비스 api를 구현
특징=사내 시스템들도 REST 기반으로 시스템을 분산해 확장성과 재사용성을 높여 유지보수 및 운용을 편리하게 할 수 있다.
REST는 HTTP 표준을 기반으로 구현하므로, HTTP를 지원하는 프로그램 언어로 클라이언트, 서버를 구현할 수 있다.
즉, REST API를 제작하면 델파이 클라이언트 뿐 아니라, 자바, C#, 웹 등을 이용해 클라이언트를 제작할 수 있다.

- rest api에서 rest의 구성요소와 그에 따른 특징과 설명
자원 : URL
1. 모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재한다.
2. 자원을 구별하는 ID는 ‘/groups/:group_id’와 같은 HTTP URL이다.
3. Client는 URL를 이용해서 자원을 지정하고 해당 자원의 상태(정보)에 대한 조작을 Server에 요청한다.

행위 : http methid
1. HTTP 프로토콜의 Method를 사용한다.
2. HTTP 프로토콜은 GET, POST, PUT, DELETE와 같은 메서드를 제공한다.

표현: represrntation of resource

1. Client가 자원의 상태(정보)에 대한 조작을 요청하면 Server는 이에 적절한 응답(Representation)을 보낸다.
2. REST에서 하나의 자원은 JSON, XML, TEXT, RSS 등 여러 형태의 Representation으로 나타내어 질 수 있다.
3. JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적이다.


- 파싱이란?
다른 형식으로 저장된 데이터를 원하는 형식의 데이터로 변환하는 것을 말한다.
1. XML, JSON : 데이터를 표현하는 문자열
2.  JSON 파싱 : JSON 형식의 문자열을 객체로 변환하는 것

'이노베이션 > WIL' 카테고리의 다른 글

2022.08.21  (0) 2022.08.21
22.08.14  (0) 2022.08.14
8월 첫째주  (0) 2022.08.07

'vsCode' 카테고리의 다른 글

vs코드 단축키  (0) 2022.08.14
  1. https://www.youtube.com/watch?v=00yJy7W0DQE&list=PLfLgtT94nNq0qTRunX9OEmUzQv4lI4pnP
  2. https://www.youtube.com/watch?v=AoMv0SIjZL8&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7
  3. https://www.youtube.com/c/%EB%B3%84%EC%BD%94%EB%94%A9/videos
  4. 노마드코더

https://www.grownbetter.com/article/56

 

당신은 어떤 전문성을 가진 PM인가요?

PM

www.grownbetter.com

 

 

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

 

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.

'용어' 카테고리의 다른 글

http 프로토콜  (1) 2022.08.26
애자일 칸반 스크럼  (0) 2022.08.25
UIUX  (0) 2022.08.25
트러블 슈팅  (0) 2022.08.25

HTTP 프로토콜이란?

HTTP(Hypertext Transfer Protocol)는 웹을 개발하는 사람이라면 누구나 다 알아야 하는 통신 프로토콜입니다. 프로토콜이란 상호 간에 정의한 규칙을 의미하며 특정 기기 간에 데이터를 주고받기 위해 정의되었습니다. 통신 프로토콜을 쉽게 풀어보면 “나는 이렇게 줄 테니 넌 이렇게 받고 난 너가 준거 그렇게 받을께” 정도가 되겠네요 :)

웹에서는 브라우저와 서버 간에 데이터를 주고받기 위한 방식으로 HTTP 프로토콜을 사용하고 있으며 따라서 프런트엔드 개발자라면 필수적으로 알아야 하는 지식이 되었습니다.

HTTP 프로토콜 특징

HTTP 프로토콜은 상태가 없는(stateless) 프로토콜입니다. 여기서 상태가 없다라는 말은 데이터를 주고 받기 위한 각각의 데이터 요청이 서로 독립적으로 관리가 된다는 말입니다. 좀 더 쉽게 말해서 이전 데이터 요청과 다음 데이터 요청이 서로 관련이 없다는 말이죠.

이러한 특징 덕택에 서버는 세션과 같은 별도의 추가 정보를 관리하지 않아도 되고, 다수의 요청 처리 및 서버의 부하를 줄일 수 있는 성능 상의 이점이 생깁니다.

HTTP 프로토콜은 일반적으로 TCP/IP 통신 위에서 동작하며 기본 포트는 80번입니다.

HTTP Request & HTTP Response

HTTP 프로토콜로 데이터를 주고받기 위해서는 아래와 같이 요청(Request)을 보내고 응답(Response)을 받아야 합니다.

그리고 요청과 응답을 이해하기 위해서는 먼저 클라이언트(Client)와 서버(Server)를 이해해야 합니다.

클라이언트란 요청을 보내는 쪽을 의미하며 일반적으로 웹 관점에서는 브라우저를 의미합니다. 서버란 요청을 받는 쪽을 의미하며 일반적으로 데이터를 보내주는 원격지의 컴퓨터를 의미합니다.

URL

URL(Uniform Resource Locators)은 개발자가 아니더라도 이미 우리에게 익숙한 용어입니다. 서버에 자원을 요청하기 위해 입력하는 영문 주소죠. 아무래도 숫자로 되어 있는 IP 주소보다는 훨씬 기억하기 쉽기 때문에 사용하는 것 같습니다.

URL 구조는 아래와 같습니다.

HTTP 요청 메서드

앞에서 살펴본 URL을 이용하면 서버에 특정 데이터를 요청할 수 있습니다. 여기서 요청하는 데이터에 특정 동작을 수행하고 싶으면 어떻게 해야 할까요? 바로 HTTP 요청 메서드(Http Request Methods)를 이용합니다.

일반적으로 HTTP 요청 메서드는 HTTP Verbs라고도 불리우며 아래와 같이 주요 메서드를 갖고 있습니다.

  • GET : 존재하는 자원에 대한 요청
  • POST : 새로운 자원을 생성
  • PUT : 존재하는 자원에 대한 변경
  • DELETE : 존재하는 자원에 대한 삭제

이와 같이 데이터에 대한 조회, 생성, 변경, 삭제 동작을 HTTP 요청 메서드로 정의할 수 있습니다. 참고로 때에 따라서는 POST 메서드로 PUT, DELETE의 동작도 수행할 수 있습니다.

기타 요청 메서드는 다음과 같습니다.

  • HEAD : 서버 헤더 정보를 획득. GET과 비슷하나 Response Body를 반환하지 않음
  • OPTIONS : 서버 옵션들을 확인하기 위한 요청. CORS에서 사용

HTTP 상태 코드

앞에서 살펴본 URL과 요청 메서드가 클라이언트에서 설정해야 할 정보라면 HTTP 상태 코드(HTTP Status Code)는 서버에서 설정해주는 응답(Response) 정보입니다.

프런트엔드 개발자 입장에서는 더욱이 중요한 이유가 이 상태 코드로 에러 처리를 할 수 있기 때문입니다. 간단한 예시를 들어 아래와 같이 사용자 목록을 받아오는 GET 메서드 요청을 날려보겠습니다.

http://domain.com/users
Bash

위 요청을 보내고 나면 서버에서 응답으로 오는 상태 코드가 크게 2개로 나뉩니다. 200(성공)과 404(실패)입니다. 따라서, 이 HTTP 상태 코드로 추가적인 로직을 구현할 수 있죠.

주요 상태 코드는 200번대부터 500번대까지 다양하게 있지만 주요한 상태 코드만 몇 개 살펴보겠습니다.

2xx - 성공

200번대의 상태 코드는 대부분 성공을 의미합니다.

  • 200 : GET 요청에 대한 성공
  • 204 : No Content. 성공했으나 응답 본문에 데이터가 없음
  • 205 : Reset Content. 성공했으나 클라이언트의 화면을 새로 고침하도록 권고
  • 206 : Partial Conent. 성공했으나 일부 범위의 데이터만 반환

3xx - 리다이렉션

300번대의 상태 코드는 대부분 클라이언트가 이전 주소로 데이터를 요청하여 서버에서 새 URL로 리다이렉트를 유도하는 경우입니다.

  • 301 : Moved Permanently, 요청한 자원이 새 URL에 존재
  • 303 : See Other, 요청한 자원이 임시 주소에 존재
  • 304 : Not Modified, 요청한 자원이 변경되지 않았으므로 클라이언트에서 캐싱된 자원을 사용하도록 권고. ETag와 같은 정보를 활용하여 변경 여부를 확인

4xx - 클라이언트 에러

400번대 상태 코드는 대부분 클라이언트의 코드가 잘못된 경우입니다. 유효하지 않은 자원을 요청했거나 요청이나 권한이 잘못된 경우 발생합니다. 가장 익숙한 상태 코드는 404 코드입니다. 요청한 자원이 서버에 없다는 의미죠.

  • 400 : Bad Request, 잘못된 요청
  • 401 : Unauthorized, 권한 없이 요청. Authorization 헤더가 잘못된 경우
  • 403 : Forbidden, 서버에서 해당 자원에 대해 접근 금지
  • 405 : Method Not Allowed, 허용되지 않은 요청 메서드
  • 409 : Conflict, 최신 자원이 아닌데 업데이트하는 경우. ex) 파일 업로드 시 버전 충돌

5xx - 서버 에러

500번대 상태 코드는 서버 쪽에서 오류가 난 경우입니다.

  • 501 : Not Implemented, 요청한 동작에 대해 서버가 수행할 수 없는 경우
  • 503 : Service Unavailable, 서버가 과부하 또는 유지 보수로 내려간 경우

다시 살펴보는 HTTP 요청과 응답

앞에서 배운 URL, 요청 메서드, 상태 코드를 조합하면 아래와 같은 구조가 나옵니다.

이제 이 그림의 용어들이 어느 정도 눈에 들어오시나요? :)

마무리

오늘 다룬 HTTP 프로토콜은 용어에 대한 간단한 정의부터 프런트엔드 개발할 때 알고 있으면 좋은 특징까지 알아보았습니다. 다음 편은 좀 더 깊게 들어가서 HTTP 메시지 포맷과 캐싱, 보안 인증까지 알아보겠습니다. 그럼 그 때까지 재밌게 웹 개발하세요!

 

https://joshua1988.github.io/web-development/http-part1/

'용어' 카테고리의 다른 글

비동기처리  (0) 2022.08.26
애자일 칸반 스크럼  (0) 2022.08.25
UIUX  (0) 2022.08.25
트러블 슈팅  (0) 2022.08.25

애자일이란

애자일은 소프트웨어 엔지니어링 다른 말로 소프트웨어 공학이라 불리는 학문의 일부분으로 소프트웨어(프로젝트)의 개발, 운영, 유지보수 등의 생명 주기 동안 효율적으로 업무를 하는 방식(방법론)입니다.

 

스크럼은 시간을 제한

칸반은 이슈를 제어 한다

 

우리는 스크럼에 가까움

 

주로, 프로젝트 같은 종료 일이 정해져야 하는 업무가 많이 발생하는 경우는 스크럼, 지속적인 업무를 다루며 프로젝트 개발 및 ops까지 함께 다뤄야 하는 상대적으로 작은 단위의 팀에서는 칸반을 사용하는 것이 효율적 입니다.

 

https://kood-dev.tistory.com/2

'용어' 카테고리의 다른 글

비동기처리  (0) 2022.08.26
http 프로토콜  (1) 2022.08.26
UIUX  (0) 2022.08.25
트러블 슈팅  (0) 2022.08.25

UI와UX의 차이점

 

● UI ( user interface)

UI란

어떠한 제품이나 소프트웨어를 사용하게되는 사용자가 그에 해당하는 제품과 서비스를 이용할 시 처음 접하게 되는 매개물이다.


유저가 사용하고자 하는 소프트웨어나 서비스를 편리하게 이용할 수 있드록 디자인 된 것이다.
흔히들 말하는 UI 디자인 이라는 것이 아이콘에 대한 디자인이나 색감, 그리고 표현과 글씨 폰트로 보여지는 시각 디자인을 말하는 것

 

● UX(user experience)

UX란

유저의 경험을 의미, 유저가 스마트한 서비스나 제품을 직접 사용하여 느끼는 것을 말한다.
그렇기에 UX 디자인은 이용을하는 이용자가 편리하고 만족을 할 수 있게끔 UI를 DESIGN하는 것이라 볼 수 있다.

 

● UI와 UX의 차이점

UI는 앞서 언급한 것처럼, 시각적으로 보여지는 디자인에 의의를 둔다.
예를 들어 어떤 컨셉의 아이콘, 배너, 폰트 등등의 시각적 디자인이라고 보면 되고, UX는 좀 더 포괄적이다.
UI 디자인을 이용하여 이용자가 어떤식으로 사용할 때에 편리할지를 계산하여 위치나 구도를 잡고 표현방식을 정하는 것이라 볼 수 있다.
사용자 혹은 이용자가 편리한 경험을 해주게끔 도와주는 디자인을 UX디자인이라 할 수 있다

 

 

https://graphicdesignroom.tistory.com/1

'용어' 카테고리의 다른 글

비동기처리  (0) 2022.08.26
http 프로토콜  (1) 2022.08.26
애자일 칸반 스크럼  (0) 2022.08.25
트러블 슈팅  (0) 2022.08.25

+ Recent posts