그날의 공부기록

seokachu's Front-End Archive 🙂

✨ 기억보다 기록을/프로젝트

[Feat #271] - 마피아 게임페이지 조건에 따른 모달창 띄우기 변경 by seokachu · Pull Request #274 · ice-craf📌 관련 이슈 closed #271 Task TODOLIST 모달창 조건에 따라 띄우기로 변경 ✨ 개발 내용 각각의 모달창을 하나하나씩 불러왔었는데 컴포넌트를 새로 만들어서 불필요한 랜더링을 줄이기 위해 case문github.com 마피아 게임페이지 컴포넌트에서 모달창을 Return문에 모달창 하나하나 불러오는 방식으로 진행했었는데socket.io에서 받아오는 수신내용을 바탕으로조건부 랜더링을 통해 해당 내용 모달창을 수신하면 UI에서 조건에 따른 모달창을 띄울 수 있도록 리팩토링을 진행하였다.    전역상태 관리로 useCurrentModal 을 추가함..

2024. 6. 20.

✨ 기억보다 기록을/프로젝트

({}); const socketArr = [ { eventName: "showVoteResult..." data-og-host="github.com" data-og-source-url="https://github.com/ice-craft/ice-craft/pull/245" data-og-url="https://github.com/ice-craft/ice-craft/pull/245" data-og-image="https://scrap.kakaocdn.net/dn/mBeZh/hyWoPHkkb8/2y8jfkS25Viszy65yrWn4K/img.png?width=1200&height=600&face=0_0_1200_600"> [Feat#240] - 마피아게임페이지 최종투표 결과값 모달 추가 by seokach..

2024. 6. 20.

📚 이론정리/React & Next.js

커스텀 훅(Custem hook) `중복된 로직`을 하나로 묶는다. React에서 커스텀 훅은 상태 로직을 재사용 할 수 있도록 하는 기능이다.이는 여러 컴포넌트에서 공통적으로 사용되는 상태 로직을 추출하여 하나의 함수로 만들어 사용할 수 있도록 한다.커스텀 Hook을 만들어 낼 때, 브라우저 API나 외부 시스템과 소통하는 방법과 같은 불필요한 세부 사항을 숨길 수 있다.컴포넌트의 코드는 목적만을 나타낼 뿐 실행 방법에 대해서는 나타내지 않는다.리액트의 상태 관리 (useState, useContent, useEffect) 부가적인 기능이나 추상화하거나 조합하여 재사용 가능한 로직을 구현한다. Hook의 이름은 항상 use로 시작해야한다.JSX코드나 렌더링과 관련된 코드를 포함해서는 안된다 (retur..

2024. 5. 19.

📚 이론정리/React & Next.js

제어 컴포넌트와 비제어 컴포넌트`제어 컴포넌트`는 React에 의해서 값이 제어 되는 것, `비제어 컴포넌트`는 React에 의해서 값이 제어되지 않는 컴포넌트 이다.   제어 컴포넌트제어 컴포넌트 같은 경우 input의 변화를 하나하나 다 체크해서 제어한다.사용자가 작성할 때 마다 모든 것을 제어한다. ex) onChange value를 주는 방법   비제어 컴포넌트비제어 컴포넌트는 button type submit 같이,사용자가 버튼을 눌렀을때 제어하는 방식이다.  제어 컴포넌트와 비제어 컴포넌트의 장, 단점`제어 컴포넌트`의 장점은 하나하나씩 관리할 수 있다.하지만 개발자가 코드가 많아진다. `비제어 컴포넌트` 장점은하나하나 제어하지않으니까 개발자가 짧은 코드로도 가능하다 단점은 제어컴포넌트의 장점..

2024. 5. 13.

✨ 기억보다 기록을/프로젝트

Livekit을 선택하게 된 이유?최종 프로젝트에서 WebRTC기반의 게임을 만들기로 지정함에 따라, 팀원들끼리 기술 스택 결정에 대해 회의를 진행했다.최종 프로젝트 기간은 한달 가량 주어졌고, 우리 팀은 다른 팀보다 1명이 부족한 4명으로 개발을 진행하기도 했고,WebRTC를 직접 구현해도 되지만 학습하면서 완성까지 쉽지 않았기 때문에(...)(Zustand, Socket.io, Express, AWS 등 처음 쓰는 기술을 빠르게 습득해서 최종프로젝트까지 구현을 했어야 했음...ㅠㅠ) 결론은 회의를 거쳐 라이브킷은 Next.js 13버전 이상의 라이브러리를 지원한다는 점,여러가지 hook을 지원한다는 점,복잡한 설정 없이 WebRTC기능을 신속하게 구현할 수 있다는 장점이 있어서 사용하게 되었다. 다들..

2024. 4. 20.

📚 이론정리/React & Next.js

React에서는 Virtual DOM이 있다. 이것이 바로 리액트의 장점이다.Virtual을 직역하면 `가상`이라는 뜻이다. DOM은 `Document Object Model`의 약자이다.그대로 해석하다보면 `가상의 문서 객체 모델`이다.DOM은 HTML요소들을 계층 구조 형식으로 표현한 모델이다. DOM은 웹 페이지 전체를 `document`라고 한다.웹 페이지를 이루는 컴포넌트들은 `element`라고 한다.DOM은 이러한 엘리먼트를 `tree`형태 (DOM tree)로 표현한 것이다.트리의 요소 하나하나를 `노드` 라고 부른다. 각각의 노드는 해당 노드에 접근과 제어를 할 수 있는 `API`를 제공한다.HTML요소에 접근해서 수정할 수 있는 함수라고 생각하면 될 것이다.   Virtual DOM(가..

2024. 3. 13.

📚 이론정리/React & Next.js

React의 불변성이란?값이나 상태를 변경할 수 없는 것. = 메모리에 있는 값을 변경할 수 있는 것!리액트에서 불변성을 지켜주는 이유는 리액트가 상태 업데이트를 하는 원리 때문이다.리액트는 상태값을 업데이트 할 때 `얕은 비교`를 수행한다.즉, 배열이나 객체의 속성을 하나하나 비교하는 것이 아니라, 이전 참조값과 현재 참조값만을 비교하여 상태 변화를 감지한다.이런 이유로 배열이나 객체를 업데이트 할때 `setState([...state, newState])` 이런식으로새로운 참조값을 가진 배열이나 객체를 생성한다.바로 이렇게 `불변성` 을 지킴으로써 리액트는 상태변화를 감지할 수 있다. 리액트는 배열이나 객체를 업데이트 할 때, 새로운 참조값을 가진 배열이나 객체를 생성해 상태변화를 감지한다. 새로운 ..

2024. 3. 12.

📚 이론정리/JS & TS

as const?readonly 속성으로 깊은 객체까지 참조할 수 있다.

2024. 3. 10.

📚 이론정리/React & Next.js

Commons 폴더components/common/ ├── Button/ // 기본 UI 컴포넌트 ├── Input/ ├── Select/ ├── Avatar/ ├── Modal/ └── Pagination/ 특징 가장 기본이 되는 UI 컴포넌트들재사용성이 매우 높음비즈니스 로직이 없음특정 도메인에 종속되지 않음다른 컴포넌트의 구성 요소로 자주 사용됨 비즈니스 로직애플리케이션의 주된 로직이나 규칙을 처리하지 않고 단순히 UI만 담당합니다. 이런 컴포넌트는 데이터나 특정 비즈니스 규칙에 의존하지 않기 때문에 여러 곳에서 쉽게 재사용할 수 있습니다. 예를 들어, 버튼, 카드, 입력 필드 등은 그 자체로는 비즈니스 로직을 포함하지 않지만 다른 컴포넌트나 페이지에 포함되어 사용될 수 있..

2024. 3. 9.

📚 이론정리/React & Next.js

자바스크립트 다운로드 후 -> 브라우저에서 자바스크립트가 실행되어야 ui가 실행한다.클라이언트쪽에 랜더링된다고해서 CSR이라고 한다.자바스크립트가 작동안하면 로봇검색엔진이 검색이 안된다는 치명적인 단점이 있다.그 외에도 자바스크립트를 다운로드받을때까지 화면이 실행되지 않는다.   SSR서버쪽에서 자바스크립트가 실행됨 -> 완성된 html이 전송된다.자바스크립트를 실행할 수 없는 환경에서도 잘 동작함. 검색엔진에도 친화적임next.js는 백엔드까지 동시에 제공하는 풀스택 프레임워크이다.    SSG(Static Site Generation)SSG는 빌드타임(build-time) 때만 컴포넌트를 생성하고, 이후는 변하지 않는 페이지로 가정static 컴포넌트를 제공하는 것을 말합니다. 그리고 Next.js는..

2024. 3. 9.