코딩하는 라이언

앞선 포스팅Vite React TypeScript 개발환경 설정하기https://devchaeyoung.tistory.com/72Vite React chatApp 만들기 ToDos ✏️Vite React TypeScript 설정하기App.tsx 파일 vite 서버로 실행하기프로젝트에 맞는 CSS 설정하기socket.io를 이용한 채팅 만들기완료된 프로젝트 보일러플레이트 보러가기 >> https://github.com/devchaeyoung/vite-chat-app01. 사용하려는 css라이브러리 선택하기js in css : styled-components간단한 프로젝트여서 빠른 스타일링을 위해 상대적으로 손에 익은 js in css인 styled-components를 선택했습니다.사이트 참고@emotio..

요즘 채용공고에 WebPack와 같은 번들러를 이용한 개발 환경 설정 경험이 자격 요건으로 올라와 있는 것을 자주 보게되었습니다. 궁금했지만 미뤄오던 React 개발 환경 셀프 세팅을 시작하였습니다. 개발 시작 처음부터 cra(create react app)를 통해 편하게 리액트 개발을 해온지라 초기 개발환경 설정은 간단하지만 어떤 프로젝트냐에따라 하나하나 설정할 것이 많다는 것을 알게되었고 이론으로만 듣던 프로젝트가 무겁다는 말이 무엇을 의미하는 지 새삼 느끼게되었습니다. 해당 글에서는 Vite React를 이용해 Socket.io로 간단한 채팅앱을 만들어보려합니다.  해야할 일은 아래와 같습니다.ToDos ✏️Vite React TypeScript 설정하기App.tsx 파일 vite 서버로 실행하기프..

☑️ React 컴포넌트는 하나의 값만 출력할 수 있다.자바스크립트는 두 개의 값을 반환하지 않기 때문이다. 따라서 JSX는 반드시 단일 루트 요소만 반환되어야 한다. 모든 JSX요소는 하나의 요소안에 내포 요소로 포함되어있다. 아래는 잘못된 예시이다.const App = ()=> { return ( 모던 리액트 프로그래밍 개념 정리하기 좋은 책이다 ) // 단일 요소로 이루어져 있어야 한다.const add = (a, b) => { return ( a+b a-b ); // 자바스크립트는 2개의 반환값을 가질 수 없다.} JSX는 실제로는 React.createElement 호출로 변환되는데  이때 호출이 단일 객체를 반환해야 한다. 동적인 컨텐츠 출력을 위해 자바스크립..

useReducer로 useState 지옥 벗어나기const [state, dispatch] = useReducer(reducer, initialQrg, init);useState 지옥에서 벗어나기기존 코드아래는 달력 이벤트를 업데이트하는 컴포넌트 예시입니다.import { useState } from "react";function EditCalendatEvent() { const [startDate, setStartDate] = useState(); const [endDate, setEndDate] = useState(); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); cons..

매번 className으로 모달 관리하기 번거로울 때매번 className으로 모달 관리하기 번거로울 때는 Styled-components 태그에 속성을 추가할 수 있다. 단, 단순 string 타입으로 작성할 경우, 대문자로 작성이 안된다던지 string 값 작성이 안되는 에러가 발생함으로 html 태그에서 변수값으로 인식하지 못하게 하는 $문자를 입력해주면 에러없이 잘 속성으로 이용할 수 있다.예시 : 모달interface ModalProps { isOpen : boolean; onClose: ()=> void; onClick: ()=> void;}function Modal ({isOpen, onClose, onClick}:ModalProps) => { return ( ..

페이지가 첫 렌더링 된 후에 새로고침을 하면 위와같은 에러가 발생하는 이슈가 생겼다.🚨 Rendered more hooks than during the previous render.채팅 페이지 정보를 가져오다 발생한 에러.페이지 렌더링 후 새로고침 시 바운더리 에러 발생.로직 순서는useParams를 통해 채팅방 정보를 가져온다.currentUser를 이용해 로그인한 유저의 정보를 가져온다.유저의 정보와 채팅방 정보가 없다면 그대로 return 한다.유저의 역할에 따라 이름, 채팅방 권한 상태를 관리한다.채팅방 페이지를 렌더링한다.에러가 발생한 지점은 if 조건문으로 리턴을 한 후, 아래 useState hook이 발생하여 일어난 에러다.☑️ 문제 코드const ChatRoomPage = ()=> {c..