react 14

[React Error] 프로젝트 이름 에러 ( name can no longer contain capital letters..)

Blog를 만들려고 npx 명령어를 쳤는데 계속 저런 오류가 나왔다. Cannot create a project named "Blog-Page" because of npm naming restrictions: * name can no longer contain capital letters Please choose a different project name. 알고보니 npm 네이밍에서는 대문자나 특수문자를 입력하지 말라고 되어있다. 너무 허무한 에러 . . 잘 확인하길 바란다.

에러해결하기 2022.06.13

[React] SPA(Single Page Application)를 Q&A방식으로 알아보자!

리액트 홈페이지를 클론하려던 중 라우팅방법을 이해하기 위한 SPA에 대한 지식이 부족한것 같아 알아보게 되었다. SPA ? - 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다. - 뷰 렌더링을 사용자의 브라우저가 담당하게 하고 , 우선 애플리케이션을 브라우저에 불러와 실행시킨 후 사용자와의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트해준다. - 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용 Q. 왜사용해요 ? 기존페이지는 다른페이지로 이동할 때마다 새로운 html을 받아오고 , 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주었다. 하지만 매번 새로운 화면을 보여주면 성능상의 문제가 발생할..

FE/REACT 2022.06.11

[React - Hook] useEffect을 사용해 시계만들기

useEffect 란 ? - 어떤 컴포넌트가 마운트,업데이트,언마운트 될 때 특정 작업을 처리할 때 사용 - Side effect를 수행하기 위한 Hook react에서의 Side effect란? → 서버에서 데이터를 불러오거나, 수동으로 Dom을 변경하는 등의 활동 → 즉 해석을 영향이라고 하면된다, - 사용법 useEffect(이펙트 함수()=>{ //작업.. return () =>{ //컴포넌트가 언마운트될 때, 또는 다음 렌더링시 불릴 useEffect가 실행되기 이전에 실행 } },[의존성 배열]); 의존성 배열? 말 그대로 effect가 의존하는 배열! 이 배열이 변경되면 effect 함수가 실행된다. Q1 .의존성배열을 생략하면 ? - 컴포넌트가 업데이트 될 때마다 호출 Q2. 이펙트 함수를..

FE/REACT 2022.06.09

[React] 리액트란 무엇일까? (React 특징들)

React.js란 ? - 자바스크립트 라이브러리이다. - facebook에서 주도하고 있는 오픈소스 프로젝트로, facebook과 instagram에 사용된다. React의 특징 1. MVC패턴중 V(View)를 구현하는 라이브러리이다. 참고 : 하지만 MVC패턴을 사용하여 대규모 애플리케이션을 사용하면 너무 빠르고 복잡해진다는 단점이 있다. 이를 해결하기 위해 Fulx 아키텍처를 적용하여 보안한다. (Fulx 부분은 나중에 다뤄보도록 . . .) 2. 가상돔(Virtual DOM)을 사용하여 웹 애플리케이션의 성능을 극대화 시킨다. Q. 어떻게 성능을 극대화 시킬까 ? 리액트는 리플로우와 리페인트가 자주 수행되는 문제를 해결하기 위해 화면에 표시되는 DOM과 동일한 DOM을 메모리상에 만들고, DOM ..

FE/REACT 2022.06.08