728x90 반응형 react21 react-dom의 root.render()를 여러 번 호출하면 어떤 일이 생길까? 현재 회사에서 chrome extension을 React를 사용해 개발하고 있다. extension에서는 manifest.json의 content_scripts를 통해, 실행 시 자동으로 js 파일을 동작하게 할 수 있다. → 실행할 content-sciprts 파일에서 react를 사용해 페이지를 그려주면 되는 것. // content-script.ts import React from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; const rootElement = document.createElement("div"); document.body.appendChild(rootElement); const ro.. 2024. 1. 4. useReducer useReducer 왜? 사실 현재 운영 중인 서비스에서 useReducer를 굳이 사용할 필요를 느끼지 못했다. 앵간한 상태는 useState와 Redux를 통해 관리했고... 결정적으로, reducer의 강점인 이전 값에 의존적인 상태의 업데이트가 필요한 경우가 딱히 없었기 때문! 하지만 최근 리팩토링 및 안정성에도 신경을 쓰면서, useReducer를 적재적소에 사용해 setter를 직접적으로 노출시키지 않음 + 익명 함수 호출X 등의 이점을 챙겨가고자 한다! reducer 너무 유용하게 사용되는 reduce 메서드! Array.prototype.reduce() 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환한다. useState 앱에서 빈번히 이뤄지는.. 2023. 8. 15. useTransition hooks when? 일반적인 경우 우리는 상태가 업데이트 되었을 때, 이것이 화면에 즉시 반영되길 원한다. 하지만 업데이트가 화면에 반영되는 것을 연기해야할 때도 존재할 수 있다. ex) 한 페이지에서 다른 페이지로 이동 시, 다음 화면에 표시될 데이터가 load되지 않았을 경우 → 바로 다음 페이지로 넘어가기보다, 이전 화면에 오래 머무는 것이 더 나은 사용자 경험 (이러한 패턴 구현이 이전 React에서는 쉽지 않았다고 한다) React 18의 Concurrent mode → 이를 위한 새로운 tools 제공! useTransition hooks 1. 실제로 Concurrent 모드를 사용하고 있는지 확인 - 해당 Concurrent 모드 동작을 위해 ReactDOM.createRoot()보다, ReactDO.. 2023. 8. 15. CRA에 Next.js 적용하기 3 - Next.js 기본 구조 - AWS Amplify 배포 관련 이슈 1. Artifact directory doesn't exist: build build란 디렉터리를 찾지 못해 발생하는 에러. next build를 실행하면 .next라는 파일에 서버/클라이언트에게 제공될 build 파일이 생성되는데... → Amplify 측에서 build 디렉터리가 없다고 판단해버린다. - 해결책 yarn build시 .next란 폴더 말고 build라는 폴더에 build 하면 해결. next.config.js 폴더에 다음을 추가해 custom할 수 있다. 2. Non-Zero Exit Code detected 에러 코드 자체는 build 파일 내 강제 exit 코드가 있어 build가 중지되어 발생한 것. but .. 2021. 5. 14. CRA에 Next.js 적용하기 2 2021.05.13 - [Frontend/React] - CRA에 Next.js 적용하기 1 CRA에 Next.js 적용하기 1 첫 단추는 언제나 중요하다. 개발 전 CTO님이 말씀하신 "SSR이 어쩌고... 검색 엔진이 어쩌고..." 그때는 별생각 없이 흘려 들었더랬다. 이제야 문제를 깨닫고 SSR을 적용시키려하는데... 여기서 문제 23life.tistory.com Next.js가 어찌 돌아가는지 대...충이나마 감을 잡았으니! CRA으로 만든 기존 앱에 이를 적용시켜보자. 1. 기본 환경 설정 이전에 썼던 글을 참고! → 설치 및 package.json 수정, pages폴더 생성까지 진행하면 된다. 2. 구조 변경하기 한번 더 짚고 넘어가자면... Next.js는 기본적으로 최상위 루트의 pages.. 2021. 5. 13. CRA에 Next.js 적용하기 1 첫 단추는 언제나 중요하다. 개발 전 CTO님이 말씀하신 "SSR이 어쩌고... 검색 엔진이 어쩌고..." 그때는 별생각 없이 흘려 들었더랬다. 이제야 문제를 깨닫고 SSR을 적용시키려하는데... 여기서 문제, 이미 프로젝트는 CRA을 바탕으로 개발이 끝난 상황! 따라서 어쩔 수 없이 기존에 작성된 코드에 Next.js를 입혀야 한다. 으악. CRA에 Next.js 적용하기 1. 필요 모듈 설치 일반적으로는 create next-app을 통해 기초 세팅을 자동으로 진행한다. 하지만 이미 CRA으로 애플리케이션을 제작한 상태이므로... 손수 설치해주자. react, react-dom, next를 add 해주면 된다. 2. 기본 환경 설정 Next.js는 pages라는 폴더를 필요로 한다! → 요 pages.. 2021. 5. 13. API 요청으로 데이터 사용하기 React로 인스타 클론 코딩을 하던 와중, User 정보가 담긴 데이터가 있으면 좋겠다는 생각이 들었다. 그렇다고 직접 Object들을 담은 Array를 만들(수는 있겠지만)고 싶지는 않으니, User 데이터를 가진 서버에 API 요청을 보낸 후 이를 사용해보고자 했다. (API : https://jsonplaceholder.typicode.com/users) 이전에 책에서 했던 외부 API 연동 부분을 참고하면 되겠군! 2021.03.18 - [Frontend/React] - 리액트를 다루는 기술 _ 14장 리액트를 다루는 기술 _ 14장 눈 깜짝하니 목요일이다. 14장. 외부 API를 연동하여 뉴스 뷰어 만들기 지금까지 배운 것을 바탕으로 뉴스 뷰어 프로젝트를 진행해 볼 예정! 전체 흐름은... 1.. 2021. 3. 26. 리액트를 다루는 기술 _ 21장 내게는 Django 뿐일 줄 알았는데... 21장. 백엔드 프로그래밍 : Node.js 웹 애플리케이션을 만들 때, React와 같은 프론트엔드 기술만으로 필요한 기능을 모두 구현할 순 없다. 왜? 데이터를 여러 사람과 공유하려면... 저장할 공간이 필요하니까! 이를 위해 우리는 서버를 만들어 데이터를 저장해 여러 사람과 공유한다. 그러나 서버에 데이터를 무작정 담는 것은 아니다! → 이러한 규칙을 지정하는 것이 백엔드(서버) 프로그래밍이라 생각하면 좋을 듯! 21-1) Node.js 알아보기 Node.js는? 웹 브라우저뿐만 아니라 서버에서도 JS를 사용할 수 있는 런타임! Node.js 환경에서 웹 서버를 구축할 때는 보통 Express, Hapi, Koa 등의 웹 프레임워크를 사용한다. 여기서는 K.. 2021. 3. 23. 리액트를 다루는 기술 _ 16장 이제 50% 다 와간다... 와우! 16장. 리덕스 라이브러리 이해하기 앞서 얼핏 들었던 리덕스! React 상태 관리에서 가장 많이 사용되는 녀석이다. 16-1) 개념 정의하기 난생처음 접하는 여러 키워드들이 등장한다..! 1. 액션 상태에 어떤 변화가 필요하면 액션(action)이란 것이 발생한다. 얘는 하나의 객체 형태며 { type: 'TOGGLE_VALUE' } 요런 형식으로 이뤄져 있다. 액션 객체는 type 필드를 반드시 가지고 있어야 하며(얘를 액션의 이름이라 생각하면 된다), 그 이외에는 이후 상태 업데이트를 할 때 참고해야 할 값들이 들어간다. (작성자 임의로 넣으면 됨!) { type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' } } { type: .. 2021. 3. 19. 이전 1 2 3 다음 728x90 반응형
