본문 바로가기

전체 글336

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.
[React] Hooks | useState() | 좋아요 숫자 올리기 | 1초마다 시간 나오게 하기 | 웹사이트를 인터렉티브하게 만들고 변화가능한 state로 만들기 위한 방법을 알아보자. 이 때 필요한 것이 Hooks이다. index.js에서 다음과 같이 숫자와 버튼을 만든다. 여기서 + 버튼을 한 번 누를 때마다 숫자가 올라가도록 하려면 어떻게 해야할까? 0으로 시작하는 변수를 하나 만들고, 1 씩 추가가 되는 함수를 만들어 보자. 그 전에 우선 버튼 클릭시 함수가 잘 작동하는지 보기 위해 콘솔에 "I got clicked"가 프린트 되도록 해본다. 여러번 눌렀더니 횟수가 옆에 표시가 된다. 함수는 잘 작동하는 것을 볼 수 있다. 이제는 1씩 증가하는 expression을 작성해 본다. ( increase by 1 ) console.log(count)를 해서 보면 숫자가 증가하는 것을 볼 수 있다. 하.. 2022. 3. 20.
[React] State | Declarative vs Imperative Programming 우리가 만든 리액트 앱을 인터렉티브하게 하려면 어떻게 해야할까? 그러려면 State에 대한 개념을 이해해야 한다. 방정식으로 표현해보면 UI 즉 유저가 내 웹사이트를 보는 것은 내 앱의 state가 들어간 함수로 나타낼 수 있다.... 예를 들면 얼음과 물 둘 다 같지만 -10 일 땐 얼음으로 보여지고, 60 일 땐 물로 보여지는 듯 같은 리액트 컴포넌트지만 value 또는 state가 얼마냐에 따라 보여지는 interface가 다르다. To Do list 앱에서 유저가 할 일을 클릭하면 취소줄(line through / strikeout)이 그려지게 하는 경우 2 가지 방법으로 실행할 수 있다. 나오는 결과물은 같다. 1. Declarative programming 방식 일단 할 일을 하나 적어본다. .. 2022. 3. 19.
리액트 복습하니 재밌어졌다. 처음 리액트 문법을 배울 때는 새로운 것이라 잘 이해도 가지 않고, 빨리 진도도 나가지 않아 지겨웠었다. 강의 자체가 듣기 싫어졌다. 그래서 다른 강의를 알아보다 CS 강의를 듣게 되었다. CS 2개를 듣고 나니 리액트에 대한 거부감이 사라졌다. 그래서 다시 리액트로 돌아왔다. 처음부터 복습하며 실습해보니 띠롱 ~!! 오 재밌는 걸!! 역시 이론은 재미없고 실제로 내가 과정을 생각해 가면서 만들어 보니 재미있다. 당분간 리액트를 계속 할 것같다. 2022. 3. 19.
[React] Ternary Operator | && | Single responsibility | 로그인, 사인업 플로우| Expression vs Statement | Conditional Rendering | 로그인 플로우를 배워보자. 유저가 로그인 했을 때는 Hello가 나오고, 로그인 안했을 때는 로그인 form 박스가 나오도록 해보자. 시작 코드 index.html styles.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: 10% auto; padding: 80px 0; text-align: center; } .container h1 { font-.. 2022. 3. 17.
[Keeper-app 2] 모든 오브젝트 메모지에 나오게 하기 아래 처럼 notes.js에 있는 오브젝트 내용 메모지에 모두 다 보이게 하기 Note.jsx 파일 , 안 내용을 바꿔준다. import React from "react"; function Note(props) { return ( {props.title} {props.content} ); } export default Note; Notes.js 오브젝트 파일 const notes = [ { key: 1, title: "Delegation", content: "Q. How many programmers does it take to change a light bulb? A. None – It’s a hardware problem" }, { key: 2, title: "Loops", content: "How .. 2022. 3. 16.
[React] Arrow Function 기본형 함수가 있다. 이 square 함수를 map 안에 익명함수로 바로 넣어 버릴 수 있다. 에로우 함수 사용 인풋이 하나면서 statement가 한 줄 일 때는 { }와 return도 삭제 가능 Arrow 함수에 대해 더 자세히 알기 https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/ ES6 In Depth: Arrow functions – Mozilla Hacks - the Web developer blog ES6 In Depth is a series on new features being added to the JavaScript programming language in the 6th Edition of the ECMAScript s.. 2022. 3. 16.
Neumorphism https://dribbble.com/shots/10044878-Neumorphism-App-Concept/attachments/2063435?mode=media Dribbble - fin_800x600.gif by Elena Heaven dribbble.com 2022. 3. 16.
[React] 이모티콘 자료에서 뜻만 빼서 100자 까지만 보이기 emojipedia.js 파일 내용 안에서 index.js로 meaning만 빼와보자. const emojipedia = [ { id: 1, emoji: "💪", name: "Tense Biceps", meaning: "“You can do that!” or “I feel strong!” Arm with tense biceps. Also used in connection with doing sports, e.g. at the gym." }, { id: 2, emoji: "🙏", name: "Person With Folded Hands", meaning: "Two hands pressed together. Is currently very introverted, saying a prayer, or hopin.. 2022. 3. 15.
[React] forEach(), map(), filter(), reduce(),find(),include() .forEach() 기본형 빈 array를 하나 만들고 forEach함수에 double 함수를 집어 넣는다. 빈 array에 하나씩 결과를 담는다. 함수 안 함수 double 함수를 밖으로 빼지 않고, forEach 안에 익명함수로 들어가서 바로 적용 시켜버린다. Map( ) loop through the array map 함수 안에 다른 함수를 집어 넣어 하나씩 실행되도록 한다. array 작업 시에는 꼭 아이템에 key를 적어줘야 한다. 빈 array 만들 필요없이 바로 map()으로 계산된 함수를 새 array에 담아 버린다. map함수 안에 double 함수 넣기 Filter( ) 기존 array에서 filter()함수에 컨디션을 지정하고 true 인 것만 새 array에 담는다. forEach.. 2022. 3. 14.
[HTML] dl, dt, dd | 사전 사전식으로 만들 때 편함. Dictionary List Dictionary Term Dictionary Description 2022. 3. 14.
[React] Mapping Data | 이모티콘 사전 | dl dt dd HTML DOCTYPE html> JSX styles.css font-family: "Montserrat", sans-serif; font-weight: 400; line-height: 1.666; background: #c0d2d4; color: #555; } h1 { font-weight: 900; font-size: 500%; text-align: center; margin-top: 4rem; color: #fff; line-height: 1.2; } h1 span { padding: 5px 15px; background: #2ec2b0; } .dictionary { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 4r.. 2022. 3. 14.
[React] Map() | functional programming | Mapping Data to Components 연락처 카드 만들기를 하고 있다. App.jsx 에 있는 코드를 보면 Card 컴포넌트 안에 다른 value에 같은 properties가 계속 반복되어 나오는 것을 볼 수 있다. 좀 더 간단하게 만드는 법은 없을까? 이 때 map() 함수를 사용하면 아주 간편해진다. map( ) map() 함수란? array를 처리할 때 매우 유용한 자바스크립트 함수이다. map() 사용법 arrayName.map(함수) array 이름을 앞에 두고 점을 찍은 후 map() 함수를 뒤에 붙여준다. 그리고서 map() 함수 안에 작업할 함수를 넣어준다. 이 전까지는 함수 안 괄호() 안에 value를 대부분 집어 넣었는데, () 안에 함수도 집어 넣을 수 있다. map() 안에 함수를 집어 넣고 통과하면서 함수가 실행되도.. 2022. 3. 13.
[CS50] 0 Scratch - David J. Malan 이 강의를 듣고 나면 CS50 finance를 만들수 있게 될 것이다. What is CS? how computer work. What is programming? how to tell computers to do thing Computer's language binary: computer only understands 0, 1 Binary binary digit 0과 1을 bits 라고 하고 컴퓨터는 bits로 말을 한다 plugging in / off on / off 하는 이 스위치를 transisters 라고 한다. 1. How computer represents information with only 0 and 1? 맨 처음 컴퓨터는 숫자를 계산하는 계산기 기능으로 시작하였지만 지금은 숫자외에도 .. 2022. 2. 25.
[React] DevTools | Avatar 이미지 따로 떼서 관리하기 |DevTools로 디버깅 연락처 카드 만들기를 하고 있다. 아바타 이미지를 따로 떼어컴포넌트로 관리하면 아무 곳이나 원하는 곳에 붙일 수 있게 된다. Card.jsx에서 이미지 부분만 따로 떼서 컴포넌트로 만든다. Avatar.jsx 파일 새로 만들어 이동 여기서 문제가 발생한다. 현 파일에 있는 props는 비어있다. 이전 파일과 연결이되어 오브젝트들을 보내주어야 {props.img}를 읽을 수 있다. 어떻게 하면 이미지 property를 방금 새로 만든 Avatar 컴포넌트에서 부를 수 있을까? 앞에서 한 내용을 복습해 보자. 일단 이미지 property가 기본적으로 어디 있는지 보자. contact.js 파일에 있는 img url 이 이미지가 있는 곳이다. 그 다음은 App.jsx 에서 이 imgUrl을 컴포넌트 안 im.. 2022. 2. 24.
[React] Props | 연락처 카드 만들기 반복되는 카드 형태를 간단하게 만드는 법에 대해 알아보자 일단 리액트가 잘되는지 확인하고 Hello World 이효리의 연락처 카드를 하나 만든다 여기서 유재석, 비의 연락처 카드도 만들고 싶다면 html 코드를 사용하면 빨간 박스 코드를 반복 사용하여 만들 수있다. My Contact Lee Hyori 123-345-4567 lee@hyori.com Yoo JaeSuk 493-834-4789 yoo@jaesuk.com Rain 281-384-9374 rain@jihun.com 하지만 이보다 좀 더 간편하게 만드는 방법은 없을까? Card() 함수를 만들어 하나의 카드 템플릿을 만들고 element로 랜더 해본다 이렇게 되면 3개의 카드가 쭉 나오는데 이제는 이 카드 안의 내용을 바꿔줘야한다. html .. 2022. 2. 21.
[Keeper-App 1] 시작 | rfce | 이전 포스트에서 강사님이 제공해준 기본 코드를 다운받아 vscode에서 여는 것을 해보았다. 일단 해당 파일로 들어가서 npm 실행으로 리액트까지 다운 받는다. cd 파일명 npm install npm start 이제는 리액트 코드를 짜보자. App.jsx 또는 App.js Airbnb 가이드에서 추천하고 Atlassian, Bitbucket등 다른 파일들을 사용하고 App.jsx로 했을 때 텍스트 에디터에서 색깔도 잘 맞게 배정이되서 App.jsx로 쓰자는 쪽이 있으나 리액트 앱을 위한 기능의 관점에서 자바스크립트 파일처럼 App.js를 많이 쓰고 있다. 강의를 듣는 지금 2022년은 App.js를 쓴다. 컴포넌트 트리 만들기 파일 만들고 rfce 누르면 보일러 템플릿 만들어진다. App.js Head.. 2022. 2. 21.
[React] 시작하기 | 맥 node 업데이트 | VScode |npx 1. Node.js 최신 버젼 다운 하기 리액트를 시작하기 위해서는 일단 Node.js 최신 버젼 다운 받아야 한다. (node 업데이트 하기) node.js 설치하는 이유 npm이 필요한데 node.js 설치하면 npm 툴 같이 다운 받아짐 Create React App 이라는 라이브러리 설치하기 위해 1-1. 일단 터미널에서 내가 받은 node.js가 있나 확인한다. 터미널에 아래 코드 입력하여 내 컴퓨터에 있는 버젼을 확인한다. node --version 난 14.17.6 버젼이 다운 받아져 있다. 1-2. Node.js에 들어가서 최신 버젼이 무엇인지 확인하기 현재 안정적으로 돌아가는 것은 16.14.0 버젼이다. 1-3. node.js 업데이트 하기 n 다운받기 sudo npm install -.. 2022. 2. 20.
[React]import, export modules | require 와 import 차이 | import 모듈 많이 불러와야 하는 경우 | 계산기 만들기 React를 import 해서 쓰는 이유 이 전 강의들에서 라이브러리를 불러올 때 require를 사용해서 var react = require("react"); 이런 식으로 코드를 썼었다. 이 코드는 import React from "react"와 거의 비슷한 역할을 한다. require 와 import의 차이는 뭘까? Using Node.js require v.s. ES6 import/export https://stackoverflow.com/questions/31354559/using-node-js-require-vs-es6-import-export require 함수는 자바스크립트가 아닌 node.js에서 온 함수이다. ES6는 모든 브라우저에서 가능해서 import/ export 쓰면 모두가 볼 .. 2022. 2. 18.

티스토리툴바