Nevertheless

{isCorrect && navigate("/guessnumber/result", { state: { message: `축하합니다! ${ 10 - attempts } 번 만에 정답을 맞혔습니다!`, },})}숫자 맞히기 게임을 구현 중에, 정답을 맞혔을 경우에는 navigate 를 통해 결과를 조회할 수 있는 페이지로 이동하려고 했는데, 'Cannot update a component while rendering a different component' 라는 에러가 발생했다. 🔬 문제 분석문제의 원인을 찾아보니, 렌더링 중에 상태를 변경하는 것을 React 에서 허용하지 ..

상식 퀴즈 부분에서 데이터 파일에 약 30개 정도의 문항을 객체 배열로 저장을 해두고, 이 배열에서 10개의 문항을 랜덤 추출을 해서 퀴즈를 구현하고자 했다.export function getRandomQuestions(questions, count = 10) { return [...questions] .sort(() => Math.random() - 0.5) .slice(0, count);}원래의 방식은 위와 같은 알고리즘으로 하고 있었다. gpt 의 추천으로 별 생각 없이 하고 있었는데, 뭔가 프로그램을 여러 번 돌려보면 자꾸 나왔던 문제들만 계속 나오는 듯한 느낌이 있었고, 이 부분을 개선해야겠다는 생각이 들었다. 🔬 문제 분석array.sort((a, b) => Math.rando..

function App() { return ( {/* 가운데 정렬 레이아웃 적용 */} }> } /> } /> {/* 레이아웃 적용하지 않는 페이지 */} } /> );} 화면의 가운데 정렬을 적용할 부분과 적용하지 않을 부분을 나누는 과정에서 오류가 생겼다. 레이아웃을 적용하지 않는 페이지를 따로 나누기 이전에는, 오류가 생기지 않았는데 분기를 하고 나니 Layout 내부 라우트들이 렌더링이 안되는 문제가 발생했다. 🔬 문제 분석export default function Layout({children}) { return ( {chil..

상식 퀴즈 부분에서 답변을 작성하고 제출을 할 때새로고침을 하자마자 결과 화면이 뜨는 현상클릭도 안 했는데 오답/ 정답이 나오는 현상위와 같은 문제가 발생했다. 🔬 문제 분석처음에 이와 같이 제출 버튼의 onClick 이벤트를 설정해놔서 오류가 생긴 것이었다. 이건 "클릭했을 때 실행해줘" 가 아니라, "지금 이 자리에서 실행한 결과를 onClick 에 넣어줘" 라는 뜻이라고 한다. 이와 같이 하면 화면이 렌더링 하는 순간 즉시 실행이 되고, 아직 버튼을 누르지도 않았는데 handleSubmit 가 실행돼버린다. 그래서 결과값으로 undefined 가 onClick 에 들어가게 되고, 아직 문제의 답을 제출하지도 않았는데 화면에는 "오답" 이라는 결과 화면이 나오게 되는 문제가 발생하게 된다. ➡..

useRef새로운 Reference 객체를 생성하는 기능const refObject = useRef()리액트에서 컴포넌트가 리렌더링될 때마다 초기화되지 않고 값을 계속 유지하고 싶을 때 사용또는 DOM 요소에 직접 접근할 때 사용useRef 와 useState 의 차이useRef 로 관리하는 값이 변경되어도 컴포넌트가 리렌더링 되지 않는다. 그래서 화면에 반영이 필요한 값은 보통 useState로, 그렇지 않으면 useRef 로 관리한다. ▶️ 즉, useRef 는 리렌더링과 무관하게 값을 기억하거나, 화면 요소에 직접 접근해야 할 때 매우 유용하다. const inputRef = useRef();const onSubmit = () => { if(input.name===""){ // 이름을 입력하..

state 현재 가지고 있는 형태나 모양을 정의, 변화할 수 있는 동적인 값function App(){ const [state, setState]=useState(0); return ( {state} {setState(state+1);}}> + )} Q. 왜 변수에 값을 넣고 변경하는 것이 아니라 굳이 state 를 사용할까? 예를 들면, let light = "off" 와 같이 변수에 값을 지정해두고, 버튼을 클릭하면 light 의 값을 "on" 으로 변경하는 형식이 아닌, useState 를 사용하여 상태를 변경하는 이유는 React 컴포넌트는 변수가 아니라 state 값이 변경됐을 때만 리렌..

라이프사이클(LifeCycle) = 생애주기 Mount => Update => UnMount Mount탄생컴포넌트가 탄생하는 순간화면에 처음 렌더링 되는 순간Update컴포넌트가 다시 렌더링 되는 순간리렌더링 될 때를 의미UnMount컴포넌트가 화면에서 사라지는 순간렌더링에서 제외되는 순간을 의미 useEffect리액트 컴포넌트의 사이드 이펙트를 제어하는 리액트 훅 사이드 이펙트: 컴포넌트 동작에 따라 파생되는 여러 효과useEffect(()=>{ console.log(`count:${count}`);},[count,input]);// 의존성 배열// dependency array// 의존성 배열 내의 값이 바뀔 때마다 콜백 함수를 실행 useEffect 로 라이프사이클 제어하기 1. 마운트 : 탄생us..

최적화란?웹 서비스의 성능을 개선하는 모든 행위를 일컫는다.아주 단순한 것부터 아주 어려운 방법까지 매우 다양일반적인 웹 서비스 최적화 방법서버의 응답속도 개선이미지, 폰트, 코드 파일 등의 정적 파일 로딩 개선불필요한 네트워크 요청 줄임 등등 .. React App 내부의 최적화 방법컴포넌트 내부의 불필요한 연산 방지컴포넌트 내부의 불필요한 함수 재생성 방지컴포넌트의 불필요한 리렌더링 방지 useMemo : "메모이제이션" 기법을 기반으로 불필요한 연산을 최적화 하는 리액트 훅: 값, 계산 결과를 메모이제이션 Memoization 이란? : 프로그래밍에서 동일한 연산을 반복적으로 수행해야될 때 매번 결과값을 새롭게 계산하도록 만드는게 아니라 대신에 최초로 한 번 계산했을 때의 결과값을 메모리 어딘가에..

React.js 란? Meta(Facebook)가 개발한 오픈소스 자바스크립트 라이브러리 대규모 웹 서비스 UI 를 더 편하게 개발하기 위해 만들어진 기술기술적인 특징 1. 컴포넌트를 기반으로 UI 를 표현한다.컴포넌트 : 화면을 구성하는 요소, UI 를 구성하는 요소를 말함2. 화면 업데이트 구현이 쉽다.업데이트: 사용자의 행동에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것선언형 프로그래밍: 과정은 생략하고 목적만 간결히 명시하는 방법 => 업데이트 구현이 쉽다. (↔️명령형 프로그래밍)업데이트를 위한 복잡한 동작을 직접 정의할 필요 없이 특정 변수의 값을 바꾸는 것 만으로도 화면을 업데이트 시킬 수 있다. 3. 화면 업데이트가 빠르게 처리된다. 자바스크립트가 DOM 을 수정하면 업데이트가 ..

Node.js: 자바스크립트 실행 환경(Run time) = 구동기: 아주 단순한 상호작용만 개발할 수 있었던 언어인 JavaScript 를 범용적으로 사용할 수 있도록 도와주는 자바스크립트의 실행환경, 즉 런타임 , 리액트 또한 node.js 기반으로 동작하는 기술 npm: Node package manager: Node.js 의 프로젝트 단위인 패키지를 관리하는 도구: 새로운 패키지 생성 / 외부 라이브러리 설치 또는 삭제 등의 유용한 기능 제공 패키지: node.js 에서 사용하는 프로그램의 단위 JavaScript 의 모듈 시스템 모듈 시스템 : *모듈을 다루는 시스템 , 모듈을 생성하고 불러오고, 사용하는 등의 모듈을 다루는 다양한 기능을 제공한다. * 기능별로 나어진 각각의 자바스크립트 파일들..