배포할때, SPA 새로고침 오류를 방지하기위하여 설정을 추가해준다.그런데, 이렇게하면 배포서버에서는 괜찮지만 로컬서버에서는 오류가 남.이때 vite서버에서 주소를 수동으로 바꿔주어야한다.이 옵션을 추가해준 뒤, npm run vite(dev)로 비트 로컬서버를 켜준다.

이미지에 분명 높이를 px로 지정했는데 원하는 높이가 나오지 않았다. 어제 밤에 고심하다가 오늘 잘 아시는 팀원분께 여쭤보니display:flex속성때문 일수도 있다 하셨다. 제거하니 바로 원하는 높이가 나옴.=> flex속성에는 shrink같은 속성이 들어있어서 그럴

역시 트러블슈팅이 많다! 기록으로 남겨보자!또한 구조 짠것도 기록으로 남겨보자!검색하면 영화 카드들이 나오고 영화 카드를 선택하면 그 영화의 자세한 설명이 들어있는 페이지로 이동하게 만들것이다.재사용 가능하게 만들어야겠지?MovieCards : 검색했을때 나오는 영화

원래 사용하던 API방식이 아닌 vue3에서 등장한 방식!원래 사용하던 Options API방식보다 더 복잡한 애플리케이션을 제작할때 사용함또한 타입스크립트와 잘 연동됨ㅎㅎ백문이 불여일견 먼저 써보자!npm create vite@latest .으로 바이트를 이용하여 개

저번에 바닐라JS로 진행했던 노션클론 과제를 강사님이 뷰로 진행하신다.따라 쳐봤자 의미가 없어보인다.천천히 보면서 내가 만든 것과 어떠한 차이가 있는지 알아보자! 컴포넌트 단위로 나누실줄 알았는데, 일단 그리는 것이 먼저니까 레이아웃 단위로 나눈다.이렇게 하면 확실히

해쉬라우터가아닌 브라우저라우터 경로 새로고침하면 404에러 발생하는법 해결로컬환경(웹팩 데브서버 사용시)는 이렇게 해결함.beforeEach()메서드를 사용하여 라우터의 미들웨어 기능을 사용할 수 있음.=> 페이지 도착 전 적용되는 메서드이런식으로 사용하면 된다.bef

구조화된 배열같은 이터러블 또는 객체를 구조 파괴하여 변수에 개별 할당함.보면 바로안다.배열은 인덱스 순으로할당, 객체는 키를 뽑아와 사용하면 된다.기본값 설정, 스프레드 문법을 사용할 수 있음객체는 키 이름 변경이 가능함.중첩객체 추출은 이렇게...Rest프로퍼티,

Vuex Vue의 상태관리 라이브러리. flux패턴과 리덕스에서 영감을 받았다고 한다. 키워드만 잘 숙지해보자 state: 원본소스 역할(data) getters: stor의 state에 접근할때 사용함. 첫번째 전달인자로 상태를 받는다. (저장소 상태 기반하는

저번 시간에 배웠던 $emit을 말하는거다.위와같은 코드는 클릭이벤트가 발생하면 custom이벤트를 발생시킨다.참고로 자식 컴포넌트의 옵션 emits에 명시적으로 등록하는걸 권장한다.(등록하지 않아도 동작함)주의할점은 기본적인 이벤트click,keyup...등을 emi

광물끼리는 자리를 바꿀수 없다. 단, 곡괭이를 다 사용하거나 광물이 없을때까지 캔다.각 곡괭이는 5개씩 캘 수 있다. 즉, 곡괭이 수 만큼 광물을 5개씩 끊는다면 순서를 바꿀 수 있다.이때 어떻게 정렬하냐가 문제였다. 나는 다이아 > 철 > 돌이 많은순으로 정렬했다.테

n이 무지하게 높고, enemy의 길이도 크다.따라서 최소한 log n의 시간복잡도가 필요하다=> 이분탐색, 최대 힙 등.입국심사문제에서 사용했던 이분탐색이 떠올랐는데, 기준값이 생각나지않았음.left=0, right = enemy.length여기까진 왔는데...중간값

ES6에서 도입된 순회 가능한 자료구조를 만들기 위해 도입됨.ES6이전에는 각자 for..in, for...of, for등으로 순회를 하였으나 이젠 이터레이션 프로토콜(순회 규약)을 준수하게 만듬.따라서 순회 가능한 자료구조는 모두 이터레이션 프토로콜을 준수함.이터레이

major.minor.patch개편릴리즈패치node.js는 JS가 동작할수 있게 해주는 환경. 브라우저가 없어도 돌아감.Npm은 node package manager의 약어. JS로 만들어진 패키지들을 관리함.html 다 읽고나서 스크립트 실행하라고 body맨 아래 적

조건부 바인딩 v-if, v-else디렉티브를 이용하여 조건부 렌더링을 할 수 있다. v-else-if또한 가능하다. >결과: 아래와 같이 v-else나 v-else-if가 바로 전,후 형제요소가 아니라면 작동하지 않는다

왼쪽상단의 기능을 추가할것.자식문서를 클릭하면 조상까지 위치렌더링하는 부분을 추가해보겠다.사이드바에서 사용한 재귀적 렌더링을 활용해보면 좋아보임.사이드바의 재귀적 렌더링은 문서가 없을때까지 진행.문서 상단의 재귀적 렌더링은 선택한 문서의 id까지만 진행=> 재귀적 렌더

아래처럼 중복되는 표현식이 존재한다고 치자.반복되는 표현식은 함수로 바꿔줄수 있다.하지만 똑같이 4번의 표현식을 실행하는건 똑같다.4개면 다행이지, 단위가 커진다면 리소스가 꽤 낭비된다.이를 보완하는 기능이 Computed다.언뜻보면 표현식을 4번 실행하듯 보이지만,

두달이 쏜살같이 지났다. 하루하루 몰입이 늘어날수록 시간도 빠르게 지나간다.2차 단위기간 10.19~11.19의 회고는 KPT(Keep, Problem, Try)방식으로 회고해보려한다.성취감이 은근 많았던 달이다.1차 단위기간과 비교하면 몰입이 늘었다. 개인적인 시간을

공식문서가 한글을 지원하는 위대한 프레임워크..!!검색하면 보통 버전2 내용이 많을텐데, 요즘은 버전3을 많이쓰니 버전3으로 검색해서 사용하자.Vue의 대표적인 기능은 선언적 렌더링과 반응성이다.여기서 counter라는 데이터값은Proxy라는 객체에 들어가있다.실제로

useSelector는 선택자함수를 받아와, 선택한 상태를 구독(변경시 리렌더)해주고 반환해줌.이렇다면 각 상태마다 옵저버블한 인스턴스를 생성해야하는데, 어떻게 해야할지 고민됐다.받아온 선택자 함수로 얻은 값(상태)로는 고유하게 구분할 수 없어보임.몇시간동안 고민하다가

리덕스와 비동기 리덕스의 흐름은 다음과 같다 action을 dispatch로 넘겨준다. reducer가 이를 토대로 새로운 상태를 생성해서 전역 스토어에 저장한다. 2-1. 전역스토어의 key값은 reducer의 이름임 뷰에서 이 상태를 가져오려면 getState