본문 바로가기

전체 글349

Vue(3) - 같은 value의 라디오버튼 그룹 선택 시 자동클릭 오류방지 문제상황 열심히 라디오 버튼으로 비만 테스트를 만들었다. 그런데 문제가 생겼다. 1번 보기나 2번보기를 처음 클릭했을 때 3번보기로 자동선택되는 현상이 나타났다. 해결하고자 영어로 열심히 구글링까지 해봤지만 답을 찾지 못했다. 결국 왜 나만안됨 까지 검색해봤으나 정말 없었다. 이슈화면 문제원인 - 원인은 input 의 value 가 셋 다 같은 값이기 때문이다. 아래는 내가 짠 코드이다. 빨간 박스의 value 가 0 으로 같다. - 그래서 세 개 중 하나를 클릭 했을 때 최근 마지막 코드(3번째)로 자동 선택 되는 것 같다는 결론을 내렸다. 문제해결 HTML - value 에 숫자 대신 알파벳을 대신 넣는다. 이 알파벳은 나중에 숫자와 매핑될 것이다. - 이 버튼을 클릭하면 선택한 value 의 숫자가.. 2021. 5. 12.
JavaScript - map 함수란 (feat. filter) map () 이란 - 반복문을 돌며 배열 안의 요소들을 1대 1로 짝지어 매핑해준다. - 결과로 나오는 새 배열과 !== 기존배열 은 다르다. (기존 배열을 수정하지 않고 새로운 배열을 만들기 때문) - 단, [ 배열 안에 { 객체 } 가 들어있으면, ] 객체는 공유된다. 새 배열 = 기존 배열.map((요소, 인덱스, 배열) => { return 요소 }); map() 으로 짝수만 출력하기 - 새 배열의 아이템 갯수는 === 기존배열 아이템 갯수와 같다. 그래서 map으로 거른 부분을 제외한 나머지는 undefined 가 된다. 출력화면 ** tip. 만약 빈칸으로 남아있는게 싫다면 filter 함수로 필터링 해주면 된다. filter() 으로 짝수만 출력하기 출력화면 ** 나의생각 map 과 filt.. 2021. 5. 12.
React(28) 리액트 훅 useContext 란 useContext 란 context 를 사용할 때, (즉 할머니 컴포넌트가 특정 손주 컴포넌트 한테만 다이렉트로 데이터(용돈)를 쏴주려고 할 때) 그 귀여운 손주는 useContext 라는 훅을 사용해서 할머니의 데이터(용돈)를 받아 사용할 수 있다. (할머니땡큐) ** Context 와 Context API 의 자세한 기본 개념은 아래 포스팅을 참고해주세요. React(26) 리액트 훅 Context API 란 Context API를 사용하는 이유 React 에서 일반적인 값을 전달하는 방법은 하향식(부모→자식)으로 전달해야한다. 보통 상위에서 → 하위컴포넌트로 속성값을 전달하는데 상위 → 하위 → 하위 → .... devbirdfeet.tistory.com Grandmama.js - createCo.. 2021. 5. 7.
javaScript - slice와 splice 비교하기 updated(01/20/24) splice 와 slice 로 배열의 원소들을 추가 삭제 교체 등을 해보자! - slice 는 원본 배열을 건드리지 않고, 수정된 복사 배열을 리턴한다. (삭제만 가능) - splice 는 직접적으로 삭제, 추가, 교체한 원본 배열을 리턴한다. (삭제 교체 추가 가능) slice( 시작인덱스#, 마지막인덱스# ) copy 된 새로운 배열 이 나온다 (원본은 유지) 이친구는 삭제만 가능하다 시작인덱스# 부터 ~ 마지막 인덱스# 직전까지만 삭제된다 **마지막 인덱스#는 optional 로 안넣으면 끝까지 삭제된다 const arr = [a, b, c, d, e]; 이고 const copy = arr.slice(1, 4); 이면 첫번째 인덱스 부터 4번째 인덱스 직전(=== 3.. 2021. 5. 7.
JavaScript - 비구조화 할당하기 비구조화 할당(Destructuring Assignment)이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 ECMAScript6(2015)에 추가된 자바스크립트 표현식(expression)이다. BEFORE 비구조화 할당 원소에 별명(변수)를 붙여 따로 불러내고 싶다. (너만💛) 근데 걸림돌이 있었으니.... 변수 선언을 거쳐야 불러낼 수 있다는 거다. 그래서 다이렉트로 부를 수 있게 비구조화 할당이 나왔다. AFTER 비구조화 할당 변수 선언과 객체(혹은 배열) 선언을 한방에 할 수 있다. (이젠 우리 둘이 다이렉트로 볼수있어💛) 배열일 때는 const [ 변, 수, 이, 름 ] 으로 = [ "선언해주면", "순서대로", "배열원소와", "매칭된다." ] 객체일 때는 - .. 2021. 5. 6.
javaScript - input type="file" 특정 파일확장자 이미지 업로드 이미지 업로드 기능을 구현 중이다. 특정 파일확장자만 업로드 하고 싶다면 에 accept 속성을 추가하자 ! // gif, jpg, png 파일만 보여줌 // 모든 오디오 파일을 보여줌 // 모든 비디오 파일을 보여줌 // 모든 이미지 파일을 보여줌 파일업로드 버튼을 눌러 파일선택창이 나타나면 !! accept 로허락한 파일만 마우스 클릭이 가능하다. 2021. 5. 1.
반응형

티스토리툴바