2020.코딩일지

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 ..

💃문제를 해결하는데는 다양한 방법이 있다. 01_[Stack]구현 //내장객체Array.prototype메서드로 되는것을... 구현해보자! class Stack { constructor() { this.storage = {}; //데이터를 저장할 Object 타입의 storage this.top = 0; //포인터일뿐. } size() { //스택에 추가된 데이터의 크기를 리턴 return this.top; } push(element) { //스택에 데이터를 추가할 수 있어야 합니다. this.storage[this.top] = element; this.top += 1; } pop() { //가장 나중에 추가된 데이터를 스택에서 삭제하고 삭제한 데이터를 리턴 if (this.size() {return b..

코드스테이츠 블록체인 부트캠프 6기 💃자료구조란? 여러 데이터들의 묶음을 저장하고, 사용하는 방법을 정의한 것. 다양한 상황에서 데이터를 효율적으로 다룰 수 있는 방법들을 모두 모아모아~ 특정한 상황에 놓인 문제를 해결하는데 특화되어있다! 따라서 많은 자료구조를 알아두면 어떠한 상황이 닥쳤을 때 적합한 자료구조를 빠르고 정확하게 적용하여 문제 해결 가능! data데이터란? 문자,숫자,소리,그림, 영상 등 실생활을 구성하고 있는 모든 값 데이터 그 자체만으로는 정보를 가지기 어렵다( 나이? 누구,동물,식물 어떤 나이인가?) 데이터는 분석하고 정리하여 활용해야만 의미를 가질 수 있다 - 이거슨빅데이터ㅓㅓㅓ🤓아닌가? 필요에 따라 데이터의 특징을 잘 파악(분석)하여 체계적으로 정리하여 저장해두는게 데이터를 활용..

코드스테이츠 블록체인 부트캠프 6기 우...왜나는checked를 찾아 헤메고 있었다구ㅜㅜㅜㅜㅜ 🤖땡큐쏘마취선조님 [JavaScript] Tree UI (트리 구조) 만들기!! 오늘은 기업용 어플리케이션에서 흔히 볼 수 있는 트리구조에 대해서 공부를 해보았습니다. 저는 스타벅스 ... blog.naver.com

코드스테이츠 블록체인 부트캠프 6기 ● 타입별 분류 ("number", "string", "boolean", "object"안에서 "객체", '배열', 'null'구분확인, "function", "undefined") 🥺objec가 너무 광범위하다... ● object중 배열은 Array.isArray를 써서 구별. let arr = []; for(let i in obj) { //{a:1, b:2, c:3} const rec = stringifyJSON(obj[i]);//값을찾아서 //rec => 1 "1" 2 "2" arr.push(`"${i}":${rec}`) } result = `{${arr}}` ● `text ${} text` 단, 백틱안에 배열[]이 들어가면 벗겨져서 나옴;;;; let arr..

[코플릿]재귀-01_sumTo 수(num)를 입력받아 1부터 num까지의 합을 리턴해야 합니다. 👻1부터 더해야한다고 1+...+num 할 고정관념에서 벗어나야한다 num=4;경우, 4+3+2+1 이렇게해도 되니깐 //코플릿:재귀 - 01.sumTo function sumTo(num) { if(num = 2){ return (num + sumTo(num-1)) } else { return 1 } } //-----------방법3 function sumTo(num) { if (num === 0) { return num; } return num + sumTo(num - 1); } [코플릿]재귀-02_isOdd 수를 입력받아 홀수인지 여부를 리턴해야 합니다. 👻`if-else`하면, 0인경우를 제외하고 모두 ..

코드스테이츠 블록체인 부트캠프 6기 💃재귀란? 어떤 문제를 동일한 구조의 더 작은 문제로 나누어, 이 작은 문제를 해결함으로써 전체문제를 해결한다! (😎크멋지다) 💃recursion재귀의 장점! 더욱 간결하고 이해하기 쉽다. 그리고 알고리즘문제의 많은 부분을 차지한다. 💃재귀적으로 사고하는 법 [ 잘개쪼개기 -> 재귀적사고 -> 함수자신의 재귀적호출 -> 탈출조건 ] 💃재귀는 언제 사용하는 게 좋을까? 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우 중첩된 반복문(while 또는 for) 이 많거나 반복문의 중첩 횟수(number of loops)를 예측하기 어려운 경우 💃재귀적 사고를 통해 재귀함수를 base case와 recursive case로 나눠서 작성할 수 있다. ?? 💃재귀 ..

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..