전체 글 (397) 썸네일형 리스트형 [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. 자바스크립트의 숨겨진 문법?? 처음 알게 된 '...'의 기능 자바스크립트 코드를 만지작 거리고 있는데, 우연히 처음보는 변수 접근법? 같은 것을 알게 되었다. 대략적으로 설명하면 문자열 변수의 값을 각각 인덱스로 구분하여 배열로 만드는? 그런 접근법 이었는데, 글로 설명해 놓을 자신이 없어서 그냥 코드로 남겨 본다. 아래 예시 코드를 보면 알 수 있듯이, 처음 선언한 person 변수의 "kim" 이라는 문자열이, 두 번째로 선언된 배열형 변수 person2의 값으로 복사된 것을 확인할 수 있다. const person = "kim" const perosn2 = [...person] console.log(perosn2) console.log(perosn2.length) ------------------------------------------------- [ '.. [js입문] 계산기 만들기 See the Pen Untitled by youngwan2 (@youngwan2) on CodePen. 이번에는 자바스크립트를 이용해서 간단한 계산기를 만들어 보았다. 만들기 전에 컴퓨터 계산기의 원리에 대해 구글링 해보았다가 멘탈이 터져서 흐물흐물 해질뻔 했다.. 암튼, 계산기 형태는 유튜브에서 어느 친절한 유튜버분(수코딩)이 계산기 강의를 하셔서 거기서 참작하여 카피했다. 그 외에는 홀로 직접 코드를 하나 씩 구성하여 기능을 구현하였다. 처음 코드를 작성 시 젤 먼저 생각 났던 것은 기존에 존재하는 계산기가 어떠한 방식으로 값을 전달 받아 출력을 하는가에 대한 방향성이었다. 물론, 나의 자그마한 지식으로는 하나하나 독파하는 것은 현재로서는 시간적으로나 실력적으로나 불가능하다고 판단했고, 자바스크립트.. [입문] 체크박스 속성 값 for 문 이용해서 확인하기 왜 영상이 다른 곳으로 배포가 되는진 모르겠지만, 혹시나 보셔서 시간 날리신 분 있으시면 죄송합니다 ㅠㅠ [입문] 날짜 간격 구하기 See the Pen Untitled by youngwan2 (@youngwan2) on CodePen. 간편하게 날짜 간격을 구할 수 있는 코드. 누가 봐도 단순한 기능 구현에 4일이 걸렸다.. 분명 이 코드에도 문제가 있을 가능성이 높지만, 지금의 수준에서는 이 이상 완벽할 수는 없다는 생각이 든다. (향후 실력이 더 쌓이고, 다시 손보러 와야 겠다.) 코드 자체는 단순했고, 자바스크립트 상에서 콘솔창으로 출력해 내는 것은 쉽게 간단했지만, 이를 웹 페이지 상에 나타내도록 코드를 구상하는 데 많은 시간이 걸렸다. 이론적인 부분만을 공부했을 때는 이거 너무 쉬운거 아니야? 라고 생각했었는데 , 막상 아무런 설명도 없이 혼자 이리저리 짜보려고 하니 마음대로 되지 않았다. 특히,, 이벤트 참조 오류와 nu.. 이전 1 ··· 45 46 47 48 49 50 다음
