🍪 Study/웹
-
처음 학교 '웹 프로그래밍' 과목에서 ==와 ===가 다름을 배웠을 때, "굳이 이렇게까지...?"라고 생각했다. 며칠 전, 이제 웹을 시작한 친구가 둘의 차이점을 물어봐서 "아마... 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 -
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 -
6.0 Getting Ready for the Router 이전에 만든 사이트를 좀 더 interactive하게 해보자. react-router-dom npm install react-router-dom components, routes 폴더 js와 css를 옮긴다. 기존 App.js의 내용을 Home.js로 옮긴다. (App -> Home 수정 필요) About.js는 아직 작성 안 된 상태 6.1 Building the Router App.js에서 Router 만들기 Router는 url을 가져다가 보고 우리가 라우터에게 명령한 것에 따라 component(page)를 불러온다. import React from "react"; import { HashRouter, Route } from "react-..
#6 ROUTING BONUS6.0 Getting Ready for the Router 이전에 만든 사이트를 좀 더 interactive하게 해보자. react-router-dom npm install react-router-dom components, routes 폴더 js와 css를 옮긴다. 기존 App.js의 내용을 Home.js로 옮긴다. (App -> Home 수정 필요) About.js는 아직 작성 안 된 상태 6.1 Building the Router App.js에서 Router 만들기 Router는 url을 가져다가 보고 우리가 라우터에게 명령한 것에 따라 component(page)를 불러온다. import React from "react"; import { HashRouter, Route } from "react-..
2021.01.10 -
5.0 Deploying to Github Pages gh-pages 설치 github page에 페이지를 올리기 위해 npm i gh-pages packages.json homepage 주소를 추가 주소는 모두 소문자여야 한다. 띄어쓰기 X npm run build 실행 - deploy할 폴더를 얻는다. 좌측 탐색기에 build 폴더가 생성됨 -> deploy할 폴더! scripts 추가 Directory build를 deploy 추가 predeploy 추가 : 매 순간 우리가 deploy를 호출할 때마다, npm은 predeploy를 호출한다. predeploy는 npm run build를 한다. build는 build script를 호출하고, 그 script는 folder를 줄 것이다. 완료되면, ..
#5 CONCLUSIONS5.0 Deploying to Github Pages gh-pages 설치 github page에 페이지를 올리기 위해 npm i gh-pages packages.json homepage 주소를 추가 주소는 모두 소문자여야 한다. 띄어쓰기 X npm run build 실행 - deploy할 폴더를 얻는다. 좌측 탐색기에 build 폴더가 생성됨 -> deploy할 폴더! scripts 추가 Directory build를 deploy 추가 predeploy 추가 : 매 순간 우리가 deploy를 호출할 때마다, npm은 predeploy를 호출한다. predeploy는 npm run build를 한다. build는 build script를 호출하고, 그 script는 folder를 줄 것이다. 완료되면, ..
2021.01.10 -
4.0 Fetching Movies from API fetch axios : fetch위에 있는 작은 layer axios 설치 npm i axios 더보기 사용할 API : YTS-proxy API (by nomad coder) yts.mx/api/v2/list_movies.json JsonView - json파일을 예쁘게 보여주는 크롬 확장프로그램 : https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/related axios로 가져온 data를 변수에 저장 axios가 우리에게 data를 주지만, 우리는 그 데이터를 잡아야 한다. 그래야 state에 사용 가능. componentDidMount(){ c..
#4 MAKING THE MOVIE APP4.0 Fetching Movies from API fetch axios : fetch위에 있는 작은 layer axios 설치 npm i axios 더보기 사용할 API : YTS-proxy API (by nomad coder) yts.mx/api/v2/list_movies.json JsonView - json파일을 예쁘게 보여주는 크롬 확장프로그램 : https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/related axios로 가져온 data를 변수에 저장 axios가 우리에게 data를 주지만, 우리는 그 데이터를 잡아야 한다. 그래야 state에 사용 가능. componentDidMount(){ c..
2021.01.10