나의라임오렌지원

데탑으로 clone 받아서 yarn start를 쳤는데 yarn 만 쳐도 계속 같은 에러가 떴다 검색해 본 결과, 스크립트 권한 문제라고.. powerShell 을 window 메뉴에서 찾은 다음, 관리자 권한으로 실행 ExecutionPolicy 위의 명령어로 설정 되어있는 현재 스크립트 허용 상태를 확인한다. - Restricted : 모든 스크립트를 막은 상태 - Unrestricted : 모든 스크립트를 허용한 상태 현재 나는 Restricted 상태여서 상태를 바꿔줬다. Set-ExecutionPolicy Unrestricted 그리고 다시 확인 해본 결과, 바뀐 것을 확인할 수 있었다. 다시 VSCode 로 돌아와서, yarn 을 설치하고 yarn start 로 실행까지 성공 참고사이트 htt..

React 프로젝트를 하려고 했는데 create-react-app 순간부터 에러가 발생했다.. 그래서 그냥 프로젝트 다 날리고 다시 찾은 방법으로 다시 install VSCode의 터미널을 사용했다. 1. npm을 통해 yarn 을 설치 npm install -g yarn 2. create-react-app 도구 설치 (신기했음) npm install -g create-react-app 3. 설치됐나 확인 create-react-app -v 4. 프로젝트 생성 npx create-react-app my-react-app 까지 하면, 디렉토리가 새로 생긴다. cd my-react-app yarn start 생성된 디렉토리에 들어가서 yarn start 까지하면 성공 참고사이트 https://malonmim..

함수를 즉시 실행할 수 있는 화살표 함수. 함수가 바로 실행될 줄 알았는데 바로 안됐다. 이유는 js를 불러오는데 useMemo 실행되는 속도가 더 빨라서인지 대충 예상해보며 화살표 방식을 이용하여 함수 즉시실행으로 도움을 받았다. 화살표 함수는 ES6 문법. function 키워드 사용해서 함수를 만든 것보다 간단히 함수를 표현할 수 있다. 화살표 함수는 항상 익명이다. //일반 함수 var foo = function() { console.log("foo"); } var bar = () => console.log("bar"); 나는 () => 를 ()의 화살표에 이어준 함수에 파라미터값으로 넘긴다. 즉 넘겨준다. 라고 이해했다. (개인적 견해) // 매개변수가 없는 경우 var foo = () => c..

봐도봐도 모르겠는 리액트,,,, 라이프사이클을 제대로 이해하지 못한 것 같아 '리액트를 다루는 기술' 책을 참고하여 다시 정리하고자 한다. 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 참고로, 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 함수 컴포넌트에서는 사용할 수 없는데, Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있다. 라이프사이클 메서드의 종류는 총 9가지. Will : 어떤 작업을 작동하기 전에 실행되는 메서드 Did : 어떤 작업을 작동한 후에 실행되는 메서드 이 메서드들은 우리가 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있다. 라이프사이클은 ..

*찾게 된 이유 외부 스크립트 호출 하여 해당 파일에 있는 변수를 사용하고자 했는데, 호출하는 함수가 미처 끝나기 전에 변수를 읽어오는 함수가 시작되어 undefined가 뜨면서 error 발생. 호출하는 함수를 다 끝내고 변수를 읽어오기 위해 찾게 된 방법이다. 사용방법1. const sampleFunc = async () => { const result = await asyncFunc() // asyncFunc 함수는 Promise 객체를 반환한다 console.log(result) } 사용방법2. async function sampleFunc() { const result = await asyncFunc() // asyncFunc 함수는 Promise 객체를 반환한다 console.log(resul..

BrowserRouter 는 history 객체를 자동으로 생성하고, 컴포넌트 단위로 history 객체를 컨트롤하기 때문에 커스텀 작업이 어렵다. 컴포넌트 바깥에서 history 객체를 컨트롤하기 위해서는 BrowserRouter 대신 Router를 사용하고, BrowserHistory 를 별도 생성하여 관리해야 한다. history 객체는 history 모듈에서 createBrowserHistory로 받아 올 수 있다. import { createBrowserHistory } from 'history'; const history = createBrowserHistory(); // 히스토리 객체 반환 const store = configureStore(history); 이렇게 작성해주는 방법과 따로 u..

dangerouslySetInnerHTML 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법. 일반적으로 코드에서 HTML을 설정하는 것은 "사이트 간 스크립팅 공격" 에 쉽게 노출될 수 있기 때문에 위험. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 "dangerouslySetInnerHTML"을 작성하고 " __html " 키로 객체 전달. function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } function MyComponent() { return ; } 참고사이트 https://okayoon.tistor..

React에서 return 문 용법과 겹치는 용법이 바로 "화살표 함수" React에서 함수를 표현할 때 화살표 함수를 쓰는 것은 거의 표준. JSX에서 return문의 용법을 정확히 알아보자 기존의 함수 표현식에서 function 키워드를 삭제하고 인자로 받는 매개변수의 소괄호() 와 코드블록 {} 사이에 화살표 => 만 넣어주면 된다. * 기존 함수 표현식 function abc(a) { return a; } * 화살표 함수 const abc(a) => { return a; } 중괄호 안에 return 문이 있다는 것이 JSX에서 return문의 용법과 헷갈릴 수 있는 부분이다. React 에서 화살표 함수를 기재할 때 () => __ 형식으로 기재하면 return 은 빼도 된다. 그러나 중괄호를 기..

코드 스플리팅을 위해 리액트에 내장된 기능으로 유틸 함수인 React.lazy와 컴포넌트인 Suspense가 있다. 이 기능은 리액트 16.6 버전부터 도입. 이전 버전에서는 import함수를 통해 불러온 다음, 컴포넌트 자체를 state 에 넣는 방식으로 구현해야 한다. React.lazy와 Suspense를 사용하면 코드 스플리팅을 하기 위해 state를 따로 선언하지 않고도 간편하게 컴포넌트 코드 스플리팅을 할 수 있다. * 코드 스플리팅(Code Splitting)? 코드 분할이다. 싱글 페이지 애플리케이션의 성능을 향상시키는 방법. 코드 분할을 활용하게 되면 초기 로딩시에 모든 웹 자원을 다운받지 않고 필요한 시점에 다운 받아 성능상의 이점이 생긴다. React.lazy 컴포넌트를 렌더링하는 시..

useMemo 를 사용하면 함수 컴포넌트 내부에서 발생하는 연산 최적화 가능 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식. useCallback 은 useMemo 와 비슷한 함수. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용. 이 Hook을 사용하면 만들어 놨던 함수를 재사용 가능하다. useCallback 의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 된다. 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 한다. 함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 한다. 추가 내용 [2022.11...