Dean83

만일 기존 프로젝트를 열고 실행시 해당 오류가 발생했다면, 이는 History 라이브러리와 react-route-dom 간 충돌로 인한 문제이다. 오류가 발생하는 소스코드에서 다음의 코드수정을 한다.  이외 더 있을 수 있다.  import 에서 History 부분 주석처리 혹은 삭제import react-route-dom 부분에서, useNavigate 추가History 자료형을 사용 하던 부분들을 삭제하고 react-route-dom 것을 사용useContext(UNSAFE_NavigationContext).navigator as History 를 const navigator = useNavigate(); 로 수정navigator.listen 삭제이동시, navigator.push 를 통해 이동

1. 기존에 구성된 프로젝트를 빌드 할 경우, package.json 에서 node-sass 를 사용중이라면, 애플실리콘 칩에서는 빌드가 되지 않는다.     따라서 package.json 에서 node-sass 부분을 다음과 같이 변경해줘야 한다. "node-sass": "npm:sass@^1.77.6"    버전은 변경될 수 있으니 참고.  2. 만일 dependency 때문에 설치한 라이브러리 버전 충돌로 동작하지 않을 경우, resolutions 를 통해 해당 라이브러리의 최소버전을 지      정해준다.    react-scripts 의 버전 충돌 예 ) "resolutions": { "react-scripts": "4.0.0" }  혹시 모르니 lock 파일들 삭제 -> node_mod..

1. 정의 - 웹과 앱의 장점을 결합한 웹 어플리케이션 개념 - HTML5, JavaScript 등 사용 - 앱처럼 아이콘이 생성됨. - PC에서 사용을 위해선 설치가 필요 - 구글 플레이 스토어, 앱스토어 등에 출시 가능 - 구글 플레이 스토어 : https://www.simicart.com/blog/pwa-app-stores/#Google_Play_Store 참조. - 앱스토어 : https://www.pwabuilder.com/ 에서 native 앱으로 변환 후 출시 - PC에서는 설치가 까다로운듯....2번 이상 방문, 각 방문시 5분이상 유지시 설치 가능? => https://ecsupport.cafe24.com/article/%EC%87%BC%ED%95%91%EB%AA%B0-%EA%B4%80%..

모바일 환경 페이지 갱신이 잘 안됨. PC에선 변경된 항목이 반영되었는데, 모바일에선 새로고침을 계속 해도 업데이트가 잘 안됨. 1. Video,Audio Player - 브라우저가 지원하지 못할 시 표시할 내용 - controls : 영상 컨트롤러 - loop : 반복여부. loop = "loop" 설정시 반복 - muted : 음소거 - autoplay : 자동재생 - poster : 섬네일 이미지 - controlsList="nodownload" : 컨트롤러에 영상 다운로드 메뉴 삭제 - oncontextmenu="return false;" : 마우스 우클릭 방지 - 자동 실행의 경우 muted가 아닌이상 자동재생 되지 않음 (브라우저에서 막음) - Audio의 경우 태그명이 audio이며 나무지는..

1. 정의 - Javascript, CSS를 미리 정의해두어, 일일히 코딩할 필요 없이 바로 적용가능토록 해주는 프레임워크 - 반응형 웹페이지 (해상도에 따라 변하는 웹) 2. 설치 - 참조 : http://bootstrapk.com/getting-started/ - 웹서버에 올려서 사용 - CDN을 이용하여 다운로드 - 태그를 이용하며, 인터넷 접속 필요. 매번 다운받으므로 느릴수 있음 Hello, world! 5. 문서 - http://bootstrapk.com/ 에서, 위의 상위 탭, CSS, 콤포넌트, 자바스크립트 등 메뉴선택 - 예제와 설명이 있음 6. CSS 사용 - 각 태그의 어트리뷰트인 class 에 부트스트랩에서 미리 정의한 원하는 디자인의 클래스명을 입력한다. - 원하는 디자인은 5. ..

2.7. 트랜지션 - CSS 속성값이 서서히 변경되는것. (마치 면접의 신 fade 효과처럼) - 태그를 이용하여 효과 적용 - v-if, v-show, 동적 컴포넌트, 컴포넌트 루트 노트 상황에서 모든 태그 및 컴포넌트 트랜지션 추가 가능 - 참조 : https://kr.vuejs.org/v2/guide/transitions.html 2.7.1. 트랜지션 클래스 - CSS 에서 사용되는 트랜지션 클래스 - 해당 클래스별로 CSS를 각각 적용할 수 있음. - 태그의 name 속성값-클래스명 조합으로 css 파일에 정의 해야 함 - 예 : 이름이 test인 경우, CSS 적용을 위해서는, .test-enter { 효과 } - v 는 Transition 태그의 name 속성값으로 치환됨. 만일, name 속..

2.3.9. 태그 - 컴포넌트 template 에 slot 태그를 사용시, slot 태그를 부모가 원하는 내용으로 교체하여 채워넣을 수 있음. - 사이에 원하는 html 태그를 입력하면, slot 태그를 대체하게 됨 - 하나의 컴포넌트에 공통기능만 명시하고 여러군데서 커스터마이징 하여 사용할 수 있음 Vue.component('test', { ... template:' 나는 자식 컴포넌트의 제목입니다 제공된 컨텐츠가 없는 경우에만 보실 수 있습니다. ' } ) html에서 안녕하세요안녕하세요1 => 태그를 안녕하세요.... 가 대체하게 됨. => 최종적으로, 나는 자식 컴포넌트의 제목입니다 안녕하세요안녕하세요1 => 태그 사이에 아무것도 없을경우 slot의 내용이 보임 2.3.9.1. 태그 name 속성..

참조 사이트 : https://kr.vuejs.org/v2/guide/installation.html https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/ 1. 설치 1.1. 호환성 정보 - IE8 이하버전 지원불가 - ECMAScript 5 지원 브라우저 사용가능 - https://caniuse.com/#feat=es5 1.2. 설치 - NPM 부터는 무슨말인지 이해가.... - 브라우저에 Vue Devtools 설치 - 참조사이트에서 다운로드 받은 vue.js를 // html에 정의하여 vue 인스턴스를 하나 생성하여 만든 간단한 vue app 1.3. Vue Devtools(크롬) 사용법 - 마우스 우클릭 ->..

* 참조 사이트 - 웹사이트 처음부터 자세히 설명한 사이트 - https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web#%EA%B0%99%EC%9D%B4_%EB%B3%B4%EA%B8%B0 - 자바 스크립트 등 코딩시 바로 확인할 수 있는 사이트 - https://jsfiddle.net/ - HTML 태그 설명 - https://ofcourse.kr/html-course/HTML-%EC%9E%85%EB%AC%B8 1. FrontEnd 1.1. 로컬 http 서버 (BackEnd 이나, 테스트 로컬서버라서 여기에 명시) 1.1.1. python을 이용한 로컬 서버 열기 - python 설치 : https://www.python.org/..

* 웹 프론트앤드 개발시, 테스트할 서버가 필요함. 경우에 따라 https 연결이 필요할 때가 있음. GitHub을 사용하면, 손쉽게 테스트 가능함. 1. GitHub 회원 가입 및 로그인 2. Repository 생성 3. Owner 선택 -> Repository name에 Owner.github.io 입력 4. Github Desktop 설치 - https://desktop.github.com/ 5. Clone을 통해 방금 생성한 Git을 로컬과 연동 6. index.html을 포함하여, 코드들을 git에 업로드 7. https://repository주소 (예 : https://3park.github.io) 접속시, index.html 내용이 출력됨.