seungineer

어떤 웹사이트에서 form을 입력할 때 입력이 모두 완료되면 자동으로 다음 입력해야 하는 빈칸으로 넘어가도록 구현된 웹사이트가 많다. id와 pw를 입력받을 때 id를 10자 이상 입력하면 pw 입력 칸으로 바로 넘어가는 기능을 구현하던 중 React의 배치 업데이트 특성을 잘 살려서 구현되었는지 의문이 들었다.구현 App.js의 App() 컴포넌트에서 return 하는 input tag를 다음과 같이 구현할 수 있다.function App() { ... useEffect(() => { if (id.length >= 10) { pwRef.current.focus(); } }, [id]); return ( 아이디 : ..

구현을 위한 MEMOindex.html에 라이브러리 스크립트로 이미 포함되어 있기에 전역 객체로 추가되어 있음- 따로 import 하지 않아도 사용 가능// ex)const randomNumber = Random.pickNumberInRange(1, 9);import모듈에서 여러 멤버를 가져올 수 있다. 아래의 import로 현재 범위 내에 foo, bar 멤버를 포함시킬 수 있다.import { foo, bar } from "my-module.js";commit message convention(Angular JS)- 커밋 전에 확인하기!!더보기Subject lineSubject line contains succinct description of the change.Allowed feat (featur..

2.1 const, let을 이용한 변수 선언var를 이용한 변수 선언의 문제점- 덮어쓰기 가능 : 한 번 정의한 변수에 다른 값을 대입할 수 있음(의도하지 않게 덮어써질 수 있기에 무조건 덮어쓰는 것은 좋지 않음)- 재선언 가능 : 프로그램 실행 순서에 따라 어느 변수가 사용되는지 해석하기 어려움(var가 '변수'라는 뜻이기에 둘 다 변동 가능하다고 생각, var는 자주 사용하지 않음) let을 이용한 변수 선언- 덮어 쓰기 가능- 재선언 불가능(let이 'OO이라 하자~'라는 뜻이기에 선언은 한 번 했고, 덮어쓰기는 가능한 var가 선언되었다고 생각)let v1 = 3;console.log(v1) // 3v1 = "문자열로 덮어써버리기~~";console.log(v1) // 문자열로 덮어써버리기~~t..

1.5 모듈 핸들러, 트랜스파일러리액트의 'create-react-app'을 사용하면 모듈 핸들러, 트랜스파일러 의식하지 않고도 개발할 수 있다. 하지만 복잡한 프로젝트인 경우 설정 파일을 조작할 필요가 있기에 내부 구조와 개념을 아는 것이 매우 중요하다.모듈핸들러자바스크립트는 기본적으로 '세세하게 나누어' 개발하는 것이 효율적이다. 이렇게 개발할 때 프로덕션 환경에서 로딩 횟수가 늘어나 성능이 저하되기도 한다. 그래서 개발할 때는 파일을 나누고, 프로덕션 용으로 빌드할 때는 파일 하나에 모으기 위해 js 파일이나 css 파일 등을 한데 합쳐주는 '모듈 핸들러'가 만들어졌다(세세하게 나뉘어 개발된 것을 '모듈', 이 모듈을 다뤄주는 게 '핸들러'라고 생각).트랜스파일러자바스크립트 표기법을 브라우저에서 실..