popo story popo story

개발을 하다보면 input 의 빈칸여부를 확인해야될 때가 종종 있다. 예를 들어 로그인같은 경우, 아이디나 비밀번호가 빈칸일 경우 alert 를 띄워주는 경우도 있고.. 이럴때에 아이디나 비밀번호가 빈칸인지 확인을 해주어야하는데 이때 trim() 함수를 이용할 수 있다. 사실 아래 코드처럼만 써주어도 해당 문자열이 값이 없는지는 확인이 가능하다. if (!id) { alert("아이디를 입력해주세요"); } 하지만 이럴 경우 예외가 생길 수 있다. 예를 들어 id 가 문자열이 아닌 스페이스로만 채워져있을때 말이다 ( id = " " ) 이렇게 되면 위 조건문을 해당 id를 값이 없다고 판단하지 않아 alert를 띄우지 않는다. 따라서 이런 예외를 처리해주기위해 trim()을 사용할 수 있다. if (!i..

trim 함수는 양쪽 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환해주는 메서드이다. 즉 쉽게 말하면 어떤 문자열이 있을 때 양쪽 공백을 제거해준다 예를 들어 아래와 같이 본다면 var text = " 가 나 다 라 마 바 "; console.log(text.trim()); // output: "가 나 다 라 마 바" 양쪽 공백이 지워져 콘솔창에는 "가 나 다 라 마 바"가 출력될 것이다. * 한쪽만 공백을 제거하고 싶을 경우 혹시 양쪽이 아니라 한쪽만 trimStart() 나 trimEnd() 를 사용하면 된다 - 시작부분 공백 제거 var text = " 가 나 다 라 마 바 "; console.log(text.trimStart()); // output: "가 나 다 라 마 바 "..

우리가 보통 문자열에 공백을 주고 싶을 때, 를 많이 이용한다. 하지만 종종 가 적용이 안될 때가 있는데, 그럴 경우 어떻게 문자열 안에 공백을 주어야하는지 알아보자! 는 웹페이지에서 공백을 주기위해 사용하는 특수문자로, HTML이 이것을 공백으로 읽어 공백을 준다. 하지만 string 문자열 안에 공백을 주고 싶을 경우 , 예를 들어 const content = [ { color: 'var(--main-blue)', text: 'IT주' }, { color: 'var(--type-black)', text: '와' }, { color: 'var(--main-blue)', text: '첨단 기술주' }, { color: 'var(--type-black)', text: '의 비중이 가장 크네요' } ] 이런..

서버에서 json 형식으로 텍스트 데이터를 전달받거나, props 로 텍스트를 전달받은 경우 만약 ' 안녕하세요 \n 홍길동입니다 ' 이런 텍스트를 전달받으면 리액트에서는 \n 이 줄바꿈이 되지 않고 string 타입/텍스트 형태로 렌더링 된다 즉 , 안녕하세요 홍길동입니다 줄바꿈으로 인식되지 못하고 이렇게 한줄로 출력되는 것이다 태그를 사용한다고 해도 마찬가지인데, 이럴 경우 어떻게 줄바꿈으로 처리할 수 있는지 알아보자 string 타입으로 인식된 태그나 \n 을 태그로 replace 하면 된다 split 과 map 을 사용하여 \n 을 기준으로 \n 대신 태그를 사용해준다 content.content 에 렌더링할 내용이 들어가있다고 하자 { content.content != undefined ? co..

onSubmit 이벤트는 form전송을 하기 전에 입력된 데이터의 유효성을 체크하기 위해 사용하는 이벤트로, type = "sumbit" 이라는 input을 클릭하면 유효성을 체크하고 true 일 경우 함수 실행한다 따라서 실행할 함수를 return 으로 반환(?)해주어야 한다 const onSubmit = () => { alert("확인"); return false; } return ( return onSubmit()} action="./" > Back ) submit 할 버튼에 type="submit" 을 꼭 작성해주어야하고, submit시 실행할 함수 앞에 return 을 써주는 것을 잊지 말아야한다 !! 만약 return 을 쓰지 않고 onSubmit={onSubmit()} 이렇게 작성한다면 데이..

콜백함수에 인자를 넘겨주냐 / 넘겨주지 않느냐에 따라 onClick 이벤트 함수 작성법이 달라진다. ① 아무런 인자도 넘겨주지 않을 때 return ( {alert("Hello")}}> CLICK ) 간단한 함수라면 이벤트에 바로 작성해주거나 const onClick=()=>{alert("Hello")}; return ( CLICK ) 함수 내용이 조금 복잡하다면, 바깥에 따로 선언해주고 onClick 이벤트에서 호출만 해주면 된다 ② 파라미터를 넘길 때 onClick 이벤트를 통해 함수에 파라미터 값을 넘겨주려면, 아래처럼 화살표 함수를 이용하면 된다 const onClick=(params)=>{ console.log(params); }; return ( {onClick(params)}} /> CLIC..

버튼을 클릭했을 때 인터넷 사이트가 열리게 하는 방법 window.open() 을 이용하면 된다 window.open('http://www.~~~')}> 클릭 태그에 onClick 함수를 이용하여 window.open 안에 괄호 안에 열고자하는 사이트 주소를 적는다. '클릭' 이라는 글자를 누르면 작성한 주소의 웹페이지가 열린다