728x90 JavaScript97 [JavaScript] 필수 개념 DOM , BOM 이란? DOM - Document Object Model (window.document) BOM - Browser Object Model (window.location), (window.navigator), (window.screen), (window.history) . . . 1) BOM - 모든 서비스는 웹 브라우저를 바탕으로 실행되기 때문에, 웹 서비스 개발은 브라우저와 밀접한 관련이 있다. - 이 브라우저와 관련된 객체 집합이 브라우저 객체 모델(BOM) - 이 BOM을 이용해 브라우저와 관련된 기능을 구성한다. - DOM은 BOM 중 하나 - BOM의 최상위 객체는 window객체 - window.location - window.navigator - window.screen - window.histor.. 2023. 3. 4. [React] 이벤트 핸들러 - 리액트에서 이벤트 처리하는 방법 DOM에서 클릭 이벤트를 사용할 땐 버튼이 눌리면 activate()라는 함수를 호출하도록 하고 DOM 클릭 이벤트를 처리할 함수를 onclick을 통해서 전달했었다. 또리짱 리액트의 이벤트 처리는 DOM의 이벤트와 다른 부분이 두 가지 있다. 1. 이벤트 이름을 카멜 표기법으로 쓴다. 더보기 카멜표기법 단어 전체적으로 소문자를 사용하지만, 맨 첫 글자를 제외한 각 합성어의 첫 글자만 대문자로 표기한다. 합성한 단어의 모양이 쌍봉낙타의 등과 비슷하다는 뜻에서 이름붙었다. 2. DOM에서는 이벤트를 처리할 함수를 문자열로 전달하지만 리액트에서는 함수 그대로 전달한다. 리액트 이벤트 처리 또리짱 위 코드처럼 어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수가 있는데 이것을 이벤트 핸들러라고 한다. 이벤.. 2023. 3. 1. [React] 리액트 훅스-useRef() useRef useRef() 훅은 레퍼런스(Reference)를 사용하기 위한 훅이다. 리액트에서 레퍼런스란 특정 컴포넌트에 접근할 수 있는 객체를 의미한다. useRef() 훅은 레퍼런스 객체를 반환한다. 레퍼런스 객체엔 .current라는 속성이 있는데 이것은 현재 레퍼런스(참조)하고 있는 엘리먼트를 의미한다. const refContainer = useRef(초깃값); useRef()훅은 변경 가능한.current라는 속성을 가진 하나의 상자이다. useRef() 훅은 매번 렌더링될 때마다 항상 같은 ref 객체를 반환한다. useRef() 훅은 내부의 데이터가 변경되었을 때 별도로 알리지 않는다. .current 속성을 변경하는 것은 재렌더링을 일으키지 않는다. 따라서 ref에 DOM node가 .. 2023. 2. 27. [React] 리액트 훅스 - useEffect() useEffect ? useState()와 같이 가장 많이 사용되는 훅으로 useEffect()가 있다. useEffect는 사이드 이펙트를 수행하기 위한 훅이다. 리액트에서 말하는 사이트 이펙트는 그냥 효과를 뜻하는 이펙트의 의미에 가깝다. 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업을 의미한다. 이런 작업을 이펙트라고 부르는 이유는 이 작업들이 다른 컴포넌트에 영향을 미칠 수 있으며 렌더링 중에는 작업이 완료될 수 없기 때문이다. 렌더링이 끝난 이후에 실행되어야 하는 작업이다. useEffect()는 아래와 같이 사용한다. useEffect(이펙트 함수, 의존성 배열); 첫 번째 파라미터로는 이펙트 함수가 들어가고, 두 번째 파라미터로는 의존성 배열이 들어간다. 의존성 배열은 말.. 2023. 2. 26. [React] 리액트 훅스 - useMemo(), useCallback() useMemo ? Memoized value를 리턴하는 훅이다. 파라미터로 Memoized value를 생성하는 create 함수와 의존성 배열을 받는다. 의존성 배열에 들어있는 변수가 변했을 경우에만 새로 create 함수를 호출하여 결괏값을 반환하며, 그렇지 않은 경우에는 기존 함수의 결괏값을 그대로 반환한다. useMemo() 훅을 사용하면 컴포넌트가 다시 렌더링될 때마다 연산량이 높은 작업을 반복하는 것을 피할 수 있다. 필요할 때만 계산을 하지않고 메모리에서 꺼내서 재사용 하는 기법. 자주 필요한 값을 처음 계산할 때 캐시에 저장을 해두어 값이 필요할 때마다 다시 계산하지 않고 캐시에서 꺼내서 재사용. useMemo는 의존성이 변경되었을 때만 변경된다. const memoizedValue = u.. 2023. 2. 25. [JavaScript] for-in문, for-of문 정리 1. for-in -for-in문은 for문과는 전혀 다른 형태의 반복문이다. -for-in문은 배열(Array)이나 객체(Object)를 반복하는 구문이다. -객체(Object)는 데이터를 저장할 때 키(key)를 사용하여 저장하고, 키를 이용해서 읽을 수 있다. -객체의 key값에 접근 가능하지만 키의 값인 value값에는 직접 접근이 불가하다. -for-in문은 모든 객체에서 사용 가능하다. -key를 리턴한다. (배열의 경우에는 index) for (let i in 객체명이나배열명){ //반복할 표현식 } 위와 같은 문법으로 쓰고, i라는 변수에 배열이 갖고 있는 인덱스 번호를 담아주겠다 라는 것이다. for(let i=0; i 2023. 2. 24. [TypeScript] 콜백 함수(callback function) 콜백 함수 일등 함수(first-class function)는 프로그래밍 언어가 제공하는 기능이다. 일등 함수 기능을 제공하는 언어에서 함수는 '함수 표현식'이라는 일종의 값이다. 따라서 변수에 담을 수 있다. 이 말은 함수 표현식을 매개변수로 받을 수 있다는 것을 의미한다. 매개변수 형태로 동작하는 함수를 콜백 함수(callback function)라고 한다. 아래 코드에서 함수 f는 callback이라는 매개변수가 있는데, 함수 몸통에서 함수로서 호출한다. const f = (callback: () => void): void => callback() 아래 코드는 좀 더 현실적인 콜백 함수 사용 예이다. init 함수는 중간에 매개변수로 받은 callback에 담긴 함수 표현식을 실행한다. (init... 2023. 2. 23. [TypeScript] 변수 선언문( 타입 주석, 타입 추론, any ) 1. 타입 주석(타입 명시) 변수 선언시 변수 값의 타입을 명시함으로써 변수 값의 데이터타입을 지정한다. 타입스크립트는 자바스크립트 변수 선언문을 확장하여 아래의 형태로 타입을 명시할 수 있다. 이것을 타입 주석(type annotation)이라고 한다. let 변수 이름: 타입 [=초깃값] const 변수 이름: 타입 = 초깃값 타입 주석으로 변수를 선언한 예를 알아 보자 let n: number = 1 let b: boolean = true//혹은 false let s: string = 'hello' let o: object = {} 타입스크립트는 자바스크립트와 다르게 let으로 선언한 변숫값은 타입 주석으로 명시한 타입에 해당하는 값으로만 바꿀 수 있다. 선언한 타입과 다른 타입의 값으로 변숫값을 .. 2023. 2. 22. [React] 컴포넌트 , props 리액트 필수 개념 1.state 2. props 3. 컴포넌트 이번엔 props와 컴포넌트를 알아보자 리액트 컴포넌트 -컴포넌트 기반 구조 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고 이러한 컴포넌트들이 모여 전체 페이지를 구성 -개념적으로 자바스크립트 함수와 비슷함 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴 -컴포넌트 이름 짓기 컴포넌트 이름은 항상 대문자로 시작 소문자로 시작하면 컴포넌트를 DOM 태그로 인식하기 때문 Props -Props ? 리액트 컴포넌트의 속성 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 -Props 특징 읽기 전용이다 리액트 컴포넌트의 props는 바꿀 수 없고 같은 props가 들어오면 항상 같은 엘리먼트를 리턴해야 함 -Pr.. 2023. 2. 21. [TypeScript] 타입스크립트로 카운터 만들기 예제 *Setup 명령 프롬프트 실행 1. 템플릿 먼저 설치하기 npm install cra-template-typescript -g 2. 새로운 프로젝트 생성하기 npx create-react-app 등록할파일명 --template typescript ex> npx create-react-app ts-react --template typescript 입력하여 폴더 생성 3. tsconfig.json 파일 내용 수정하기 ( 터미널에 npx tsc --init 명령어를 입력하면 tsconfig.json 파일이 자동생성 됨) 더보기 tsconfig.json 파일은 타입스크립트가 컴파일 될 때 필요한 옵션을 지정한다. "target" : 컴파일 된 코드가 어떤 환경에서 실행될 지 정의한다. 예를 들어 화살표 함수를.. 2023. 2. 20. 이전 1 ··· 6 7 8 9 10 다음 728x90
