Category: 수업내용

CSS 모듈 부모-자식 관계가 아닌 형제 관계인데도 한쪽의 적용한 CSS가 다른 형제 쪽에도 적용이 된다. 즉, 다른 위치의 CSS여도 같은 이름이 있다면 하나로만 적용된다. 그래서 모듈처럼 css 파일이름을 A.css 가 아닌 A.module.css 처럼 바꾸고 적용할 jsx에도 import styles from ‘css위치’로 받아와서 <태그이름 className={styles.class이름}>와 같이 들고 오면 이름이 같아도 서로 각각 들고온다. 여러개를 할 경우 className={`${styles.class이름} ${styles.다른class이름}` 형태로 작성… Read more

redux middleware async : 비동기함수 – await로 값이 받아올 때 까지 기다림 예시 : 이전 일반 redux의 비동기함수 사용방법과 동일함 export let addValueAsync=()=>(dispatch)=>{ setTimeout(()=>{dispatch(addValue())},1000)} 즉, reducer로 만든 action 함수를 thunk처럼 중괄호에 넣는건 동일하다. 대신 중간 소괄호 안의 이름이 앞에 붙어야 한다. jsx에서 useDispatch로 쓸 때는 동일하게 dispatch(함수이름)으로 들어간다. 여기서 쓰는 dispatch는 위에 적은 thunk 중간… Read more

create react-app 할 때 주의점 : 프로젝트 이름에 대문자 사용불가 npm install -g create-react-app : react 프로젝트 생성하는 create-react-app 명령어 설치. -g 옵션을 한 경우 시스템 공용 폴더에 설치된다. npm i npx -g : npx로 프로젝트 생성 하고자 한다면 설치해줘야한다 npx : npm의 5.2.0 버전부터 추가된 도구. npm과 비교하는것이 아닌 npm에서 제공해주는 도구 중 하나… Read more

팀프로젝트 개설[notion.so – designuon.notion.site / slack.com – d-wyq2135.slack.com] 팀프로젝트에 어울릴만한 사이트 찾아보기-캠핑 사이트(캠핑물건 또는 캠핑장소) 개인 목표(추가):react로 웹게임 데이터 들고와보기-private로 만들기 redux-toolkit 사용방법 slice 폴더 생성 수 JS로 createSlice로 name(store.js에서 쓰일 이름),initialState(초기값),reducers(action 함수)를 생성한다. 이 때 export가 3번 들어가는데 앞의 3개 값을 지정해줄 export export let 이름=createSlice({}) action 생성함수를 불러낼 export export let {}=이름.actions reducer로… Read more

https://redux-toolkit.js.org/introduction/getting-started https://react-redux.js.org/tutorials/quick-start 설치 : npm install @reduxjs/toolkit react-redux [설치할 것은 2개이며, 확인은 package.json에서 확인가능] 예시작성 import {createSlice} from “@reduxjs/toolkit”; export let counterSlice=createSlice( {name:”counter”,initialState:{value:0}, reducers:{ increment:(state)=>{state.value+=1;},},}); export let {increment}=counterSlice.actions; export defalut counterSlice.reducer; increment를 export 하는 부분은 action 생성함수를 slice를 통해서 내보내고, default 부분은 reducer 부분을 내보낸다. counterSlice 부분은 초기값과 생성함수,reducer를 통으로 보내주는 역할이다 굵게 표시한 s도… Read more

https://redux.js.org/introduction/getting-started https://react.vlpt.us/redux/01-keywords.html 액션 형태 : {type:”TOGGLE_VALUE} type은 필수이며 이름 역시 대문자로만 지어야 함. 그 외는 자유 예){type:”ADD_TODO”,data:{id:0,text:”리덕스 배우기”}} 생성함수 react처럼 짜면 된다. export function addTodo(data){ return { type:”ADD_TODO”,data};} 또는 export let changeInput=text=>({type:”CHANGE_INPUT”,text}); 첫번째 줄과 같이 위에 data로 짰다는걸 안다면 data로 불러 낼 수 있다 리듀서(Reducer)-변화를 일으키는 함수 형태 : function reducer(state,action){return alteredState;} npm create react-app ‘프로젝트이름’ –… Read more

React로 짠 프로젝트를 github에 배포하는 방법 npm i(nstall) gh-pages 설치 – package.json에서 설치되었나 확인 package.json에서 2번째 줄 name 처럼 해당 줄에 “homepage”:”https://githubID.github.io/레퍼지토리이름” 추가. 이 때 미리 github에 레퍼지토리를 만들어도 상관없다. 28번째 줄 디버그(scripts{}) 안에 “predeploy”:”npm run build”, “deploy”:”gh-pages -d build”0 를 추가한다. npm run deploy를 하면 node_modules 폴더 위에 build폴더가 생기는 것을 확인 할 수… Read more

fontawesome에서 SVG 파일을 받지 않고 아이콘 사용 방법 다음의 값들을 인스톨 한다(powershell) npm i @fortawesome/fontawesome-svg-core svg core 설치 npm i @fortawesome/free-solid-svg-icons 아이콘 패키지 설치 npm i @fortawesome/free-regular-svg-icons 아이콘 패키지 설치 기타 다른 무료로 제공해주는 아이콘들 패키지도 설치 가능하다. npm i $fortawesome/react-fontawesome@latest React 컴포넌트 설치 사용하고 싶은 jsx에 다음의 값들을 추가한다 import {FontAwesomeIcon} from ‘@fortawesome/react-fontawesome’  FontAwesomeIcon라는… Read more

props로 가져온 값(변수)는 원본값을 바꿀 수 없다. 그러므로 원본값을 바꾸고자 한다면 부모에서 값을 바꾸는 함수(메서드)를 작성하고 그것을 들고와서 실행해줘야 한다 예를 들어 id=3인 props를 들고 왔는데 id 값에 1을 추가하고 싶다면 let addNum=()=>{id=id+1} 을 id=3 와 같은 공간에 적어주고 addNum도 props로 받아와서 props 쓰는 공간에 addNum();을 넣어주면 동작을 한다. 이전에 JS에서 기능을 끌고 오는것과 react에서… Read more

useEffect 복습 기본 형태 : useEffect(()=>{},[]) 화살표함수 : 수행하고자 하는 작업 [] : 검사하고자 하는 특정 값 또는 빈 배열 가장 처음 랜더링 될 때만 실행하고 싶다면 빈 배열, 배열을 생략한다면 리렌더링 될때마다 실행 만든 페이지의 기능들 txt파일에 정리+더 필요할거 같은 기능도 적어놓음 Read more