FE

이 포스팅에서 작성하는 내용은 자바스크립트 중급 강좌 에서 발췌하였습니다. https://inf.run/QG5D [무료] 자바스크립트 중급 강좌 - 인프런 | 강의 이 수업은 중급 자바스크립트 수업으로, "자바스크립트 기초 지식이 있으신 분"을 대상으로 진행합니다., - 강의 소개 | 인프런 www.inflearn.com 1. 상속, 프로토타입 위의 사진과 같이, 객체에 기본적으로 담겨있는 함수들 / 상속받은 함수들의 모임을 프로토타입이라고 한다. 객체 내부와 프로토타입에 같은 함수가 있다면? 객체 내부에 있는 함수가 동작 (탐색 순서 : 객체 > 프로토타입) const animal = { sound() { console.log('animal'); } }; const dog = { legs: 4 }; d..

이 포스팅에서 작성하는 내용은 자바스크립트 중급 강좌 에서 발췌하였습니다. https://inf.run/QG5D [무료] 자바스크립트 중급 강좌 - 인프런 | 강의 이 수업은 중급 자바스크립트 수업으로, "자바스크립트 기초 지식이 있으신 분"을 대상으로 진행합니다., - 강의 소개 | 인프런 www.inflearn.com 1. 구조 분해 배열 구조 분해 let names = ['Iron Man', 'Spider Man', 'Ant man']; let [name1, name2, name3, name4='No Name'] = names; console.log(name1); // 'Iron Man' console.log(name2); // 'Spider Man' console.log(name3); // 'An..

이 포스팅에서 작성하는 내용은 자바스크립트 중급 강좌 에서 발췌하였습니다. https://inf.run/QG5D [무료] 자바스크립트 중급 강좌 - 인프런 | 강의 이 수업은 중급 자바스크립트 수업으로, "자바스크립트 기초 지식이 있으신 분"을 대상으로 진행합니다., - 강의 소개 | 인프런 www.inflearn.com 1. var / let / const var let const 변수 재선언 O X X 선언 전에 사용 O (undefined) X X 변수 생성 과정 선언과 동시에 초기화 진행 (undefined) 후 할당 선언 → 초기화 → 할당 선언, 초기화, 할당 동시 진행 값 변경 O O X (객체라면 객체 내부의 값은 변경 가능) 범위 함수 범위 블록 범위 블록 범위 ex) 함수, if, fo..

이 포스팅에서 작성하는 내용은 프론트엔드 날개달기 에서 발췌하였습니다. https://inf.run/MYzP [무료] 프론트엔드 날개달기: Vuejs, React 배우기 전에 꼭 알아야하는 지식 - 인프런 | 강의 이 강의를 통해 Webpack, NPM 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다., - 강의 소개 | 인프런 www.inflearn.com Event Flow 이벤트의 전체 흐름 : 최상위 영역 → 타겟 영역 → 최상위 영역 ex) html → body → main → div → span → div → main → body → html capturing : 최상위 영역 → 타겟 영역 bubbling : 타겟 영역 → 최상위 영역 Javascript의 기본 ..

이 포스팅에서 작성하는 내용은 프론트엔드 날개달기 에서 발췌하였습니다. https://inf.run/MYzP [무료] 프론트엔드 날개달기: Vuejs, React 배우기 전에 꼭 알아야하는 지식 - 인프런 | 강의 이 강의를 통해 Webpack, NPM 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다., - 강의 소개 | 인프런 www.inflearn.com DOM Document Object Model : 문서 객체 모델 브라우저에서 javascript로 html 요소를 제어할 수 있도록 제공하는 API 같은 역할 나무모양의 Tree구조를 가지며, 각 구성요소를 노드(Node)라고 함 최상위 노드에는 document 노드가 존재함 BOM Browser Object Mode..

SFC 구조( .vue 파일 구조) .vue 파일의 구조는 기본적으로 , , 3가지로 구성되어 있다. .vue 파일에 하나만 포함될 수 있고, 스크립트 영역이며 ES 모듈로 실행된다. 영역에서 사용되는 하위 영역들은 아래와 같다. 영역 이름 설명 data() - data() 영역에서 정의된 변수들은 반응적인 상태가 되어, 'this'에 노출된다. - 반응적인 상태 : 해당 변수들이 수정되면, 자동으로 재랜더링되어 화면이 갱신된다. - 'this' : 에서 data()영역의 변수를 꺼내쓰려면, this를 이용해서 꺼내야 한다. methods - methods는 변수 값을 변경하고, 업데이트할 수 있는 함수를 정의하는 영역이다. - 에서는 event Listener로 사용될 수 있다. mounted() - ..

1. Node.js 설치 (설치 된 경우, 무시) vue.js 를 설치하기 위해서는 node.js 가 선행 설치되어야 한다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. Vue.js 프로젝트 받기 WindowsOS : CMD(실행창) MacOS : Terminal 자신의 OS에 맞게 터미널을 실행시킨 후, 아래의 명령어를 입력한다. npm init vue@latest 프로젝트 옵션의 경우, 자신에게 맞게 설정하면서 받으면 된다. (필자는 우선 기본 설정으로 진행) Done. Now run이 나오면 작업이 완료된 것이다. 3. 의존 라이브러리 ..

Header를 적용할 컴포넌트들에 로 감싸기 return ( ); Layout.js Layout.js 에서 Outlet 기능을 이용. Outlet 위에 Header를 배치. 만약, Footer가 필요하다면 Footer를 만들고 Outlet 밑에 배치하면 된다. import { Outlet } from 'react-router-dom'; import Header from './Header.js' const Layout = () => { return ( ); }; export default Layout; Header.js import React from 'react'; import { useNavigate } from 'react-router-dom'; function Header() { const navi..