지영이의 개발 블로그

localstorage 새로고침 하면 왜 state가 초기값으로 돌아가기에 데이터를 서버없이 localstorage로 반영구적으로 저장할 수 있는 저장공간 . 1.localstorage는 key :value 형태로 저장가능하다 2. 문자데이터만 저장가능하고 최대5mb이다 3.사이트 재접속 해도 남아있음 ! localStorage.setIten('이름','값') 이라고 해주면 데이터 저장 할 수 있다. localStorage.getIten('이름') 이라고 해주면 데이터 출력 할 수있다. localStorage.removeItem('이름') 데이터 삭제 할수있다 🤷‍♀️array/object 를 저장하고 싶다면?!🤷‍♀️ =>JSON 형태로바꿔주면 됨!! =>이처럼 object 자료를 문자로 강제로 변환 ..

state가 array/object 인경우 변경 하는법! 👍여기서 ' Kim' - > 'park' 이렇게 변경 하고 싶으면 state 변경 함수를 어떻게 만들어야 할까? 요렇게 변경 해주고 버튼누르면 {name : ' kim' }이 {name : 'park' }으로 변경되게 하려면 ->return옆에 코드를 입력해주면 기존 state를 변경해줌 ㅎㅎ! * array/object의 경우 직접 수정해도 state가변경 * 👍버튼 누르면 age가 +1 되는 기능을 만들어보자 * array/object의 경우 return 없이 직접 수정해도 state가변경 * 먼저 increase 라는 함수를 만들어주고 age를 +1씩 증가하게 만들어줌 버튼을 클릭했을때 dispatch 안에 increase 함수를 쓰겠다고 코..

수정중 - 쓰는 이유 - 컴포넌트간 state 공유가 편해짐(props 전송 안해됨 ㅎㅎ) * Redux store에 state 보관하는 법* 저번시간에 만들어둔 store.js 파일 열어서 이렇게 코드짜면 state 하나 만들 수 있습니다. step 1. createSlice( ) 로 state 만들고 = > usestate()역할임 step 2. configureStore( ) 안에 등록하면 됩니다. 1.state만들기 createSlice( ) 상단에서 import 해온 다음에 { name : 'state이름', initialState : 'state값' } 이거 넣으면 state 하나 생성가능합니다. (createSlice( ) 는 useState( ) 와 용도가 비슷하다고 보면 됩니다) 2. s..

컴포넌트 전환 애니메이션 주기 1.전환 애니메이션은 애니메이션 동작 전 ClassName 만들기 2. 애니메이션 동작 후ClassName 만들기 3.ClassName 만들기 에 transition 속성 추가 4. 원할때 2번 className 부착 div 태그로 묶어서 className 을 적용해 주면됨 버튼을 누를때마다 class명 end를 부착 해주세요 ~ 하고 코드를 짜면 세군대를 수정해야함 그래서 탭이라는 state가 변할때마다 end라는 클래스명을 부착 해주는 코들 짜야함 탭이라는게 변경이 될때마다 특정코드를 실행하고 싶다면?useEffect 사용 하면 되겠쥬 ①state를 하나 만들어준다 fade라는state를 end로 바꿔주라는 코드를 입력 한다 ②fade라는 변수를 문자중간에 집어넣고 싶을..

1.html css 디자인 - 부트스트랩 에서 가져옴 2. 탭상태를 state 에 저장 3.state 에따라서 UI가 어떻게 보일지 작성 -state가 0 이면 내용 0 보이기,state가 1 이면 내용 1 보이기,state가 2 이면 내용 2 보이기 이렇게 삼항연산자를 사용해도 되지만 if문을 사용하는게 더 좋을것같담 but,html안에선 if조건문을 사용할 수 없음 ㅠㅠ 그래서 이렇게 밖에 써준다 요렇게 else if를 사용해줘도 됨 ㅎㅎ 컴포넌트를 만들어 주면 되겠쥬 props 전송도 빼먹지않고 해줘야합니당 4) 버튼 1을 누르면 내용 1이 보이게 하고 싶기때문에 요 스위치만 바꿔주면 되겠쥬 !? 이걸 버튼에 적용 하고 싶다면 버튼0 을 누르면 useState를 0로 바꾸고 버튼1 을 누르면 use..

서버란? 유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램일 뿐입니다. 네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램 유튜브 서버 : 유저가 영상 달라고 하면 영상 보내주는 프로그램 입니다. 그래서 서버개발 별거아님 "누가 A를 요청하면 A를 보내주세요" 라고 코드짜는게 서버개발 끝입니다. 유저가 그냥 데이터달라고 떼쓰면 서버가 보내주진 않습니다. 서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야하는데 1. 어떤 데이터인지 (URL 형식으로) 2. 어떤 방법으로 요청할지 (GET or POST) 잘 기재해야 데이터를 보내줍니다. 데이터를 가져올 때는 보통 GET 고르면 되고 데이터를 서버로 보낼 때는 POST 고르면 됩니다. 그리고 어떤 데이터를 보고싶은지 ..

Lifecycle 컴포넌트는 1. 생성이 될 수도 있고 (전문용어로 mount) 2. 재렌더링이 될 수도 있고 (전문용어로 update) 3. 삭제가 될 수도 있습니다. (전문용어로 unmount) =>컴포넌트가 장착이 될 때 특정 코드를 실행할 수도 있고 컴포넌트가 업데이트될 때 특정 코드를 실행할 수도 있다는 겁니다. "Detail 컴포넌트 등장 전에 이것좀 해줘" "Detail 컴포넌트 사라지기 전에 이것좀 해줘" "Detail 컴포넌트 업데이트 되고나서 이것좀 해줘" 이렇게 코드좀 실행해달라고 간섭할 수 있는데 간섭은 갈고리를 달아서 합니다. 갈고리를 달아서 코드를 넣어주면 됩니다. 그럼 진짜 페이지 장착시, 업데이트시, 제거시 코드실행가능 갈고리는 영어로 hook이라고 합니다. 그래서 저걸 Li..

리액트 라우터 설치,셋팅 react-router-dom6 사이트에서 설치 과정 그대로 따라하면됨!! 1) 터미널 열어서 npm install react-router-dom@6 입력해서 설치 2) index.js 파일에서 페이지 나누는법 1. html 파일 만들어서 상세 페이지 내용 채움 2. /detail 로 접속하면 html 파일 보내줌 1.컴포넌트 만들어서 상세페이지 내용 채움 2.누가 /detail 접속하면 그 컴포넌트 보여줌 =>우선 상단에서 여러가지 컴포넌트를 import 해오고 =>를 만들고 그안에 를 작성 => 이렇게 작성하면 됨. 페이지 이동버튼 =>요렇게 링크가 만들어져 클릭하면 각각의 url 경로로 이동! navigate 페이지 이동기능을 만들고 싶을때 useNavigate()를 사용한..