본문 바로가기

전체 글

 (33)
[Map] React Kakao Map SDK (1) 지도 API 중에서 카카오맵을 사용하기로 한 이유 카카오맵 API를 사용하는데 필요한 문서와 예제가 많아 빠르게 구현하고 추후 유지보수하기 쉬울 것이라고 판단하여 선택1. 설치npm install react-kakao-maps-sdk 2. 스크립트 추가라이브러리를 사용하기 위해 index.html 파일에 아래의 코드 추가     3. 맵 화면에 출력구글링 해보니 여러 방법이 있었는데 카카오 공식문서를 참고하여 코드 작성함 import React, { useEffect, useRef } from 'react';const { kakao } = window;const KakaoMap = () => { const mapContainer = useRef(null); const mapSty..
[BROWSER] async / defer async와 defer의 속성은 병렬로 다운로드되며 다운로드가 완료되면 즉시 실행된다. 이때, 웹페이지의 파싱(해석)은 멈추지 않는다. 다시 말해, 스크립트 파일을 다운로드 하는 동안 다른 리소스를 가져오거나 웹페이지를 표시하는 작업이 계속된다. [async (비동기)] async는 다운로드 후 즉시 실행한다. (단, 스크립트 파일 실행 순서는 다운로드가 끝날 때마다 다를 수 있다고 함) [defer (지연)] defer속성을 가진 스크립트 파일도 병렬로 다운로드되지만 해석(파싱)이 끝나 웹페이지가 모두 그려져서 DOM이 들어왔을 때 스크립트를 실행한다. 스크립트 파일 실행 순서는 순서대로 실행된다. (웹페이지를 만드는 중에 스크립트에서 페이지의 요소들에 접근하는 경우 유용하다고 함) 이 내용을 그림으로..
[ERROR] octal literals are not allowed. use the syntax '0o0' 에러 if(type === 'time'){ date = new Date(date[0], date[1] -1, date[2], date[3], 00,00); return date; }else{ return [date[0],date[1],date[2],'','']; }; 문제해결 010 과 같이 0으로 시작하면 8진수, 0x10 같이 0x 로 시작하면 16진수 표기가 맞다. 하지만, ES6부터는 8진수 표기를 0o10, 16진수는 0x10, 2진수는 0b10로 사용하게 되었다. ES6 모듈을 정의하는 경우 자동으로 strict모드가 되는데 이전의 010과 같은 8진수 표기법을 사용하지 못하게 하여 strict 모드에서 eval(‘010’)과 같은 표기법은 사용이 불가하다. (약간의 꼼수를 사용해 eval(‘..
[React] User agent, 사용자 브라우저 확인 방법 User agent User agent는 HTTP 요청을 보내는 디바이스와 브라우저 등 사용자 소프트웨어의 식별 정보를 담고 있는 request header의 한 종류이다. 브라우저 외에도 사용자 에이전트는 스크래핑 봇이나 다운로드 매니저 등이 될 수 있다. 이 문자열은 브라우저, 버전 번호 및 호스트 운영체제를 담는다.(쉽게 말하면 내가 어떤 OS를 쓰고 있고, 버전은 어떤 버전인지 웹 브라우저의 정보는 어떤 것인지 등을 담고 있는 번호판 같은 개념이다.) 미디어 쿼리와 다른 점 CSS 미디어 쿼리로 디바이스 유형에 따라 단일 사이트의 여러 스타일을 적용할 수 있다. 미디어 쿼리는 화면 너비, 디바이스, 비율에 따라 레이아웃을 조정하는데 사용되는 것이고 유저 에이전트는 장치 유형을 식별하고 감지하는데 ..
[React] Memoization, useMemo Memoization 기존에 수행한 연산의 결과값을 저장해두고 동일한 입력이 들어오면 재활용하는 프로그램 기법으로 중복 연산을 피해 애플리케이션의 성능을 최적화 할 수 있다. useMemo 메모이제이션된 값을 반환하는 함수 useMemo(() => fn, [deps]) deps 값이 변할 때 () => fn 함수를 실행하고 그 함수의 반환 값을 반환해준다. deps는 dependency 약어로 의존성을 뜻하며 useMemo가 deps에 의존하고 있다는 것을 말한다. 예제1 import React, { useState, useCallback, useMemo } from "react"; export default function App() { const [stateX, setStateX] = useState..
[JavaScript] 호이스팅, TDZ 호이스팅 함수의 코드를 실행하기 전에 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것. 초기화를 제외한 선언만 호이스팅. 그렇기 때문에 선언, 정의된 코드보다 호출하는 코드를 먼저 배치할 수 있음. 변수의 선언과 초기화를 분리. 변수의 선언을 코드의 최상단으로 끌어올림. catName("조미료"); function catName(name) { console.log("제 고양이의 이름은 " + name + "입니다"); } // "제 고양이의 이름은 조미료 입니다" 변수 선언 형식에 따른 초기화 var : 호이스팅 시 undefined로 변수를 초기화 function : 선언된 위치와 상관없이 동일하게 호출 let, const : 호이스팅 시 변수를 초기화하지 않음. (호이스팅 대상은 맞음) co..
[JavaScript] 함수(Funtion) 변수를 선언하고 함수를 대입하는 방식을 함수 표현식이라고 한다. var addOne = function(x) { var y = x + 1; return y; }; addOne이 함수의 이름(변수의 이름)이고, x가 사용자가 넣고 싶은 것을 넣는 곳이다. x를 매개변수(Parameter)라고 한다. 함수 안에는 y라는 변수를 만든 뒤에 x값에 1을 더하라고 되어있다. return은 y값을 바깥으로 내보내고 함수를 종료하라는 의미다. 즉, x값을 받아서 1을 더한 후 바깥으로 내보내라는 말인데 이것을 반환한다고 표현한다. 이 함수를 실행하려면 함수의 이름에다 소괄호(())를 붙이고, 괄호 안에 매개변수 x에 상응하는 인자를 넣어준다. 이렇게 미리 만들어둔 함수를 실행하는 행위를 호출한다라고 표현한다. 호출을..
null / undefined / undeclared null 변수를 선언하고 빈 값을 할당한 상태(빈 객체) null은 원시값(Primitive Type) 중 하나로, 명시적으로 값이 비어있음을 표현한다. null의 경우에는 해당 변수가 어떤 객체도 가리키고 있지 않다는 것을 의미한다. cf) null은 undefined처럼 전역 객체의 속성 중 하나가 아니라 리터럴 값이다. let a = null; console.log(a); // null console.log(typeof a); // object let pokemon = 'Pikachu'; pokemon = null; // 이전에 참조했던 'Pikachu' 라는 값을 더이상 참조하지 않겠다 console.log(pokemon); // null undefined 접근 가능한 스코프에 변수를 선언하고 값..

티스토리툴바