JudithHopps JudithHopps

에러 : 해결 방법 : 컴포넌트를 따로 생성한 후 부모 컴포넌트에서 suspense를 사용해준다 ==> 즉 자식 컴포넌트가 준비 될 때까지 부모 컴포넌트에서 대기하게 한다. 코드 : But...로드하는 과정이 자연스럽지 않아 #fallback문을 작성하는 것이 좋다. 아래 코드를 참고하길 바란다. 카테고리 :

완성화면 : 배운 것 : 1. style에서 데이터바인드를 이용하려면 :를 앞에 붙여야 한다. 2. 별점을 체크할 때는 빈 별과 채워진 별을 만들어 겹치는 부분을 hidden 처리하는 것이다. 3. 상위 div에서 위치를 relative로 설정하고 하위 div의 위치를 absolute로 설정하면 위 span과 위치가 같아진다. 4. 기본적으로 &star, &hearts 등 유니코드를 지원해준다. 코드 : ☆ ★ .star-rating{ position: relative; color:gold; display: inline-block; } .star-rating_check{ position: absolute; top:0; color:gold; overflow: hidden; white-s..

목표 : 사용자가 로그인을 했을 경우 UI를 다르게 표시한다. 해결 방법 : 1. 토큰을 이용해서 이용자의 닉네임을 localStorage에 저장한다. nameData = await axios.methods .$callAPI('POST', 'http://localhost:5000/checktoken',tokenrInformation) .catch((e) => { console.log(e); }); //추후 닉네임으로 수정 필요! const name: string = nameData.data.result.name; localStorage.setItem('name', name); 2. Header에서 토큰 유무로 화면이 달라지게 표시한다. function loginTrue() { if (localStorag..

갑자기 vs code에서 단축키가 작동이 되지 않을 때 작업 표시줄의 언어키를 봐주세요. 한글키로 되어 있을거에요. microsoft로 바꿔주세요

문제점 : [[Prototype]]: Promise안에 data.list 값을 추출하고 싶다. 실행 과정 : 1. function getData() { highwayApiData.then((data) => { const highwayList1: highway[] = data.data.list; console.log(highwayList1); }); } https://velog.io/@zzero9158/javascript-promise%EC%9D%98-%EA%B0%92-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0 [javascript] promise의 값 가져오기 promise result에 접근하는 방법 velog.io ==> function 과정을 거쳐야 하고, 지역 list로 생..

문제점 : 카테고리 첫 번째 select문에서 같은 데이터값이 나열되고 있다. 해결 방법 : const removeDuplicates = (array: Array, key: string) => { return array.reduce((arr, item) => { const removed = arr.filter((i: any) => i[key] !== item[key]); return [...removed, item]; }, []); }; const high: highway[] = removeDuplicates(highwayList, 'routeNm'); routeNm 값이 중복되면 객체 value를 제거하게 작성했다. 참고 사이트 : https://ko.code-paper.com/javascript/ex..

목적 : 부트스트랩으로 모달창 이쁘게 구현하기 코드 : 글쓰기 공통 임시저장 완료 실행 화면 :

목적 : 모달창 열기 닫기 버튼 생성 코드 : 공통 닫기 (생략) export default { name: 'qaView', data() { return { modal: false, } } } body { margin : 0 } div { box-sizing: border-box; } .black-bg { width: 100%; height : 100%; background :rgba(111, 110, 110, 0.5); position: fixed; padding :20px; } .white-bg { width :100%; background: white; border-radius: 8px; padding: 20px; } 실행화면 :