FrontEnd56 [Vue.js] Lazy Loading Routes 공식 문서 해석, 기록 공식 문서에서의 Lazy Loading 공식 문서 번들러를 이용해서 앱을 빌딩하면 JS번들은 꽤나 커진다. 그래서 코드를 Chunk 단위로 쪼개는게 효과적이다. 그리고 routing 될 때만 로드 하는게 효과적이다. Lazy Loading 하는 법 // replace // import UserDetails from './views/UserDetails' // with const UserDetails = () => import('./views/UserDetails') const router = createRouter({ // ... routes: [{ path: '/users/:id', component: UserDetails }], }) 위처럼 import문을 "Dynamic imports" 로 변경하고.. 2022. 9. 14. [Vue.js] vue3 - vue router 설치, Lazy Loading 설정 서론 Vue3 강의 밖에 없어서 vue3를 기준으로 공부를 시작합니다. 연휴기간 시간이 없었기에 아직 HelloWorld를 벗어나지 못한 상태이지만, 그래도 이제 vue에 대해 알아가고 있으니 좋게 생각해야겠죠?! vue router 설치 vue add router 치면 알아서 설치를 해준다. src 하위에 router, views 폴더가 생긴다. Lazy Load (비동기 컴포넌트) 구성하기 import { createRouter, createWebHistory } from 'vue-router'; import HomeView from '../views/HomeView.vue'; import ContactView from '../views/ContactView.vue'; // import AboutVi.. 2022. 9. 14. [Vue.js] 튜토리얼 따라하는데 시작부터 에러 난 단지 헬로 월드만 찍고 싶었을 뿐인데... 시작부터 에러가 많이 나네요. (component name "" Should always be multi-word) 다행히도 검색해보니 이건 별건 아니고, Default로 지정되는 eslint에서 컴포넌트 이름을 multi-word로 하라는 설정이 되어 있어서 그렇다고 하네요. 간단하게 lint를 무시해주려면 아래와 같이 하면된다. // @vue.config.js const { defineConfig } = require('@vue/cli-service'); module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, }); 그러나 경험상 lint는 귀찮지만 도움이 되는 친구이.. 2022. 9. 10. [Vue.js] Vue.js 찍먹을 위한 초기 세팅 Vue2를 레거시로 가진 회사에서 인턴을 하게 되었습니다. 인턴 시작 전 Vue2를 공부하고 세팅 정도는 문제없이 하기 위해 포스팅합니다. 대부분의 출처는 : 한시간만에 배우는 VueJS 입문 입니다. Vue Cli로 프로젝트 생성하는 법 npm i -g @vue/cli 로 vue cli 설치 vue create . 으로 현재 폴더에 프로젝트 설치 (폴더 생성하며 만들려면 vue create 원하는폴더명 ) 이후 선택창에 default (vue2/eslint) (vue3/eslint) 등 선택지 생김, 일단 첨이니까 vue2 Default로 선택 npm run serve 하니 vue로 만든 첫 프로젝트를 만났다! ㅎㅎ react로 팀플 2개 돌려봤더니 vue시작이 엄청 어려울 것 같진 않다. 오히려 새로.. 2022. 9. 10. [React.js] Styled Components 파일 분리 멘토 코드 리뷰 Styled Components 스타일드 컴포넌트를 프로젝트에서 사용하면서, 도대체 어떻게 써야 잘 쓰는건지 감을 못잡고 있었습니다. 그러던 중 동기 분이 이전 기수들 코드를 통해 파일분리를 하고, 쉽게 사용하는 방법을 알려줬습니다. 하지만 코드리뷰를 통해 조금 더 컨벤션에 가까운 best practies를 알게 되었고, 해당 리뷰를 반영하게 되었습니다. 멘토님의 깃헙 프로필을 까는게 개인정보 보호상 안좋다고 생각하여 프로필부분은 날렸습니다. 개인적으로 위 세가지 링크가 정말 도움이 많이 되어 포스팅으로 남깁니다. Styled Components Best Practices The 3 essentials to get started with styled-components default export와 nam.. 2022. 9. 4. [React.JS] Fetch문 Try-Catch로 Error handling하기, Async-Await로 가독성 개선하기 Fetch문은 필수 프로젝트에서 Fetch문은 당연히 필수적으로 사용하는 부분입니다. 근데 이 Fetch문에서 문제가 생기는 경우가 많다는 걸 조금씩 깨닫고 있습니다. Fetch가 끝나지 않았는데 존재하지도 않는 데이터로 map()함수를 돌린다던지....(이전 포스팅) 등등 BE-FE의 통신 부분인 Fetch문이 굉장히 중요합니다. 그렇다면 FE에서도 이런 Fetch문을 그냥 둘수는 없지 않을까요? BE에서 여러가지 경우의 수를 생각하며 Validation과 Try-Catch문에 힘을 쓰는데, 우리도 Fetch에서 에러가 났을 때 확인도 하고, 처리도 할 수 있도록 해야 하지 않을까요? 단순 Fetch 코드 useEffect(() => { fetch('/data/releaseProducts.jso.. 2022. 8. 22. [React.JS] (Refactor) Array.filter()를 이용한 검색 기능 리팩토링 검색 기능 리팩토링 건 검색 기능을 구현했다는 포스팅을 올렸었습니다. 해당 기능까지 구현 후 다른 공부를 하다 더 좋은 필터코드를 발견해서 해당 코드로 리팩토링 후 기능이 정상 작동하는 지 확인 하고 포스팅을 올립니다. import React, { useEffect, useRef, useState } from 'react'; import SearchBox from './Components/SearchBox/SearchBox'; import CardList from './Components/CardList/CardList'; import './Monsters.scss'; function Monsters() { const [monsters, setMo.. 2022. 8. 16. [React.JS] shouldComponentUpdate(), React.memo() 공식 문서에서는? shouldComponenteUpdate(nextProps, nextState) 생활코딩 강의 중 shouldComponentUpdate() 가 나왔습니다. 생활 코딩 Class형 컴포넌트 리액트 강의 중 state의 배열을 array.push()를 통해 state를 변경 하는것이 불가능 하고, 새로운 배열을 만들어서 넣어야 한다고 했습니다. 여기서 한 걸음 더 나아가 추가 강의로 왜 그런지 찝찝한 분들을 위한 강의가 있었습니다. 그래서 그게 뭐임? shouldComponentUpdate() 함수는 props, state가 새로운 값으로 갱신되어 렌더링이 발생되기 직전에 호출됩니다. 해당 함수에서 return false일 경우 렌더링이 일어나지 않고, return true가 될 경우 렌.. 2022. 8. 15. [React.JS] 함수형 컴포넌트 => 클래스형 컴포넌트 import { useEffect, useState } from 'react'; import Comment from './Comment'; import './Article.scss'; function Article({ userId, profileImg, feedContents, feedImg, commentsListProps, }) { const [loggedInUserId] = useState('chaedong'); const [commentsList, setCommentsList] = useState([]); const [commentContent, setCommentContent] = useState(''); const inpu.. 2022. 8. 12. [ReactJS] Input 창 입력에 따른 검색 기능 (Arrays.filter() 활용) Input 창 입력에 따른 검색 기능 (Arrays.filter() 활용) 1시간 이내로 끝나버린 과제여서 난이도 설정이 조금 아쉬웠다. 그래도 이렇게 토이 프로젝트를 통해 배운 내용들을 복습 하니 너무 좋았다. 리액트라는 걸 활용해 이렇게 뭔가 만들어 냈다는 것이 너무나 뿌듯하고 좋았던 과제였다. 아래는 해당 과제의 핵심(?)인 검색 기능 ! import React, { useEffect, useRef, useState } from 'react'; import SearchBox from './Components/SearchBox/SearchBox'; import CardList from './Components/CardList/CardList'; import .. 2022. 8. 12. 이전 1 2 3 4 5 6 다음
