써치킴의 우당탕탕 개발 블로그

전통적인 Web Application 1. 사용자가 google.com을 접속하면 google.com에 해당하는 서버로 최초 페이지 요청 2. 서버에서 사용자에게 기본적인 HTML 파일을 내어줌 3. 사용자는 브라우저에서 내어받은 HTML 파일이 렌더링된 결과를 볼 수 있다. 4. 만약, google.com/about 페이지로 접속하면, google.com에 해당하는 서버로 about에 대한 새로운 페이지 요청 5. 서버는 about에 대한 새로운 HTML 파일을 내어줌 6. 사용자는 브라우저에서 내어받은 새로운 HTML 파일이 렌더링된 결과를 볼 수 있다. => 데이터를 요청할 때마다 페이지를 로드한다. SPA(Sing Page Application) 1. 사용자가 google.com을 접속하면 goo..

Git 1. git repository 생성 https://github.com/ejkimDev/vue3_movie_app.git ejkimDev/vue3_movie_app Contribute to ejkimDev/vue3_movie_app development by creating an account on GitHub. github.com 2. git init : 버전 관리를 시작하겠다. 3. git add . : 전체 파일을 Git으로 버전 관리 등록 4. git commit : Git 커밋 5. git remote add origin https://github.com/ejkimDev/vue3_movie_app.git : GitHub 저장소 등록 6. git push origin master : 원격 ..

RouterView 페이지가 출력되는 영역 컴포넌트 > 변경하는 페이지가 출력되는 영역 RouterLink 페이지 이동을 위한 링크 컴포넌트 > HTML의 a 요소 대신 사용 $route Route(페이지) 정보를 가지는 객체 -> 속성들이 들어있음 (ex. fullPath, params) $router Route(페이지) 조작을 위한 객체 -> 메소드가 들어있음 (ex. push) 페이지 주소의 속성 https://google.com은 도메인이다. key-value 형태로 데이터를 구분

버그 수정 및 최적화 버그 1. 영화 목록에서 상세 페이지로 이동하면 스크롤이 가장 아래로 내려가 있다. 버그 2. 상세 페이지에서 메인 페이지로 돌아가면 검색 요소는 초기화되어 있지만 영화 목록은 전에 검색한 목록이 표출된다. vue router 홈페이지 > Advanced > Scroll Behavior 확인 const router = createRouter({ scrollBehavior(to, from, savedPosition) { // always scroll to top return { top: 0 } }, }) 페이지를 이동할 때마다 스크롤을 항상 최상단에서 시작할 수 있다. 버그 1 수정 route > index.js > scrollBehavior 함수 추가 scrollBehavior() ..

Store 데이터를 상태라는 개념으로 state에 정리 state를 계산된 형태로 제공하기 위해서 getters state를 수정하기 위해서 mutations state, getters, mutations를 활용해서 함수처럼 actions를 사용 state, getters는 그대로 쓰는데, mutations, actions는 함수처럼 실행해야하는 개념이기 때문에 commit으로 mutation을 dispatch로 actions를 실행할 수 있다. ...mapState, ...mapGetters => computed 옵션에서 사용 ...mapMutations, ...mapActions => methods 옵션에 등록

about.vue > store에서 계산된 데이터를 반복적으로 가져와서 사용한다. 반복되는 코드를 간소화시킬 수 있는 상태관리 라이브러리를 제공하는 Vuex의 기능을 사용해보자. 구글에 vuex next 검색 > https://vuex.vuejs.org/ 이동 > Core Concepts > State > The mapState Helper 참고 The mapState Helper state를 map을 이용해서 반복적으로 출력하여 computed 옵션에 등록 computed: mapState([ // map this.count to store.state.count 'count' ]) The mapGetters Helper 사용하고자 하는 데이터를 문자데이터로 명시해서 전개연산자로 풀어준다. ...mapG..

부트스트랩이 필요할때마다 부트스트랩을 지정해놓은 main.scss 파일을 import 했다. 매번 main.scss 파일을 가져오는 것은 불편한 일이기 때문에 webpack 번들러를 통해 main.scss를 명시하지 않아도 컴포넌트 내부에서 사용할 수 있게 만들어보자. 1. 구글에 sass-loader github > https://github.com/webpack-contrib/sass-loader 이동 > Options > additionalData 확인 module.exports = { module: { rules: [ { test: /\.s[ac]ss$/i, use: [ "style-loader", "css-loader", { loader: "sass-loader", options: { addit..

! 부트스트랩 > Docs > Layout > Breakpoints 참고 변수를 통해 입맛에 맞게 수정할 수 있다. $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ); 특정 사이즈보다 큰 경우, 어떻게 수정하겠다! 라고 작성할 수 있다. (Min-width) // No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }` @include media-breakpoint-up(sm) { ... }// 뷰포트의 크기가 sm보다 클 때 @include media-breakpoint-up(md) { ..

사용자가 접근하는 모든 페이지를 캐치해서 404 메시지가 보일 수 있도록 처리 1. NotFound.vue 생성 404 Page Not Found! 2. route > index.js > routes 옵션에 연결할 컴포넌트 추가 { path: '/:notFound(.*)', // notFound 아닌 아무 파라미터 이름도 상관없다. component: NotFound // NotFound 페이지로 이동 } . : 임의의 하나의 문자와 일치한다. * : 최대한 많은 문자와 일치하려고 노력한다. => .* : 모든 문자와 일치한다. 출력 ! vue router 홈페이지(https://router.vuejs.org/) 이동 > Essentoals > Dynamic Route Matching > Catch al..

1. about.js 작성 /* 개발자 / 사용자와 관련된 데이터를 취급하는 파일 */ export default { namespaced: true, // state는 객체 데이터를 반환 // 함수로 만든 이유? // 객체 데이터는 배열 데이터와 동일하게 참조형 데이터이다. // => 데이터의 불변성을 유지하려면 함수로 만들어서 반환해야 데이터가 고유해진다. state: () => ({ name: 'EJKIM', email: 'ejkim.dev@gmail.com', blog: 'https://searchkim.tistory.com', phone: '+82-10-6631-6158', image: 'https://tistory3.daumcdn.net/tistory/4669904/skinSetting/4a03..