전체 글 283

Vue.js란?

Vue.js는 웹프론트엔드 프레임워크 - 컴포넌트(Component) 기반의 SPA(Sing Page Application)를 구축할 수 있게 해주는 프레임 워크 - MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리 컴포넌트 (Component) - 웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹 페이지 내의 다양한 UI 요소 - 재사용 가능하도록 구조화한 것 SPA (Single Page Application) - 단일 페이지 어플리케이션 - 하나의 페이지 안에서 필요한 영역 부분만 로딩 되는 형태 - 빠른 페이지 변환 - 적은 트래픽 양 쉽게 설명하면 웹 개발할때 필요한 다양한 UI들을 컴포넌트로 만들고 이것을 조립해서 하나의 페이지로 만드는 방식 단점은 최..

JavaScript/Vue 2021.03.15

프런트엔드 개발과 관련된 용어

ECMAScript/ES 국제 표준화 단체인 Ecma Intermational에서 책정한 자바스크립트의 표준 사양 대부분의 브라우저는 ES5 지원 브라우저에 따라서는 ES2015(ES6) 이후의 기능을 구현해서 제공하고 있는 경우도 있음 ES2015부터는 사양을 매년 개정 원래 ECMAScript4, ECMAScript5, ECMAScript6 처럼 숫자를 붙이지 않고, ECMAScript 2015, ECMAScript 2016, ECMAScript 2017처럼연도를 붙여서 부르게 됌. Vue DevTools 크롬 전용 확장 프로그램으로 Vue.js 개발을 지원해주는 도구 애플리케이션의 현재 데이터의 상태를 확인하거나 변수에 어떤 변경이 가해졌는지 추적하는 기능도 있어서 개발할 때 활용하면 굉장히 편리 ..

JavaScript/Vue 2021.03.09

Vue 라이프사이클 다이어그램 (created, mounted, beforedestroy 후킹메소드)

created : 인스턴스가 생성된 다음 바로 호출된다. 뷰 인스턴스는 생성됐지만 태그엔 접근하지 못하고 데이터나 메소드만 사용이 가능하다 (api로 데이터 가져와서 출력해야하는 컴포넌트 같은 경우는 이 created에 api로 데이터를 가져오는 로직을 넣으면 된다고 한다!) mounted : 화면에 그려진 뒤 호출된다. 화면에 출력이 됐기 때문에 태그에 접근할 수 있어서 대부분의 작업이 mounted method안에서 이루어짐. beforeDestroy : 인스턴스가 제거되기 전에 호출된다. 만약 별도로 이벤트리스너를 등록했다면 여기서 제거하면 된다. 출처 : youtu.be/gDD72Xgpfgs?t=290

JavaScript/Vue 2021.03.08

GNB, LNB, SNB, FNB

GNB (Global Navication bar) : 어느 페이지에 들어가든 공통적으로 사용할 수 있는 메뉴 최상위 메뉴로 보통 상단에 위치 (메인메뉴라고도 부른다) LNB (Local Navigation Bar) : GNB를 누를 경우 소제목 형식으로 나오는 메뉴 SNB(SIde Navigation Bar) : 일반적으로 왼쪽에 많이 있기 때문에 LNB(Left Navigation Bar)라고 부르기도 함. 메인메뉴와 서브메뉴를 제외한 나머지 사이드 메뉴 FNB (Foot Navigation Bar) : 하단 메뉴

웹디자인 2021.03.05

M1 macbook air에 Mongodb 설치, 연결하기

하 진짜 찾느라 너무 힘들었다!!!!!!1 구글링해도 완전 안나오고 유튜브랑 구글링 짜집기해서 나온 결과물이다ㅠㅠㅠㅠㅠㅠ www.youtube.com/watch?v=f3iFaiBGVYw 여기서 참조해서 됐다.. 중간 3분 6초쯤에서 Install이 안되는데 www.python2.net/questions-1274276.htm mongodb /brew를 탭할 수없는 M1 Apple Chip에 mongodb 설치 : 탭의 잘못된 구문 brew tap mongodb /brew 명령 실행 : 다음과 같은 상황이 발생했습니다. 나는 다음을 만났다. 오류 : 잘못된 공식 : /opt/homebrew/Library/Taps/mongodb/homebrew-brew/Formula/mongocli.rb 수식에는 최소한 UR..

[Facebook Clone Coding] 파이어베이스 고치기

윈도우에서 mac으로 갈아타면서 다시 실행해보는데 프로젝트가 말을 안들었다! 자꾸 이런식으로 잘려보였는데 파이어베이스가 권한이 문제가 있었다! 내 파이어베이스 프로젝트에 들어가서 클라우드 파이어 스토어에 들어간다 그리고 규칙에 들어가서 저 코드로 변경해주면 끝! service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if request.auth != null; } } } 1번은 놔두고 그 아래만 변경함! 다시 원상 복구! 프로젝트 안 사진 출처 : 핀터레스트

JavaScript/Project 2021.03.02

node.js 다운 Mac OS

nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 왼쪽 : 안정적, 오른쪽 : 최신 참조 : velog.io/@magnoliarfsit/Node.js-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0-mac-os [Node.js 생활코딩] Node.js 설치하기 (mac os) node.js 설치하기 https://nodejs.org/ko/ 에서 자신의 os에 맞는 버젼을 다운로드받도록 하자. 왼쪽에 있는 게 안정된 버젼 / 오른쪽이 최신 버젼인데, 일단은 안전된 버젼으로 설치하겠다. 설치가 완료 velog.io brew install yarn br..