2020년 01월 08일
특정 모듈의 Typescript Props 정리
HTML
Event
키보드 관련 이벤트 ( keyup )
document.addEventListener("keyup", (event: KeyboardEvent) => {
console.log(event.keyCode);
});
React
React.cloneElement
type ReactText = string | number;
type ReactChild = ReactElement<any> | ReactText;
return React.cloneElement(child as React.ReactElement<any>, {
width: this.props.width,
height: this.props.height,
});
react-router-dom
history
import { RouteComponentProps } from 'react-router-dom';
interface Props extends RouteComponentProps<any> {}
const Component : React.FC<Props> = ({ history }) => ();
-
2020년 01월 17일
스크롤 맨 하단으로 이동
채팅과 같이 메시지가 도착하면 최하단으로 계속 이동해야하는 경우나 단순 최하단으로 이동하고 싶을 때 구현하는 방법입니다. ## 자바스크립트에서 스크롤 하단으로 이동 엘리먼트의 height만큼 scroll 위치를 이동합니다. ```js // overflow 스크롤이 걸려있는 엘리먼트 const ele = document.querySelector("ul"); ele.scrollTop = ele.scrollHeight; ``` ## React에서 응용하기 React에서 채팅 레이아웃에서 메시지가 들어올 때마다 최하단으로 이동하는 코드입니다. ```tsx import React, { useRef, useEffect } from 'react'; import { useMessages } from 'Hooks'; ... const messagesRef = useRef(null); // 메시지 엘리먼트를 저장 const { messages } = useMessages(); // Custom Hooks : 메시지 리스트 useEffect(() => { messagesRef.current!.scrollTop = messagesRef.current!.scrollHeight; }, [messages]); ... return ( {messages.map(message => { return ( ... ); })} ; ) ``` firebase를 사용하고 있으며, 메시지를 구독하면 useMessages에서 messages를 내려줍니다. 이후 messages가 업데이트될 때 마다, ul 엘리먼트를 최하단으로 이동합니다. 만일 특별하게 최하단으로 이동하기 싫으시다면, useEffect 내에 if문으로 조건을 설정하시면 됩니다.
-
2020년 01월 08일
axios - interceptors error 처리와 refreshToken
axios로 개발할 때, API마다 try ~ catch문을 적용하여 에러 처리를 진행해왔습니다. 이번 프로젝트에서는 Token을 관리하며, 서버에서 403에러가 오면 Token을 재발행해야하는 환경이라 더 나은 코드가 없을까 찾아보니 interceptors가 있었습니다. ## axios.interceptors axios.interceptors 함수를 통해 request, response를 감지할 수 있습니다. ```js // API 호출 전 해당 함수가 먼저 실행됩니다. axios.interceptors.request.use( (config) => { return config; }, (error) => { return Promise.reject(error); } ); // API 실행 후 response를 감지하여 데이터를 return 합니다. axios.interceptors.response.use( (response) => { return response; }, (error) => { return Promise.reject(error); } ); ``` 위 예제처럼 `interceptors.response`를 통하여 에러를 감지할 수 있게됩니다. 그러면 다시 response에 에러처리를 위해 코드를 작성합니다. ```js const _axios = axios.create({ baseURL: process.env.REACT_APP_API_URL, }); _axios.interceptors.response.use( (response) => response, (error) => { if (error.response && error.response.status === 403) { return Auth.refreshToken() // token 재발행 및 반환 .then((token) => { originalRequest.headers["Authorization"] = token; return _axios.request(error.config); // error.config(origin API 정보)를 다시 요청 }) .catch((error) => { window.location.href = "/login";...
-
2020년 01월 08일
CSS Flex 세로 정렬
HTML에서 세로 정렬은 다들 까다로워하는 부분입니다. vertical-align: middle;으로 알고 사용하지만, 특정한 환경(Table 등)이 아니라면 세로 정렬이 되지 않는 문제 때문입니다. 이번 글에서는 CSS flex와 align-items를 사용하여 쉽게 세로정렬하는 방법을 알아봅니다. 세로/가로 가운데 정렬 <div class="login-page"> <div class="center"> <h3>Login</h3> <form> <input /> <input /> <input /> </form> </div> </div> 위 예제에서 로그인 페이지 내에 내용을 가로/세로 정렬을 진행합니다. .login-page { display: flex; // flex 사용 height: 100vh; // 세로 높이를 화면 크기에 맞춤 align-items: center; // 세로 정렬 justify-content: center; // 가운데 정렬( 아래서 추가 설명 ) margin: 0 auto; // 가운데 정렬 } justify-content 속성은 flex-direction 속성의 진행 축 정렬에 영향을 받는데, flex-direction: row | row-reverse 인 경우 x축 정렬을 제어합니다. flex-direction: column | column-reverse 인 경우 y축 정렬을 제어합니다.