kasumil의 코딩 공작소

id가 "myInput"인 input 요소에서 value 값을 가져오는 코드는 다음과 같이 작성할 수 있습니다. import React, { useRef } from 'react'; function MyComponent() { const myInputRef = useRef(null); function handleClick() { console.log(myInputRef.current.value); // input 요소의 value 값 } return ( Click me ); } 위 예제에서 myInputRef 변수를 사용하여 ref를 생성하고, input 요소에 할당합니다. 그리고 handleClick 함수에서 myInputRef.current.value를 사용하여 input 요소의 value 값을 출력..

https://thingsthis.tistory.com/69

이동하기 href로 하는 것도 좋은데, 주소 노출이 되어 그냥 이렇게 전송하기로 했다. 단점이라면 이게 map함수 안에서 돌면 name을 동일하게 할 경우 호출시 컴퓨터가 구분하지 못 하므로 제대로 읽지 못하므로 name=`${index}` 로 하든가 해서 구분하게 하면 정상 작동된다. -출처- https://sururu.tistory.com/92 [javascript] a link 로 url 이동 시 파라미터 숨겨서 보낼 때 이동하기 url 을 공유할 수 있는 상황일 때 ( url 복사해서 링크를 공유하거나 이런 경우 ) 복사 된 url 에 붙어 있는 파라미터가 유일 값이어야할 경우 파라미터를 post 로 숨겨서 보내면 동일한 파 sururu.tistory.com

this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다. new.target키워드가 없습니다. 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다. 생성자(Constructor)로 사용할 수 없습니다. yield를 화살표 함수 내부에서 사용할 수 없습니다. - 출처 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions 화살표 함수 - JavaScript | MDN 화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가..

$("#test").click(()=>{ let dif=$(this).attr('value'); console.log(dif); }); 위 코드의 결과물은 "undefinded"이다. 왜? 라고 생각할텐데 그 이유는 $(this)가 해당 익명함수를 가르키는 것이 아니라 window 객체를 지칭해버린다. 즉, 저 함수 내부를 지칭하는 게 아니라 함수 밖을 지칭해버림. 그렇기에 이를 해결하려면, $("#test").click(function() { let dif=$(this).attr('value'); console.log(dif); }); 화살표 함수를 지우고 익명함수로 바꿔버리자. 그러면 $(this)가 익명 함수를 읽어버린다. console.log찍어보니 bind가 끊어지는 듯? 그래서 그런 듯 싶다.

복사가 불가능하다. 복사버튼을 클릭하면 input태그에 있는 value 값을 가져와 해당 값을 복사기능을 구현하고, input태그를 숨겨버리려고 했는데, 특이하게도 숨겨져있으면 복사가 안된다. 그래서 필요한 코드가 화면에 아예 안보이게 던져버리려고 해당 코드를 작성하였다. position: absolute; left:-1000px; top:-1000px; 원래는 buttton 태그 안에 value 값을 구현했으나 해당 부분은 ajax 같은 값을 어딘가에 넘길때나 쓰는거지 let ch = $(태그).attr('value'); ch.select(); => 작동 불가. $(태그).select() => value 값 못 가져옴. 이러길래 그냥 따로 input창 만들어서 후딱 해버렸다. 이런 기능에 시간 낭비하는..

Styled-component import React from 'react'; import styled from 'styled-components'; import Button from './components/Button'; const AppBlock = styled.div` width: 512px; margin: 0 auto; margin-top: 4rem; border: 1px solid black; padding: 1rem; `; function App() { return ( BUTTON ); } SCSS import React from 'react'; import './Button.scss'; function Button({ children }) { return {children}; } expor..

1 2 3 4 5 6 7 8 9 // id 체크 정규식 : 숫자, 영문만 입력 가능 var regExpId = /^[0-9a-z]+$/; // 비밀번호 규칙 정규식 // : 숫자, 특문 각 1회 이상, 영문은 2개 이상 사용하여 8자리 이상 입력 var regExpPw = /(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/; // 이메일주소 형식 체크 정규식 var regExpEm = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; 흔하게 보는 비밀번호 정규식이다. 8글자 이상 kisa가 지키라고 권고한 8글자 이상 비밀번호 정규식이다...

- 오늘 학습한 내용. CSS 선택자 종류 universal * type tag ID # class . state : Attribute [] display block : 화면에 보이도록 하는 고정. none : 화면에서 숨기는 것. 렌더링 하지 않음. null : 화면에 존재하나 보이지 않는다. position 2020/06/23 - [코딩/위코드 코딩과제] - position 속성 - relative, absolute, fixed position 속성 - relative, absolute, fixed Position 속성 relative absolute fixed static(앞서 코딩학습 2일차에서 잘 안쓴다는 속성이 static이다.) static static은 기본값입니다. position: st..

- 오늘 학습한 내용. callback 함수 : 다시 부르는 함수. 해당 값을 조건을 제공하여, 특정조건이 구현되면 작동하는 함수이다. 주로 setTimeout 함수를 이용하여, 시간조건 등을 사용. 동기 문법 1,2,3의 순서대로 작동하는 방식이다. .then, .catch등으로 사용할 수 있다. 비동기 문법 1,2,3을 순서 상관없이 그냥 작동하는 방식이다. 쓸데없이 기다릴 필요가 없어 선호되는 방식. Promise state : pending(작동 중) → fulfiled or rejected 1. Producer // 새로운 promise 함수를 생성할때, 그 함수는 자동적으로 작동한다. // 즉, 클릭시 발생하는지 여부를 확인해야한다. const promise = new Promise((reso..