본문 바로가기

React128

React - TypeScript 실행오류 Cannot add property, object is not extensible 타입스크립트 에러가 났다. readonly 객체는 수정할수 없기 때문에 에러가 난것이다. 나의 경우는 redux 객체를 수정하려고 했기 때문에 에러가 나버렸다. React - TypeScript 실행오류 Cannot add property, object is not extensible 리덕스 값(객체)는 직접 수정할 수 없다. 그 이유는 상태 값은 불변 객체이다. 상태 값은 순수 함수에 의해서만 변경되어야 한다. 하지만 리덕스 객체를 직접 수정하려고 하니 당연히 나게된 에러였던 것이다. 객체를 직접 수정할 수 없다면 ? 복사해서 값을 고쳐주면 된다. (feat. 참조에 의한 복사) ** 참조에 의한 복사란 (더보기클릭) 더보기 객체를 만들면 객체 자체는 메모리에 저장되고, 변수에는 참조값만 저장이 된다... 2022. 7. 27.
React(78) useEffect 에서 스크롤 이벤트 동작원리(feat. addEventListener) 요즘 모아놓은 스크롤 이벤트를 포스팅하다보니 개념정리도 함께 되고 있다. 예전에 급히 사용했던 퍼즐(코드) 조각들이 하나씩 모여 동작원리까지 공부하며 완성 되어 가는 것 같아 매우 뿌듯하다. 스크롤 이벤트는 워낙 다양한 사용법이 있지만 응용이 가능한 가장 기본적인 코드로 정리해보았다. React(78) useEffect 에서 스크롤 이벤트 동작원리(feat. addEventListener) 웹페이지에서 일어나는 모든 사건을 이벤트라고 한다. 이벤트는 특정 동작이 벌어지는 사건이 일어난 것이다. 스크롤 이벤트는 스크롤이 움직이는 순간!! 을 감지한다. 엘레멘트 사이즈 ( Element Size ) 스크롤 이벤트에서 많이 사용되는 수치들이다. 이 수치들을 기본적으로 알고 있어야 스크롤 맨아래까지 내리면 OO.. 2022. 7. 18.
React(77) 스크롤 시, 하위메뉴를 헤더 아래로 고정하기 상단이 고정된 헤더가 있다. 스크롤 하다가 페이지 중간에서 하위메뉴를 만나면 헤더 바로 아래로 고정되는 기능을 구현하려고 한다. 구글링을 해보니 자바스크립트로 하위메뉴까지의 스크롤의 높이를 구한 뒤, 고정시키는 로직이 대다수였다. 고민고민하다가 CSS 만으로도 구현할 수 있다는 사실을 알아냈다. 많은 분들에게 도움이 될지는 모르겠지만 그래도 공유해보려고 한다. 결과화면 미리보기 페이지 중간에 하위 메뉴 탭이 있다. 스크롤을 내려보자 스크롤을 내리다가 헤더가 하위탭을 만나자 고정되고, 그 아래의 내용들만 스크롤되기 시작한다. React(77) 스크롤 시, 하위메뉴를 헤더 아래로 고정하기 Product.tsx 첫번째 useEffect 를 통해, 첫 렌더시 스크롤을 0으로 잡아주고, 두번째 useEffect .. 2022. 7. 12.
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.
반응형

티스토리툴바