Front-End (16) 썸네일형 리스트형 [Next.js] Parallel Routes 모달에 적용하기 퀴즈 방 입장 시 닉네임을 받는 모달을 병렬 라우팅이 가능한 페이지로 구현해 볼 것이다. 모달 구현 내용은 여기https://kwoooo.tistory.com/18 [React/Next.js] 모달 컴포넌트 만들기이전에 모달 컴포넌트는 Mui의 Modal을 조금만 커스텀해서 사용했었는데 이번에는 직접 만들어보았다...! 모달(팝업)창은 페이지 전체를 덮을 수 있도록 화면의 최상단에 위치해야 한다. 그래서 Nexkwoooo.tistory.com 이를 병렬 라우팅으로 구현하려는 이유는 같은 종류의 모달을 각각 다른 페이지에서 열 수 있어야 하며, url로 공유도 가능해야하기 때문이다.즉, 모달 페이지가 기존 페이지 위로 부분 렌더링 될 수 있어야하고, 독립적인 페이지로도 존재해야 한다는 것. 일단 p.. [모던 자바스크립트 Deep Dive] 16장 프로퍼티 어트리뷰트 16.1 내부 슬롯(Internal Slot)과 내부 메서드(Internal Method)내부 슬롯과 내부 메서드: 자바 스크립트 엔진의 구현알고리즘을 설명하기 위해 EMCAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드. ([[…]] 이중 대괄호로 감싸진 이름들): 자바스크립트 엔진의 내부 로직이므로 원칙적으로 직접 접근하거나 호출할 수 있는 방법을 제공하지 않음. 하지만 일부에 한해 간접적으로 접근할 수 있는 수단을 제공하기는 한다. e.g) ‘[[Prototype]]’ → ‘proto’로 간접 접근 가능 16.2 프로퍼티 어트리뷰트(Property Attributes)와 프로퍼티 디스크립터(Property Descriptor) 객체프로퍼티 어프리뷰트는 객체가 가지는 내부적 특성, 프로퍼티.. [Stmop.js/React] 소켓으로 페이지네이션 UI 구현하기 실시간으로 진행중인 게임방 목록을 메인화면에서 보여주기 위해 소켓으로 페이지네이션을 구현해보았다. 원래 UI는 무한스크롤(커서 기반 페이지네이션)이었지만 실시간으로 게임방 목록이 업데이트 될 경우 이전에 불러온 데이터에서 변화가 생길 수도 있고(입장인원 수 등), 목록이 최신순으로 업데이트 되면서 그 순서가 바뀔 수도 있기 때문에 충분히 데이터가 꼬일 수 있겠다는 생각이 들었다. 그래서 페이지네이션을 페이지 기반으로 변경하기로 하고 UI에는 페이지네이터 컴포넌트를 추가해주기로 했다. 그럼 stomp를 이용해 어떻게 구현할 것인가... 사실 page정보가 반영된 topic을 구독하고 서버가 던져준 데이터를 그대로 렌더링 시키면 된다. 그런데 메시지 자체는 데이터가 업데이트 되었을때만 보내준다는 것이 문.. [React/Next.js] 모달 컴포넌트 만들기 이전에 모달 컴포넌트는 Mui의 Modal을 조금만 커스텀해서 사용했었는데 이번에는 직접 만들어보았다...! 모달(팝업)창은 페이지 전체를 덮을 수 있도록 화면의 최상단에 위치해야 한다. 그래서 Next.js 앱의 가장 최상단 레이아웃에 페이지들이 렌더링 되는 영역 위로 modal-root를 만들어 어디서든 그 modal-root에 모달이 렌더링되도록 해 볼 것이다. app 폴더 루트에 있는 layout.tsx import './layout.css'; export default function RootLayout({ children, }: Readonly) { return ( {children} ); } 그리고 Modal.tsx 에서 부모 컴포넌트 바깥의 DOM 노드(modal-root div)에 렌더링.. [모던 자바스크립트 Deep Dive] 15장 let, const 키워드와 블록 레벨 스코프 var 키워드의 문제점 : ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 쓰는 것이었다고 한다. var 키워드는 다른 언어와 구별되는 독특한 특징이 있으므로 주의해서 사용해야 한다. 중복 선언 허용 : var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 된다. 중복 선언 시에 초기화문이 있으면 var 키워드가 없는 것 처럼 동작하고, 초기화문이 없으면 무시된다. var x = 1; var y = 1; var x = 100; // x = 100; var y; // 무시 console.log(x); // 100 console.log(y); // 1 → 이 특징때문에 변수를 중복 선언하면서 값을 할당하는 경우, 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생할 수 있다... [모던 자바스크립트 Deep Dive] 13장 스코프 한 주에 최소 한 장! 밀리지 말자… 13장 레츠 고 스코프란? : 식별자(변수 이름, 함수 이름, 클래스 이름 등)이 유효한 범위. 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위. : 변수는 자신이 선언된 위치에 의해 스코프가 결정된다. 스코프의 종류 전역 : 코드의 가장 바깥 영역을 전역이라고 하고, 전역에서 변수를 선언하면 전역 스코프를 갖는 전역 변수가 된다. 코드 어디서든지 참조할 수 있다. 지역 : 함수 몸체 내부를 말한다. 지역에서 선언된 지역 변수는 자신의 지역 스코프와 하위 스코프에서 유효하다. inner 함수 안에 변수 x를 선언하고 전역에도 이름이 같은 변수 x가 존재할 때 inner함수 안에서 x를 참조하면 inner에서 선언된 지역변수 x를 참조하게 된다. 자바스크립트 엔진.. [React Native] react-native-keychain 사용하기 React Native로 작업하고 있는 프로젝트에서 토큰 저장방식을 바꿔보려고 한다. 사실 앱 제작은 처음이라 웹에서 구현했던 것 처럼 토큰을 관리할 때 local storage를 사용하면 되는 줄 알았다. 그래서 local storage와 같은 역할을 할 수 있는 async-storage 라이브러리를 사용해 userName, token등 필요한 데이터들을 저장해서 관리하고 있었다. 그러다가 웹과 마찬가지로 interceptor를 만들어 토큰 갱신로직을 추가하려고 앱의 토큰 관리 방법을 찾아보다보니 토큰은 async-storage에 저장하는 것을 지양하고 좀 더 안전한 저장소를 써야 한다는 글들을 많이 보게 되었다. 우선 React Native의 공식문서를 읽어보자 https://reactnative.d.. [Next.js] Next.js 14에서 페이지 이동 감지하기 소켓 채팅방 구현을 여전히 진행중인데 반영해야 하는 요구사항이 추가되었다!! 서버에서 접속 유저들의 상태를 메모리의 객체로 관리하면서 접속한 유저가 방을 나갔을 때, 특히 접속 인원이 모두 방을 떠나거나/게임이 종료되어 메모리 삭제를 해야할 때 확실하게 메시지를 보내주어야 하는 것이다. 따라서, 1. 유저가 대기방 페이지를 벗어나면 '/leave'로 메시지를 보내 전체 접속 유저가 현재 방에서 떠난다는 신호를 보내주고, 2. 마지막 유저 마저 대기방 페이지를 떠나는 것은 방이 삭제되는 것으로 처리해 '/end'로 메시지를 보낸다. const disconnect = () => { console.log('Disconnecting from WebSocket'); if (userStatuses.length ==.. 이전 1 2 다음 목록 더보기
