안녕하세요! 이번시간에는 리액트 훅중 하나인 useMemo에 사용법에 대해 알아보도록 하겠습니다!불필요한 재랜더링을 없애줌으로써 컴포넌트 안에서 발생하는 성능을 최적화여 웹의 퍼포먼스를 올려 줄 수 있게 도와주는 리액트 훅입니다.저는 인풋에 숫자를 입력하고 버튼을 누르

안녕하세요! 이번시간에는 리액트에서 쓰이는 Ref에 대해 알아보도록 하겠습니다!특정 노드나 컴포넌트에 레퍼런스 값을 만들어주는 것입니다. 때문에 Ref를 통해서 노드나 리액트 요소에 접근하여 값을 얻어낼 수 있습니다.이런식으로 먼저, createRef라는 리액트 내장

안녕하세요! 이번시간에는 느낌표 두개 연산자에 대해 알아보겠습니다!리액트 토이프로젝트를 진행하다가 느낌표 두개 연산자를 우연히 알게되었습니다.처음엔 이것이 무엇인가....? 라고 생각하고 검색해봤더니 알고보니 매우매우 쉽고 간단하면서도 매우매우 유용한 그런 연산자더라구

안녕하세요! 이번 글에는 자바스크립트에서 유용게 쓸수 있는 반복문 for of, for in에 대해 알아보겠습니다 :)우선, 반복문을 쓰는 상황에 대해 말씀드리겠습니다.첫째, 여러개의 같은 코드를 반복해서 쓰고 싶을때 사용합니다.둘째, 자료형에 담긴 자료들을 하나씩 꺼

안녕하세요. 이번글에는 자바스크립트 처리 방식인 동기식 처리, 비동기식 처리, 그리고 콜백헬을 해결하기 위한 promise에 대해 알아보도록 하겠습니다.동기식 처리 - 순차적으로 코드를 실행해줍니다. 먼저 입력된 코드를 먼저 실행하며, 그 이후 코드들을 순차적으로 실행

안녕하세요. 이번글에는 구조분해할당에 대해 알아보도록 하겠습니다.배열이나 객체 내 변수들을 편히고 쉽게 만들어서 사용할 수 있게 해주는 아주 고마운 ES6 문법입니다기존 ES5 문법에서 배열의 각 인덱스 값들을 변수에 담기 위해선 이렇게 해왔습니다.하지만 ES6 이후

안녕하세요! 이번 글에는 객체지향에서 자주 쓰이는 getter, setter 개념에 대해 알아보도록 하겠습니다 :)말그대로 getter는 정해놓은 값을 가져오는 것이고 setter은 정해놓은 값을 새롭게 다시 설정해주는 것입니다. 또한 데이터의 무결성을 보존하기 위해

안녕하세요! 이번글에는 prototype이라는 개념에 대해 알아보도록 하겠습니다!프로토타입은 객체안에 보이지 않는 숨겨진 곳에 값을 넣어놓고 이 값을 어디서든지 꺼내서 쓸 수 있게끔 해줍니다. 우리가 흔히 개발할때 사용하는 toString, push, sort 등 많은

안녕하세요 이번시간에는 생성자라는 개념에 대해서 알아보겠습니다 :)정해진 키밸류를 가진 객체를 편리하게 생성할 수 있게 도와주는 기계같은 역할입니다. 비슷한 객체들을 여러개 생성하기 위해서 생성할때마다 키밸류 값을 일일이 입력해서 만드는 것이아니라 하나의 생성자를 만들

안녕하세요! 이번 글에서는 유용하게 사용되는 rest 파라미터에 대해 알아보도록 하겠습니다함수의 매개변수의 맨 뒤에 ...rest 이러한 형태로 사용되고 파라미터의 나머지 값들을 모두 배열형태로 출력해줍니다. 주의 사항으로는 무조건 맨 뒤에 선언되어야합니다. 또한 ..

안녕하세요! 이번 글에는 default parameter 하고 arguments에 대해 알아보도록 하겠습니다 :)말그대로 기본 파라미터를 정의해주는 것입니다. 함수에 매개변수를 여러개 입력을 받아놓고 호출시 한개만 보내도 에러가 뜨지않고 그 값만 적용돼서 출력이되죠.

안녕하세요 :) 이번글에는 apply하고 call 함수에 대해 알아보겠습니다!어떠한 함수를 어떠한 곳에 적용을 시켜서 같이 사용할 수 있게 만들어 주는 함수입니다. 파라미터도 넘겨서 적용할 수 있고 그냥 사용 할수도 있습니다.말로만 들어서는 이해하기 힘드니 코드로 예시

안녕하세요 :)이번 글에서는 Spread Operator라는 개념에 대해 알아보겠습니다.먼저 Spread의 영단어 뜻을 네이버 영어사전에 검색해보면펼치다라는 뜻이 나옵니다.실제 자바스크립트에서도 이런 느낌으로 이해하시면 될 것 같습니다.어떠한 문자열, 배열, 객체등을

이번 글에는 변수나 함수를 선언할때 발생하는 호이스팅(Hoisting) 이라는 현상에 대해 알아보겠습니다변수 및 함수를 선언과 할당을 할때 선언 부분을 강제로 맨 위로 끌고가서 그거 부터 먼저 처리하고 할당을 하는 방식으로 자바스크립트가 코드를 해석하는 순서입니다.위

이번 글에는 자바스크립트에서 변수를 선언할때 쓰는 키워드인 var,let,const의 차이점에 대해 알아보겠습니다. 우선 변수를 생성할때 알아야할 개념이 3가지가 있습니다. 그것은 선언, 할당, 스코프입니다. 우선 선언과 할당의 개념에 대해 알아보겠습니다. 예를들어

이번 글에는 화살표 함수라는 것에 대해 알아보겠습니다.기존 ES5 이하 자바스크립트에서는 함수를 정의할때 function 함수() {} 혹은 var 함수 = function(){} 와 같은 방법을 사용하였습니다. 하지만 ES6 이후 버전에서 var 함수 = () =>

안녕하세요. 이번 글에는 쉬워보이지만 은근히 헷갈리는 this의 범위에 대해 알아보겠습니다.자바스크립트에서 매우 자주 사용하는 this는 뜻이 꽤 여러가지가 있습니다.window는 DOM을 포함한 스크립트 상에서 발생되는 모든 것을 보관하고 관리하는 전역객체입니다.즉,

안녕하세요. 이번시간에는 리액트를 매우 편리하게 개발 할 수 있게끔 도와주는 JSX에 대해 알아보겠습니다!Java Script XML의 약자이며, 자바스크립트의 확장된 문법이라고 합니다.리액트에서 html 내 body에서 작성하던 마크업 방식과 동일하게 마크업을 해줄

이번시간은 자바스크립트 ES6에서 사용가능한 Template Literal을 알아보겠습니다.JS에서 문자열을 그대로 입력할 수 있는 방식인데, ES5이하 버전에서 줄바꿈을 하기위해 사용했던 \\n 이나, 변수를 넣기 위해 "++" 이러한 선언을 할 필요 없이 있는 그대

이번 시간에는 useReducer에 대해 알아보겠습니다! useReducer VS useState useReducer도 useState처럼 상태값을 관리하는 훅입니다. 일단, useState는 간단한 상태값들을 관리하기엔 매우 편합니다. 하지만 상태값들을 여러개