AJAX
→ Javascript를 사용하여 비동기적으로 서버와 브라우저가 데이터를 주고받는 통신 방식
서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있도록 하는 것이 Ajax의 장점
→ 페이지 전체를 로드하여 렌더링할 필요가 없고 갱신이 필요한 일부만 로드하여 갱신하면 되므로 빠른 퍼포먼스와 부드러운 화면 표시 효과를 기대할 수 있다.
기본적인 동작은 XMLHttpRequest 객체를 사용하여 생성자 함수를 만드는 것으로 시작.
Request
Request 에 관한 부분은 XMLHttpRequest의 생성자 함수를 xhr 변수로 받았을 경우,
xhr.open 메서드를 통해 HTTP method를 정해주고 어느 주소에 요청을 보낼 것인지 선언 하는것으로 시작한다.
이후
- GET 메소드의 경우, URL의 일부분인 쿼리문자열(query string)로 데이터를 서버로 전송한다.
- POST 메소드의 경우, 데이터(페이로드)를 Request Body에 담아 전송한다.
두가지 원칙에 따라 Request 요청이 가능하며, 요청의 경우 send 메서드에 request body로 같이 넣어줄 인자를 넣어주는걸로 요청이 가능하다.
Response
response의 경우, xhr의 onreadystatechange 라는 subscribe method 를 사용한다.
이 메서드는 xhr의 readyState 메서드를 통해 현재 응답 상태를 체크할 수 있고,
XMLHttpRequest 측 관점에서 응답 상태의 5단계를 나누어 이와 비교하는 것으로 응답 상태를 확인할 수 있다.
responseText 라는 xhr의 메서드로 응답 성공시의 값을 보내주는데, 이 값은 text값이다.
responseText로 HTML값이 들어오는 경우에는 단순히 document.getElementById를 통해 해당 tag에 값을 넣어주면 된다. 하지만 JSON값을 Load 하는 경우에는 해당 값이 현재 브라우저에서 읽을 수 없는 형태이기 때문에 브라우저가 읽을수 있는 형태로 바꾸는 parsing 과정을 거쳐야 한다.
JSON
클라이언트와 서버 간 데이터 교환을 위한 규칙 즉 데이터 포맷
JSON은 순수한 텍스트로 구성된 규칙이 있는 데이터 구조이다.
자바스크립트의 객체 리터럴과 매우 흡사
⇒ 하지만 키와 값 모두 "" 로 감싸져있는 형태
XML 보다 가볍고 사용하기 편함.
(XML은 HTML처럼 태그를 이용해 정보를 전달하는 방식의 포맷)
서버가 브라우저의 요청에 대해 응답을 반환하면 같은 XMLHttpRequest 객체가 그 결과를 처리
JSON 데이터를 객체로 변화시키는 과정을 역직렬화(Deserializing)라고 한다.
React hooks - Redux - Typescript
- Action 상수 선언
→ const INCREASE = 'counter/INCREASE' as const
위 내용처럼 해당 액션상수 뒤에 as const 를 넣어주면 그 값 그대로를 type으로 인식
- 액션 함수 선언
→ export const increase = () ⇒ ({ type: INCREASE })
보통 방식과 동일하게 작성하면 return 값으로 type에 관한 객체가 return 된다.
-
액션 객체 type 준비
type CounterAction =
| ReturnType
| ReturnType
| ReturnType;
→ typescript의 내장 유틸함수 ReturnType을 사용하면 해당의 return type으로 정해진다.
export const listActions = {
// createAction<Payload 타입, ...액션 생성함수의 파라미터들>
setInput: createAction<string, string>(SET_INPUT, text => text),
insert: createAction<Info, string>(INSERT, text => {
const info: Info = {
id,
text,
};
id += 1;
return info;
}),
};→ redux-actions의 createAction을 사용하면 따로 payload에 대한 로직을 지정해주지 않아도 자동으로 인자가 payload에 들어가는데 위의 예제에서는 인자로 들어올 text값을 받아서 그 값을 가공하여 return , 즉 가공한 값을 payload로 보내주어 reducer에서 보다 편하게 사용 가능?
→ 기존의 props를 기반으로 한 containers / components 구조에 대해 hooks 를 활용하면 전환이 가능하다.
How ?
→ components 에서 props로 받는 값들을 useSelector, useDispatch
출처 : https://velog.io/@velopert/use-typescript-and-redux-like-a-pro
import { combineReducers } from 'redux';
import counter from './counter';
const rootReducer = combineReducers({
counter
});
export default rootReducer;
export type RootState = ReturnType<typeof rootReducer>;루트 리듀서를 만들 때에는 일반 JavaScript 환경에서 할 때랑 방법이 동일한데, 주의하셔야 되는 부분은 RootState 라는 타입을 만들어서 내보내주어야 한다는 것 입니다. 이 타입은 추후 우리가 컨테이너 컴포넌트를 만들게 될 때 스토어에서 관리하고 있는 상태를 조회하기 위해서 useSelector를 사용 할 때 필요로 합니다.
자, 이제 루트 리듀서를 만들었으니 index.tsx 파일에서 스토어를 생성하고 Provider 컴포넌트를 사용하여 리액트 프로젝트에 리덕스를 적용해보세요.
hooks 의 사용이 더 확대되는 패러다임에 맞춰, 기존의 component - container 로 나누던 구조를 허물고
해당 파일의 hooks module을 만들어 component에 직접 넣어주는 방식을 자주 사용한다.
내가보는 modern css
styled-components 를 넘어 emotion 를 통해 디자이너? 들과의 협업을 위해서 기존에 styled-components의 component와 container 구조에서 component에 style의 classname을 만들어주고 그 classname을 보다 더 직관(?) 적으로 만들어 사용함에 따라 장점은 있었지만, 그 코드가 실제 tag로 나타날 때에는 hash값으로 classname이 적용 된다는 점에서 협업에서의 애로사항이 존재했다.
그래서 style 파일을 만들고 직관적인 값에 대한 classname을 style 파일에 모두 선언해주고, 그 값에 맞추어 page에 css 파일을 맞춰주는 것과 비슷하게 세팅하는 방식으로 실제 사용 page에서 해당 matching style file을 import 하여 그 안에 존재하는 값들을 component의 page file에 view를 위한 react function component를 선언해주면서 return값에 태그들이 들어갈 때, style file에서 가져온 값을 css attribute로 넣어주는 방법을 사용하는듯 하다.
앞으로는 emotion을 공부하고 function component 구조에 맞추어 다른 구조로 project를 구성해봐야겠다.
+) 개념공부의 대부분은 poiemaweb을 참조했습니다.
