React, Next.js

기존Javascript로 웹페이지를 구현할때는 HTML, css, javascript를 나눠서 사용했었다.

export란? 내보내기 라는 것을 의미내보내고 싶은 함수나 변수 앞에 export를 선언해준다.export와 export default의 차이?default는 한 모듈당 하나만 사용할 수 있다.import : 앱에 코드 분할을 도입하는 가장 좋은 방법은 동적 imp

키와 밸류가 같으면 해당 밸류를 생략할 수 있는 장점네트워크에서 payload 보낸 데이터 / response 받은 데이터를 확인 할 수 있다. 라우팅 ? 페이지를 어떻게 이동 시킬 것인가. 이동을 하기 위해서는 사용해야 하는 Hooks가 있다라우팅 실습정적 라우팅동

조건부 렌더링 : React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다.애플리케이션의 상태에 따라서 컴포넌트 중 몇개 만을 렌더링 할 수 있다.if나 조건부 연산자와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는데 사용.그러면 R

container-presentationPresentational and Container Pattern 이란?데이터를 다루는 부분(Container)과 화면을 표현하는 부분(Presentational)으로 나눠서 개발하는 패턴유지보수와 재사용성을 고려하여 이렇게 개발

React state, props props 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터 부모 컴포넌트로부터 받는 데이터이므로 자식 컴포넌트에서는 변경할 수 없다. 이는 한 컴포넌트의 속성(Properties)과 같음을 의미 state 한 컴포넌트 안에서 유

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.필터는 원본의 갯수를 넘어갈 수 없다map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.기존 for 문ma

counter를 활용해서 알아보자클릭을 눌렀을 때 카운트가 올라가는 함수를 만들었다.한 번에 저 값들이 다 올라가기를 기대하지만 막상 나온 값은 1씩 올라간다.임시 공간에 setCount가 차례대로 올라가 있을 것이다. 그것을 하나씩만 꺼내온다.이를 해결하기 위해 우리

리액트는 부모가 자식한테만 state를 줄 수 있는데 형제 간에도 사용하고 싶다면 어떻게 해야할까?또 자식이 부모의 state를 변경하고 싶다면??종종 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 필요가 있다. 이럴 때는 가장 가까운 공통 조상으로 st

JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다.리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야

useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면,그것을 인지하고 업데이트 해주는 함수기본적인 몇 가지 조건에 의해 작동하게 된다.1\. 페이지가 처음 렌더링되고 난 후 useEffect는 무조건 한 번 실행된다2\. useEffect에 배열로

특정 작업이 특정 시간내에 작업되지 않으면 실행하는 방법 ex)검색2초동안 아무작업이 없으면 함수를 실행한다검색에 걸린 거 색 다르게 하기단어를 쪼개서 span tag에 넣어준다. (split)그런데 사용자는 replaceAll로 대체해준다.1\. 키워드라는 스테이트를

shallow routing은 getServerSideProps, getStaticSidePropsm getStaticProps, getInitialProps같은 데이터를 가져오는 메소드를 다시 동작시키지 않고도 URL 변경을 가능하게 해준다.업데이트된 pathname

Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환한다.Object.values() 메소드는 전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴합니다. 이 배

정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다.=> 정규 표현식 리터럴은 스크립트를 불러올 때 컴파일되므로, 바뀔 일이 없는 패턴의 경우 리터럴을 사용하면 성능이 향상될 수 있다.=> 생성자 함수를 사용하면 정규 표현식이 런타임에 컴파일

React에서 Props와 State는 부모 컴포넌트와 자식 컴포넌트 또는 한 컴포넌트 안에서 데이터를 다루기 위해 사용된다. 이 Props와 State를 사용하게 되면 부모 컴포넌트에서 자식 컴포넌트. 즉, 위에서 아래, 한쪽으로만 데이터를 줄 수 있다.만약 다른

하나의 웹사이트 서비스를 만들면 관리자를 위한 관리자 페이지사용자를 위한 사용자 페이지 혹은 다른 특별한 사용자가 있다면 그 사람을 위한 페이지가 존재할 것이다.이를 위해 권한을 부여하고 사이트를 나누는 것을 권한분기라고 한다.

HOC(Higher Order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다.구체적으로, 고차 컴포넌트는 컴포넌트를 가져와

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.함수 outerFunc 내에서 내부함수 innerFunc가 선언되고 호출되었다. 이때 내부함수 innerFunc는 자신을 포함하고 있는 외부함수 outerFunc의 변수 x에 접근할 수 있다. 이는 함수 innerF

재귀함수. 원래의 자리로 되돌아가거다 되돌아온다. 자기 자신을 부르는 함수.특정 분기까지 자기 자신을 계속해서 호출하는데, 주로 반복문을 구현할 때 사용한다.우리가 흔히 알고있는 반복문은 for, while등이 있는데, 이러한 반복문으로 구현 가능한 로직은 모두 재귀

우선, 가장 큰 이유는 HTTP의 특성때문입니다. HTTP는 연결 지향 프로토콜인 TCP 기반임에도 불구하고, 대표적인 비연결 지향 프로토콜입니다. 따라서 한 번의 요청-응답 사이클이 완료되면 연결을 종료하기 때문에, 동일한 클라이언트가 요청을 아무리 많이 하더라도 프

다중 배열 혹은 객체를 평탄화 시키는 것. 다중 깊이 수준을 지원하는 concat(),reduce 및 ECMAScript 6 Arrays.flat()메서드를 사용하여 JavaScript 배열을 평면화하는 방법이 있다. 혹은 lodash의 또한 ECMAScript 6을

reduce. 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행하는데, 콜백 함수는 다음의 네 인수를 받는다누산기 (acc) - accumulator현

promise는 시간이 걸리는 작업. 큐로 빠진다얼마나 걸렸는지 확인console.time(이름)console.timeEnd(이름)다음 하나가 끝날때 까지 기다려야한다. 이를 개선하기 위해 promise.all이 나왔다동시에 요청하는 기다리는 것은 한 번만.async

API를 호출하고 응답이 오기 전까지 기다렸다가 상태를 바꾸면 delay를 주는 느낌이 발생한다. 우선 상태값을 변경한 후 api 호출을 보낸다. api 호출이 실패할 경우 상태를 원복한다. 출처예를 들어 브라우저에서 좋아요를 누른다면백엔드에 가서 백엔드는 DB에 다녀

부모 자식이 연결된 컴포넌트를 만든다.index.tsx가 없이 container에 어떻게 접속할까http://localhost:3000/32-01-memoization/container のようにするbutton을 누르면 일반과 state로 count를 증가시키는

TypeScript는 JavaScript 기반의 언어JavaScript는 클라이언트 측 스크립팅 언어 TypeScript는 객체 지향 컴파일 언어객체 지향 프로그래밍 패러다임은 데이터 추상화에 중심객체와 클래스라는 두 주요 개념을 기반으로 함웹 개발에 주로 사용됨웹 페

Observable은 여러 값의 지연푸시 모음. 그들은 다음 표에서 누락된 자리를 채웁니다.예제. 위 예제는 구독(subscribe)됐을 때, 동기적으로 값 1,2,3을 즉시 넣고, 1초 뒤에 4를 넣고 끝내는 Observable다.Observable을 호출하고 값들을

도메인을 이해하기 전에 우선, ip에 대해 이해해야 한다인터넷에 연결되어 있는 장치(컴퓨터, 스마트폰, 타블릿, 서버 등등)들은 각각의 장치를 식별할 수 있는 주소를 가지고 있는데 이를 ip라고 한다.예) 115.68.24.88, 192.168.0.ip는 사람이 이해하

Single Page App한 개의 page로 구성된 application이다.mpa는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 된다. 매번 전체 페이지가 다시 렌더링 된다. 반면 spa는 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로

client side rendering서버에서 html을 받아와 적힌 js주소를 서버 요청해 동적으로 사용자에게 최종적인 어플리케이션을 보여준다.서버에 정보를 넘겨야 처음 보이는 화면을 나타낼 수 있기에 클라이언트에게 제공되는 서비스 시간이 오래 걸릴 수 있다.html

CSS @규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있다.@media를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있다.그런건 아님. 한 페이지에 정보가 엄청 많이 들어가면 적응형

호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지

요청을 받았으며 작업을 계속한다.이 상태의 상태 코드는 상태-라인과 선택적 헤더(컴퓨터에서 출력될 때 각 페이지 맨 윗부분에 자동으로 붙는 부분)만을 포함하는 임시의 응답을 나타내고 빈 라인에 의해서 종결된다. HTTP/1.0이래로 어떤 1XX 상태 코드들도 정의 되지

아래 이미지는 웹 브라우저가 서버로 요청을 보내고 응답 받아 화면을 그리는 일련의 과정으로 Backend Time, Frontend Time 으로 구분하여 웹 브라우저가 어떻게 화면을 표시하는지 보여주고 있습니다.Backend Time렌더링 준비 단계로 HTML 및 기

virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.이 접근방식이 React의 선언적 API를 가능하게

Mutable한 객체는 생성된 이후에 상태가 변경될 수 있는 객체이고, Immutable한 객체는 생성된 이후에 상태가 변경되지 않는 객체를 말한다. 자바스크립트에서 Object와 Array를 제외한 모든 타입은 Immutable한 타입이다.immutableString

router.push를 만들고 타입스크립트 혹은 자바스크립트 파일명을 그대로 써주면 그 페이지가 주소가 되는 재밌는 구조를 볼 수 있다.라우팅면에서는 확실히 next.js가 편하긴 하다. 하지만, 많은 스타트업에서는 React.js를 쓰고있기때문에 설령 next.js를

이 개발 방식은 사실 개발에만 적용되는 개념이 아니라 디자인에도 적용되는 설계 패턴이다.말 그래도 작은 단위의 컴포넌트를 재사용성이 강하고, 단단하게 잘 설계함으로서 점진적으로 지속적으로 개발하기 용이하게 하는 방식이다.웹 프론트 개발에 가장 많이 쓰이는 프레임워크인

SQL을 사용하면 RDBMS에서 데이터를 저장, 수정, 삭제 및 검색 할 수 있음관계형 데이터베이스에는 핵심적인 두 가지 특징이 있다.데이터는 정해진 데이터 스키마에 따라 테이블에 저장된다.데이터는 관계를 통해 여러 테이블에 분산된다.데이터는 테이블에 레코드로 저장되는

JavaScript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있으며, C 또는 Java 등 다른 언어가 가진 모델과는 상당히 다릅니다.함수의 호출들은 '프레임' 스택을 형성합니다.위 코드의 실행

V8은 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진이다. 구글 크롬 브라우저와 안드로이드 브라우저에 탑재되어 있다.V8로 줄여 불리기도 하며, 현재 라스 백이 책임 프로그래머이다.ECMAScript(ECMA - 262) 3rd Edition 규