전체 글787

• 

  [React]React Hook setState에 함수 전달 이번 포스팅에서는 React Hook을 사용한 함수형 컴포넌트에서 setState에 함수를 전달했을 경우 동작하는 방법을 소개합니다. 목차 setState에 함수가 아닌 값을 전달 언제 setState에 함수를 전달해야하는가? setState에 함수를 전달하는 예제 및 내용 setState에 함수가 아닌 값을 전달 React Hook에서는 useState()를 사용하여 state의 값을 초기화합니다. const [state, setState] = useState(initialValue); 그리고 특정 이벤트 또는 로직에 의해 setState()에 원하는 값을 인수로 전달하여 state의 값을 갱신할 수 있습니다. handleClick = () => { setState(newState); } React H.. React/React 문법 2021. 11. 22.

• 

  [React]useEffect Hook에서 async await를 사용하여 API 호출 이번 포스팅에서는 useEffect Hook에서 async await를 사용하여 API 호출하는 방법을 소개합니다. 아래는 CodeSandBox에서 구현한 데모입니다. 데모 : https://codesandbox.io/s/useeffect-async-await-zpc0z 목차 useEffect Hook에서 async-await 함수 정의 이슈 경고 분석 해결 방법 useEffect Hook에서 asnyc-await 함수 정의 이슈 순서 1. 우선, promise 구문을 사용한 코드입니다. 10개의 post 정보를 가져오기 위해 useEffect Hook에서 API 호출을 수행합니다. useEffect(() => { axios .get("https://jsonplaceholder.typicode.com/p.. React/React 문법 2021. 11. 18.

• 

  [JavaScript]Object.assign() 함수와 Object.create()의 차이점 이번 포스팅에서는 Object.assign() 함수와 Object.create() 함수의 차이점을 소개합니다. 목차 Object.assign() 함수 Object.create() 함수 핵심 내용 Object.assign() 함수 Object.assign() 함수는 열거 가능한 속성(enumerable properties)을 복사하여 새로운 객체를 반환합니다. 위에서 언급한 열거 가능한 속성은 for...in 루프 또는 Object.keys() 함수를 사용하여 접근할 수 있는 속성을 의미합니다. 다음 코드는 for...in 루프를 사용하여 student의 모든 속성을 접근하는 예제입니다. const student = { code: 1000, name: 'Kang', age: 29 }; for (const .. JavaScript/JavaScript 문법 2021. 11. 16.

• 

  [React]Debounce 함수 구현 및 사용 이번 포스팅에서는 React에서 Debounce 기법을 사용한 함수를 구현하는 방법을 소개합니다. 목차 Debounce란? Debounce 함수 사용 함수형 컴포넌트에서 Debounce 함수 사용 Debounce란? Debounce은 함수를 여러 번 호출하고 마지막 호출에서 일정 시간이 지난 후 해당 함수의 기능이 동작하는 기법입니다. Debounce를 사용하는 경우 Debounce 기법은 검색창에서 자동 완성을 구현해야 하는 경우 또는 마우스를 빠르게 여러 번 클릭했을 때, 마지막 클릭에서 기능이 동작해야 하는 경우 사용할 수 있습니다. 네이버처럼 자동 완성 기능이 있는 검색창을 구현해야 한다고 가정합니다. 검색 키워드에 대한 자동완성 리스트를 보여주기 위해서는 키워드를 입력할 때마다 API 요청을 해.. React/React 문법 2021. 11. 15.

• 

  [JavaScript]배열에서 임의의 요소를 가져오는 방법 이번 포스팅에서는 배열에서 임의의 요소를 가져오는 방법을 소개합니다. 목차 Math.random Lodash sort() 함수로 섞기(Shuffle) Math.random Math.random 함수를 사용하여 배열에서 임의의 인덱스를 가져올 수 있습니다. 그런 다음 랜덤한 인덱스를 사용하여 배열에서 요소를 가져올 수 있습니다. 다음은 Math.random() 함수를 사용하여 배열에서 랜덤한 값을 추출하는 예제입니다. const strArray = ['A', 'B', 'C', 'D', 'E']; const randomValue = strArray[Math.floor(Math.random() * strArray.length)]; Math.random() 함수는 0 ~ 1 사이의 숫자를 반환합니다. 그리고 0.. JavaScript/JavaScript 문법 2021. 11. 10.

• 

  [React]객체 배열에서 값 변경 이번 포스팅에서는 React에서 객체의 배열을 가지는 state 값을 변경하는 방법을 소개합니다. 다음과 같이 객체의 배열(objArray)을 가지는 state가 있다고 가정합니다. state = { objArray: [ { code: "", name: "", key: "key_empty" }, { code: "A", name: "A", key: "key_A" }, { code: "B", name: "B", key: "key_B" }, { code: "C", name: "C", key: "key_C" } ] } 그리고 code가 "B"인 name의 값을 "Update"로 변경해야 합니다. 순서 1. 배열의 요소 찾기 먼저 객체의 배열에서 키, ID, 코드처럼 유일한 값이라고 생각되는 속성을 기준으로 요소.. React/React 문법 2021. 11. 9.

• 

  [JavaScript]var, let, const 차이 및 함수 유효범위 이번 포스팅에서는 ES6부터 추가된 let, const 키워드를 사용하여 변수를 선언하는 방식 그리고 기존의 var 키워드를 사용하여 변수를 선언하는 방식의 차이점과 함수 유효범위에 대해 소개합니다. 목차 var 함수 유효범위 let 또는 const 결론 var var 키워드로 선언된 변수는 값을 재할당 또는 수정할 수 있습니다. var varValue = 100; varValue = 200; var 키워드로 선언된 변수는 함수 내부에서만 사용할 수 있으며, 함수 외부에 생성된 변수는 전역 변수입니다. 다음 코드에서 var로 선언된 변수는 함수 내부에서 선언되었기에 함수 외부에서는 사용할 수 없습니다. function PrintVarValue() { var varValue = 100; console.lo.. JavaScript/JavaScript 문법 2021. 11. 9.

• 

  [JavaScript]Array.flat() 함수로 배열 병합 이번 포스팅에서는 배열을 병합하는 Array.flat() 함수를 소개합니다. 목차 Array.flat() 대체 솔루션 Array.flat() Array.flat() 함수는 지정한 깊이까지 재귀적으로 이어 붙인 1차원 배열을 생성합니다. 다음은 2차원 배열을 flat() 함수로 이어붙인 예제입니다. const arr = [['A', 'B'] , 'C', ['D']] const flatArr = arr.flat(); console.log(flatArr); // ['A', 'B', 'C', 'D'] Array.flat() 함수의 매개변수 array.flat() 함수의 매개변수에는 중첩 배열에서 평탄화하고자 하는 깊이의 값을 설정하며, 기본값은 1입니다. 즉, 다음 코드는 동일합니다. array.flat(); .. JavaScript/JavaScript 문법 2021. 11. 8.

• 

  [JavaScript]const와 Object.freeze()의 차이 이번 포스팅에서는 const와 Object.freeze()의 차이를 소개합니다. 목차 개요 const Object.freeze() 개요 ES6은 출시 이후 몇 가지 새로운 기능과 함수를 JavaScript에 도입했습니다. 새로운 기능 중에는 Object.freeze() 함수와 const가 존재합니다. Object.freeze() 함수와 const는 비슷한 특징을 가지고 있지만, 완전히 다르게 동작합니다. const const 키워드로 생성된 변수는 값을 재할당할 수 없습니다. const 키워드로 생성된 상수 변수에 값을 재할당하려고 하면 TypeError가 발생합니다. Object.freeze() freeze는 "얼리다"라는 의미로 freeze() 함수는 "객체를 동결하기 위한 함수"입니다. 불변 객체와.. JavaScript/JavaScript 문법 2021. 11. 8.

• 

  [JavaScript]캐시(Cache) 사용 방법 이번 포스팅에서는 JavaScript에서 캐시(Cache) API를 사용하는 방법을 소개합니다. 목차 Cache 란 Cache API 정리 Cache 란? 캐시는 데이터나 값을 미리 복사해 놓는 임시 저장소입니다. 캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있습니다. 캐시는 웹에도 존재하며, 웹 캐시(web cache) 또는 HTTP 캐시(HTTP cache)라고 말합니다. 웹 캐시에는 서버-클라이언트 통신간 발생하는 정적 자산(HTML pages, CSS, JavaScript files, images, JSON 등)을 웹 캐시에 복사합니다. 캐시 API를 활용하면, 웹 캐시에 복사된 정적 자산들을 제어할 수 있습니다. 캐시 확인 window에서 ca.. JavaScript/JavaScript 문법 2021. 11. 8.

• 

  [React]고차 함수 정의 및 React 고차 컴포넌트(HOC) 이번 포스팅에서는 고차 함수와 React 기술 중 하나인 고차 컴포넌트를 소개합니다. 목차 고차 함수 정의 고차 컴포넌트(HOC) 고차 함수(HOF) 정의 고차 함수는 아래 두 가지 조건에서 한 가지 조건 또는 모든 조건을 만족하는 함수입니다. 함수를 반환하거나 함수를 인수로 하거나 자바스크립트에는 다양한 고차 함수를 지원하는데, 배열에서 사용 가능한 map, filter, sort, reduce 함수가 있습니다. Array.prototype.map() 다음 코드는 배열 numArray을 map 함수를 사용하여 새로운 배열을 생성합니다. var numArray = [100, 200, 300, 400]; var mapArray = numArray.map(num => num / 2); console.log(.. React/React 문법 2021. 11. 3.

• 

  [React]div 외부 클릭을 감지 Hook으로 구현 이번 포스팅에서는 Hook에서 div 외부 클릭을 감지하는 방법을 소개합니다. 이전에 컴포넌트 외부 클릭을 감지하는 방법에 대해 해당 포스팅에서 소개하였지만, 클래스 컴포넌트 위주의 설명이었고 커스텀 훅을 사용하지 않았기 때문에 이번에는 커스텀 훅 기반으로 구현합니다. 목차 드롭다운 생성 div 외부 클릭 감지 커스텀 훅으로 구현 드롭다운 생성 드롭다운에 매핑되는 객체의 배열을 작성합니다. const objList = [ { code: "", name: "", key: "key_empty" }, { code: "A", name: "A", key: "key_A" }, { code: "B", name: "B", key: "key_B" }, { code: "C", name: "C", key: "key_C" }.. React/React 문법 2021. 11. 2.