참치코더의 꿈 메모장

리엑트는 기본적으로 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 모두 리렌더링 한다.이 기본 동작은 직관적이지만, 규모가 커지면 불필요한 리렌더링이 많아져 성능 문제가 생길 수 있다.이때 사용하는 것이 React.momo이다. React.memo는 컴포넌트를 메모이제이션 하여 props가 변경되지 않는 한 리렌더링을 방지하는 고차 컴포넌트(HOC)이다. const MyComponent = (props) => { return {props.value}} export default memo(MyComponent); - props 값이 이전 렌더링이랑 동일하다면, 리렌더링을 하지 않는다.- props 값이 바뀌면, 리렌더링을 진행한다. 내부 작동법 React.memo는 내부적으로 얕은(shallow) 비교를 ..

25.11.28프로젝트 2일차 Socket.io를 이용해서 실시간 웹 챗 기능을 개발하면서, 실시간 영상 기능도 추가해 기능을 확장하고 싶었는데, 해당 기술로는일단 챗 기능 밖에 구현이 안된다는걸 보고 조금 충격이었습니다. 정확히 말하면 되긴하는데...해당 기능만 사용한다면, 네트워크로 다이렉트로 데이터가 전송이 되기때문에 버퍼링이 심하게 걸릴여부가 있고,사용자가 늘어난다면 트래픽이 엄청나지기 때문에 해당 데이터를 가볍게 만들어주는 라이브러리인 WebRTC 까지 이용해야원하는 기능을 만들수 있다는걸 알게됬습니다. (음... 코드를 완전 뒤집어야 하나....)따라서 일단 Socket.io 기반으로 채팅은 동일하게 움직이기 때문에 해당 기능을 학습 및 완성을 시키고 나서 다른 라이브러리를접목시키는 방향으로 ..

타입 좁히기는 값의 타입을 더 구체적으로 추론하도록 만드는 과정이다.예를 들어, String / number 처럼 유니온 타입일때, 실제 실행 흐름에서 타입을 점점 특정 타입으로 좁혀 나가는 방식이다. typeof (타입 가드) - 기본적인 타입 좁히기 방식이다. function print(value: string | number) { if(typeof value === "string"){ console.log(value.toUpperCase()); } else { console.log(value.toFixed(2)); }} - typeof 타입가드는 원시타입에 많이 사용된다. in (타입 가드) - 객체의 속성 존재 여부로 타입을 좁히는 방식이다. type Dog = { ba..

useMemo() - useMemo는 연산비용이 큰 계산 결과를 메모리제이션해서 불필요한 재계산을 막아주는 훅이다. - 개발자는 이 훅을 사용할때 값이 다시 계산될 필요가 있는지,- 필요한 경우에만 다시 계산을 해야하는지 확인하고 사용해야 한다. 사용법 const memoizedValue = useMemo(() => { // 계산 로직return 결과값; }, [dependencies]); // dependencies(의존성 배열)이 변경되었을 때만 콜백 함수가 다시 실행된다.// 그 외 렌더링에서는 이전에 계산한 값을 재사용한다. useMemo가 필요한 이유 React 컴포넌트는 상위 컴포넌트가 렌더링될 때마다 자식도 기본적으로 재렌더링 된다. 이때 리스트를 필터링/정렬하는 연산, 무거운 계산, 의존..

개발자가 직접 타입스크립트 컴파일러에게 타입을 지정해주는 것이다.그럼 타입스크립트 컴파일러는 아 개발자가 나보다 더 똑똑하니까 이게 답이구나! 라고 믿게 해주는 것이다.단언은 당하는 타입이 가하는 타입의 슈퍼타입이거나 서브타입이어야만 해당 기능을 사용할 수 있다.(동등한 레벨의 타입이라면 오류가 발생한다.) const value: any = "hello";const length = (value as string).length; - 컴파일러는 value의 타입이 any라서 아무것도 모른다.- 하지만 개발자는 이것이 문자열임을 알고 있기 때문에, 직접 타입을 알려주는 것이다. 왜 타입 단언이 필요할까? 1. DOM 조작 시 const e1 = document.querySelector("#title") as ..

프로젝트 개요 : 이번 프로젝트는 화상 기능과 자율 chat 기능을 제공하는 것이 목표입니다. 회원가입할때 교수, 학생으로 회원가입할수 있도록 만들고, 해당 교수님들은 각각의 권한으로 채팅방을 개설 및 강의를 진행할 수 있도록 제작할 예정입니다. 학생들은 각각 chat room을 선택 및 비밀번호를 입력하여, 해당 강의실에 입장할 수 있도록 1차 계획을 세웠습니다 ^^ 25.11.26프로젝트 1일차 관련기능을 개발하기 위해 여럿 관련서적을 봤습니다. 기술에 관련되서 많은 고민이 있었는데, 3가지 틀로 개발을 진행하기로 결정했습니다. 1. 첫번째로 프론트 단은 react + Ts 로 해당 관련 view 연결하기2. 화상 및 chat 관련기능은 서버 생성 및 Socket.io 라이브러리를 사용하여..

TypeScript 대수타입 - 대수타입은 수학적 조합 관점에서 타입을 설명하는 방법이고, 크게 합 타입(UNION) 과 곱 타입 (Intersection)으로 구성된다. 합 타입 (Union Type) - 여러 개 중 하나일 수 있는 타입 특징- 상태가 여러 가지 중 하나만 가능할 때 사용- 프론트엔드에서 API 상태 관리, 폼 상태 표현 등에 많이 쓰임- 협소한 타입으로 구성해서 런타임 오류를 줄이기 좋다. 123456789type ResponseData = string | null; function printData(data: ResponseData) { if(data === null) { console.log('No data'); } else { consol..

useState( ) - 가장 단순하고 직관적인 상태 관리법이다.- 컴포넌트 내부의 간단한 상태(Single State)를 관리할 때 사용하는 훅이다.- 상태값과 상태를 바꾸는 함수(setter)를 제공한다. 특징 - 직관적이고 사용이 쉽다.- 상태 업데이트 로직이 컴포넌트 안에 존재한다.- 상태 변경은 setter에 새로운 값 또는 데이트 함수를 넘겨서 수행한다.123456789// useState 예시 const [count, setCount] = useState(0); function increment() { setCount(count => count + 1); // count 라고 붙인 이름에 어떤 이름을 붙여도 상관없다. // prev 라고 해도되고 , count라고 해도 된다..