Author: dudghks9303

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

Bootstrap-빠르게 디자인을 끝내야 할 경우 앞서 만든 블로그를 React-Bootstrap을 이용하여 화면을 디자인하고 기능 복습하기 위함 블로그 구성-홈화면/게시판(보드리스트)-각각의 게시물/게시판 폼(추가)/로그인 화면 Read more

저번주 과제 풀이 Link와 NavLink로 만든 문자열은 a 태그로 들어간다.[콘솔로도 확인가능]   Read more