본문 바로가기
반응형
SMALL

TS4

[React-Native, RN, Typescript] PokeAPI로 배우는 Redux-Toolkit 비동기처리 Redux-Toolkit 이란?리덕스 개발팀에서 만든 공식 라이브러리.기존의 리덕스의 불편함을 개선하여 모듈 작성 시 액션 타입, 액션 생성 함수, 리듀서를 한 번에 작성할 수 있고,상태를 업데이트할 때 불변성에 대해 신경쓰지 않아도 된다는 장점이 있다. Redux-Toolkit으로 비동기처리 하는 법?그것은 바로, Redux Thunk를 사용하는 것이다.createAsyncThunk와 createSlice를 사용하여 Redux-Toolkit만으로 비동기 처리를 쉽게 할 수 있으며,Redux-Saga에서만 사용할 수 있던 기능(이미 호출한 API 취소하기 등)까지 사용할 수 있다. PokeAPI로 Redux-Toolkit Thunk로 비동기 처리 실습하기1. 새 프로젝트 생성npx react-native.. 2024. 8. 2.
[React Native, RN, Typescript] 팀프로젝트 앱 개발 담당파트 시연영상 React Native를 사용해 개발한 기능들을 시연한 영상이다.아쉽게도 팀 프로젝트 중 한 팀원분이 개인 사정으로 인해 팀에서 나가시게 되어 프로젝트를 마무리 하지 못했다.2개월이라는 짧은 기간이었지만, 매일 밤새워 작업할 만큼 열심히 임했던 프로젝트이다.이로 인해 원형탈모까지 생길 정도로 힘든 시간이었지만, 그만큼 열정적으로 작업했기에 이 블로그에 그 작업 시연 영상을 기록으로 남기고자 한다. (참고로, 유튜브 개인 채널에도 업로드 함.) 2024. 8. 1.
[React, Typescript] 채팅 프론트엔드 구현 (3편) 오늘은 마지막 단계인,5. 채팅 데이터에서 채팅 내용이 개행됐을 경우, 처리를 통해 화면에서도 개행 처리 해줌.6. 조합문자(아직 완성되지 않은 문자, 예를 들어 한글, 중국어, 일본어 등)을 사용할 경우, 채팅 입력 시 마지막 글자가 중복 처리되는 것을 막기 위해, 조합상태를 감지하는 로직 구현.부분을 구현하는 과정을 포스팅하려고 한다. 5. 채팅 데이터에서 채팅 내용이 개행됐을 경우, 처리를 통해 화면에서도 개행 처리 해줌.messages 상태변수의 채팅 데이터에서 채팅 내용이 개행됐을 때, '\n'을 태그로 변경처리하여 실제 채팅 컴포넌트 화면에서도 개행처리가 될 수 있도록 설정해줄 것이다.ChattingComponent.tsx 파일에 formatMessage라는 메세지 포멧팅 함수를 정의한다... 2024. 8. 1.
[React, Typescript] 채팅 프론트엔드 구현 (2편) 이미지 가로 싱크가 안맞는데, 기존에 개발한 프로젝트에선 프로필 사진이 보이는 채팅창을 구현했는데, 보안상 잘라냈기 때문이다. (기존 프로젝트 실행화면임) 이번에 내가 포스팅할 채팅창 기능은 다음과 같다.3. 새로운 채팅 전송 시 '나'가 보낸 채팅으로 간주, 우측 정렬4. 채팅 입력창에서 "shift + enter" 입력 시 개행되며, "enter"만 입력했을 때는 전송. 3. 새로운 채팅 전송 시 '나'가 보낸 채팅으로 간주, 우측 정렬Home.tsx의 textarea에 onKeyUp 이벤트와 onKeyDown 이벤트를 추가하고, 거기에 우리가 만들 함수를 넣어준다. 그 전에, onKeyUp과 onKeyDown 이벤트가 뭔지부터 설명하도록 하겠다.onKeyUp은 키를 놨을 때 발생하는 이벤트이고,on.. 2024. 7. 31.
반응형
LIST