반응형 Framework43 Lifecycle Hooks (vue.js) Lifecycle Hooks이란? 컴포넌트에서 생명주기 기능(생성, 수정, 소멸)의 과정을 말한다. 대표적인 경우 템플릿을 컴파일 하는 경우 데이터 설정이 필요한 경우 컴포넌트를 dom에 마운트 하는 경우 데이터가 변경되어 dom을 업데이트 하는 경우 Lifecycle Hooks 단계 크게 created, mounted, updated, destroyed 4단계로 나뉘어 진다. creation: 생성 단계 DOM이 생성되기 전 단계 beforeCreate, created 다른 훅과 달리 서버 렌더링 과정 중에도 실행이 된다. [beforeCreate] - 라이프사이클에서 가장 먼저 실행된다. - 컴포넌트가 DOM에 가장 처음으로 추가되기 전 상태를 말한다. - 컴포넌트가 DOM에 추가되기 전이기 때문에 .. 2022. 12. 25. vue3 yarn install 하기 npm install --global yarn yarn --version yarn global add @vue/cli yarn -v CND 사용 1. [CDN Package] npm 설치 방법 1. [vue cli] npm install vue@next npm install -g vue-create npm install -g @vue/cli --- 설치 후 --- 1) npm init vue 또는? vue create 2) 터미널 열고 의존성 모듈 설치 npm install vite 설치 방법 npm init vite-app eslint 설정 1) .eslintrc.cjs /* eslint-env node */ require("@rushstack/eslint-patch/mod.. 2022. 12. 13. params를 쓸까 query를 쓸까? (참고로 이 글은 파라미터와 쿼리스트링에 대한 정보가 담긴 글은 아닙니다ㅋㅋ) 포트폴리오에 readme를 모달로 띄워놓은 상태였다. 따로 만든 이력서에 플젝설명을 또다시 적는 삽질보다는 해당 링크를 거는게 낫지 않겠는가 싶어서 호기롭게 시작했지만, 코린이에게는 역시나 고비가 왔다. 내 포폴은 SPA이다. 컴포넌트 하나에만 route를 해놓은 상태였다. 제일 먼저 생각한 방법 1. params가 있을 때 모달을 띄울때 걸어놓은 setState 상태를 바꾸자 라는 방법이였다. Layout컴포넌트는 nav와 footer는 공통 Outlet 갖고 있는 화면 전체 레이아웃이다. 처음에는 그냥 layout의 path에 :parmas를 했지만 아예 화면이 보이질 않았다. 그래서 따로 Project 컴포넌트를 path.. 2022. 12. 13. React 로그인 API _ 1 (앞서 회원가입 로직을 완료한 상태) * 추가글: 정리를 하다보니까 이해가 조금 더 편한 상태가 되려면 server부터 참고해주세요. 먼저 클라이언트 //[client] signin.jsx const onValue = (data) => { axios.post('http://localhost:3000/auth/login', { email: data.email, pw: data.pw }).then(res => { localStorage.setItem('토큰', res.data.userToken) // header에 토큰 넣는 로직 setInterceptor(res.data.userToken) history('/main') }) } // 헤더에 토큰을 넣어줌 import axios from 'axios'; e.. 2022. 10. 31. 이전 1 ··· 5 6 7 8 9 10 11 다음 728x90 반응형
