프론트 앤드(Front-End) 26

[Vue] Computed vs Watch vs Method 사용법 및 비교

- 지난 시간 안녕하세요. 지난 시간에는 Vue.js 생명주기, LifeCycle에 대해 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다. any-ting.tistory.com/42 [Vue] Component 생명주기 LifeCycle 개념 및 사용법 - 지난 시간 안녕하세요. 지난 시간에는 부모 자식 Component 간에 데이터 주고받는 방법에 대해 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천 드립니다. any-ti any-ting.tistory.com - 개요 이번 시간에는 Vue로 개발할 때 많이 사용되는 Computed와 Method 그리고 Watch에 대해 알아보겠습니다. 기본적인 개념을 먼저 정리해 드리겠습니..

[Vue] Component 생명주기 LifeCycle 개념 및 사용법

- 지난 시간 안녕하세요. 지난 시간에는 부모 자식 Component 간에 데이터 주고받는 방법에 대해 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천 드립니다. any-ting.tistory.com/41 [Vue] 부모 자식 Component간에 데이터 주고 받기 (Props와 Emit 사용법) - 지난 시간 안녕하세요. 지난 시간에는 Component를 만들고 변수와 메서드를 사용해봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다. any-ting.tistory.com/40 any-ting.tistory.com - 개요 이번 시간에는 생명주기 LifeCycle에 대해 알아보겠습니다. 생명주기란? 무엇일까요?... 어렵게 생각할 ..

[Vue] 부모 자식 Component간에 데이터 주고 받기 (Props와 Emit 사용법)

- 지난 시간 안녕하세요. 지난 시간에는 Component를 만들고 변수와 메서드를 사용해봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다. any-ting.tistory.com/40 [Vue] Component 생성 및 변수 메서드 활용 - 지난 시간 안녕하세요. 지난 시간에는 Vue 기본 개념과 Project 구조에 대해 살펴봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 확인하고 오시는 걸 추천드리겠습니다. any-ting.tistory.com/39 [V any-ting.tistory.com - 개요 이번 시간에는 부모 Component와 자식 Component 간에 데이터 전달에 대해 알아보겠습니다. Props와 Emit이라는 기술에 대해 알아볼 예정입..

[Vue] Component 생성 및 변수 메서드 활용

- 지난 시간 안녕하세요. 지난 시간에는 Vue 기본 개념과 Project 구조에 대해 살펴봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 확인하고 오시는 걸 추천드리겠습니다. any-ting.tistory.com/39 [Vue] Vue 기본 개념 및 디렉터리 구조 파악 - 지난 시간 안녕하세요. 지난 시간에는 Vue.js 개발환경 설정에 대해 알아봤습니다. 혹시 세팅을 못 하셨거나 놓치고 오신 분들은 아래 링크를 통해 개발환경 설정을 하고 오시는 걸 추천드리겠 any-ting.tistory.com - 개요 이번 시간에는 Component를 생성하고 변수와 메서드를 만들어 보도록 하겠습니다. Vue 에서 가장 중요한 개념은 "Component"이며, Component를 해석하면 '(구성) 요소, 부..

[Vue] Vue 기본 개념 및 디렉터리 구조 파악

- 지난 시간 안녕하세요. 지난 시간에는 Vue.js 개발환경 설정에 대해 알아봤습니다. 혹시 세팅을 못 하셨거나 놓치고 오신 분들은 아래 링크를 통해 개발환경 설정을 하고 오시는 걸 추천드리겠습니다. any-ting.tistory.com/38 [Vue] Mac Vue.js 개발환경 설정 - 개요 안녕하세요. 이번 시간에는 Web Front 3 대장 Vue.js 개발환경 설정해 보겠습니다. 참고로 Vue CLI를 활용해서 설치하겠습니다. :) - VS Code 설치 개발 환경 IDE는 VS Code를 사용하겠습니다. 본인 PC OS any-ting.tistory.com - 개요 Vue라는 기술은 뷰(View) 레이어에 특화된 "라이브러리 및 프래임 워크"입니다. 가장 많이 듣는 디자인 패턴 중에 MVC ..

[Vue] Mac Vue.js 개발환경 설정

- 개요 안녕하세요. 이번 시간에는 Web Front 3 대장 Vue.js 개발환경 설정해 보겠습니다. 참고로 Vue CLI를 활용해서 설치하겠습니다. :) - VS Code 설치 개발 환경 IDE는 VS Code를 사용하겠습니다. 본인 PC OS에 맞게 설치해주시면 되겠습니다. VS Code 다운로드 공식 홈페이지 : code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience..

[React Hook] Context API 사용법 useContext

- 지난 시간 안녕하세요. 지난 시간에는 useEffect를 사용하는 방법에 대해서 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 확인하고 와주세요. :) any-ting.tistory.com/23 [React Hook] useEffect 사용 (Function Life Cycle) - 지난 시간 안녕하세요. 지난 시간에는 Function Component를 만들고 useState를 사용하는 방법에 대해서 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 확인하고 와주세요. :) any-ting.tistory.c any-ting.tistory.com - 개요 이번 시간에는 Context API를 사용하는 법에 대해 알아보겠습니다. 일단 Context API란 무엇일까요? 공식 홈페이지에..

[React Hook] useEffect 사용 (Function Life Cycle)

- 지난 시간 안녕하세요. 지난 시간에는 Function Component를 만들고 useState를 사용하는 방법에 대해서 알아봤습니다. 혹시 놓치고 오신 분들은 아래 링크를 통해 확인하고 와주세요. :) any-ting.tistory.com/22 [React Hook] 함수형 Component 선언 및 useState 사용법 - 개요 안녕하세요. 이번 시간에는 React 16.8 버전부터 새롭게 추가된 Hook에 대해 알아보겠습니다. React Hook이 나오기 전까지는 Class 방식을 사용했습니다. State, Life Cycle 등등 Function Component 에는.. any-ting.tistory.com - 개요 Class Component에는 기본적인 Life Cycle 생명주기가 있..

[React Hook] 함수형 Component 선언 및 useState 사용법

- 개요 안녕하세요. 이번 시간에는 React 16.8 버전부터 새롭게 추가된 Hook에 대해 알아보겠습니다. React Hook이 나오기 전까지는 Class 방식을 사용했습니다. State, Life Cycle 등등 Function Component 에는 없습니다. 하지만 16.8부터는 이런 기술을 제어할 수 있게 됐습니다. 그러면서 객체지향에 대한 언어를 잘 몰라도 기본 자바스크립트 문법을 아신다면 React 개발하는데 문제가 없어졌습니다. :) React 16.8 버전부터는 Hook이라는 기술이 추가되어 Component 만들 때 Class 방식보다는 Function 방식으로 만들어 사용합니다. - 사용법 1. Component 선언 선언방식 (1) import React from 'react'; ..

[React Axios] Server와 HTTP 통신

- 개요 이번 시간에는 React에서 서버와 통신을 할 때 사용되는 Axios 라이브러리에 대해서 알아보겠습니다. - 설치 npm 사용 npm install axios yarm 사용 yarn add axios npm 또는 yarn 패키지 매니저를 사용해서 설치를 할 수 있습니다. ES5 => const axios = require('axios') ES6 => import axios = require('axios') 위 방법으로 모듈을 불러와 사용할 수 있다. - 사용법 RESTFul API 통신을 할 때 CRUD가 중요합니다. C : Create(생성) R : Read(읽기) U : Update(수정) D : Delete(삭제) 자원을 생성하고 조회하고 그리고 수정할 수 있으며 삭제도 할 수 있습니다. ..