주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

.tpl 파일로 작업을 하는데, VSCode가 따로 확장자 인식을 하지 못해서 text와 같이 취급이되는 경우가 불편해서 찾아보게 되었습니다. 인식하지 못하는 상태의 .tpl 파일 상태 오픈한 파일만 html 코드스타일로 확인하기 1.VSCode 우측 하단 바에서 Plain Text 클릭 2.박스에서 HTML 클릭 전체 파일에서 html 코드스타일로 확인하기 1. 세팅을 열어줍니다. File > Preferences > Settings 또는 단축키 Ctrl + , 2. file associations 검색 후 Edit in Settings.json 클릭 3. file.associations 값 입력 *.tpl 로 입력한 것은 모든 .tpl 확장자를 가진 파일을 html과 같이 인식하라고 설정하는 부분입니..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn react는 setState로 state관리를 한다. 불변성을 지켜야하기때문에 아래와 같이 사용했는데 this.setState({ value : this.state.value }); 리액트 로직이 기존 state와 새로운 state를 비교하여 재 렌더링하기 때문에 참조형인 array, object 같은 경우에는 주의해야한다. 이때 배열에 push하게 되면 기존 참조된 배열에 push가 되기 때문에 기존 state와 새로운 state는 같아진다. 따라서 아래와 같이 새로운 배열을 set해줘야한다. this.setState({ array ..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 부모컴포넌트에서 props를 getNumber라고 명명해서 넘기면 자식컴포넌트에서 this.props.{명명한 이름} 으로 받으면 된다. // 부모컴포넌트 // Test 컴포넌트 {this.props.getNumber} 간단한 경우 props를 전달해 사용할 수 있지만 복잡해질 경우 관리가 어렵다고 한다. 그래서 사용하는 것이 context나 redux 같은 것들. 앞으로의 강의에서 나오겠지. jsx에서의 주석은 return( {/* 이렇게 쓴다!! */} );

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 반복문을 돌릴때 key값을 필수로 입력해줘야한다. 성능최적화의 문제 따라서 key값은 단순히 index값이 아닌 유니크한 값이어야한다. i + 1과 같이 예제로 쓴 것도 좋지않다고한다. 추후에 성능최적화와 관련된 공부를 해야겠다. (수정 없이 추가만 단순히 할 경우 index만 넣어도 된다고한다) return ( {test.map((v, i) => { return ( ); })} );