본문 바로가기

반응형

전체 글

(361)
[ TS 에러] tsc : 이 시스템에서 스크립트를 실행할 수 없으므로 c:\users\user\appdata\roaming\npm \tsc.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_execution_policies(https:// go.microsoft.com/fwlink/?linkid=135.. 에러명 HTML 삽입 미리보기할 수 없는 소스 발생원인 외부에서 다운로드하는 스크립트의 경우 악의적인 코드가 심어진 채로 실행이 되면 이로인해 보안상의 문제가 발생할 수 있으므로 이에 대한 보안책으로 스크립트 실행을 거절하여 발생. 해결방법 외부 스크립트가 실행되는 것을 막아둔 것을 스크립트가 원격으로 서명이 이루어져 있다면, 실행 허용토록 설정하면 해결 됨. 1. [PowerShell] 을 [관리자 모드]로 실행 하고 다음 코드 입력 HTML 삽입 미리보기할 수 없는 소스 - 위 방식으로 설정하게 되면, 원격으로 서명이 이루어져 있는 등 보안이 보장된 스크립트만 실행토록 해준다. 2. 윗 마지막 코드 이후 'y' 입력 후 엔터
[javascript] 버튼 클릭 시 움직이는 슬라이딩 기능 버튼 클릭 시 슬라이딩 되면서 이미지가 전환되는 기능 1. 코드 See the Pen Untitled by youngwan2 (@youngwan2) on CodePen. let btn = document.querySelectorAll('button'); let 슬라이드 = document.querySelectorAll('.container .inner div'); console.log(슬라이드); console.log(btn); btn.forEach((btnEl)=>{ btnEl.addEventListener('click',()=>{ render(btnEl); console.log(btnEl); }); }); function render(btnEl){ 슬라이드.forEach((divEl)=>{ if(bt..
[React.Hook] 2. useEffect 개인공부용 useEffect : html 이 먼저 랜더링 된 이후에 코드를 실행토록 해주는 함수 또한, 특정 코드의 변경이 감지될 때만 실행되면 좋을 코드를 몽땅 넣어두는 저장소 import useEffect from ‘react’; /**==(중략)==*/ useEffect(()=>{ html 랜더링 이후에 실행한 코드 return ()=>{ /** 클린업 함수 : { }내 코드가 실행 되기 전 우선 실행되는 함수로 보통 { } 코드가 중첩되어 계속 쌓이는 것을 사전에 제거하여 방지할 때 활용 */ } },[ ] ); //ㄴ [ ] 내에 변수 등을 입력하면 [ ] 내 코드가 실행될 때 { } 내 코드가 실행되도록 함. /** ==(중략)== */ 1. 재렌더링마다 코드 실행 // 이 경우 useEffe..
[React] PropTypes "부모와 자식 컴포넌트 사이에 불일치하는 데이터타입 검사" 개인참고용 1. 사용목적 부모로부터 전달받은 prop의 데이터 type을 검사하여 데이터 타입 불일치로 인한 예상치 못한 문제를 사전에 방지함 타입스크립트를 설치하여 사용하는 경우에는 필요 없음. 자바스크립트만으로 개발해야 하는 환경에서 필수적임. 불일치 하는 경우 다음과 같이 콘솔창에 경고를 출력함. 2. 셋팅방법? [터미널] - [npm i prop-types] 입력 및 설치 import PropTypes from ‘prop-types’ 컴포넌트명.propTypes = { prop: PropTypes . 타입 . prop의 필수 여부 판단* } * isRequired : 타입 설정을 필수로 ( 이를 지정하면, prop은 무조건 해당하는 타입을 가져야만 한다.) -> 지정하지 않으면 경고만 한다. 주의..
[React.Hook] 1. useState 개인 공부용 useState : 임시로 값을 저장하여 활용하기 위한 함수 1. 형식 let [state 명, state 변경함수 ] = useState(state 변수의 초기 할당 값) state명과 state 변경함수 부분은 자유롭게 작명하면 됨. 하지만 둘 간의 연관성을 명확히 하기 위해 state 라고 변수를 적으면, 함수에는 setState 라고 적는게 일반적임 2. 설명 let [state, setState] = useState(0) 가 주어졌을 때, useState(0)은 state의 초기값으로 0을 지정한다는 의미 즉, 예시의 state = 0 setState 는 함수로 state의 값을 수정하는 함수임. 예를 들어, setState(5) 로 설정하면, state = 5가 됨 니꼬 선생님에 ..
react-dom.development.js:86 Warning: Invalid DOM property `for`. Did you mean `htmlFor`? 결론부터 말하면 for속성은 자바스크립트 문법이니, Minutes 리액트 jsx 문법에 맞게 htmlFor 속성을 써라는 말이었다. Minutes { temp = e.target.value }} type="number"> input 에 이름을 붙인다고 label 를 사용했는데, label 의 속성으로 for 을 사용하니 다음 에러가 뜨더라. 영어는 사절이므로 파파고에 돌렸더니 저런 의미였다. (뭐가 문제 인지 어떻게 써야하는지도 말해주는 리액트 개발자 분들의 친절함에 찬사를 보낸다.) " 경고: 'for'에 대한 DOM 속성이 잘못되었습니다. htmlFor를 말하는 건가요? " (넵! 그거 맞는 것 같아요! 정말 친절하시군요) 그래서 for 부분을 htmlFor 로 바꿔 주니 해결이 되었다. 잘 됐구나~..
[js입문] input 창에 숫자 입력을 방지토록 하는 방법?(이게 맞는지 몰겠지만) 어느 강의를 보면서 문자가 아닌 숫자를 입력하게 되면 경고창을 뜨도록 하는 alert 를 출력하라는 과제를 받았다. 과제를 보면서 문뜩 떠오른 것 중에 하나가 KeyboardEvent객체 안에 있는 keyCode(해당 문자/숫자의 유니코드 값을 반환해주는 이벤트 속성)가 떠올랐고, keyCode 의 유니코드 값 중 숫자에 해당하는 부분만 건드리면 만들 수 있지 않을까? 라는 아이디어가 떠올랐다 그래서 일단 숫자 0~9까지 해당하는 값의 유니코드 값을 찾아서 정리하였다. 숫자 유니코드 0 48 1 49 2 50 3 51 4 52 5 53 6 54 7 55 8 56 9 57 정리된 숫자의 범위를 바탕으로 if 조건문과 연산자를 활용해서 숫자의 유니코드 값 범위에 해당하는 숫자를 입력하는 순간 input의 v..
[js 기초] fetch 함수를 이용한 API 호출 연습(가짜 데이터) See the Pen Untitled by youngwan2 (@youngwan2) on CodePen.

반응형