React/React 2023
-
Vue 3-1 웹팩 사용하기React/React 2023 2023. 2. 6. 13:32
사용할 폴더로 들어간다 npm init 아래와 같이 나오는데 이름을 정해주면 된다. 나머지는 일단 다 엔터 package.json파일이 생긴다 (내가 쓰는 패키지-남의 소스코드) 몇버전 어떤걸 썼는지 기억하기 위해 vue 설치 npm install vue 이제 스크립트 안씀 웹팩 설치 npm i webpack webpack-cli -D //웹팩이랑 웹팩cli를 설치한다. //-D 혹은 --save-dev를 통해 개발용으로만 설치하겠다 같은 폴더에 webpack.config.js파일을 생성 // node에 module을 만든 것 이렇게 만든 모듈을 웹팩 처리를 하는데 사용됨 웹팩 설정을 넣으면 됨 module.exports = { // 대표가 되는 파일 entry: { // 하나로 합쳐질 파일의 이름 ap..
-
React 002-1 State,EventReact/React 2023 2023. 1. 2. 11:37
그동안 정적인 어플리케이션은 만들었다 이제는 상호작용하는 동적인 애플리케이션을 만들어보자! 이벤트 리스닝, 이벤트 핸들러 모든 on props 즉 모든 이벤트 핸들러 props는 값으로 함수가 필요하고 이런 on props에 전달된 함수는 이벤트가 발생했을 때 실행되너야 한다. ... const ExpenseItem=(props)=> { const clickHandler=()=>{ console.log('Clicked!!') } return ( ... Change Title ... 이벤트 이름을 지을 때 이벤트에서 트리거 퇴고 핸들러로 끝나게 만드는 게 좋다. clickHandler State state는 리액트에만 특화된 것은 아니지만 리액트에서 아주 중요한 개념이다. useState는 가장 중요한 리..
-
React001-3 리액트 기초 및 연습React/React 2023 2022. 12. 31. 09:09
섹션3-리액트 기초 및 연습 컴포넌트 리액트의 A-Z 모든 사용자 인터페이스들은 컴포넌트로 구성된다. 웹사이트에서 몇가지 빌딜 블록을 확인할 수 있다. 그중에서도 같은 아이템이 반복되는 것들을 볼 수 있는데같은 아이템이지만 다른 데이터를 다루는 아이템들을 볼 수 있다. 이것들이 다 컴포넌트이고 사용자 인터페이스에서 재사용할 수 있는 빌딩 블럭이다. 재사용이 가능 컴포넌트 안에 다른 컴포넌트들이 들어갈 수 있다. 컨테이더, 버튼, 입력창, 출력값 등등 컴포넌트는 어떻게 만들어 지는가? 모든 컴포넌트는 html css js를 합쳐 만드는 것이다. 선언적 접근방식으로 만들어진다. - 항상 원하는 최종상태, 목표상태 또는 다양한 상황에 따라 다른 목표상태를 정의하는 것이 중요하다. 자바스크립트에서 하는 것처럼 ..
-
React 001-2 리액트에 많이 사용되는 자바스크립트React/React 2023 2022. 12. 31. 04:28
섹션2-자바스크립트 복습 let, const var에 더해 es6에서는 let과 const가 추가되었다. let - 값을 수정할 수 있는 변수를 정할 때 사용 const - 한번 지정하면 변하지 않는 변수를 지정할 때 사용 화살표 함수 자바스크립트 함수를 생성하는 또다른 방법 전통적인 방법 function myFnc(){ ... } 애로우 펑션 const myFnc=()=>{ ... } 화살표 함수 안에 this를 사용하면 언제나 원하는 목표를 지정 할 수 있게 된다. const printMyName = (name) =>{ console.log(name); } printMyName('Sloth') //결과 "Sloth" 인수가 하나만 있다면 선언할 때 괄호를 없애도 되고 함수를 한줄로 짧게 만들 수 도 ..
-
React 001-1 리액트란?React/React 2023 2022. 12. 31. 00:53
섹션1-시작하기 리액트란 무엇인가? https://reactjs.org/ React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org 넷플릭스 웹사이트를 보면 잘 알 수 있다. 모바일앱처럼 페이지를 돌아가는데 깜빡이며 기다릴 필요 없이 부드러운 진행을 보여준다. 전통적인 웹사이트에서는 새로 html페이지를 호출하고 로딩했지만 이렇게 하지 않아도 되는 것. JS와 React 사용자들이 보는 것을 조작할 수 있다. js에서는 DOM을 통해 화면을 보이게 할 수 있다. 리액트는 자바스크립트의 라이브러리이기 때문에 DOM을 사용해 화면을 구현할 수 있다. 왜 ..