클로저는 외부 변수를 기억하고 외부변수에 접근하는 함수를 말한다. 함수에 함수를 리턴하여 반환하게 되면 함수에 있는 변수는 반환되는 값에 영향을 주고 마치 함수밖에서도 반환된 함수한에서 전역변수인것처럼 보이게된다.f1()안에 f2()함수를 반환하는 함수이다. 반환된 f

웹 페이지 접속시, 클라이언트가 서버에 요청을 하게되면 view를 서버에서 랜더링해서 화면에 출력하는 전통적인 방식이다. 그렇기때문에 첫 로딩이 매우 빠르나 js파일을 받기전까지는 인터렉션에 반응하지 않게된다.검색엔진최적화(SEO) 가능한번에 서버에서 웹의 정보를 받기

비동기함수를 이용해서 코드를 실행하면 1초간격으로 delay함수가 실행된다. 그런데 비동기호출이 많아지게되면 코드도 길어지고 가독성도 떨어지기때문에 비동기를 한 함수에 묶어서 사용할 수 있다.위 처럼 한번의 호출에 여러번 비동기가 실행될 수 있다. 하지만 이것도 코드가

src/store 리덕스 폴더다.src/store/index.js 액션 함수들이 저장된 파일이다.src/store/cartReducer.js 리듀서파일들이 저장되어있는 폴더입니다.src/store/rootReducer.js 리듀서들을 합쳐주는 파일입니다.

리덕스를 사용하기 전엔 HOC에서 state를 관리하여 단방향으로 데이터를 넘겨줘야 했다. 이런 데이터 흐름은 불필요한 컴포넌트끼리 props로 데이터를 계속 넘겨받아야한다. 또, 넘겨받는 과정에서 props를 받는 컴포넌트도 렌더링이 되며 컴포넌트수가 많아질수록 불필

기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지 를 작성하고 응답으로 되돌려준다.◼️ GET request◼️ POST request for

각 인자마다 타입을 정해주며 ()뒤에 리턴받을 값에 타입을 정해준다.리턴받을 값이 없다면 void로 정해준다.함수에서 받을 인자의 갯수를 확신하지 못했을 때 옵셔널 파라미터를 쓴다.아래 함수에서 b?: number는 b라는 인자를 써도되고 안써도된다는 뜻으로 인자를 받

merge는 branch를 병합할 때 가장 많이 쓰인다. merge는 커밋시간의 흐름대로 커밋을 나열한다. 그래서 직관적으로 시간의 흐름따라 어떤내용이 수정되었는지 확인 할 수 있다. 하지만, 브랜치 갯수가 많아지고 커밋을 돌려놔야할 때 다른사람이 작업한 커밋까지 돌려

npm은 Node Packaged Manager의 약자로 node.js로 만들어진 모듈을 웹에서 받아 사용한다. 여기서 node.js는 자바스크립트를 브라우저 밖에서도 사용할수 있게하는 플랫폼이다. 자바스크립트는 브라우저 안에서만 사용하는하지만 node.js를 설치

asdasd

state객체의 productBasket에 값을 false를 준다(모달 off) ![](https://images.velog.io/images/ldaehi0205/post/a4d5cc3e-df1b-4133-96e6-daa927635d00/%E1%84%89%E1%85

웹에서 같은 모양의 ui나 페이지를 볼 수 있다. 이러한 반복되는 컴포넌트를 재사용하기 위해 리액트를 사용한다. 예를 들어 상품 상세페이지를 보더라도 각각의 상품에 대한 정보만 다를 뿐이지 페이지의 큰 들은 항상 똑같은 모습을 보인다. 각각의 상세페이지를 하나하나 구현

SPA는 앱의 규모가 커지면 자바스크립트 파일 사이즈가 너무 커진다. 유저가 실제로 방문하지않을 수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 떄문이다. 하지만 라우터의 경로에 특정 값을 넣어 해당 페이지로 이동할 수있게 할 수있고 이런 방법이 동적라우팅이

Lifecycle 기본 순서constructorrendercomponentDidMount(fetch 완료)render(setState)componentDidUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생)componentWillUnmountcompo

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. 배열의 0번째 인덱스부터 array.length-1까지 인덱스를 차례로 함수에 적용한다. 또한, filter는 원본 배열을 유지한다는 장점이 있다.filter 뒤에 요소

로그인 페이지에서 입력한 email password 를 서버에 전송할때 method를 post로 작성한다. 서버에서 설정한 객체의 keys를 body가 가르키고있는 객체의 key로 설정을 한다.로그인 페이지에서 입력받은 이메일과 비밀번호의 값을 body 객체의 값으

삼항 연산자를 이용해 코드를 간결하게 사용할 수 있다.DOM에 접근하여 createElement로 div태그를 만들고 원하는 태그이름이나 클래스이름을 정해준다. 버튼을 눌렀을 때 append를 이용해 리스트, 아이콘, 클래스이름을 추가하여 댓글이 추가되는 것처럼 보이게

컴포넌트 내부에서 화면에 보여줄 ui의 상태를 지니고 있는 객체이다. construct에서 정의하고 setState로 데이터를 변경할 수 있다.constructor에 state안에 객체를 만든다. key는 count이며 value는 0이다.render()를 통해 화면에

리액트는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리다. 리액트의 장점은 데이터가 최신화 될 때 전체 ui를 수정하는 것이 아니라 부분 ui만 데이터를 자동으로 업데이트하며 계산한다. Vue2014년에 Evan You가

컴포넌트는 독립적으로 재사용가능한 코드로 하나의 컴포넌트에 필요한 html,css,js를 합쳐서 만들 수 있다. 함수랑 비슷하게 Input을 받아서 return할 수 있다. React 컴포넌트에서 input을 props라고 한다.class로 컴포넌트를 만드려면 Reac