728x90 반응형 react19 [react]react-query 보호되어 있는 글 입니다. 2024. 1. 10. github로 웹 배포하기 깃허브로 웹배포하기 그 전에 최종 결과물 깃허브에 올리기!!!!!!!!!!!!! 중요!!!!!!!!!! 터미널에 입력! npm i gh-pages (결과물을 깃허브페이지에 업로드 할 수 있게 해줒는 패키지. html,css,javascript 만든 결과물을 도메인을 가진 웹을 배포해줌) 터미널에 입력(시간 쫌 걸림 20~30초정도?) npm run build 이 스크립트를 실행하면 웹사이트의 production ready code 생성 production ready는 코드가 압축되고 모든게 최적화된다는 의미 실행하면 파일안에 build라는 폴더가 생성됨(안에 우리가 작성한것들이 압축되있음) package.json 파일로 다시 이동!!!! 맨밑에서 위 }(중괄호 위에다가) 입력해줘야함 },----- 여기서.. 2023. 5. 17. 스켈레톤 사용법 보호되어 있는 글 입니다. 2023. 3. 23. [react]react-Heroku 서버 배포하기/vercel 웹 배포하기 HEROKU에 가서 회원가입하기 https://www.heroku.com/home Cloud Application Platform | Heroku Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. www.heroku.com 로그인 후 create new app 클릭 나는 movie-server라고 app을 만들었다 Deploy 클릭 Heroku CL. 클릭해서 다운로드 (설치) https://devcenter.heroku.com/articles/heroku-cli The Heroku CLI | Heroku Dev Center L.. 2023. 3. 7. [react]redux-middleware 미들웨어란 미들웨어는 소프트웨어 각 분야에서 세부적으로 다르게 뜻하는데 위키백과에서는 OS(운영체제)와 소프트웨어 중간에서 조정과 중개 역할을 하는 중간 소프트웨어라고 말함. 리덕스 + 미들웨어 리덕스 미들웨어는 리덕스가 지니는 핵심 기능 contextAPI와 차별화되는 부분 서버에있는 값을 받아올때까지 기다렸다가 리듀서 호출 (dispatch({type: "add_todo"})) 리덕스 미들웨어를 사용하면 액션이 디스패치된 다음, 리듀서에서 해당 액션을 받아서 업데이트 하기전에 추가적인 작업을 할수 있음!!!!!!! 추가적인 작업의 예!!! 1. 특정 조건에 따라 액션이 무시되게 만들수 있음 2. 액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있음 3. 액션이 디스패치 됐을 때 이를 수정해서 리듀서.. 2023. 2. 24. [React]todolist(redux사용) 1. 리덕스 모듈 만들기 (액션타입, 액션 생성함수, 리듀서가 포함되어있는 자바스크립트 파일) counter.js 모듈 //액션 타입 만들기 const SET_DIFF = 'counter/SET_DIFF'; const INCREMENT = 'counter/INCREMENT'; const DECREMENT = 'counter/DECREMENT'; //액션 생성 함수 만들기 export const setDiff = (diff) => ({type: SET_DIFF, diff}); export const increase = () => ({type: INCREMENT}); export const decrease = () => ({type: DECREMENT}); //초기상태 선언 const initialState.. 2023. 2. 20. [React]todolist(reducer 사용) components 폴더안에 Header.js 생성 import React from 'react'; const Header = ({input, onChange, addTodo}) => { return ( to do list + ); }; export default Header; components 폴더안에 Todolists.js 생성 import React from 'react'; const TodoLists = ({todos, toggleTodo, removeTodo}) => { return ( {todos.map(todo=>toggleTodo(todo.id)}>{todo.text} {removeTodo(todo.id)}}>삭제)} ); }; export default TodoLists; App.js .. 2023. 2. 20. [React]Todolist(useState사용) App.js import React, { useState } from 'react'; import HeaderInput from './components/HeaderInput'; import Todolist from './components/Todolist'; const App = () => { const [todoState, setTodoState] = useState({ todolist : [ {id: 1, text: "할일1", isDone: true}, {id: 2, text: "할일2", isDone: false} ], InputText: "" }) const [id, setId] = useState(3) const onChange = (e)=>{ //console.log(e) setTodoSt.. 2023. 1. 31. [React]redux 지금까지 usereducer와 usestate로 상태 관리해보았다 이번엔 redux!!!! 참고사이트!!! https://ko.redux.js.org/ Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. ko.redux.js.org redux 설치 npm install react-redux react - redux 설치 npm install react-redux 리덕스 라이브러리!!!!! 같이 사용할 수 있는 언어는 javascript, vue, angular, react와 같이 사용할수 있다 react와는 찰떡임!!!!!!!!!!! redux를 쓰는 이유가.... 1. props 문법 귀찮을때 사용???ㅎㅎㅎ 2. stat.. 2023. 1. 27. [React]multer,postman 보호되어 있는 글 입니다. 2023. 1. 20. [React]Node.js node는 브라우저가 아닌 곳에서도 javascript를 실행할 수 있도록 나온 어플리케이션 우리가 브라우저가 아닌 곳에서도 node.js를 이용하면 javascript를 시행 할 수 있음 폴더 생성 비쥬얼 스튜디오 코드를 연뒤 npm 패키지로 초기화 npm init 결과 test.js console.log("Hello javascript!!"); 터미널에 실행 node test.js 출력값 common JS react를 개발할 때느 ES6를 기반으로 하기에 import와 export를 사용해서 모듈을 불러왔음 Node에서는 기본 채택된 문법이 ES6문법이 아닌 Common JS방식을 사용 React도 Node를 기반으로 함 하지만 내부 빌드 과정에서 ES6를 사용할 수 있도록 변형했다고 볼 수 있음 B.. 2023. 1. 19. [React] react router 설치 & 사용 & hook함수(useParams, useNavigate) 참고 사이트 https://reactrouter.com/en/main Home v6.6.2 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com 리액트 라우터 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링해주는 라이브러리 spa에서 새로운 페이지를 로드하지 않고 하나의 페이지안에서 필요한 컴포넌트만 가져와서 다른 페이지를 나타내는 방식을 지원.. 2023. 1. 18. [React] react Icons 설치, Axios 설치 react Icons 참고 사이트 https://react-icons.github.io/react-icons/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io react Icons 설치 npm install react-icons --save.. 2023. 1. 16. [React] Hook 함수정리3(useReducer) useReducer를 알기전에 상태를 업데이트 할때는 useState를 사용해서 새로운 상태를 설정해주었는데 상태를 관리하게 될 때 useState를 사용하는거 말고도 또 다른 방법 useReducer!!!!! 새로운 상태관리~~ useState는 설정하고 싶은 상태를 직접 설정하고 지정해서 상태를 업데이트했지만 userReducer은 액션 객체를 기반으로 상태를 업데이트함!!!!! dispatch 호출하면 reducer 응답 action은 가지고있는 객체 전달~ reducer는 state 업데이트 Dispatch(Action) =====> Reducer(state, Action)) useReducer() 1) 상태초기화 2) reducer함수 구현 3) 상태와 dispatch 생성 ====> useRe.. 2023. 1. 14. [React] Hooks함수 정리2(useMemo, useCallback) 1. useMemo 리액트 성능 최적화 함수형 컴포넌트는 함수이다 jsx를 반환하는 함수 컴포넌트가 렌더링 되는것은 그 컴포넌트 함수를 호출해서 실행되는 것을 말함 함수가 실행 될 때 함수 내부에 선언된 표현식(변수, 다른 함수)도 다시 선언되어 사용됩니다. 컴포넌트는 자신의 state가 변경되거나 부모에게서 받는 props가 변경될 때 마다 리렌더링 됩니다 예를들어 state.props가 여러가지라면 state1, state2, state3 state1을 리렌더링 시켜주었는데 state2, state3 도 리렌더링 된다면?? 원하는 props만 리렌더링시켜주기 위해 useMemo와 useCallback 함수가 있다 useMemo 란? 컴퍼넌트 성능 최적화에 사용 함수니깐 여기에 정의된 변수도 다시 리렌.. 2023. 1. 13. [React] node-Sass설치 & Styled-component node-Sass 설치 1. node버전에 맞게 설치하기 (8버젼) npm install node-sass@8 2. node sass 제거 npm uninstall node-sass 실습) ScssCompenent.scss //변수 사용하기 $red : #fa5252; $orange: #fd7e14; $yellow: #fcc419; $green: #40c057; $blue: #339af0; $indigo : #5c7cfa; $violet : #7950f2; //믹스인 만들기 @mixin square($size) { $calculated: 32px * $size; width: $calculated; height: $calculated; } .SassComponent { display: flex; .box .. 2023. 1. 13. [React]Hooks함수 정리1(useState, useRef, useEffect, useContext) 용어 정리 ● 렌더(render) : 화면에 그리다(생성) ● 리렌더링/업데이트: 재정의/변경 (변수가 바뀔때는 리렌더링 안함!!!) 변경 하려면!!!!!! 1) 부모요소가 주는 props가 변경 되었을 때!!! 2) 상태가 변경 되었을 때!!!!! ● 마운트 : 화면에 나타남 ● 언마운트: 화면에 사라짐 1. useState 2. useRef 3. useEffect 4. useContext 1. useState useState 가져오기 import React,{useState} from 'react'; 구문) const [number, setNumber] = useState(0) * state생성(구조분해할당) return array[상태, 상태업데이트 함수] = useState(초기값) 배열로 받음(.. 2023. 1. 10. [React]배열 렌더링하기 실습 App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import './App.css'; import IterationSample from './components/IterationSample'; function App() { return ( ); } export default App; Colored by Color Scripter cs IterationSample.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 import React,{useState} from 'react'; const Iterat.. 2023. 1. 6. [React]react 첫걸음 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 리액트(virtual DOM) 메모리에 가상으로 존재하는 DOM 자바스크립트 대표 라이브러리 리액트, 뷰, 앵귤러 리액트 장점 컴퍼넌트 단위 개발(생상성 향상, 유지보수 용이) / (자바스크립트의 클래스를 배웠을때 파일 하나씩 쪼개서 사용해본적 있음) 싱글페이지 어플리케이션(사용자 경험 개선) 높은 인지도 브라우저DOM보다 훨씬 속도 빠름 JSX구문 중요!!!!! 닫혀야 하는 태그(태그는 꼭 닫혀야 합니다.) 하나의 태그로 감싸져 있어야 함.(,) jsx안에 자바스크립트 값사용은 {}감싼다. class지정은 classname속성을 사용 주석 {/*주석 */} 상태 state props : 컴포넌트에게 값 전달하기 props는 object객체임 ex).. 2023. 1. 4. 이전 1 다음 728x90 반응형
