본문 바로가기

React125

React(76) TypeScript - 채팅목록에서 마지막 메시지 보여주기 요즘 새발자는 한창 채팅 기능을 유지보수 하는 중이다. (매우어렵 🤯) 채팅 기능에서 중요한 요소 중 하나는 마지막 메시지이다. 마지막 메시지를 채팅리스트에 출력하거나, 마지막 메시지를 통해 읽기 표시 등의 알림 설정 등을 할 수 있기 때문이다. 오늘은 채팅리스트에서 마지막 메시지를 함께 출력하는 기능을 공부한 내용을 토대로 포스팅해보려고 한다. 그럼 시작해보도록 하자 React(76) 채팅목록에서 마지막 메시지 보여주기 채팅리스트에 마지막 메시지를 가져와 채팅목록에서 같이 보여주자. MessageList.tsx 먼저, api 로 채팅리스트를 get 해서 채팅방 목록을 배열로 받아오고, 각각의 채팅방의 정보를 또 받아와서 마지막 메시지를 추가해줄 것이다. interface MessageProps { ms.. 2022. 6. 27.
React(75) shift + enter 줄바꿈 (feat. 두번씩 출력되는 버그처리) Updated 08/22/22 채팅창에 메시지를 입력할 때, 엔터키를 치면 전송이 되는 기능과 + [ shift + 엔터키 ] 로 줄바꿈을 하는 기능 요렇게 두가지를 동시에 구현 중이다. 이 기능들은 키보드 이벤트를 알아야 구현을 할 수 있다. 그럼 이제 구현하러 가보자 Hoxy 자바스크립트의 키보드 이벤트에 대해 자세한 개념이 궁금하시다면 ? ( ↓↓↓ 아래포스팅을 확인하세요) JavaScript - KeyDown / KeyPress / KeyUp 이벤트 메시지 입력창에서 엔터키로 메시지 전송을 할 때나 줄바꿈을 할 때 키보드 이벤트를 사용하게 된다. 대표적인 키보드 이벤트인 keyDown / keyPress / KeyUp 에 대해서 정확히 알고싶어서 공부해보았다 devbirdfeet.tistory.c.. 2022. 6. 26.
React(74) StoryBook으로 UI 컴포넌트 작업하기 스토리북은 UI 컴포넌트 개발을 위한 툴이다. 공통으로 사용되는 UI 컴포넌트들을 개발할 때, 스토리북을 localhost 로 띄워놓고 디자인을 직접 확인할 수 있다. 원래 SPA에서 웹으로 ui 컴포넌트를 만들려면 이것저것 세팅을 해야한다. 특히 공통 컴포넌트로 만드려고 하면 기능도 고려를 해야하니 더 손이 많이 간다. (컴포넌트들로 레이아웃도 만들고 그안에 또 ui 컴포넌트 만들어서 사이즈 맞춰서 집어넣고 등등등 귀찮다) 스토리북을 활용하면 간단하게 로컬호스트로 스토리북을 띄워놓고 거기에 테스트할 디자인 컴포넌트를 추가하면 화면으로 ui 요소만 즉각즉각 확인할 수 있다. React(74) StoryBook 에서 UI 컴포넌트 작업하기 npm 으로 스토리북 설치 후, 셋업은 마친 상황이다. Slider.. 2022. 6. 20.
React - useState 동작원리 이해하기 다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 순서대로 정리한 포스팅이다. 1. DNS 이해하기 Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 devbirdfeet.tistory.com 2. 브라우저 렌더링 이해하기 Network - 브라우저 렌더링 이해하기(Feat. Virtual Dom) 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이.. 2022. 6. 15.
React- 가상돔(Virtual DOM) 이해하기 리액트 동작원리를 찾다보니 가상돔에 대한 이야기를 참 많이 들었다. DOM 에 대한 개념을 알고 있지만 가상돔은 생소한 개념이었다. 얘의 정체를 하나하나 공부해보자. 다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 순서대로 정리한 포스팅이다. 1. DNS 이해하기 Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 devbirdfeet.tistory.com 2. 브라우저 렌더링 이해하기 Network - 브라우저 렌더링 이해하기(Feat. Virtual Dom) 요즘 가장 큰.. 2022. 6. 11.
React(72) map()으로 input 추가 삭제하기 CRUD 를 그리다 보면 의 자유로운 추가 삭제 기능이 필요할 때가 있다. 비슷한 기능을 3번째 구현하면서, 잊지 않기 위해 기록으로 남겨본다. React(72) map()으로 input 추가 삭제하기 1. Input 입력값이 들어갈 인터페이스 준비 interface InputItem { id: number; title: string; } 2. 준비물 변수들 선언 일단 id 를 동적으로 추가해줄 변수(nextID) 와 input 배열을 담을 변수(inputItems) 를 선언한다. const nextID = useRef(1); const [inputItems, setInputItems] = useState([{ id: 0, title: '' }]); 3. 추가 삭제 기능 구현 두말하면 잔소리다. 추가 삭.. 2022. 5. 26.
React(71) 마우스 이벤트로 호버시 애니메이션 넣기 메뉴 영역에 마우스 호버시 메시지 박스가 나타나는 기능을 만들어 보려고 한다. 단, css 호버기능을 사용하지 않고, MouseEnter / MouseLeave 이벤트를 사용하여 호버 기능을 구현하였고, Transition / Animation 속성을 이용하여 애니메이션 기능을 구현하였다. 자 그럼 만들러 가보자. 결과화면 미리보기 메뉴 영역에 마우스 오버시 애니메이션과 함께 호버메시지가 등장한다. React(71) 마우스 이벤트로 호버시 이동 애니메이션 넣기 처음에 useState 로 호버의 상태를 알려줄 변수를 선언해준다. const [hover, setHover] = useState(''); 위에서 선언한 변수(hover) 을 가지고 마우스 이벤트를 걸어주자 이때 호버메시지는 변수(hover)의 값.. 2022. 5. 22.
React(70) react-date-range 캘린더 라이브러리 사용하기 유저가 캘린더에서 원하는 날짜를 선택하면 input 창에 자동으로 입력받는 기능을 구현해보려고 한다. 그래서 react-date-range 라는 캘린더 라이브러리를 사용하여 특정 날짜 값을 받는 기능을 구현하여 보았다. ** 설치 및 기본적인 셋업도 간단하다. (공식문서를 참고하세요) react-date-range hypeserver.github.io React(70) react-date-range 캘린더 라이브러리 사용하기 구현에 필요한 3가지 라이브러리를 사용하였다. 얘네들 임포트해주자 캘린더 ui 를 위해 react-date-rang 한국어 기능을 위해 date-fns 날짜 포맷 변환을 위해 moment import { Calendar } from 'react-date-range'; // 얘가 캘린.. 2022. 5. 18.
React(69) TypeScript - 객체 속 객체의 반복문 사용하기 본 포스팅에서는 객체 반복문 사용법을 알아보고, 반복문에서 객체의 키를 매핑할 때 뜨는 아래의 타입스크립트 에러를 살펴볼 것이다. Element implicitly has an 'any' type because expression of type 'string' can't be used to index type React(69) TypeScript - 객체 안 객체 반복문 사용하기 array 는 반복문을 많이 써봤는데, 객체를 돌려보는 건 처음이다. 특히 객체 안의 객체는 처음이다. 막상 한번 훓고 지나갔던 문법들이 동창회한 느낌이었다. object.keys() 로 준비하기 객체를 배열렌더링을 위해 막연히 구글링하던 도중, 아주 유용한 녀석을 찾았다. 이녀석은 key 값만 쏙 빼서 배열화 시키는 objec.. 2022. 5. 15.
반응형

티스토리툴바