profile
프론트엔드 개발자로 점프업!
post-thumbnail

recursion(재귀함수)

재귀함수란 원하는 결과가 나올때까지 자기 자신을 무한하게 실행하는 함수이다.따라서 원하는 결과가 나오려면 종료시점을 작성해주어야하며, while 반복문을 대체해서 사용할 수 있다.종료시점을 설정해주고 recursion인 자기자신을 반복하기 위해 return해준다.하지만

4일 전
·
0개의 댓글
post-thumbnail

Day-33 Optimistic-UI, 서버사이드렌더링(Scraping, Crawling, SEO, SSG, SSR)

우리는 데이터를 받아올 때 백엔드에 api를 요청하고 DB에 가서 받아와서 화면에 그려주는 단계를 거치게 되는데Optimistic-UI는 데이터를 받아오는 것을 기다리지 않고 어차피 성공할 것이라고 판단하여 바로 캐시스테이트에 업데이트를 하는 것을 말한다.Optimis

4일 전
·
0개의 댓글
post-thumbnail

Day-32 Memoization, @Media

특정 페이지의 state가 변할때 그 안의 모든 컴포넌트들이 아래와 같이 전부 다시 그려지는 매우 불필요한 과정이 생기기 때문에 이를 방지하기 위해 memoization을 사용한다.부모가 리렌더시 자식도 리렌더되는 상황리렌더시 변수가 새로 만들어지는 상황함수가 새로 만

5일 전
·
0개의 댓글

Day-31 FileReader, Promise.all, LazyLoad & PreLoad

기존방식대로 이미지를 올릴 때는 몇가지 비효율적인 면이 존재한다.이미지 파일을 불러왔는데 등록은 하지 않고 뒤로가게 되면 사용되지 않는 파일이 스토리지에 남아있어 용량이 많이 찬다.스토리지에서 받아오는 파일의 속도가 느려진다.따라서 이미지 선택 후 백엔드로 보내주지 않

6일 전
·
0개의 댓글
post-thumbnail

Day-30 Refresh Token

로컬스토리지에 저장된 accessToken은 아래 사진과 같이 인증과 인가과정을 거치는 것이었다.하지만 로컬스토리지에 저장된 accessToken은 유효기간이 너무 짧아 유효기간이 긴 refreshToken을 적용하기 위해서는 jwt를 하나 더 만들어야한다.글로벌스테이

7일 전
·
0개의 댓글
post-thumbnail

Day-29 SPA vs MPA, Callback, Promise

코드를 작성하고 확인했으나 위와 같은 오류가 나타났다.하지만 아래 코드처럼 a 태그를 작성하면 잘 나오는 것이 확인이 되었다.싱글페이지 어플리케이션(SPA)과 멀티페이지 어플리케이션(MPA)의 때문인데싱글페이지 어플리케이션(SPA)은 페이지를 다 그려놓고 이동할 부분으

2022년 6월 17일
·
0개의 댓글
post-thumbnail

Day-28 결제하기, Event-loop, thread

홈페이지에서 물건을 사기 위해서는 결제과정을 거치게 되는데 최종 카드사에 앞어서 결제를 처리해주는 PG(Payment Gateway)가 있다.NHN, 나이스페이, KG이니시스 등이 있으며 결제를 연결하는 방법을 결정해놓고 통합해서 관리하는 시스템을 구축해놓았는데 PG사

2022년 6월 16일
·
0개의 댓글
post-thumbnail

Day-27 Web-Editor, XSS, injection, Hydration Issue

웹에디터란 글씨를 진하게 꾸미거나 기울이기 등 꾸미는 도구들을 통틀어서 말한다.웹에디터 종류로는 매우 많은데 react-quill, ract-draft-wysiwyg, toast UI Editor를 많이 사용한다.react-quill을 사용하여 실습을 해봤는데위와 같이

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

Day-25 Custom Hooks, Cache-Modify

Costom Hooks이란 use로 시작하는 함수를 말하며, 함수형 컴포넌트에서 사용한다.(클래스형은 HOC를 사용한다.)use로 시작하는 함수를 말하지만 무조건적인건 아니며 관례에 따른다.use를 사용하지 않고 일반 function과 구분하지 않으면 서비스 규모가 커

2022년 6월 13일
·
0개의 댓글
post-thumbnail

HTTP status code

블로그 Day-3에서 통신에 대해 잠깐 알아보았다.통신이란 웹서비스에서 데이터를 요청하고 응답하는 것을 의미하는데 통신을 위한 '길'로 텍스트와 HTML을 보내는 HTTP(Hyper Text transfer Protocol)가 있다.통신을 통해 우리는 여러가지 숫자 코

2022년 6월 12일
·
0개의 댓글
post-thumbnail

ES6 문법

ES6란 ECMA라는 국제 기구에서 만든 ECMAScript 표준의 가장 최신 버전을 말한다.2015년에 나와서 ES2015라고도 한다.ECMAScript란 JavaScript가 다양한 곳에서 공통적으로 작 적용되기 위해 표준 규격을 정한 것이다.const and le

2022년 6월 12일
·
0개의 댓글
post-thumbnail

Day-24 useApolloClient, form, yup, 정규표현식

기존에는 useQuery를 사용해서 데이터를 불러오는 방법을 사용을 했다.하지만 useQuery는 내가 원하는 시점에서 데이터를 불러오지 않고 그 페이지가 실행되면 바로 불러와지기 때문에 axios를 이용하여 원하는 시점에 불러오면 되지만 axios는 rest 방식이므

2022년 6월 10일
·
0개의 댓글
post-thumbnail

Day-23,26 권한분기(Diffing, Hydration, HOC vs HOF)

로그인을 하고 새로고침을 하는 순간 정보가 사라지는 이유는 결론부터 말하면 토큰을 변수에 담아놨기 때문에 새로고침을 하는 순간 초기화가 되면서 프론트엔드에서 html, css, js까지 전부 처음부터 받아와지기 때문에 토큰도 사라지게 된다.

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

원시자료형 vs 참고자료형

고정된 저장공간을 차지하는 데이터를 말한다.string number boolean undefined null symbol 이 해당한다.원시자료형은 모두 하나의 데이터를 담고 변수에 값(value)이 담기는 특징을 가진다.원시자료형이 아닌 모든 것을 말한다.배열과 객체가

2022년 6월 8일
·
0개의 댓글

Scope? 실행컨텍스트?

Scope란 변수에 접근할 수 있는 범위를 말한다.scope의 2가지 타입전역스코프(Global Scope)지역스코프(Local Scope)전역스코프란 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있는 것이며,지역스코프는 해당 지역에서만 접근할 수 있어

2022년 6월 8일
·
0개의 댓글
post-thumbnail

Day-22 Login Process

브라우저에서 로그인을 할 때 email 및 password를 입력하면 백엔드 login api로 넘어가면서 DB에서 정보를 등록하고 정보가 있는지 확인을 한다. 로그인 정보가 있으면 로그인 정보와 만료시간 등을 지정하는 백엔드 메모리 세션에 들어가게 되고 이것을 인증

2022년 6월 8일
·
0개의 댓글
post-thumbnail

Day-21 Global State

함수에서 사용하는 props, el, index, prev 등이 각각의 의미를 가진다고 생각을 했지만 이들의 실체는 사실 그냥 이름이었을 뿐이다.함수 ()안에 들어가는 것을 인자(argument)라고 하고 뭘로 받을지 기다리는 것들을 매개변수(parameter)라고 한

2022년 6월 7일
·
0개의 댓글
post-thumbnail

Day-20 검색(Debouncing vs Throttling)

프론트엔드에서는 검색을 요청하고 요청된 페이지를 refetch를 해주게 되고,이후 백엔드에서는 요청된 검색 관련 글을 객체로 보내준다.관련 글을 찾아오기 위해 백엔드에서는 테이블에 있는 무수히 많은 글들을 스캔해야 하는데 이를 테이블 풀 스캔(table full sca

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

JS 기본 상식

변수란 어떤 관계나 범위 안에서 여러가지 값으로 변할 수 있는 수를 말한다.쉽게말하면 데이터를 담는 상자이다변수에 데이터를 담도록 선언을 하게 되는데 var, let, const로 나뉜다.변수 선언을 나누는 특징으로는 이름이 중복되는지(재선언), 데이터를 수정할 수 있

2022년 6월 3일
·
0개의 댓글
post-thumbnail

Day-19 Image 업로드

스토리지란 이미지 및 동영상이 저장되어있는 용량이 큰 컴퓨터라고 볼 수 있으며,저장되어 있는 이미지 및 동영상을 다운로드 받을 수 있도록 주소를 제공해준다.이미지를 올리는 큰 과정을 보게 되면input type="file"이라는 버튼을 생성하여 버튼을 누르게되면 이미지

2022년 6월 2일
·
0개의 댓글