useReducer 사용하기(with Typescript)
useReducer 살펴보기 언제 사용할까? 함수형 컴포넌트의 상태(state)를 다루기 위해서 useState를 사용한다. useReducer도 이와 비슷하게 컴포넌트의 상태를 다루기 위해 사용한다. 대신, 상태의 구조가 복잡한 경우 useReducer를 사용하면 유리하다. 예를 들어, 서버로부터...
useSelector with Typescript
Option 1. Typing a state type manually // Inferred from rootReducer export type AppState = ReturnType<typeof rootReducer> // Explicitly set state type const user = useSelector(state: AppState => state.user) Option...
React의 Error Boundary component
Concept 리엑트는 렌더링 과정에서 자바스크립트 코드에서 에러가 발생하면 component tree를 전부 unmounting하게 된다. 모든 컴포넌트를 unmount하는 것 대신에 fallback UI를 보여주면서 다른 컴포넌트의 기능을 그대로 유지할 수는 없을까? Error Boundary...
그리드 shorthand 속성 이해하기
grid-template grid-template 속성은 grid-template-rows, grid-template-columns, grid-template-areas를 한번에 쓸 수 있도록 도와준다. .wrapper { display: grid; /* 2개의 rows, 3개의 columns인 grid를 생성한다. */ grid-template: repeat(2, 1fr) / repeat(3, 1fr); }...
Typescript - type alias vs interface
타입별칭(type alias)와 인터페이스(interface)는 거의 모든 부분에서 같은 기능을 한다. 하지만 분명 미묘한 차이는 있다. 차이 1. 타입별칭이 조금 더 포괄적이다. 타입 별칭은 어느 타입이든지 대상이 된다. type Color = string;...
자바스크립트 기본기 - 불변객체(Immutable object)
Data type 데이터 타입은 두 가지로 나뉜다. Primitive type Number String Boolean null undefined Symbol Reference type Object 모든 Primitive Type은 불변성을 가진다. 불변성(Immutable) 한 번 생성한 값 메모리 상에서...
브라우저 렌더링 과정
브라우저 컴포넌트 User interface Browser engine Rendering engine Networking UI backend Javascript interpreter Data storage Rendering engine 역할: HTML content 또는 이미지를 화면에 보여준다. 그 외 파일을 플러그 인을 통해...
Hybrid Application이란?
Hybrid Application이란? Native app과 Web app의 요소를 결합한 형태의 앱. 하이브리드 앱은 기본적으로 HTML, CSS, Javascript로 쓰여졌으며, 네이티브 앱에서도 동작할 수 있도록 캡슐화되어 있다. 하이브리드 앱은 웹 기술로 쓰여졌지만, 네이티브...
Native app이란?
Native Application이란? Native application이란 특정 platform(os) 또는 device에서 사용하도록 개발된 소프트웨어 프로그램을 말한다. Native application의 가장 대표적인 예는 특정 모바일 운영체제에서 돌아가는 애플리케이션이다. 대표적인 모바일 운영체제로는 애플의 IOS, 구글의 Android가...
Web application이란?
Web application(웹 애플리케이션)이란? Application Program 사용자 또는 다른 애플리케이션을 위해 특정 기능을 수행하는 프로그램. Web Application 웹 브라우저 인터페이스를 가지고 있으며 인터넷을 통하여 제공되는 애플리케이션. 웹사이트, 웹 서비스 등이 이에...
redux-toolkit, redux-saga로 api 요청하기 (with Typescript)
Redux와 API 요청 컴포넌트에서 화면에 보여줄 데이터를 API요청을 통해 받아와야 하는 경우가 있다. 컴포넌트별 state와 fetch 등을 통해서 API 요청을 할 수도 있다. useEffect(() => { // API 요청 },...
Firebase - Star 또는 Favorite 기능 구현하기(8)
Star 또는 Favorite 즐겨찾기 또는 북마크처럼 유저가 관심있는 채널을 북마크할 수 있는 기능을 추가한다. Star 아이콘을 클릭하면 Starred에 해당 채널을 추가하도록 한다. User 스키마 수정 starred 채널을 데이터베이스에 저장하기 위해...
Firebase - online상태 나타내기(7)
online, offline 상태 나타내기 유저가 온라인 상태인지 오프라인 상태인지 나타내기 위해서는 User의 connection 상태를 알 수 있어야 한다. Offline Online Connection state firebase의 database는 유저가 online상태면 .info/connected 라는 특수한 ref에...
Firebase - Channel Message기능 구현하기(6)
데이터베이스에 Messages 저장하기 채널을 개설하면 그 안에서 채팅을 할 수 있는 기능을 구현할 것이다. 각각의 채팅은 messages라는 collection에 저장되고, messages에서 데이터를 가져와 채팅창 화면을 보여분다. Messages 스키마 messages collection 밑에...
Firebase - Channel을 Redux Store에서 가져오기(5)
컴포넌트에서 Redux store에 접근하기 react-redux는 컴포넌트에서 리덕스 스토어에서 값을 가져올 수 있는 두 가지 방법을 제공한다. connect() 함수를 이용하는 방법이 있고 hook을 이용하는 방법이 있다. hook을 이용하는 방법이 더욱 직관적이기...