React

React는 javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든 도구입니다.React를 사용하기 위해 OS에 Node.js 와 Yarn을 추가적으로 설치 했습니다.터미널을 이용해 폴더에 수업에 필요한 프로젝트를 설치했습니다.codecamp

React에서는 다른 폴더에 있는 파일을 불러올 수 있는데, 이는 HTML, CSS, JAVASCRIPT를 하나의 코드에 모든 내용을 코딩하면 복잡해져, 소스코드 파일을 각 각 따로 만들고, 필요에 따라 서로 불러와서 사용할 수 있습니다.

Git은 소스코드 저장을 도와주는 프로그램이다.만약 중요한 코드를 실수로 잘못 바꾼경우 다시 되돌리기도 가능하고 깃을 통해 협업을 할 수 있다,깃허브는 긱이라는 프로그램으로 저장한 파일들이 실제로 저장되는 장소이다.우리는 작성한 파일들을 Git을 사용하여 Github에

ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 를 사용한다.템플릿 리터럴은 ""와 다르게

HTTP란 두 컴퓨터간에 텍스트 데이터를 주고 받는 길 입니다.HTTP 라는 길로 요청과 응답 2가지를 서로 주고 받을 수 있습니다.서로 통신할때 두 곳 인터넷이 연결 되있어야 합니다.프론트에서 데이터를 HTTP를 통해서 백엔드 컴퓨터로 보내고 데이터를 DB에 저장 해

비동기 실행: 서버 컴푸터의 작업이 끝날 때까지 기다리지 않는 통신으로 여러 가지 요청을 동시에 처리해 줄 때 사용한다.동기 실행: 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신이다.자바스크립트는 default로 동기적 방식이다. ( 위에서 아

mutation 에 항상 성공하는 것은 아니다.여러가지 실패 가능성이 있는데 성공에 대한 처리, 실패에 대한 처리를 나누어 작업해야 한다.그럴때 try{ catch{ 를 사용하여 성공 여부를 판단하하여 실패 했을 때 메시지를 불러 받을 수 있다.

브라우저는 모두 다르지만 하나의 백앤드와 DB는 하나로 공유 하고 있다.등록해줘 요청$가 두개가 있는 이유 다른 API를 묶음 배송을 할 수 있기 때문에한 줄 씩 코드 실행뒤에 writer = state writer키와 value 가 같으면 생략가능 (shorthand

Conditional-rendering은 조건부 렌더링이라 한다.제일 처음은 삼한 연자라를 사용한다.// 조건 ? 조건이 참일때 렌더 : 조건이 거짓일때 렌더data ? data.fetchProfile : undefineddata는 동기적으로 받아와야 하는 데이터라 받

이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해가 쓰인다.인덱스를 이용해 배열에 접근하지 않고도 변수로 이름과 성을 사용할 수 있게 된다.

파일을 나누면서 container : 자바스크립트 영역 presenter : HTML ( JSX ) 영역기능을 연결시켜 주기 위해 props로 객체형식으로 던져줌키값은 변수이름이어서 아무거나 줘도 되지만 key와 value를 똑같이 씀presenter 에서 styl

기존배열은 건드리지 않으면서 요소들을 순회한 후 새로운 배열을 리턴한다.map은 콜백함수가 정용된 새요소, filter는 조건문을 만족한 요소들을 반환한다는 점이다.every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트한다. Boolean

타입스크립트는 자바스크립트에 타입을 부여한 언어이다.자바스크립트의 확장된 언어라고 볼 수 있는데, 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환 해주어야 한다.이 변환 과정을 컴퍼일이라고 부르다.타입스크립트는 2가지 관점에서 자바스크립트 코

Hooks? use로 시작하는 애들 -> useState, useEffect, ...useState? -> State 만들어 주는애state -> component 전용 변수const state, setState = useState("철수")state = 변수명set

setState를 쓰게 되면 비동기 방식으로 작동하기 때문에

state를 끌어올려서 부모컴포넌트에 state를 만들어주고 자식컴포넌트에서 setState를 올려 부모로 넘겨주게 되면 다른 자식컴포넌트에서도 state값이 변경되는 것을 확인할 수 있다.

refetch 를 onClick에 넣어주면 다시 실행된다.10번 입력을 해줘야하는걸 map을 통해 줄여준다.인덱스 사용하기안쓰는 값은 \_로 남긴다.page 수가 많아 졌을 때 자바스크립트 Array, fill()을 사용해 배열을 만들어 준다.기준 페이지 잡기 ( 모두

class란 객체이자 물건을 만드는 설명서라고 보면 된다.class 안에 함수와 변수를 넣을 수 있다.class { // class에서의 함수 작성 sayHi(){ console.log("안녕하세요") } // class에서의 변수 작성 sayHi =

class 컴포넌트에서는 이런식으로 라이프사이클이 있다.각각의 상황에 이런 함수를 실행시켜줘를 적용 할 수 있다.모두 함수이다 ()화면에 그려지고 그다음 포커스가 깜빡깜빡하게 만들 수 있다.처음에 render() 그리기 실행componentDidMount() 실행com

데이터베이스를 사용하지 않고 데이터를 입시적인 용도로 저장 할 때 사용한다.대부분의 데이터는 데이터베이스에 저장하고 해당하는 사용처에 따라 쿠키, 세션스토리지, 로컬스토리지를 적절히 사용해야한다.대부분 임시적인 용도의 데이터나 캐시, history 기능을 위해 사용한다

로그인 한 사람과 로그인을 하지 않은 사람들에 대한 권한을 분리시켜주어야 한다. 예시로 한 홈페이지에서 사장님 권한 사이트, 관리자 권한 사이트, 사용자 권한 사이트를 나눠줄 수 있다.이것을 통해 웹 서비스를 만든다느 것 보다 많은 서비스가 유기적으로 이루어 져 권한분

Closure 를 알려면 Scope라는 개념을 먼저 알아야한다.스코프(Scope) 는 영어 단어 자체는 '범위'라는 의미를 가진다.JS에서도 '범위'의 의미를 가지고 있다.스코프의 정의는 '식별자 접근 규칙에 따른 유효 범위' 이다.범위는 중괄호 또는 함수에 의해 나눠

useEffect를 이용하여 권한분기 설정해주기는 간단하게 적용할 수 있다.하지만 필요한 모든 페이지 마다 따라 붙여야 한다.그렇기 때문에 수정할 때 모두 다 바꿔줘야하는 어려움이 생긴다.그래서 로그인확인을 적용해주는 공통 컴포넌트를 만들고, 원하는 페이지가 실행되기

커링은 인자를 여러개 받는 함수를 분리하여, 인자를 하나씩만 받는 함수의 체인으로 만드는 방법이다.함수형 프로그래밍 기법 중 하나로 함수를 재사용하는데 유용하게 쓰일 수 있는 기법이다.자바스크립트 내부에는 커링이 내장되어 있지 않지만 자바스크립트로도 구현이 가능하다.이

함수가 자신을 다시 호출하는 구조로 만들어진 함수이다. 재귀함수는 종료조건이 있어야 하며, 종료조건을 설정해주지 않으면 무한 반복을 하게된다. 재귀함수로 작성이 되는 코드는 반복문으로도 작성할 수 있다.1부터 100의 합 구하기반복문여기서 사용된 for문 조건은 1부터

unflatten, flatten자바스크립트에서 unflatten은 다음과 같은 중첩된 배열을 의미한다.flatten은 다음과 같이 중첩이 없는 배열을 의미한다.혹은 중첩배열을 평탄화 하는 작업을 의미한다.flat 메서드는 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄

함수에 함수넣기 가능다른 함수에 인자로 들어가는 함수를 callback(콜백) 함수라고 부른다.로직 안에서 같이 실행 시켜주기 위해 사용한다.전에 async await 가 없을 때 비동기 작업을 동기 작업으로 실행 시키고 싶을 때 콜백 함수를 통해 해결 했다.

JWT - JSON Web Token 으로 토큰의 형태이다 . XSS - Cross site Scripting 으로 사용자의 정보(쿠키,세션)를 탈취하는 것이 목적인 공격 기법이다.CSRF- Cross Site Request Forgery 으로 사용자가 자신의 의지와는

Promise all 은 콜백지옥 현상을 막기위해 나온 것이다.promise를 이용한 라이브러리가 axios 이다.axios와 , .then을 이용해 순수 promise 객체 만으로 데이터를 요청 하는 경우가 있다.

Lazyload : 웹사이트를 키면 보여지는 부분이 있고 스크롤을 내리면 더 보여준다.이때 밑에있는 이미지를 다운받지 않고, 스크롤을 내릴 때 이미지를 받아 오게 하는 것이 lazyload이다.lazyload 예제PreLoad는 사용자가 페이지에 들어오면 사진을 미리

optimistic-UI 는 낙관적 UI라고 불린다.예를 들어 좋아요 버튼을 누를때원래 요청을 보내면 백엔드에서 DB로 가서 데이터를 받아와야하지만요청보내고 성공 하겠다 가정하고 바로 cashState를 바꿔서 업데이트를 한다.하지만, 막 사용하면 안된다. optimi

container 나 presenter로 페이지를 이동하고 싶으면이런식으로 쓰면 페이지 이동이 가능하다.render 시, 변수가 새로 만들어지는 상황함수가 새로 만들어지는 상황부모 리렌더시, 자식도 리렌더되는 상황을 막기위해 어떻게 해야하는지 알아보겠다.state는 페

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.리듀서 함수는 네 개의 인자를 가진다.누산기 (acc)현재 값 (cur)현재 인덱스 (idx)원본 배열 (src)리듀서 함수의 반환 값은 누산기에

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

SPA란 Single Page Applicaion으로 하나의 페이지로 구성된 애플리케이션을 말한다. 최근 웹 애플리케이션은 리액트, 앵귤러, 뷰와 같은 자바스크립트기반 프레임워크를 사용해서 SPA로 개발되고 있다.헤더는 고정되어 있고 헤더의 링크를 클릭하면 특정 영역만

CSR (Client Side Rendering)최초에 single Page만 서버로부터 불러와 렌더링하고 그 이후에는 모든 것을 클라이언트 사이드에서 렌더링하는 것이다.하지만 여러가지 문제점을 야기하는데 SEO(검색 엔진 최적화) 문제 가 있다. 구글 크롤러와 같은

HTTP는 Hyper Text Transfer Protocol의 줄임말으로써 서버와 클라이언트간에 데이터를 주고 받는 프로토콜이다.HTTP는 텍스트, 이미지,영상, JSON 등등 거의 모든 형태의 데이터를 전송할수 있다.세상에 등장한지 벌써 30년이나 된 HTTP는 1

반응형 웹(미디어 쿼리)사이트는 크게 반응형 사이트와 적응형 사이트로 나뉜다적응형 사이트ex. 네이버크기를 줄였을 때 사이즈가 같이 줄어들지 않는 것반응형 사이트ex. 배달의민족, 코드캠프크기에 따라 이미지도 같이 줄어드는 것요즘 트렌드는 반응형 사이트지만, 모든 부분

CI/CD는 애플리케이션 개발 단계를 자동화하여 애플리케이션을 보다 짧은 주기로 고객에게 제공하는 방법이다.CI/CD의 기본 개념은 지속적인 통합, 지속적인 서비스 제공, 지속적인 배포이다.CI/CD는 새로운 코드 통합으로 인해 개발 및 운영팀에 발생하는 문제(일명 "

기본 매개 변수 (Default Parameters)함수에 넘겨주는 인자값에 대한 default 처리를 위해 위와 같이 처리 했었다면 ES6에서는 아래와 같이 간단히 처리할 수 있다.템플릿 리터럴 (Template Literals)하지만 ES6에서는 템플릿 리터럴을 제

== 는 Equal Operator이고, === 는 Strict Equal Operator이다. == 는 a == b 라고 할때, a와 b의 값이 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.(값만 같으면 true이다.)===는 Strict, 즉

변수 선언 방식우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다.name이 이미 선언 되었다는 에러 메세지가 나온다. (const도 마찬가지)변수 재선언이 되지 않는다.그렇다면 let 과 const 의 차이점은 무엇일까?이 둘의 차이점은 immutable

쉽게말해JS는 브라우저, 문서 등을 다루는 client에 대한 개발을 하는 도구이다.nodejs는 backend 에서 server 개발을 하는 도구이다.자바스크립트는 브라우저에서만 사용이 가능하고nodejs는 브라우저 없이도 서버에서 실행이 가능하다.즉, Node.js

undefined는 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당된다.이 값은 전역 객체의 속성 중 하나로, 전역 스코프에서의 변수이기도 하다.따라서 undefined 변수의 초기값은 원시 값이다.undefined는 값을 할당하지 않았

고정된 저장 공간을 차지하는 데이터를 모두 원시 타입(primitive type) 데이터 라고 한다.원시 타입 데이터객체가 아니면서 method를 가지지 않는 6가지의 타입string, number, bigint, boolean, undefined, symbol, (n

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

데이터 자체를 통째로 복사한다.복사된 두 객체는 완전히 독립적인 메모리를 차지한다.value type의 객체들은 깊은 복사를 하게 된다.이때, arr1에 있는 모든 string들은 깊은 복사가 일어나서 새로운 배열을 생성하여 arr2에 할당한다. (String은 val

스코프현재 실행되는 컨텍스트를 말한다.여기서 컨텍스트는 값과 표현식이 "표현"되거나 참조 될 수 있음을 의미한다.만약 변수 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다.스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접

상태 코드는 3자리 숫자로 만들어져 있으며, 첫번째 자리는 1에서 5까지 제공된다.첫번째 자리가 4와 5인 경우는 정상적인 상황이 아니기 때문에 사이트 관리자가 즉시 알아야 하는 정보이다.1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다.2xx(성공) : 요

브라우저 렌더링 동작 과정렌더링의 기본적인 동작 과정은 다음과 같다.HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)두 Tree를 결합하여 Rendering Tree를 만든다. (Style)Rendering Tree에서 각 노드의 위치와

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념이다.이 과정을 재조정이라고 한다.“virtual DOM”은 특정 기술이라기보다는 패턴에

Immutable 객체는 내용이 변하지 않는 객체를 말한다. 객체는 다양한 이유로 불변적일 수 있는데, 예시로 아래와 같은 경우가 있다.성능을 향상시키기 위함객체가 미래에 변할 계획이 없을 때메모리 사용을 줄이기 위함전체 객체를 복사하지 않고 객체 참조를 만듦Threa

결론적으로는 Next.js는 React를 감싸고 있는 프레임워크라고 보면 된다. React의 기능들을 그대로 가지고 있으면서 Next.js에서만 구현할 수 있는 추가 기능들이 있어서 오히려 더 배운다고 보면된다.Nesxt.js는 라우팅을 할때 쉽게 하지만 React는

아토믹 디자인 패턴 아토믹 디자인은 사용자 인터페이스를 작고 단순한 요소로 분리하는 개념이며, 일관된 UI를 만들고 유지보수성을 향상시켜준다. 아토믹 디자인은 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이

제너릭 타입은 타입에 유연성을 제공하여 컴포넌트 등에서 재사용을 가능하게 해주는 타입이다.타입의 유연성이란 :string, :number 등과 같이 고정된 타입이 아닌 사용에 따라 여러 타입을 사용하게 해준다는 것이다.generic: 일반적인arg: string: 들어

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

Object Oriented Programming의 약자로써 class와 object에 기반한 프로그래밍 패러다임(디자인 패턴) 이다. 관련된 데이터끼리 묶어서 class를 형성하고 그 안에서 object instance를 만듬으로써 프로그램을 디자인한다.코드의 재사용

Callback Event Queue에서 하나씩 꺼내서 동작시키는 Loop를 말한다.자바스크립트는 싱글 스레드 기반 언어이기 때문에, 한번에 하나씩 작업을 진행한다.그러나 자바스크립트가 사용되는 환경을 생각해보면, 많은 작업이 동시에 처리되고 있는 것을 알 수 있다.예

RXJS (Reactive eXtensions For JavaScript) 는 리액티브 프로그래밍을 Javascript 에서 지원하기 위해 만들어진 라이브러리 입이다.리액티브 프로그래밍이란 이벤트나 배열 같은 데이터 스트림과 전파를 중심으로 하여 변화에 유연하게 반응하

Docker란 Go언어로 작성된 리눅스 컨테이너 기반으로하는 오픈소스 가상화 플랫폼이다.현재 Docker 0.9버전 부터는 직접 개발한 libcontainer 컨테이너를 사용하고 있다. 이제는 향상된 컴퓨터의 성능을 더욱 효율적으로 사용하기 위해 가상화 기술이 많이

V8은 Google Chrome과 Node.js에서 사용되고 있는 구글에서 제작한 자바스크립트 엔진이다.웹 브라우저 내부에서 자바스크립트의 속도 개선을 위해서 고안되었다. 자바스크립트 엔진은 웹 특성상 유저와 상호작용을 위해서 즉시성이 있는 인터프리터 방식을 사용하는데

this는 현재 실행되는 코드의 실행 컨텍스트를 가리킨다.this binding은 this에 실행 컨텍스트의 주체를 연결 짓는 것, 즉 this가 무엇을 가리킬지 연결하는 것this binding은 실행 컨텍스트가 활성화 될 때 한다.실행 컨텍스트는 이 컨텍스트를 지닌

함수에 함수넣기 가능다른 함수에 인자로 들어가는 함수를 callback(콜백) 함수라고 부른다.로직 안에서 같이 실행 시켜주기 위해 사용한다.전에 async await 가 없을 때 비동기 작업을 동기 작업으로 실행 시키고 싶을 때 콜백 함수를 통해 해결 했다.

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다..일반적인 유스케이스는 자식에게 명령적으로 접근하는 경우이다.useRef는 리렌더링 하지

useEffect 함수는 리액트 컴포넌트가 랜더링 될 때 마다 특정작업을 실행할 수 있도록 하는 Hook이다.useEffect는 컴포넌트가 mount 되었을 떄, unmount되었을 때, update 되었을 때, 특정 잡업을 처리할 수 있다.클래스형 컴포넌트에서 사용했

shallow routing은 data fetching 메서드(getServerSideProps, getStaticProps, getInitialProps)를 다시 사용하지 않고 URL을 변경하는 방식이다.state를 잃지 않으면서 pathname과 router객체(u

필요한 메서드 map.keys(), map.values(), map.entries()이 메서드들은 포괄적인 용도로 만들어졌기 때문에 메서드를 적용할 자료구조는 일련의 합의를 준수한다. 커스텀 자료구조를 대상으로 순회를 해야 한다면 이 메서드들을 쓰지 못하고 직접 메서드

onClickSearch에 있는 refetch를 onChangeSearch 에 refetch한다.하지만 네트워크 창을 보면 changeEvent가 될 때마다 fetch가 되어 많은 데이터가 들어간다.onChange가 모두 입력되고 1초정도 쉴 때 fetch를 해주면 효

context apicontext를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.일반적인 React 데이터는 위에서 아래로 즉 부모에서 자식으로 props를 통해 전달된다.하지만 여러 컴포넌트에게 전달해줘야한다면

정규표현식(正規表現式, Regular Expression)은 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 '검색'하거나 '치환'하는 과정을 매우 간편하게 처리 할 수 있도록 하는 수단이다.정규 표현식