🍪 Study
-
sorted( ) 파이썬 내장함수 sorted()는 iterable 객체로부터 정렬된 리스트를 생성한다. 리스트의 sort()함수가 list객체만 지원하는 반면, sorted()는 iterable한 객체(list, dictionary, set 등)라면 전부 지원된다. sorted([5, 2, 4, 1, 3]) output: [1, 2, 3, 4, 5] key와 lambda key=lambda x: x 를 활용하여 iterable 객체를 정렬하는 기준을 정의할 수 있다. words = [ (4, "more"), (3, "but"), (5, "hello"), (4, "what"), ] sorted(words, key=lambda word: (word[0], word[1])) output-words: [(3,..
[Python] sorted()로 정렬하기sorted( ) 파이썬 내장함수 sorted()는 iterable 객체로부터 정렬된 리스트를 생성한다. 리스트의 sort()함수가 list객체만 지원하는 반면, sorted()는 iterable한 객체(list, dictionary, set 등)라면 전부 지원된다. sorted([5, 2, 4, 1, 3]) output: [1, 2, 3, 4, 5] key와 lambda key=lambda x: x 를 활용하여 iterable 객체를 정렬하는 기준을 정의할 수 있다. words = [ (4, "more"), (3, "but"), (5, "hello"), (4, "what"), ] sorted(words, key=lambda word: (word[0], word[1])) output-words: [(3,..
2021.02.27 -
처음 학교 '웹 프로그래밍' 과목에서 ==와 ===가 다름을 배웠을 때, "굳이 이렇게까지...?"라고 생각했다. 며칠 전, 이제 웹을 시작한 친구가 둘의 차이점을 물어봐서 "아마... type까지 검사하고 안하고일껄...?"라고 대답했다. 떠오른 김에 정리해보자. Equality vs Identity Javascript는 엄격한 비교와 type 변환 비교를 모두 지원한다. Equality ==와 !=는 Equality 연산자이다. Javascript에서 Equality 연산자를 사용하면, 먼저 피연산자들의 type을 비교할 수 있는 형태로 변환 후 연산을 수행힌다. 555 == '555' // true true == 1 // true 'Hello' === new String('Hello') // tru..
[Javascript] '==' 와 '===' 뭐가 다를까?처음 학교 '웹 프로그래밍' 과목에서 ==와 ===가 다름을 배웠을 때, "굳이 이렇게까지...?"라고 생각했다. 며칠 전, 이제 웹을 시작한 친구가 둘의 차이점을 물어봐서 "아마... type까지 검사하고 안하고일껄...?"라고 대답했다. 떠오른 김에 정리해보자. Equality vs Identity Javascript는 엄격한 비교와 type 변환 비교를 모두 지원한다. Equality ==와 !=는 Equality 연산자이다. Javascript에서 Equality 연산자를 사용하면, 먼저 피연산자들의 type을 비교할 수 있는 형태로 변환 후 연산을 수행힌다. 555 == '555' // true true == 1 // true 'Hello' === new String('Hello') // tru..
2021.02.24 -
Firestore Cloud Firestore의 database는 NoSQL database이다. Cloud Firestore는 많은 것들을 프로그램하지 않아도 되고 유연함을 갖고 있으며 사용하기 쉽다. BUT 규칙이 많지 않기 때문에 몇 가지 제한 사항이 있다. NoSQL 의 특징 Collection을 가진다. 폴더 같은 것 Document를 가진다. 컴퓨터에 있는 문서 같은 것(ex. doc, text...) Database는 collection을 가지고 각 collection은 document들을 가진다. 🚩 정리 Collection은 documents의 group이다.
[Firebase 🔥] FirestoreFirestore Cloud Firestore의 database는 NoSQL database이다. Cloud Firestore는 많은 것들을 프로그램하지 않아도 되고 유연함을 갖고 있으며 사용하기 쉽다. BUT 규칙이 많지 않기 때문에 몇 가지 제한 사항이 있다. NoSQL 의 특징 Collection을 가진다. 폴더 같은 것 Document를 가진다. 컴퓨터에 있는 문서 같은 것(ex. doc, text...) Database는 collection을 가지고 각 collection은 document들을 가진다. 🚩 정리 Collection은 documents의 group이다.
2021.02.16 -
Firebase : 웹사이트를 통해 백엔드를 제공하는 서비스 Firebase vs AWS amplify (경쟁상대) (old) (new) When to use Firebase 비즈니스를 구상중이거나 무언가 시작할 때, 어떤 아이디어를 테스트해볼 때, "가능한 빨리" 아이디어를 테스트해보고 싶을 때 모든 회원, 데이터 등은 내 서버가 아니라 구글의 서버에 저장되므로 내 것이 아니다. firebase에서 벗어나려할 때 힘들다. firebase(amplify)를 통해 아이디어를 테스트했을 때, 아주 잘 되고 사용자들이 원한다면, 그때 비로소 나만의 서비스로 다시 만들어라 🚨 주의 100% 무료는 아니다!! 일부 무료 authentication - 핸드폰 인증 외 무료 cloud firestore - docum..
[Firebase 🔥] FirebaseFirebase : 웹사이트를 통해 백엔드를 제공하는 서비스 Firebase vs AWS amplify (경쟁상대) (old) (new) When to use Firebase 비즈니스를 구상중이거나 무언가 시작할 때, 어떤 아이디어를 테스트해볼 때, "가능한 빨리" 아이디어를 테스트해보고 싶을 때 모든 회원, 데이터 등은 내 서버가 아니라 구글의 서버에 저장되므로 내 것이 아니다. firebase에서 벗어나려할 때 힘들다. firebase(amplify)를 통해 아이디어를 테스트했을 때, 아주 잘 되고 사용자들이 원한다면, 그때 비로소 나만의 서비스로 다시 만들어라 🚨 주의 100% 무료는 아니다!! 일부 무료 authentication - 핸드폰 인증 외 무료 cloud firestore - docum..
2021.02.16 -
2.6 useScroll & useFullscreen useScroll user가 scroll하여 무언가 지나쳤을 때, 색상을 바꾸는 등 무엇이든 할 수 있다. const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return state; }; c..
#2-2 USEEFFECT2.6 useScroll & useFullscreen useScroll user가 scroll하여 무언가 지나쳤을 때, 색상을 바꾸는 등 무엇이든 할 수 있다. const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return state; }; c..
2021.01.12 -
2.0 Introduction to useEffect useEffect componentDidmount의 역할을 해서 새로고침하면 sayHello를 실행한다. 2개 인자를 받음 - function으로서의 effect - dependency : 만약 deps가 있다면 effect (deps)리스트에 있는 값일 때만 값이 변하도록 활성화 된다. useEffect는 여기서 componentDidMount, componentWillUpdate이다. dependency일 때만 update한다. 📌 dependency에 change가 발생할 때만 update! + useEffect로부터 function이 return된다. -> componentWillUnmount! import React, { useState, u..
#2-1 USEEFFECT2.0 Introduction to useEffect useEffect componentDidmount의 역할을 해서 새로고침하면 sayHello를 실행한다. 2개 인자를 받음 - function으로서의 effect - dependency : 만약 deps가 있다면 effect (deps)리스트에 있는 값일 때만 값이 변하도록 활성화 된다. useEffect는 여기서 componentDidMount, componentWillUpdate이다. dependency일 때만 update한다. 📌 dependency에 change가 발생할 때만 update! + useEffect로부터 function이 return된다. -> componentWillUnmount! import React, { useState, u..
2021.01.12 -
1.0 Introduction to useState리액트의 불편한 점 2가지 1. handling input 2. fetching data hooks는 class component, render등을 고려할 필요가 없다.import React, { useState } from "react";const [item, setItem] = useState(1)item: 변경할 statesetItem: item의 modifier Hooks vs Class componentimport React, { useState } from "react";// Hooks로 구현한 경우function App() { const [item, setItem] = useState(1); const incrementItem = () =..
#1 USESTATE1.0 Introduction to useState리액트의 불편한 점 2가지 1. handling input 2. fetching data hooks는 class component, render등을 고려할 필요가 없다.import React, { useState } from "react";const [item, setItem] = useState(1)item: 변경할 statesetItem: item의 modifier Hooks vs Class componentimport React, { useState } from "react";// Hooks로 구현한 경우function App() { const [item, setItem] = useState(1); const incrementItem = () =..
2021.01.12 -
0.2 Introduction to NooksHooksfunctional component에서 state를 가질 수 잇게 해준다. functional programming style이 된다. 0.3 RequirementsReact, Node.js 지식0.4 Workflow
#0 INTRODUCTION - 리액트 Hooks0.2 Introduction to NooksHooksfunctional component에서 state를 가질 수 잇게 해준다. functional programming style이 된다. 0.3 RequirementsReact, Node.js 지식0.4 Workflow
2021.01.10