Udemy 강의를 통해서 React,Next,Typescript.js를 공부하고 있다. 아직은 리액트 단계이지만, 내가 놓치고 있었던 부분들을 다시 한번 챙겨준다. 예를 들자면 export default ooo에서 default의 의미 같은 것들. 진짜 내가 개발 개념이 좀 많이 엉망이었구나를 깨닫게 해주는 유데미 강의이다 !

blockchain.js function Blockchain() { this.chain=[]; this.newTransactions=[]; }; //새로운 블록 만들기 Blockchain.prototype.createNewBlock = function(nonce,previousBlockHash,hash){ const newBlock = { // Blockchain 안의 새로운 블록 index: this.chain.length+1, // 블록 넘버 timestamp:Date.now(), //타임스탬프=블록이 생성된 시점 transactions:this.newTransactions, //새로운 블록을 만들었을 때 모든 새로운 트랜잭션,UTXO가 담김 nonce:nonce, //자격증명에서 온 단순한 값. P..

* 해당 강의는 Udemy의 React 완벽 가이드를 수강하고 작성한 TIL 입니다. 외국 강의이지만, 자막 설명은 물론 설명이 너무 잘 되어있어서 복기하기에 좋은 강의입니다 :) 1. let과 const의 차이점 let은 값을 수정할 수 있지만 const는 값을 수정할 수 없다. 그리고 JS에서는 대부분 const를 사용한다 const는 값이 변하지 않는 상수 변수이다. var을 사용하면 값이 바뀐 그대로 나온다. var 부분을 let 으로 변경하여도 brandy 그리고 jeonghoon이 출력된다. 그런데 여기서 let > const로 변경하면 어떻게 될까? TypeError가 발생한다. 상수 변수에다 값을 재할당(brandy > jeonghoon)하려고 했기 때문이다. 즉, const는 새로운 값을..

1. 페이지 이동을 위해 npm install react-router-dom을 설치하고 코드도 계속해서 보았는데 설정한 path대로 URL이 출력되지 않고 빈 화면만 나왔다. 구글로 서치하던 중에 기존에 설치했던 react-router-dom을 uninstall하고 npm install react-router-dom@5 로 했더니 원하던 결과가 출력되었다. 2. Unexpected use of 'location' no-restricted-globals 의 경우 스택오버플로우를 참고해보니 location 변수를 사용하는 곳 위에 // eslint-disable-next-line no-restricted-globals 를 추가하라고 한다. 그대로 따라해보니 리액트에서 오류메시지는 뜨지 않았다.

1. 트랜잭션 DB의 상태를 변화시키기 위해서 수행하는 작업의 단위 DB의 상태를 변화시킨다는 의미는 SQL을 이용하여 DB에 접근한다는 의미이다. ex) SELECT, INSERT, DELETE, UPDATE 등 작업 단위는 많은 질의어 명령문들을 사람이 정하는 기준에 따라 정하는 것 즉 작업단위는 상대적이라는 의미이다. 게시판을 예로 들자면, 게시판 사용자 - 게시글 작성, 올리기 버튼 > 그 후에 다시 게시판에 돌아오면 게시판은 자신의 글이 포함된 업데이트된 게시판을 보게 된다. 이러한 상황을 DB 작업으로 옮기면 1) 사용자가 올리기 버튼을 눌렀을 시 = INSERT 2) 사용자가 입력한 게시글의 데이터를 옮긴다 3) 게시판을 구성할 데이터를 다시 SELECT 하여 최신 정보로 유지 이런 작업 단..

아직 React의 key-props 그리고 컴포넌트들이 헷갈린다. 이참에 이 둘의 개념들에 대해 한 번 정리해보자. Warning: Each child in an array or iterator should have a unique "key" prop ... 리액트를 개발하다 보면 자주 나오는 Error.. 이전 포스팅에서도 이 에러에 대해 다뤘다. 왜 React의 Element에 key prop이 필요하고, key prop을 사용하면서 주의해야 할 점? - 재조정 (Reconcilation) key prop을 이해하기에 앞서 React가 화면을 어떻게 업데이트 하는지 알 필요가 있다. React는 새로운 엘리먼트를 그리기 위해 비교 알고리즘 (Diffing Algorithm)을 이용해서 효율성을 최대화..