Web59 [React] i18n으로 다국어 지원하기 (i18next, react-i18next) 프로젝트에서 다국어 지원 기능을 적용하게 되었다. 나는 다른 분이 만들어 놓은 것을 적용만 했지만 해당 라이브러리를 어떻게 사용하는지 궁금해서 알아보기로 했다. 처음에는 브라우저에서 지원하는 한영변환인줄 알았는데, 그냥 서비스 안에서 따로 구현된 것이었음,, 그래서 제공될 다국어도 json으로 직접 작성해야 한다! 프로젝트에서는 라이브러리 i18n 을 사용했다. Introduction - react-i18next documentation Hello {{name}} , you have {{count}} unread message(s). Go to messages. react.i18next.com i18next 라는 라이브러리와 이를 react에서 아주 쉽게 사용하도록 만들어진 react-i18next를 설.. 2023. 10. 22. React를 위한 상태관리 라이브러리 - Recoil https://recoiljs.org/ko/docs/introduction/installation 설치 | Recoil NPM recoiljs.org Recoil? 2020년에 Facebook에서 발표한, React 전용 상태관리 라이브러리이다. Recoil을 통한 상태관리는 아주 간결하다는 장점이 있다. Redux의 경우 Flux 패턴을 사용하여 안정적으로 상태관리가 가능하지만, React 전용 라이브러리가 아니다. 초기 세팅이 요구된다. 비동기 데이터를 사용하려면 추가적인 라이브러리 설치가 필요하다. 많은 양의 **보일러플레이트 코드를 작성해야 한다. 는 단점을 가지고 있기도 하다. Recoil은 이러한 단점을 보완한다. ** Boilerplate Code : 변화 없이 여러 군데에서 반복되는 코드 .. 2023. 9. 12. [모던 자바스크립트] 38장 브라우저의 렌더링 과정 ** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링(출력)하는지 살펴보자. 브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다. HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저의 렌더링 엔진은 응답된 HTML, CSS를 파싱하여 DOM, CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다. 브라우저의 자바스크립트 엔진은 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 .. 2023. 8. 6. [모던 자바스크립트] 26장 ES6 함수의 추가 기능 ** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. 26.1 함수의 구분 ES6 이전까지 자바스크립트의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다. ES6 이전의 함수는 다음과 같이 활용될 수 있었다. 자바스크립트의 함수는 일반적인 함수로서 호출할 수 있다. new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성자 함수로서 호출할 수 있다. 객체에 바인딩되어 메서드로서 호출할 수도 있다. ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있다. var foo = function () { return 1; }; // 일반적인 함수로서 호출 foo(); // -> 1 // 생성자 함수로서 호출 new foo(); // -> foo {} // 메.. 2023. 7. 25. [모던 자바스크립트] 16장 프로퍼티 어트리뷰트 ** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. 16.1 내부 슬롯과 내부 메서드 앞으로 프로퍼티 어트리뷰트를 이해하기 위해서는 내부 슬롯과 내부 메서드의 개념에 대해 알아야 한다. 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호( [[…]] )로 감싼 이름들이 내부 슬롯과 내부 메서드다. 조금 쉽게 이해해보자면 ECMAScript 문서에서 자바스크립트 내부의 동작을 설명하기 위한 가상 메서드이다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 .. 2023. 7. 24. [모던 자바스크립트] 15장 let, const 키워드와 블록 레벨 스코프 ** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. ES5 까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 다음과 같은 특징이 있다. 15.1 var 키워드로 선언한 변수의 문제점 var 키워드로 선언된 변수는 다음과 같은 특징이 있다. 15.1.1 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화 문이 있는 변수 선언은 var 키워드가 없는 것 처럼 동작한다. var x = 100; // 초기화 문이 없는 변수 선언문은 무시한다. var y; consol.. 2023. 7. 24. 페이지를 떠날 때 안정적으로 요청 보내기 - sendBeacon 웹소켓을 활용한 실시간 게임을 제작했다. 사용자가 페이지를 새로고침 하거나 브라우저를 닫았을 때, 서버 단에 사용자가 퇴장한다고 알리는 요청을 보내야 했다. 요청을 안정적으로 전송하기 위해서 Navigator에서 제공하는 sendBeacon을 사용하기로 했다. 일반적인 API 요청은 사용자가 브라우저를 닫을 때 요청이 전송되는 것을 보장하지 않는다. sendBeacon으로 전송된 요청은 실제 에이전트에 의해 대기열에 존재하기 때문에 네트워크에 연결이 되어있기만 하면 데이터가 전송된다. [참고 문서] Navigator: sendBeacon() method - Web APIs | MDN The navigator.sendBeacon() method asynchronously sends an HTTP POST .. 2023. 5. 21. [Next.js] layout에서 dynamic 사용하기 (13 버전) 현재 웹소켓을 활용한 실시간 게임 웹 서비스를 만들고 있다. 사용자가 웹소켓에 연결한 이후에 새로고침을 하거나 페이지를 떠날 때, 서버 측에 이 사용자의 토큰을 보내 퇴장을 알려야 한다. 서버에 보내 주어야 하는 내용은 다음과 같다. 여기서 저 roomId는 redux의 guestSlice에서 관리되고 있다! (useSelector를 사용해야함) 사용자가 어느 페이지에 있든 상관없이 적용되어야 하므로 layout.tsx에 작성했다. import './globals.css'; import { Inter } from 'next/font/google'; import { Providers } from '@/store/provider'; import { SocketProvider } from '../context.. 2023. 5. 12. [Next.js] Server Component & Client Component [공식문서] Rendering: Fundamentals | Next.js Learn the fundamentals of rendering in React and Next.js. beta.nextjs.org 13 버전부터는 컴포넌트 단위(server/client)로 렌더링 방식을 규정한다 Server Component : 서버에서 빌드가 될 때 실행이 되는 컴포넌트 app 폴더에 있는 모든 컴포넌트는 기본적으로 server 컴포넌트이다 서버 상에서는 '안녕'이라는 로그가 보이지만, 브라우저의 콘솔에는 아무것도 찍히지 않는 것을 볼 수 있다. 외글얼까?.. 1. 서버 컴포넌트는 서버에서 실행이 된다. 2. 코드는 서버에서 실행이되어서 pre-rendering 된 HTML 형태로 브라우저에게 전달된다. => .. 2023. 4. 26. [Next.js] 개발환경 설정 기본적으로 리액트 개발 환경과 동일하다 - 코드 에디터 - nodeJS - GIT nvm으로 node version 업데이트하기 더보기 nvm 설치 https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com node 버전 목록 확인하기 원하는 node 버전 설치하기 사용하고자 하는 node 선택하기 [공식문서] Next.js by Vercel - The React Framework for the Web Used.. 2023. 4. 25. 이전 1 2 3 4 ··· 6 다음
