분류 전체보기364 [To-Do App] 최종 | input 부분 컴포넌트로 빼기 이제는 input과 button을 묶어 컴포넌트로 따로 빼보자. 현재 App.js 코드는 다음과 같다. Input과 관련된 내용을 InputArea로 옮긴다. import React, { useState } from "react"; import ToDoItem from "./ToDoItem"; function App() { const [inputText, setInputText] = useState(""); const [items, setItems] = useState([]); function handleChange(event) { var newValue = event.target.value; setInputText(newValue); } function addItem() { setItems((prevI.. 2022. 4. 16. [To-Do App] 아이템 지우기 | 앞 포스트에서 아이템을 클릭하면 취소선이 그어지는 것을 연습했다. 이제는 다른 컴포넌트의 array에 있는 아이템을 지우는 법에 대해 알아보자. 시작 코드 App.js import React, { useState } from "react"; import ToDoItem from "./ToDoItem"; function App() { const [inputText, setInputText] = useState(""); const [items, setItem] = useState([]); function handleChange(event) { const newValue = event.target.value; setInputText(newValue); } function addItem() { setItem((.. 2022. 4. 16. [JS] statement VS expression expression 10+13; 'hello'; 10 > 9; 10 < 20; true; a===20 && b===30; average = 55; statement는 컴퓨터가 특정 액션을 하도록 하는 것 변수 만들기, 함수 만들기, loop include creating a variable or a function, looping through an array of elements, evaluating code based on a specific condition etc. JavaScript programs are actually a sequence of statements. -- 출처 -- https://medium.com/launch-school/javascript-expressions-and-sta.. 2022. 4. 15. Big O Time quiz 다음 함수의 Big O는? function logAtLeast5(n){ for (var i = 1; i function logAtLeast5(n){ for (var i = 1; i (이해 안감) function onlyElementsAtEvenIndex(array){ var newArray = Array(Math.ceil(array.length / 2)); for (var i = 0; i function subtotals(array) { var subtotalArray = Array(array.length); for (var i = 0; i 2022. 4. 10. [JS] Math.max() Math.min() Math.ceil() Math.max(a, b) a, b 중에 큰 수를 반환해준다. console.log(Math.max(5, 10)); //10 Math.min(a, b) a, b 중에서 작은 수를 반환해준다. console.log(Math.min(5, 10)); // 5 Math.ceil(3.92384) 소수점 달린 숫자 round up 하기 console.log(Math.ceil(32.65)); // 33 console.log(Math.ceil(8.1)); // 9 console.log(Math.ceil(-4.2)); // -4 2022. 4. 10. Simplifying Big O Expressions 이 전 포스트에서 for loop 함수를 보면 2n 에서 5n + 2 까지의 operations 가지는데 이것은 간단히 --> n 과 같아진다. 몇 번의 n은 상관없이 트랜드를 보는 것이다. 이렇게 알고리즘의 Time complexity를 진단할 때 Big O expressions을 위해 몇 가지 법칙이 있다. 1. Constants runtime Don't Matter O(2n) --> O(n) O(500) --> O(1) O(13n^2) --> O(n^2) 2. Smaller Terms Don't Matter O(n + 10) --> O(n) O(1000000n + 50) --> O(n) O(n^2 + 5n + 8) --> O(n^2) Big O Shorthands 1. Arithmetic opera.. 2022. 4. 10. Big O Notation Big O Notation a numeric representation of the performance of code. It allows us to talk formally about how the runtime of an algorithm grows as the inputs grow. We won't care about the details, only the trends Big O Definition an algorithm is O(f(n)) if the number of simple operations the computer has to do is eventually less than a constant times f(n), as n increases. f(n) could be liner ( f(n.. 2022. 4. 10. 숫자 단위 모음 | milli micro nano second | seconds 1 millisecond = 0.001 second 1 microsecond = 0.0000001 second | 1e-6 second 1 nanosecond = 0.0000000001 second | 1e-9 second 2022. 4. 10. [Big O] Timing our code 다음의 문제를 생각해 보자. Q: Suppose we want to write a function that calculates the sum of all numbers from 1 up to (and including) some number n. If you came up with these two solutions below, you're going to think about which one is better? solution 1 function addUpTo(n) { total = 0; for(let i=1; i 2022. 4. 9. Intro to Big O Notation Big O a numeric representation of the performance of code. Why should we use Big O? Let say there is a problem having 10 different solutions. how performs compared to others? 1. we need to have a precise vocabulary to talk about how our code performs. 2. It's also good for discussing trade-offs between different approaches. because often it's not as cut and dried as I made it seem, it's not that.. 2022. 4. 9. 브라우저 콘솔 스닙핏 여는 법 | opt+cmd+J (맥) 스닙핏을 열어 알고리즘 연습을 할 것이다. 스닙핏 여는 법 1. inspect 가기 오른쪽 버튼 - inspect opt + cmd + j (맥) 2. sources tap 으로 가기 3. snippets옆 >> 이 모양 버튼 눌러 snippet을 선택한다. 4. 새 snippet을 만들고 이름을 바꿔준다. 5. console.log("Hello World") 쳐보기 2022. 4. 9. 새 강의 2개를 결재했다. 안젤라유의 풀스택 강의의 마지막인 리액트를 거의 끝내간다. 하지만 마지막 한시간 끝내기가 너무 귀찮아졌다. VS code를 업그레이드 하고 나서 prettier가 작동을 안한다. 해결 방법을 못찾고 있다. 이렇게 느슨하게 있는 시간이 길어지고 있다. 마지막 1 시간을 남겨 놓고, 잉? 이게 무슨 일? 갑자기 강의 시간이 10시간 정도 더 늘어났다. 전체 강의가 65.5 시간이 되었다. 안젤라유 강사님이 web3 DApp에 대한 강의를 더 추가한 것이다. 일단 DApp 강의는 나중에 보도록 하고 React를 좀 더 파기 위해 39시간 짜리 리액트 강의와 자바스크립트 알고리즘 22시간 강의를 각각 결재 했다. 일단 리액트, 자바스크립트를 제대로 깊이 알고싶다. 그러면 web의 길로 가게 되는 것 같다. 아.. 2022. 4. 8. [To-Do App] 취소선 긋기 | Component Tree | stateless component 컴포넌트 분리 시키기 앞에서 작성한 코드는 App.js에 모든 코드가 다들어가있다. 이 To-Do-List 는 크게 3가지 div로 나눠져 있다. 1. heading 섹션 2. input+button 3. list 1, 2번은 그대로 두고 3번 안에서도 list를 컴포넌트로 만들어 보자. a Item 컴포넌트만 따로 빼보기 여기서 우선 {todoItem}만 따로 떼서 컴포넌트로 만들어보자. 파일 만들기 App.js에도 빈자리에 태그로 자리를 채워준다. 여기서 todoItem을 받아서 내용을 넘겨야 한다. ToDoItems 파일에 내용 적어준다. 아이템들이 잘 나오는 것을 볼 수 있다. Props는 Read Only 로 Modify 되지 않음 여기서의 ToDoItem 컴포넌트를 stateless compo.. 2022. 4. 6. [To-Do App] 시작 다음과 같은 To-Do List를 만들어 보자. 시작 코드 index.html styles.css body { background-color: #ffeaa7; min-height: 70vh; padding: 1rem; box-sizing: border-box; display: flex; justify-content: center; align-items: center; color: hsl(198, 1%, 29%); font-family: "Architects Daughter", cursive; text-align: center; font-size: 130%; } .container { width: 100%; height: auto; min-height: 500px; max-width: 500px; min-.. 2022. 4. 5. [React] Spread Operator Spread Operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax ...array 원하는 곳에 spread operator(...이름) 입력하면 스프레드되어 들어간다. ...Object 오브젝트도 가능하다. ...을 붙이지 않았을 때 Nested object가 된다. 앞에서 작업하던 코드를 고쳐보자. 보기에 괜찮긴 하지만 너무 길다. 1. 모든 if statement를 지운다. 2. firstName property, lastName property, email property 등 어떤 것이든 이전 벨류(prevValue)들을 스프레드 오퍼레이터가 들어간 오브젝트로 리턴한다. 3. .. 2022. 4. 4. [React] Changing Complex State | 풀네임 받기 | form input prevValue Last Name, First Name 입력칸 만들고 풀 네임이 자동으로 에 들어가도록 해보자. 앞에서 배운 부분을 활용하면 다음과 같은 코드를 쓸 수 있다. import React, { useState } from "react"; function App() { const [fName, setFName] = useState(""); const [lName, setLName] = useState(""); function updateFName(event) { const firstName = event.target.value; setFName(firstName); } function updateLName(event) { const lastName = event.target.value; setLName(last.. 2022. 3. 28. [React] State 란? State 란 컴포넌트의 현재 상태의 정보를 보여주는 자바스크립트 오브젝트이다. State is a plain JavaScript object used by React to represent an information about the component’s current situation. - 출처 - https://medium.com/edonec/state-in-react-an-overview-a182675cee2c 2022. 3. 26. [React] Input value | Forms | event.preventDefault(); |onClick, onChange Form 형태에서 내용을 입력 받아 화면에 보이게 하는 법을 알아보자. 기본 세팅 인풋과 버튼이 있다. onChange attribute 사용 input에 이름을 입력하면 콘솔에 이름이 나오게 해보자. 이 때 onChange attribute를 사용한다. onChange에 벨류를 함수로 설정해주고 벨류에 변화가 생길 때마다 작동을 한다. https://www.w3schools.com/tags/ref_eventattributes.asp 우선은 인풋에 내용 입력 했을 때 콘솔에 changed가 뜨도록 해보자 인풋에 내용을 입력하였더니 콘솔에 "Changed"라는 텍스트가 떴다. handleChange 함수가 잘 작동되고 있다. 인풋에 내용이 입력되어 onChange에 있는 handleChange 함수가 트리.. 2022. 3. 26. [React] 이벤트 핸들링 | 버튼 색 바꾸기등 이벤트에 따라 다른 것을 랜더링 마우스를 버튼 위에 올렸을 때 색깔이 변하는 효과를 주는 경우들 .. ? conditional rendering inline styling mouse events managing state 버튼 기본 세팅 index.js에서 기본 세팅한 후 App.js에서 버튼 만들기 CSS * { box-sizing: border-box; margin: 0; padding: 0; font-weight: 300; } body { font-family: "Source Sans Pro", sans-serif; color: white; font-weight: 300; background: #50a3a2; width: 100%; height: 100%; } .container { margin: .. 2022. 3. 25. [React] Destructuring assignment syntax The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment array를 destructure하기 data.js 에 animals array가 있다. 2개의 object를 가지고 있다. App.js에서 animals array를 불러오고 나서 콘솔에 뭐가 있나 본다. 콘솔을 보면 두개의 오.. 2022. 3. 23. [React] setInterval() setInterval() 함수 setInterval(sayHi, 1000) 1초마다 sayHi 가 계속 뜸 기본 설정 밀리세컨드 1초 = 1000 혹시 setInterval(sayHi)까지만 입력했다면 화면이 sayHi로 도배가 됨 그래서 꼭 ! 시간을 먼저 적어주고 내용을 적어줘야 한다. 2022. 3. 21. 이전 1 ··· 3 4 5 6 7 8 9 ··· 18 다음
