전체 글364 [React] 기본 파일 설명 | react-scripts | start, build, test, eject 등 react-script 하는 일 "start" files and folders got built by create-react-app inside a package that Json, when setting up the initial project, which is the index.js index.html file and how react.dom at a high level helps us render out our application. "build" 프로젝트를 로컬 환경에서 만들때는 걱정 안해도 되지만 웹사이트를 인터넷에 호스팅할 때는 인터넷 커넥션을 고려해야 하고, 어떤 곳은 아주 느릴 수가 있다. 그래서 우리의 코드가 아주 optimized 되어야 한다. so that as small and ef.. 2022. 4. 21. [React] <React.StrictMode> 사용하면 addtional checks and warnings that React says in case you're using or deprecated code. 2022. 4. 21. [React] React.dom import React from 'react'; import React.DOM from 'react-dom'; React: it's the underlying engine that actually does all of the work when it comes to how React functions as a application builder. Dom: React Dom is specifying that engine should be directed towards web related applications. 이 2개의 라이브러리가 합쳐져서 리액트로 웹 어플리케이션을 만들 수 있다. 리액트 엔진을 이용해서 React Native 등을 만들 수 있다. 2022. 4. 21. package.json | package-lock.json npx create-react-app fileName 을 콘솔에 쓰고서 create-react-app tool을 실행시킨 후 VSCode로 파일을 열면 package.json 파일이 생성되어 있는 것을 볼 수 있다. 이 안에는 리액트 프로젝트를 돌리기 위한 기본 라이브러리들과 패키지들의 리스트들이 적어져있다. package-lock.json package managers가 만든 어떤 버젼의 defendancies가 있는지 보여준다. 팀으로 일할 때 다른 팀원과 서로 버젼이 다르지 않게, 같은 버젼으로 library를 사용할 수 있도록 한다. package-lock.json 또는 yarn.lock 둘 중에 하나만 있으면 된다. yarn 쓰는 경우 package-lock.json 은 지워도 된다. 2022. 4. 21. [VSCode] compact Folders 언체크 하기 리액트 할 시 설정 2022. 4. 20. 좋은 리액트 개발자가 되려면 시니어 리액트가 되기위해서 3가지 리액트 스킬이 필요하다. 1. 컴포넌트 정하기 Decide on Components 2. 스테이트 정하기 Decide the State and where it lives 3. 스테이트 변할 때 무엇을 변하게 할지 What changes when state changes 2022. 4. 20. [마크다운] VSCode에서 Markdown Preview 익스텐션 받기 마크다운 익스텐션 다운 받기 vscode에서 마크다운 언어를 사용 전 해야할 일은 Markdown Preview Enhanced를 install 한다. shift + cmd(control) +p 를 누르거나 왼쪽 맨 아래 있는 톱니 바퀴 버튼을 눌러 Command Palette로 간다. Markdown preview open을 검색해서 Open Preview나 Open Preview to the Side 를 선택한다. 문서를 작성하니 바로 옆에 편하게 프리뷰로 보인다. 2022. 4. 19. NPM vs YARN 명령어 차이 Install dependencies from package.json: npm install yarn Install a package and add to package.json: npm install package --save yarn add package Install a devDependency to package.json: npm install package --save-dev yarn add package --dev Remove a dependency from package.json: npm uninstall package --save yarn remove package Upgrade a package to its latest version: npm update --save yarn upgrade.. 2022. 4. 18. [VSCode] 콘솔에서 code . 으로 열기 | 검색창 cmd+shift+p cmd+shif+p로 검색창을 열어 command를 입력한다. 그러면 Shell Command Install 'code'가 나오는데 클릭한다. 콘솔에서 code . 을 치면 해당하는 파일이 vscode에서 나온다. 2022. 4. 18. [Keeper-App 8] Transparent Textures 배경에 패턴 넣기 앱 백그라운드에 텍스쳐를 넣어보자. Transparent Textures를 사용한다 (바로가기) 원하는 패턴을 선택해 클릭하면 url이 나온다 url을 모두 복사해 body안 background-img에 붙여준다. 연하게 패턴이 보인다. 2022. 4. 18. [Keeper-App 7] 박스에 Zoom transition Material UI 안 검색에서 Zoom을 검색한 후 Zoom API(바로가기)로 간다. Zoom import를 한다. import Zoom from '@mui/material/Zoom'; 버튼 줌인하기 in Props를 사용해서 true, false boolean을 사용한다. 박스가 접혀 있다가 클릭하면 펼쳐지기 접혔을 땐 한 줄 박스로 있다가 박스를 클릭하면 내용 보두 보이게 하기 일단 useState를 추가한다. 에 onClick를 넣어 expand 메소드와 연결한다. input이 박스 펼쳤을 때만 보이게 한다. 의 rows가 접혀 있을 땐 1, 펼쳐졌을 땐 3 가 되도록 하기 버튼도 접혀있을 땐 안보이다가 펼쳐지면 보이게 하기 2022. 4. 18. [Keeper-app 6] Material icon입력과 에니메이션 Material UI 앱에 스타일을 더 추가해보자. Material UI 다운 받는다. https://mui.com/material-ui/getting-started/installation/ npm install @mui/material @emotion/react @emotion/styled Material icon 다운 npm install @mui/icons-material Note에 있는 DELETE 글자를 아이콘으로 바꿔보자. 원하는 아이콘을 찾은 다음 (아이콘보기) 아이콘을 클릭해 주소를 복사한 후 Note에 import 한다. 원하는 자리에 형태로 입력한다. 모양이 바뀐 것을 볼 수 있다. Keerper에 Hightlight 아이콘 넣기 Highlight 아이콘을 검색한 후 태그 안에 넣는다... 2022. 4. 18. [Keeper-App 5] 선택 아이템 지우기 Note 컴포넌트에 DELETE 버튼이 있다. 이 버튼을 눌렀을 때 App.js에 id를 받아 delete 함수를 실행 시킬 것이다. property로 이 deleteNote 함수를 보내준다. 클릭 했을 시 onDelete() 함수가 호출 되도록 한다. 이제는 deleteNote 함수에서 아이템을 삭제하는 작업을 한다. 이미 가지고 있는 노트들(prevNotes)들 중에서 보내준 id에 해당하는 아이템을 뺀다. 그리고 나머지 prevNotes들을 다시 정렬한다. filter를 사용하여 id에 해당하는 index를 제외한 나머지 아이템들을 array에 다시 정렬하라고 하였다. 하지만 아직 에 id가 설정되어 있지 않다. 에 id를 설정해 주자. Note 컴포넌트에 가서 클릭된 아이템의 id를 deleteN.. 2022. 4. 17. [Keeper-App 4] notes array 만들어 노트 map()으로 돌리기 이제는 들어오는 note들을 담을 state를 만들어 보자. notes들을 담을 useState를 설정한 후 버튼 클릭 되었을 때 note가 addNote함수로 들어오면 array 안에 쌓이도록 작업한다. array에 있는 아이템을 map()으로 돌린다. 입력한 내용이 잘 나오는 것을 볼 수 있다. 하지만 입력한 내용이 사라지지 않고 있다. 내용 입력 후 버튼 눌렀을 때 note가 다시 리셋 되도록 한다. 내용 입력 후 자동으로 내용이 없어지는 것을 볼 수 있다. 2022. 4. 17. [Keeper-App 3] CreateArea 컴포넌트 만들기 CreateArea 컴포넌트 새로 만들기 import React from 'react'; function CreateArea() { return ( Add ) } export default CreateArea; useState를 만든다. input과 textarea에 value를 추가해 준다. handleChange 함수를 추가한다 input에 내용을 입력하면 저장을 한다. 오브젝트를 return 하는 거라 return { } 로 써줘야 한다. 내용을 입력하면 state 안에 내용이 나오면 오케이 버튼 눌렀을 때 내용이 입력될 수 있도록 해보자. 일단 onClick으로 submitNote 함수가 호출 되도록 한다. 그런데 버튼을 누르면 다시 메세지창이 리셋이 되는데 그 것을 막기 위해 event를 통과시.. 2022. 4. 17. [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. 이전 1 2 3 4 5 6 7 ··· 13 다음
