WEB 267

[Vue.js] 뷰 프로젝트 시작하기 script 태그 넣기/ data, method 지정하기

뷰 공식 문서 시작하기 | Vue.js 시작하기 NOTE 이미 Vue 2를 알고 있고 Vue 3의 새로운 점을 배우고 싶으신가요? Migration Guide를 확인하세요! Vue.js가 무엇인가요? Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 v3.ko.vuejs.org [시작하기] 기본적인 html파일을 만들고 script 코드를 추가해주면 간단하게 vue를 사용할 수 있게 된다. 이 코드를 head태그 안에 넣어준다. {{ name }} id를 app으로 주고 뷰 인스턴스를 만들어서 id가 app으로 연결시킨다. data안에는 객체형태로 값이 들어가있을 수 있다. name이라는 변수로 lee라는 값이 들어가있는데 그러면 id가 app인 div안에 {{ name..

WEB/VUE.js 2021.10.12

[Vue.js] vue.js 가 무엇인가?

[Vue란?] 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공 [Vue의 장점] 배우기 쉽다 리액트와 앵귤러에 비해 성능이 우수하고 빠르다 리액트의 장점과 앵귤러의 장점을 가지고 있다. 앵귤러의 데이터 바인딩 특성과 리액트의 가상돔 기반 렌더링 특징을 모두 가지고 있음 [Vue의 특징] MVVM 패턴 화면을 모델 - 뷰 - 뷰 모델로 구조화 하여 개발하는 방식 뷰(View) : 사용자에게 보이는 화면 돔(DOM) : HTML문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 ..

WEB/VUE.js 2021.10.12

[REACT] 잘못된 주소 처리 NotFound

import React, {useCallback, useEffect, Suspense, lazy } from "react"; import { ConnectedRouter } from "connected-react-router"; import { Route, Switch, useLocation } from "react-router-dom"; import { history } from "../redux/configStore"; //... import NotFound from "../pages/NotFound"; function App() { return ( //... ); } export default App; 다른 페이지들은 path를 지정해주는데 Notfound는 path를 지정 안해주면 됨! 다음 게시..

WEB/REACT 2021.09.29

[Java Script] var, let, const 차이점

JavaScript에서 변수 선언 방식인 var, let, const 의 차이점에 대해 알아보자. var let const 중복선언 O X X 호이스팅 O O O 재할당 O O X 선언과 초기화 초기화를 안해도 undefined 초기화를 안하고 참조하면 TDZ구간 선언과 동시에 초기화 해야함 스코프 함수레벨 블록레벨 블록레벨 [변수 선언] 자바스크립트에서 변수가 무엇인가? 변수(variable): 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 자바스크립트는 managed language 이기 때문에 개발자가 직접 메모리를 제어하지 못한다. 그래서 변수를 통해서 값에 접근을 한다. 변수명은 변수의 값이 아닌 메모리 주소를 기억한다. 그리고 변수명으로 부..

WEB/Java Script 2021.09.29

[Java Script]비동기의 핵심 async await에 대해 알아보자!

[async - await] promise를 더욱 간결하고, 간편하게, 동기적으로 실행되는 것 처럼 보이도록 만들어주는 것이다. 새로운 것이 추가된 것이 아니라 조금 간편한 api를 제공하는 것이므로 syntatic sugar이라고 말한다. 무조건 async가 좋고 promise로 대체해야한다는 것은 아니다. 자바스크립트는 동기적으로 실행되기 때문에 만약에 유저 데이터를 받아오는 기능이 10초가 걸린다면 비동기 처리를 하지 않으면 그 밑에서 ui를 그려주는 함수를 10초동안 실행하지 않는다. 그런 현상을 없애기 위해서 비동기처리를 하여 다른 함수가 실행될 동안 밑의 함수를 실행시키는 것이다. //1. async async function fetchUser(){ return 'ellie'; //자동으로 p..

WEB/Java Script 2021.09.29

[Java Script] Promise / 비동기처리에 대해 알아보자

2021.09.28 - [WEB/Java Script] - [Java Script] async 비동기처리/ Callback과 콜백 지옥에 대해 알아보자! [Java Script] async 비동기처리/ Callback과 콜백 지옥에 대해 알아보자! [동기와 비동기] 자바스크립트는 동기적인 언어이다. 호이스팅이 된 이후부터 작성된 코드 순서대로 동기적으로 실행된다는 것이다. 호이스팅이란? var 변수와 function declaration이 자동적으로 맨 sso-feeling.tistory.com 이전글에서 콜백함수에 대해 알았다면 Promise에 대해 알아보자! [예시] 온라인 강의가 완성되기 전에 수업등록을 해놓을 수 있다고 치자. 영희는 수업이 완성되기 전에 수업등록을 해놓아서 며칠 기다렸다가 온라인..

WEB/Java Script 2021.09.29

[Java Script] async 비동기처리/ Callback과 콜백 지옥에 대해 알아보자!

[동기와 비동기] 자바스크립트는 동기적인 언어이다. 호이스팅이 된 이후부터 작성된 코드 순서대로 동기적으로 실행된다는 것이다. 호이스팅이란? var 변수와 function declaration이 자동적으로 맨 위에 올라가는 것 async는 비동기적으로 언제 코드가 실행될지 모르는 것 대표적으로 settimeout이 있다. (브라우저에서 제공되는 api) 지정된 시간이 지나면 콜백 함수를 실행한다. [callback이란?] 콜백이란 다른 함수가 실행을 끝낸 뒤 실행되는 함수를 말한다. 자바스크립트에서 함수는 object인데, 이 때문에 함수는 다른 함수의 인자로 쓰일 수도 있고 어떤 함수에 의해 리턴될 수도 있다. 이때 인자로 넘겨지는 함수를 콜백 함수라고 한다. [동기와 비동기에서 callback] 나중..

WEB/Java Script 2021.09.28

[Java Script] 자바스크립트의 역사와 현재 그리고 미래

자바스크립트 탄생 배경 1993년 집집마다 컴퓨터가 없었던 그 시절 MOSAIC 웹 브라우저가 나온다. 당시 완전 정적인 웹 사이트만 만들 수 있었다. 어떻게 하면 동적인 웹사이트를 만들 수 있을까? 고민하다가 scripting언어를 추가하자!라는 결론을 내렸다. 처음으로 고려되었던 것은 java 언어였다. 하지만 웹사이트를 개발하던 개발사들이 하기에 무겁고 어려웠다 scheme 스크립트를 조금 바꿔보자!! 시간이 없어 10일 안에 만들어보자!! 그리하여 브랜든은 프로토타입을 베이스로 한 유연한 언어를 만들었다. 그것은 livescript이다. 그 당시 자바 언어가 인기가 많았는데 어떻게 하면 자바 인기에 올라탈 수 있을까 해서 자바스크립트라고 이름을 만든다 1995년도에 마이크로 소프트도 자신만의 브라..

WEB/Java Script 2021.09.22