nextjs는 React의 SSR(Server-Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크이다. React만으로도 SSR을 자체적으로도 구현할 수 있긴 하지만 개발환경 세팅이 굉장히 복잡하다. 그래서 NextJs가 나왔고 간단한 설정만으로도

프로젝트 create-next-app으로 생성redux-toolkit 및 redux-saga 설치eslint & prettier 설치.eslintrc.jsontypescript eslint 적용vscode 설정 - mac기준 vs코드내에서 파일을 저장할 때마다 자동으

up, down 메소드를 제공하는 객체 ladder가 있다.연어이 메소드를 호출하고 싶으면이렇게 호출해야되는데 메소드 호출 체이닝을 이용하면이렇게 바꿀 수 있다. 그리고 각 메소드마다 호출을 연속적으로 하기 위해서는 return.this를 붙여서 쓰면된다.메모이제이션은

DOM은 HTML문서를 프로그래밍적으로 접근가능하게 해주는 인터페이스로 DOM node에 접근하여 편집을 하게 되면 DOM이 업데이트 되는데 비용이 굉장히 많이 든다. node를 추가하면 node를 추가하여 업데이트 하고 이러한 업데이트로 인해 레이아웃에 변화가 생기면

javascript에서 기본적으로 this는 window이다. strict.mode일 경우는 차이가 있다.this가 window가 아닌 경우객체의 메소드 안의 this의 경우는 객체를 카리킨다.명시적으로 this를 바꾸는 함수 3가지 bind, call apply를 사

DOM은 HTML, XML 문서의 프로그래밍 interface이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조 그리고 스타일을 읽고 조작할 수 있는 API를 제공한다.DOM의 생성 방식DOM은 원본 HTML문서의 객체 기반 표현 방식이며 DOM의 개체 구조

자바스크립트로 어플리케이션을 개발하게 되면 기본적으로 하나의 파일에 모든로직이 들어가서 용량이 커지고 속도가 느려지는 문제가 생기는데이를 방지하기 위해 코드를 따로 분리 시키고 비동기적으로 필요할때 불러와서 사용할수 있게 하는 것이다.리액트에서는 lazy-suspens

페이지가 업데이트 될때마다 이전 캐시스토리지를 초기화 해줘야되는 문제들이 발생.이렇게 index.html파일에서 실행을 시키고 worker.js파일을 구현. 그래서 캐싱할 파일을 지정하고 오프라인일때 나오는 페이지도 캐싱목록에 넣어서 지정했다.이렇게 캐시스토리지네임을

컴포넌트 단위로 구현을 해보니 React의 클래스형 컴포넌트와 거의 흡사한 형태로 짜여지는거같다.기본 문법들이 조금씩 다른부분도 있지만 전체적인 데이터 흐름방식이나 단위단위로 쪼개서 구현하고 상위컴포넌트에서 구현하고 props를 내려주는 방식이 거의 일치한다.전체적으로

가장 많이 널리쓰이는 훅중에 하나로 잘 못 구현되었을때 가장 많이 문제를 일으키기도 하는 훅이다기본적인 useEffect의 형태로 뒤에 deps가 없이 실행할경우 렌더링될때마다 매번 실행이 된다.deps를 비워둔채로 선언을 하게 되면 컴포넌트가 처음 마운트 될때에만 실

위의 태그문법을 jsx라고 하며 javascript를 확장한 문법으로 보통 React와 함께 사용한다.위 처럼 JSX의 중괄호 안에는 유효한 모든 javascript 표현식을 넣을 수 있다. 위는 호출 결과인{list.word}를 span 엘리먼트에 포함 시킨것이다.그

동적 계획법이란 복잡한 문제를 간단한 여러 개의 문제로 나누어 푸는 방법을 말합니다. 이것은 부분 문제 반복과 최적 부분 구조를 가지고 있는 알고리즘을 일반적인 방법에 비해 더욱 적은 시간 내에 풀 때 사용한다.동적 계획법은 여러 개의 하위 문제를 풀고 그 결과를 기록

자료의 검색, 트리나 그래프를 탐색하는 방법, 한노드를 시작으로 인접한 다른노드를 재귀적으로 탐색해가고 끝까지 탐색하면 다시 위로 와서 다음을 탐색하여 검색하는 것.정렬된 데이터를 이분 탐색하는 것처럼 아주 효율적인 방법이 있는 반면에, 모든 경우의 수를 전부 탐색해야

프론트엔드의 관점에서 인증은 사용자의 로그인, 회원가입과 같이 사용자의 도입부분을 말합니다. 백엔드(서버)에서는 모든 API요청에 대해 사용자를 확인하는 작업입니다.사용자 A와 B가 서비스(앱)를 쓸 때 두 사용자는 정보 및 보유하고 있는 컨텐츠들이 다를 것입니다. 그

\-페이지 요청시마다 새로고침이 일어나며 서버에 새로운페이지에 대한 요청을 하는 방식이다. 예를 들자면 필요한 물건이 있을때마다 마트에 장을 보러 가는 것과 비슷하다. 그리고 페이지가 어떻게 보여지는지 또한 서버에서 해석하여 보내주는 방식이다.\*Rendering: 웹

부트스트랩은 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 javascript로 만들어 놓은 웹 디자인 프레임워크이다.위 사진처럼 부트스트랩은 글자, 인용문, 목록, 표, 버튼, 이미지, 아이콘, 드롭다운 메뉴, 등 웹페이지에서 사용하는 것들

html은 구역과 텍스트를 나타내는 코드로 크게 head와 body로 구성되고 head안에는 페이지의 속성정보, body안에는 페이지의 내용을 담는다.이와 같은 기본형태에 head와 body태그안에 여러가지 태그들(h1~h6, hr, button 등)을 이용해서 페이지