2020.코딩일지

코드스테이츠 블록체인 부트캠프 6기 동기적(synchronous) 뒷사람의 시작시점과 앞사람의 완료시점이 같은 상황. blocking발생 더보기 //동기적인 카페에서의 상황😡 function waitSync(ms) { var start = Date.now(); var now = start; while (now - start < ms) { now = Date.now(); } }// 현재시각과 시작시각을 비교하여 ms범위 내에서 무한루프를 도는 blocking함수 function drink(person, coffee) { console.log(person + "는 " + coffee + "를 마십니다"); } function orderCoffeeSync(coffee) { console.log(coffee +..

! 한개는 알겠는데 !! 두개는 무엇인가?? [true, false, 1, 0, -1] (5) [true, false, 1, 0, -1] --- [!true, !false, !1, !0, !-1] (5) [false, true, false, true, false] --- [!!true, !!false, !!1, !!0, !!-1] (5) [true, false, true, false, true] -------------- 문자열조차도 boolean으로 알려주는 친절함!! [!!"0", !!"1", !!"A"] (3) [true, true, true] -------------- [undefined, null, ""] (3) [undefined, null, ''] --- [!undefined, !null, ..

React 잘되다가 `npm start`하면 갑자기 이런에러가 떴.... Module not found: Error: Can't resolve './reportWebVitals' in ~~~ 검색한대로 https://stackoverflow.com/questions/65396568/react-js-npm-start-shows-failed-to-compile-web-vitals React JS npm start shows failed to compile web-vitals failed to compile -/src/reportWebVitals.js Module not found: Can't resolve 'web-vitals'. Since new to react JS, could not find what ..

Sprint - React Twittler state-props 깃헙에서 fork - 내 로컬로 clone npm install .json을 보니, 응? 이미 "react-router-dom": "^6.3.0", 설치되어있습니다?! ( 생략 )npm install react-router-dom (npm t) npm run test npm run start npm run submit myPage.js Tweets.js App.js import React from 'react'; // TODO : React Router DOM을 설치 후, import 구문을 이용하여 BrowserRouter, Routes, Route 컴포넌트를 불러옵니다. import { BrowserRouter, Routes, Route..

리액트는 상향식(bottom-up)으로 앱을 만든다. 장점: 테스트가 쉽고 확장성이 좋다. 첫번째로 할 일은! 컴포넌트 계층구조로 나누는 것! 하나의 컴포넌트는 한 가지 일만 한다. 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments)혹은 속성(attributes)처럼 전달받을 수 있다. 데이터를 전달하는 주체가 부모컴포넌트가 된다. (데이터 흐름은 하향식;top-down) 단방향 데이터 흐름!! 그리고 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못한다. state props 부모로부터 props를 통해 전달됩니까? x o 시간이 지나도 변하지 않나요? x o 컴포넌트 안의 다른 state나 props를 가지고 계산이 가능한가요? x o 만일, 하나의 ..

Controlled Component란? 리액트가 state를 통제할 수 있는 컴포넌트! Hook로 controlled component구현이 궁금하다면? React공식문서.ko 편지,트윗을 주고받을때 '보내는사람, 보낼내용'을 state로 따로 관리한다. input에 값 입력 시, state도 그때그때 바뀐다(onChange). 그리고 변경된 state와 input의 value 또한 같게 작성하면 됨! import "./styles.css"; import React, { useState } from "react"; export default function App() { const [username, setUsername] = useState(""); const [msg, setMsg] = useSta..

DOM이벤트 처리 방식과 유사하다. 다만! React에서 이벤트는 카멜케이스(camelCase) JSX를 사용. 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러;Event handler)를 전달 onChange 사용자의 입력값을 제어하는 폼(Form)엘리먼트 ` ` 변경될 수 있는 입력값들을 React는 컴포넌트의 state로 관리하고 업데이트 한다! 이벤트가 발생하면 `event.target.value`를 통해 이벤트객체에 담겨있는 `input`값을 가져올 수 있다😚 onClick button click 또는 태그를 통한 이동 등 사용자의 행동에 따른 이벤트. //onChange, onClick 이벤트 예제 import "./styles.css"; import React, { useState } ..

🤖REFERENCE🤖 어떤슨배님의잘정리된블로그 리액트튜토리얼eastflag 컴포넌트의 속성(property) state : 내부에서 변화하는 값=상태 `useState()` `stateHook()` *또읽고싶다**Hook 선배블로그 https://velog.io/@kbm940526/React-Hooks-API props : 외부로부터 전달받은 값.변하지않는값. ex.성별,나이 `props.text` props 컴포넌트간의 통신을 가능하게 한다는점이 가장 중요하다! 부모(상위)컴포넌트로 부터 전달받은 값. 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터 값을 초기값으로 사용가능 객체의 형태 읽기전용(변하지않는값)read-only : 변경되면안되서! ::만약 읽기전용 객체가 아니라면, 개발자가 ..

1. Hook을 이용해서 App이라는 함수형 컴포넌트 안에 state를 추가한다. 2. useState는 현재 state값과, 이것을 업데이트 하는 함수를 쌍으로 제공한다. 3. 배열 구조 분해를 이용해서, counter라는 변수에 초기 state값 0, setCounter라는 변수에 업데이트 함수를 할당한다. 4. 이후 변수를 컴포넌트에 연결하면, state를 변경할 때마다 리렌더링을 하면서 컴포넌트 전체가 재생성된다. 💃리액트의 3가지 특성 선언형(Declarative) 무엇What에 집중하여 프로그래밍을 하는것 명령형(어떻게How에 집중) 컴포넌트기반(Component-Based) 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트기반. 분리하면 서로 "독립적"이고 "재사용" 가능하기때문에..

코드스테이츠 블록체인 부트캠프 6기 💃CSS 사용목적 콘텐츠를 적당한 위치에 배치하는(레이아웃 디자인) 텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피(Typography) 요소를 갖추고 있으며 더 나은 사용자경험UX를 제공. 💃CSS 기본 문법과 구조 셀렉터selector {선언블록Declaration block 속성명Property : 속성값Value ;선언구분자 } 💃CSS를 HTML에 적용하는 방법 💃CSS를 이용해 텍스트 꾸미기 id `#` 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 함. / 특정 요소에 이름을 붙이는 데 사용 class `.` 동일한 값을 갖는 요소 많음 / 스타일의 분류classification에 사용 구글 폰트 선택가능 [https://fon..