티스토리

JudithHopps

검색하기

블로그 홈

JudithHopps

judith-hopps.tistory.com/m

Judith Hopps 님의 블로그입니다.

구독자: 1

방명록 방문하기

반응형

주요 글 목록

[11/9] 과제 A. 헤더 1. 로고 사진 반응형으로 width 수정 .image-wrapper{ width:50%; } .logo { max-width: 100%; height: auto; } 2. 로그인 시 프로필 사진 표시 후 드롭다운 설정하기 My page 닉네임 수정 프로필 사진 수정 로그아웃 3. 헤더 화면 줄일 시 아이콘 밑으로 내려오는 것 수정 .headerDesign { max-width: 100%; margin: 0 auto; max-height:100%; } B. 헤더& 푸터 상관관계 1. 헤더 디자인 - 푸터 디자인 위치 맞추기 class="d-flex align-items-lg-center me-4" C. 푸터 1. 푸터 바닥으로 붙이기 .footer { position: absolute; bot.. 공감수 0 댓글수 0 2022. 11. 9.
[form action] 검색어 쿼리로 전송하고 값 읽기 구현 화면 : 구현 방법 : home 화면에서 input 태그를 form으로 감싼다. input name을 설정한다. url 파라미터 값을 받아온다. const url = new URL(window.location.href); const urlParams = url.searchParams; let query = urlParams.get('query'); 원하는 곳에 배치한다. 공감수 0 댓글수 0 2022. 11. 2.
[input 박스 꾸미기] input 박스 안에 아이콘 넣기 완성샷 : 알고리즘 : input 박스를 감싸는 태그(div)의 css는 position을 relative로 설정하기 input 박스를 감싸는 태그(div)의 css는 display를 inline-block으로 설정하기 img css의 position을 absolute로 설정하기 input의 padding과 img의 위치를 설정한다. 코드 : {{inputRestList[rest-1]}} .search{ position: relative; display: inline-block; } .icon{ position: absolute; top:20%; left:1%; width: 30px; padding:5px; opacity: 70%; } 공감수 0 댓글수 0 2022. 11. 1.
[자동완성검색(2)] 입력값으로 자동완성 기능 작성하기 filter. match, include, startsWith 목적 : 인풋값과 맞는 테이터 리스트를 출력하기 코드 실행 : {{inputRestList[rest-1]}} const inputRestList = computed(() => { return highwayDataArray.filter((data) => data.includes(inputRest.value)); }); 실행 코드를 완성하기 전, 1. data.startsWith(inputRest.value))로 작성했을 때는 인풋값으로만 시작하는 검색어만 떠서 삭제했다. 2. data.match(inputRest.value))로 작성한 적이 있는데, 입력칸에 "("를 작성하려 할 때 콘솔창에 이런 에러창이 떴다. 공감수 0 댓글수 0 2022. 10. 19.
[자동완성검색(1)] 입력한 값으로 시작하는 array값만 출력하기 목적 : 사용자 input한 데이터로 시작하는 list의 값만 출력하기 구현 : 1. input값에 v-model을 이용한다. 2. v-model 값을 ref로 작성한다. 3. 검색창에 뜰 Array를 작성해준다. - 서버에서 데이터 받을 경우에는 부모 컴포넌트에서 suspense를 작성해준다. 4. input할 때마다 list가 달라지게 computed로 작성해준다. 5. filter와 starsWith를 작성해서 restList를 작성해준다. - (필터하고 싶은 array).startsWith("시작해야하는 문구") 식으로 작성해주면 된다. 아래 스크립트 참고. import { ref, computed,defineProps,defineEmits } from "vue"; import axios from.. 공감수 0 댓글수 0 2022. 10. 19.
[emit] 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달 (feat. script setup) script setup부분에서 emit을 어떻게 사용하는지가 관건이다. 사용 방법 : 1. 자식 컴포넌트에서 defineEmits을 import해준다. import { defineEmits } from "vue"; 2. emit을 선언해준다. const emit = defineEmits(['select']); emit('select', { selectedHighway: selectedHighway.value, selectedRestarea: selectedRestarea.value }); 3. 부모 컴포넌트에서 자식 컴포넌트를 import할 때 emit을 받아온다. @뒤에 있는 문구는 자식 컴포넌트의 emit 변수명이다. 함수는 아래 부모 컴포넌트에서 값을 받아올 함수명이다. 4. 부모 컴포넌트에서 아래.. 공감수 0 댓글수 0 2022. 10. 18.
[suspense] Component <Anonymous>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered. at <CategoryComponent onSele.. 에러 : 해결 방법 : 컴포넌트를 따로 생성한 후 부모 컴포넌트에서 suspense를 사용해준다 ==> 즉 자식 컴포넌트가 준비 될 때까지 부모 컴포넌트에서 대기하게 한다. 코드 : But...로드하는 과정이 자연스럽지 않아 #fallback문을 작성하는 것이 좋다. 아래 코드를 참고하길 바란다. 카테고리 : 공감수 0 댓글수 0 2022. 10. 18.
[별점 표시하기] vue.js에서 별점 표시하기 완성화면 : 배운 것 : 1. style에서 데이터바인드를 이용하려면 :를 앞에 붙여야 한다. 2. 별점을 체크할 때는 빈 별과 채워진 별을 만들어 겹치는 부분을 hidden 처리하는 것이다. 3. 상위 div에서 위치를 relative로 설정하고 하위 div의 위치를 absolute로 설정하면 위 span과 위치가 같아진다. 4. 기본적으로 &star, &hearts 등 유니코드를 지원해준다. 코드 : &star; &starf; .star-rating{ position: relative; color:gold; display: inline-block; } .star-rating_check{ position: absolute; top:0; color:gold; overflow: hidden; white-s.. 공감수 0 댓글수 0 2022. 10. 18.
[서버에서 데이터 받기] 토큰을 이용해서 이용자의 닉네임 표시하기 목표 : 사용자가 로그인을 했을 경우 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.. 공감수 0 댓글수 0 2022. 10. 17.
[5주차] 서버에서 데이터 입력받아 arr에 저장하기 문제점 : [[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로 생.. 공감수 0 댓글수 0 2022. 10. 11.
[5주차] TypeScript로 객체 배열 중복 제거 구현하기 문제점 : 카테고리 첫 번째 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.. 공감수 0 댓글수 0 2022. 10. 11.
[모달창] 부트스트랩 사용해서 구현하기 목적 : 부트스트랩으로 모달창 이쁘게 구현하기 코드 : 글쓰기 공통 임시저장 완료 실행 화면 : 공감수 1 댓글수 1 2022. 9. 26.
[모달창 구현] 모달창 구현 방법 목적 : 모달창 열기 닫기 버튼 생성 코드 : 공통 닫기 (생략) 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; } 실행화면 : 공감수 0 댓글수 0 2022. 9. 26.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.