profile
프론트엔드 개발자
post-thumbnail

memoization

momoization은 간단하게 말하자면 어떤 입력값이 주어지게 되고 결과를 기억해놓았다가 어떤 다른 곳에서 state값이나 함수가 변경되더라도 저장된 값이 변화가 없다면 그 값에 대한 것은 리랜더링하지 않는 것으로불필요한 랜더링을 줄여 성능 향상에 크게 도움이 될 수

2022년 4월 30일
·
0개의 댓글
·

정규표현식 기본개념

정규표현식핸드폰 번호를 검증할때 010-1234-1234 이면 복잡하게 for문과 if문을 사용해야하는데 정규표현식을 사용하면 더 간단하게 만들 수 있다.정규 표현식을 사용할때는 양 옆에 /을 달아주고 .test를 찍어주고 ()안에 있는 입력값이 apple(조건)이 맞

2022년 4월 15일
·
0개의 댓글
·
post-thumbnail

HOC/HOF

Aaa 컴포넌트에 Bbb 컴포넌트를 import 시키고있다. Bbb 컴포넌트에서는 props로 "철수"를 내려받고 있다.함수형으로 이름을 바꾸고 props 또한 변수 이름이기 때문에 어떤 걸로 바뀌어도 상관없다.Closure에 의해 Bbb 컴포넌트가 실행되기 전에 Ho

2022년 4월 15일
·
0개의 댓글
·
post-thumbnail

Local Storage

새로고침시 로그인 정보가 날아가는데 이를 방비하기 위해 브라우저 local stoarge에 accessToken을 저장할 수 있다.session storage는 브라우저에서만 사용가능하고 브라우저를 끄면 정보가 사라진다local storage는 브라우저에서만 사용가능하

2022년 4월 15일
·
0개의 댓글
·
post-thumbnail

Closure 기본개념

함수 안에 함수를 실행시키고 싶을때 소괄호를 두번 써주면되는데 그 이유는aaa()로 실행하게되면 결과값이 bbb로 나오게된다.그래서 aaa()() 괄호를 한번 더 써주게되면 bbb() 실행시킬수 있다.내부함수에서 외부함수에 접근할수 있는것을 Closure라고 한다.le

2022년 4월 15일
·
0개의 댓글
·

권한분기

브라우저(특정 페이지)와 백엔드 서버, 프론트 서버, DB가 있을때일반적으로 유저가 사용하는 페이지와 관리자 페이지(유저가입정보, 통계보기 등)가 나누어져있다. 각각 도메인과 프론트엔드 파일을 따로 사용한다.하나의 페이지에서 로그인한 사람과 안한 사람의 접근 권한을 나

2022년 4월 15일
·
0개의 댓글
·
post-thumbnail

CodeCamp 24일차

여러가지 쿼리 방식 useQuery : 요청을해서 data를 받아오면 알아서 자동으로 그려줌 useLazyQuery : 어떠한 함수를 실행할 때 요청 이후 동작은 useQuery와 동일 useApolloClient : 데이터를 가져온 후에 변수에 담거나 알아서 가공해

2022년 4월 14일
·
0개의 댓글
·
post-thumbnail

Object keys, values, entries, assign

메소드는 주어진 객체의 key값들을 배열로 리턴한다.Object.values() 메소드는 전달된 파라미터 객체가 가지는 value 값을 배열로 리턴한다.Object.entries() 메소드는 객체와 키값을 한번에 배열로 리턴한다.Object.assign()은 변수만 빠

2022년 4월 9일
·
0개의 댓글
·
post-thumbnail

State Lifecycle

기존 자바스크립트의 경우 let,const로 변수를 만들었으나리액트에서는 state 하나로 변수를 만들수 있다.const state,setState = useState("철수")state => 변수명setState => 변수바꾸기(함수)useState => 변수만들기(

2022년 4월 9일
·
0개의 댓글
·
post-thumbnail

useEffect란?

useEffect 사용없이 setState만을 사용하여 api 사진을 불러오는 경우restAPI에 계속 요청이 갈테고 그때마다 state가 바뀌기 때문에 좋은 방법이 아니다.이럴때 useEffect를 사용하게 되면 useQuery처럼 사용할 수 있게된다.useEffec

2022년 4월 9일
·
0개의 댓글
·
post-thumbnail

useRef

useRef는 React에서 함수형 컴포넌트로 사용하고 useRef 훅을 이용하여 특정 태그에 접근한다.useRef의 특징은 불필요한 리랜더링을 하지 않는다는 점과, 각 컴포넌트의 정해진 속성만 조회 및 수정이 가능하다는 것이다.우선 useRef 훅을 import 시켜

2022년 4월 9일
·
0개의 댓글
·

Database에 대한 이해와 검색

1. 검색을 이해하려면 다양한 DB를 알아야한다 Database 프론트에서는 간단하게 입력값에 search를 붙여서 보내주면 간단하지만, 백엔드에서는 find({title:%점심%}) 함수를 통해 데이터베이스 안에 정보를 찾아내서 프론트에 넘겨주게 된다. 데이터의 양이

2022년 4월 9일
·
0개의 댓글
·

Debouncing / Throttling

Debouncing / Throttling 단순하게 onChangeSearch에 리패치를 줘서 검색 버튼을 없애면 글자를 입력할때마다 리패치되기때문에 서버에 무리가 갈 수 있다. 디바운싱(디바운스) : 특정시간이 지날때까지 재반복이 일어나지 않을 경우 작업이 한번 실행

2022년 4월 9일
·
0개의 댓글
·

class-component

class Date가 객체이고 안에 내용들은 만드는 방법이다.this란?vscode에서 동작하는 방식은 아래 주석을 통해 설명하겠다.누가 실행시켜주었느냐에 따라 값이 달라짐화살표 함수에서는 동적으로 바뀌지않음 언어적으로 this가 사용됨자바에서는 class가 사용되고

2022년 4월 9일
·
0개의 댓글
·

Hoisting

변수를 선언하여 만든 함수나 화살표함수가 아닌 그냥 funciton xxx()로 사용되는 함수들 또한 같은 문제가 발생할수도 있음

2022년 4월 3일
·
0개의 댓글
·

객체와 배열의 복사

객체와 배열의 복사 => Shallow-Copy /Deep Copy 사본을 바꾸면 원본도 같이 바뀌는 현상 스트링 넘버 불린과 다르게 객체와 배열은 주소가 복사되어 원본과 사본의 데이터를 수정시 모두 바뀐다 ![](https://media.vlpt.us/images/

2022년 4월 3일
·
0개의 댓글
·

PrevState

setState에 이런 기능이? => prevState 리액트는 따로 임시저장공간에 함수내에 변화를 하나씩 저장하는데 함수가 끝나기 전까지 원래 페이지에 새로 랜더링 되지 않음 그래서 count가 4가 올라가는게 아니라 1씩 올라감 하지만 prev를 사용하면 임시공간에 저장된 데이터를 다시 가져와서 +1 시켜줌 ![](https://images.vel...

2022년 4월 3일
·
0개의 댓글
·

State Lifting, State Up

state 나누기 => Lifting-State-Up 부모에서 스테이트를 props로 넘겨주는건 쉽지만 자식끼리 혹은 자식이 부모에게 스테이트를 공유하는 것은 불가능하다 해결 방법으로는 아래 예시와같이 스테이트를 부모로 끌어올리고 프롭스로 둘다 내려준다 ![](https://images.velog.io/images/navida/post/aa0010e1-5...

2022년 4월 3일
·
0개의 댓글
·