아이니그마

이전까지와 다르게 페이지가 이동해도 checkbox값을 유지시켜야 할 일이 생겼다 솔직히 귀찮아서 구축안하고 그냥 다른 방법으로 넘긴 적이 있는데 이렇게 된거 만들었다 1.checkbox의 id값을 담을 배열을 하나 만든다 2. 페이지 이동시마다 id를 줘서 확인한다 - index of를 이용해서 확인 3. 체크박스 클릭 시 들어있으면 삭제 없으면 추가를 해주면 된다 checkState -페이지 이동시마다 체크박스 배열에서 확인하는 함수 nextTick -vue에서 자체 제공하는 기능이다 해당 태그가 생성된 뒤에 실행시켜준다 checkcheckedArr -해당 요소의 위치를 반환하는 함수 indexof은 자바스크립트 기본 제공 기능이다 없다면 -1 반환해준다 clickCheck -체크박스 클릭시 작동하는..

react/vue를 다루기 시작 하면 기존 html에서 익숙하지 않았던 컴포넌트 라는 아주 중요한 개념이 등장한다 개인적인 사용이유 1.새로고침이 없이 랜더링된다 -이게 생각보다 spa를 구현해보면 있고 없고 차이가 크게 느껴지게된다 (물론 자바스크립트도 가능하지만) 2.재사용 -물론 기존에도 자바스립트로 묶어서 쓰거나 하면되지만 좀더 편하게 재사용이 가능하다 1.부분랜더링 -처음 주소는 그냥 입력한기능이다 ㅋㅋ 뿌듯해서.. gif로 변환만 하면 엄청 끈긴당(실제로는 아주 부드럽게 잘작동한다) 2.재사용 -화면을 봐보자 이 화면은 총 몇개의 컴포넌트로 이뤄졌냐면 (사람마다 다르겠지만) 네비바/사이드바/companyPage(부모컴포넌트)/registStorePage(company/1 자식컴포넌트)/에디터/..

url을 이용해서 페이징을 구현하는 흐름을 만들어 야한다 흐름 다음/이전 버튼을 클릭-> url을 변경-> 재 랜더링 1. 다음 이전 버튼에 url을 바꿔주는 로직을 작성한다 -vue의 라우터가 들고 있는 기능을 활용한다 2.url이 변경된다 -url이 변경되면 부모 컴포넌트 혹은 현재 컴포넌트에 watch로 감지한다 3. 재 랜더링 -주석은 무시하면 된다 내 로직 기준 해당 url 자식 컴포넌트의 함수를 호출해 재 렌더링을 시킨다 -주석은 무시하고 그냥 다시 서버에 요청하는 로직을 호출한다 새로고침 없이 페이지 이동이 되고 뒤로/앞으로 가기 버튼/이탈 후 뒤로/앞으로 가기시에도 잘 대응된다 훨신 좋게 소스를 바꿨다 https://cordingmonster.tistory.com/266?category=1..

vue를 사용하다 보면 컴포넌트 통신은 필수적으로 일어난다 그때 사용하면된다 -refs, props 부모-> 자식 1.props 주로 초기 변수 전달을 위해 사용했다 줄 때(부모) v-bind:변수 이름:변숫값 v-bind->: 줄여서 표현 가능하다 받을 때(자식) props안에 변수 이름을 쓰고 사용할 때는 this. 변수 이름으로 사용한다 2.refs 주로 자식 함수를 호출하기 위해 사용했다 사용법 this.$refs. 태그에 지정한 ref값. 지정 컴포넌트 안에 함수 3.emit 자식 -> 부모 1. 자식 this.$emit('명칭', '전달할 변수') 2. 부모 v-on:명칭="호출할 함수" 아주 쉽게 컴포넌트 통신을 할 수 있다

점검사항 1. 기본지식 습득 2.ajax는 어떻게 해야 하는가(적용) 3. 페이징은 어떻게 이뤄지는가(적용) 4. 부트스트랩 연동 법(적용) 5.ckeditor5 연동 법(적용) 6. 포트번호변경(적용) 7.async/await(적용) 8.https적용(미적용) 1. 기본지식 습득 https://www.youtube.com/watch?v=-tVaahsXpwk&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ- https://www.youtube.com/watch?v=sqH0u8wN4Rs 이영상들만 봐도 기본 지식들은 얻을 수 있었다 2.ajax->axios? 다운로드는 영상 참조(npm다운로드 후 사용 가능) 드디어 이게 나왔다 구글링 하면서 xhr/ajax/axios 이 세 개를 자..