개발자 모드 비활성화 시 접속이 잘 되는데 F12 누른 후 개발자 모드 활성화 시 네트워크 오류 화면이 계속 노출되는 오류가 발생했다. F12 > 네트워크 탭에서 캐시 사용 중지 오른쪽에 [오프라인] 으로 되어있으면 나타나는 문제이다.'제한 없음' 으로 변경하니 오류가 해결되었다.
전체 글
앞전까지의 데이터는 하드코딩 그 자체의 데이터이다. 실제로 개발을 하면 데이터는 모두 API 로 받아오게 된다.하지만 프론트엔드 강의이니 데이터를 다른 파일에 저장해 놓고 그 파일의 데이터를 불러오자. [{목록1}, {목록2}, {목록3}, ...] 형태의 데이터를 prodData.js 파일에 저장 하자.각각의 {목록} 데이터에는 id, title, image, content, price 가 들어있다.Array 형태의 데이터틀에 Object 데이터가 들어있는 형태이다. 위의 id, title .. 등의 값은 Object의 key 값이 되겠다. JS file 을 새로 만들고 해당 파일에 긴 데이터를 입력하고 저장하자. 📢 export default / import 문법어떤 js 파일에서 만든 변수나 자..
📌이미지 넣는 법이미지를 src 폴더 아무데나 넣고img src="./경로"> src 폴더에 있는 것을 가져올 때는 경로를 ./ 로 시작하면 된다. 만약 이미지를 public 폴더에 넣을거면 /경로 로 해야한다.public 폴더에 넣으면 나중에 발행할 때 이미지가 이름이 변하지 않는다.src에 있는 이미지는 임의로 바꿔준다. ▼ public 관련 참고https://onlynana.tistory.com/entry/Vue%EC%BD%94%EB%94%A9%EC%95%A0%ED%94%8Cpart2-7-build-Github-pages-%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0#%20%E2%9A%A1%20build%20%ED%95%A0%20%EB%95%8C%20%EC%..
어떤 HTML 요소를 클릭했을 때 이벤트를 발생시키려면, 에서 "" 안에 자바스크립트를 넣는다.Vue에서는 이와 비슷하게 @click="" 을 이용한다. 실습하기 위해 [허위매물신고]란 버튼을 만들자 버튼을 누르면 신고 수가 1이 증가하는 기능을 만들어보자 일단 신고수 : 0 에서 0을 변수로 만들어야 한다는 것을 알 수 있다.데이터 보관소에서 변수로 등록 ㄱㄱ!count 라고 변수명을 지었다. 신고 전이니 0으로 초기화하자. data() { return { products : ['역삼동원룸', '천호동원룸', '마포구원룸'], menu : ['Home', 'Shop', 'About'], count : 0, } }, 이제 허위매물신고 버튼에 click 이벤트를 집..
📌V-for 반복문v-for="작명" in "반복할 횟수" :key="작명" 상단 메뉴바 3개를 for문을 이용해 출력해보자 Home 라고 작성하면 된다. 작명은 아무 작명하면 된다! Home Products--> About--> {{products[0]}} 10만원 {{products[1]}} 20만원 {{products[2]}} 30만원 v-for 반복문에 array, object 데이터를 넣으려면?먼저 데이터 보관소에 데이터를 등록하자.menu 라는 데이터를 등록했다. {{a}} Products--> About--> {{products[0]}} 10만원 ..
app.vue 파일 초기 셋팅에서 필요 없는 부분일 일단 지우자 template 영역에 빨간 줄이 그어지는데, 안에 내용이 없으면 오류로 인식한다. 아무 내용 채우면 된다 template : html 내용 담는 곳script : 자바스크립트 기능 담는 곳style : 스타일 지정 Vue의 데이터바인딩 문법1. 영역에data() { return { } } 를 추가하자. 데이터를 Object 형식으로 추가하면 된다.해당 영역을 Vue의 data 보관함, 변수 보관함이라고 생각하면 된다. 저 XX 영역에 변수를 넣고 싶다면? return 안에 오브젝트 형식으로 원하는 변수를 넣은 후, 안에 {{변수이름}} 이렇게 입력하면 된다. XX 원룸 {{price1}} 만원 ..
📌 npm 과 yarn 이란?npm 과 yarn 은 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자이다.전 세계의 개발자들이 자바스크립트로 만든 다양한 패키지를 npm 온라인 데이터베이스에 올리면 npm, yarn과 같은 패키지 관리자를 통해 설치 및 삭제가 가능하다.( npm 온라인 데이터베이스: https://www.npmjs.com/)명령 줄 인터페이스(Command-line interface, CLI)를 통해 패키지 설치 및 삭제 뿐 아니라 패키지 버전 관리, 의존성 관리도 편리하게 할 수 있다. 📌 npm (Node Package Manager)npm 은 노드 패키지 매니저는 Node Package Manager 의 줄임말로 노드를 설치할 때 자동으로 설치되는 기본 패키지 관..
📌 제어의 역전이란?프레임워크 없이 개발할 때에는 객체의 생성, 설정, 초기화, 메소드 호출, 소멸 (이하 객체의 생명주기)을 프로그래머가 직접 관리한다. 또한 전통적인 프로그래밍에서는 외부 라이브러리를 사용할 때, 개발자가 직접 외부 라이브러리를 호출하는 형태로 이용한다.프레임워크를 사용하면 객체의 생명주기를 모두 프레임워크에 위임할 수 있다. 즉, 외부 라이브러리가 프로그래머가 작성한 코드를 호출하고, 흐름을 제어한다. 제어의 역전은 기존의 개발 방식에서 개발자가 직접 흐름을 제어하는 것이 아니라, 외부의 프레임워크나 라이브러리가 제어 흐름을 대신하게 되는 것을 말한다.개발자가 작성한 객체나 메서드의 제어를 개발자가 아니라 외부에 위임하는 설계 원칙을 제어의 역전이라고 한다. 즉, 프레임워크는 제어..
📌 라이브러리단순 활용가능한 도구들의 집합개발자가 필요에 따라 라이브러리를 선택하여 사용할 수 있다.예시TensorFlow: 머신러닝과 딥러닝을 위한 Python 라이브러리Pandas: 데이터 분석과 조작을 위한 Python 라이브러리Numpy: 수치 계산을 위한 Python 라이브러리jQeury: HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션, Ajax를 쉽게 처리할 수 있게 하는 Javascript 라이브러리Lodash: JavaScript 유틸리티 라이브러리로서 배열, 객체, 문자열 등 다양한 작업을 편리하게 처리할 수 있게 한다. 📌 프레임워크프레임워크는 코드를 프레임에 맞춰서 개발한다.ex) vue에서는 파일을 만들 때 .vue 라는 형태에 맞춰 사용한다.프레임워크는 프레임을 따라..
🔎 들어가기 전에나는 현재 코딩애플 1년권을 이용하고 있다.코딩애플 강의가 좋은 점은, 핵심만 빠르게 실전 중심으로 원하는 프레임워크, 라이브러리, 언어 강좌를 수강할 수 있다는 점이다.처음부터 너무 깊은 내용을 다루고 이론 중심으로만 공부하게 되면 금방 지치고 흥미가 떨어진다.코딩애플 강사님의 방식은 간단한 개념 설명 (근데 엄청 웃김) 을 한 후에 바로 실습을 하면서 이해시켜주는 방식이다.자바스크립트란 언어를 공부할 때 이론 위주로 된 사이트를 보며 공부를 했었는데 (물론 유용했음) 코딩애플의 자바스크립트 강의를 맛보기로 5-6개 들은 것만으로도 습득이 엄청 빨랐다. 유튜브에서 코딩애플의 맛보기 강의를 다들 들어보는걸 추천한다. 너무 웃기고 재밌다,,암튼 학창시절부터 꼼꼼하고 딱딱한 강의를 고집했었..