javaScript&jQurey/REACT (19) 썸네일형 리스트형 리액트(React) 활용을 위한 Node.js 설치하기 이걸 이제야 올리냐 ;; Node.js는 Javascript로 작성된 프로그램을 운영체제상에서 일반 애플리케이션 프로그램처럼 실행시켜주는 런타임입니다. 특히, 서버 프로그램을 작성하는데 많이 사용되고 있는것 같습니다. React를 사용해보기 위해서 설치해 봅니다. Node.js 한글 사이트는 https://nodejs.org/ko/ 입니다. 설치 파일을 다운로드 받습니다. 현재 최신 버전은 17.7.1이네요. 저는 16.14.1 LTS 버전은 다운받아 설치합니다(LTS는 Long Term Support의 약자로 오랫동안 지원하는 버전을 말합니다). 다운로드 받은 파일은 node-v16.14.1-x64.msi 이고, 크기는 27.1MB 정도 입니다. Node.js 다운로드 페이지 다운받은 파일을 더블클릭하.. 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다 해결방법 create-react-app으로 만든 package.json이 있는디렉토리에서 yarn add react-scripts nap install -save react-scripts 혹은 yarn upgrade 명령어를 실행시켜주면 된다고 한다. 이것도 안되면 전역 변수로 yarn add global react-scripts npm install -g react-scripts 이렇게 해주면 된다고 합니다. 출처 : https://thespoiler.tistory.com/21 vscode 에서 npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다.. VsCode 기본 터미널이 PowerShell 로 설정돼있기 때문이라는데 PowerShell 이면 왜 안되는 거지;;; 해결방법은 간단하다. 1. ctrl +shift + p 로 아래 창을 띄워준다 terminal: select default profile terminal: select default profile 검색 후 클릭 그 후 터미널을 닫고 다시 실행 하던가 터미널 창 우측 상단 + 버튼으로 추가해준다. 이래도 안되면 vscode 전부 껐다가 켜주면 npm 인식이 된다 [React] 7. React hooks[3] - useReducer란? 7. React hooks[3] - useReducer란? 이번 포스팅은 [ React hook 중 useReducer에 대한 내용 ] 입니다. : ) https://ko.reactjs.org/docs/hooks-effect.html 1. useReducer 훅이란? - useState를 대체할 수 있는 함수이다. - React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 state이다. - 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용할 수 있다. ( 콜백대신 dispatch를 전달할 수 있기 때문이라고 볼 수 있는데, 이 부분은 이후 확인해 보자. ) - reducer는 이전 상태와 Action을 합쳐, 새로운 state를 만드는 조작을 말한다. ※ useRe.. [React] 7. React hooks[2] - useEffect란? 이번 포스팅은 [ React hook 중 useEffect에 대한 내용 ] 입니다. : ) https://ko.reactjs.org/docs/hooks-effect.html 1. useEffect 훅이란? - 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. - 리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다. 1) 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었다. 2) 즉, 라이프사이클 훅을 대체할 수 있게 되었다. (componentDidMount, componentDidUpdate, componentWillUnmount) - 컴포넌트가 마운트 됐을 때 (처음 .. [React] 6. React Router (리액트 라우터) 사용하기 6. [React] 6. React Router (리액트 라우터) 사용하기 이번 포스팅은 [ React에서 페이지 이동 처리 하는 방법 ] 입니다. : ) 우리가 흔히 말하는 "페이지 이동"이라는 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다. 라우팅이 무엇인지 간단하게 살펴보자. 1. 라우팅이란? - 간단하게 생각 하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다. - 리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 쓰이는 리액트 라우터(React Router)를 사용해보려 한다. ※ SPA, SSR, SSG 등의 대한 개념을 어느정도 갖춘 상태에서 다음 내용을 진행하는것을 추천 한다. 리액트는 SPA (Single Pag.. [React] 4. React 컴포넌트(5) - map() 반복문, 배열 컴포넌트 4. React 컴포넌트(5) - map() 반복문, 배열 컴포넌트 사용하기 이번 포스팅은 [ React 반복문 사용하기 ] 입니다. : ) https://ko.reactjs.org/docs/lists-and-keys.html 0. 들어가기 앞서 - 어떨때 map 함수를 쓰면 좋을까? 앞으로 알아가겠지만 for문, 반복문을 대체하여 사용한다면 아주 유용하다. 간단히 형태 살펴보고 자세히 알아보도록 하자. ex) for문 const numbers = [1, 3, 5] for (let i = 0; i < numbers.length; i++) { console.log(numbers[i]) } ex) map() const numbers = [1, 3, 5]; const listItems = numbers.map.. [React] 4. React 컴포넌트(4) - 이벤트 처리 방법 4. React 컴포넌트(4) - 이벤트 처리 방법 이번 포스팅은 [ React에서 이벤트 handling 하는 방법 ] 입니다. : ) 1. 컴포넌트에서 DOM 이벤트 사용 - 컴포넌트에서 출력된 특정 DOM 객체에 이벤트 컴포넌트가 동작하기 위해선 DOM이벤트 프로퍼티를 사용해야 한다. - 우리가 흔히 쓰고 있는 HTML 엘리먼트의 이벤트들은 JSX내에서 'on + 이벤트명' 형태의 프로퍼티로 제공된다. ex) 프로퍼티 샘플 이벤트 명 JSX DOM 이벤트 프로퍼티 이벤트 호출 시점 click onClick 엘리먼트에 마우스나 키보드가 클릭 된 경우 change onChange 엘리먼트의 내용이 변경된 경우 submit onSubmit 폼의 데이터가 전송될 때 keydown onKeyDown 키보드 .. 이전 1 2 3 다음
