본문 바로가기

전체 글

 (107)
#6. 데이터 타입 1. 숫자 타입 C나 자바와 다르게 자바스크립트는 하나의 숫자 타입만 존재한다. 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다. 정수, 실수, 2진수, 8진수, 16진수 리터럴은 모두 메모리에 배정밀도 64비트 부동소수점 형식의 2진수로 저장된다. 이들 값을 참조하면 모두 10진수로 해석된다. 모든 수를 실수로 처리하므로 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있다. //숫자 타입은 모두 실수로 처리된다. console.log ( 1 === 1.0 ) //true console.log( 4 / 2 ); // 2 console.log( 3 / 2 ); // 1.5 숫자 타입이 표현할 수 있는 세 가지 특별한 값 Infinity 양의 무한대 -Infinit..
#5. 표현식과 문 1. 값 값 : 식이 평가되어 생성된 결과를 말한다. 평가 : 식을 해석해서 값을 생성하거나 참조하는 것을 의미 모든 값은 데이터 타입을 가지며 메모리에 2진수, 즉 비트의 나열로 저장된다. var sum = 10 + 20; sum 변수에 할당 되는 것은 10+20이 아니라 평가된 결과인 숫자 30이므로 10+20은 할당 이전에 평가되어 값을 생성해야 한다. 2. 리터럴 리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다. 리터럴은 평가되어 값을 생성한다. 리터럴은 사람이 이해할 수 있는 문자 (아라비아 숫자, 알파벳, 한글 등) 또는 미리 약속된 기호 (' ', " ", [ ], { }, // 등)로 표기한 코드다. 자바스크립트 엔진은 런타임에 리터럴을 평가..
#4. 변수 1. 변수란 무엇인가 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름. 즉, 값의 위치를 가리키는 상징적인 이름 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 메커니즘을 제공한다. 개발자가 메모리 주소를 통해 값에 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 높기 때문에 자바스크립트는 이러한 개발자의 직접적인 메모리 제어를 허용하지 않는다. 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 할당 : 변수에 값을 저장하는 것 참조 : 변수에 저장된 값을 읽어 들이는 것 참조를 요청하면 자바스크립트 엔진은 변수 이름과 매핑..
#3. useTitle hook useTitle 문서의 제목을 업데이트 시켜주는 걸 담당하는 hook import { useEffect, useState } from "react"; const useTitle = (initialTitle) => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector("title"); htmlTitle.innerText = title; }; useEffect(updateTitle, [title]); return setTitle; }; const App = () => { const titleUpdater = useTitle("Loading...")..
#2. useTabs hook useTabs 특정 element를 탭 하면 원하는 특정 내용만 보여줄 수 있는 기능 import { useState } from "react"; const content = [ { tab: "Section 1", content: "I'm the content of the Section 1" }, { tab: "Section 2", content: "I'm the content of the Section 2" }, ]; const useTabs = (initialTab, allTabs) => { if (!allTabs || !Array.isArray(allTabs)) { return; } const [currentIndex, setCurrentIndex] = useState(initialTab); ret..
#1. useInput hook useInput 기본적으로 input을 업데이트 하는 Hook const useInput = () => {}; import "./styles.css"; import { useState } from "react"; const useInput = (initialValue) => { const [value, setValue] = useState(initialValue); const onChange = (event) => { console.log(event.target); }; return { value, onChange }; }; export const App = () => { const name = useInput("youngseo"); return ( Hello CodeSandbox ); }; export..
#0. Introduction # 목표 : 우리의 hooks library를 build 하기 - useTitle : react document의 title을 몇 개의 hooks와 함께 바꿈 - useInput : input의 역할 - usePageLeave : user가 page를 벗어나는 시점을 발견하고 함수 실행 - useClick : element를 클릭하는 시점을 발견하고 함수 실행 - useFadeIn : 어떤 Element든 상관없이 FadeIn 애니메이션을 적용함 - useHover : 어떤 Element 위에 마우스를 올렸을 때를 감지함 - useFullscreen : 어떤 Element든 fullscreen으로 만들거나 일반 화면으로 돌아가게 함 - useNetwork : online인지 offline 상태인지 감지함..
JavaScript Sec05_12 컴포넌트 트리에 데이터 공급(Context API) 부모에서 자식으로만 데이터를 전달하는 단방향 데이터 흐름을 지키는 React의 특성 때문에 props drilling이 일어난다.props 이름 바꾸기도 어렵고 코드 작성과 수정에 악영향을 끼친다. Context API React에서 문맥 관련 코드를 쉽게 작성할 수 있도록 돕는 API Context 생성 const MyContext = React.createContext(defaultValue); Context Provider를 통한 데이터 공급 {/* 이 context안에 위치할 자식 컴포넌트들*/}

티스토리툴바