1. && 으로 묶어줌으로써 스크립트를 한 번에 실행할 수 있지만, 오류가 발생하면 스크립트의 어느 부분이 실패했는지 확인하기 어려울 수 있다. 2. pre-, post- 로 시작하는 스크립트는 그 뒤에 오는 스크립트명과 일치하는 스크립트 실행 전에 실행, 로 시작하는 스크립트는 그 뒤에 오는 스크립트 명과 일치하는 스크립트 실행 후에 실행된다. 이렇게하면 각 스크립트의 기능이 더 명확해지고, 오류가 난 경우에 어떤 스크립트가 실패했는지 정확히 알 수 있으므로 오류를 디버그하기가 훨씬 쉽다. 하지만 여러 스크립트에서 각각 사용하는 경우 package.json이 지저분해질 수 있다. 간단하고 오류가 날 경우가 없고, 분리가 필요하지 않은 명령어의 경우에 , 명령어가 길어져서 명확하게 분리해야할 경우는 , 를 사용하는 형태로 나눠서 선택해 사용하면 될 것 같다. 출처 https://im-designloper.tistory.com/85 1. && 2. pre-, post-

네트워크탭 도구 🔴 빨간점은 기록되고 있다는 뜻. 기록되는 동안 주고 받는 모든 Network 요소를 보여준다. 클릭 시 기록을 멈출 수 있으며, 오른쪽 🚫를 클릭하면 기록된 모든 요소를 지운다. Preserve log: 페이지가 이동되어도 로그가 사라지지 않는다. Disable cache: 브라우저의 캐시를 비활성화 한다. No throttling: Fast 3G, Slow 3G, Offline 등 다양한 환경에서의 사용 경험을 테스트할 수 있도록 해주는 도구이다. 바로 옆 More network conditions… 에서 더 다양한 환경을 테스트 할 수 있다. Filter: 네트워크 소스를 타입별로 볼 수 있으며 대체로 Fetch/XHR이 주로 사용된다. ex) HTTP Method가 GET인 인터페이스만 Filtering 해보고 싶다면 method: GET 이라고 입력하면 된다. Filter 텍스트 박스에 입력할 수 있는 keyword: domain has-reponse-h…

Serialization Serialize, 직렬화라는 것은 어떤 데이터를 다른 곳에서 사용할 수 있게 다른 포맷의 데이터로 바꾸는 것을 의미한다. 조금 더 자세하게 말하면, 메모리를 디스크에 저장하거나 네트워크 통신에 사용하기 위한 형식으로 변환하는 것을 말한다. (전송/저장 가능한 데이터) 직렬화를 통해 데이터들을 파일 저장 혹은 데이터 통신에서 파싱 할 수 있는 유의미한 데이터로 만들기 위해 사용한다. Deserialization 반대로 역직렬화는 다른 포맷의 데이터로 바뀐 데이터를 원래 포맷으로 복구하는 것을 뜻한다. 즉 디스크에 저장한 데이터를 읽거나, 네트워크 통신으로 받은 데이터를 메모리에 쓸 수 있도록 다시 변환하는 것이다. Polyfill ‘충전솜’이라는 의미를 갖고 있다. 즉, 솜이 꺼졌을때 충전솜을 채워 메꾸는 역할을 한다. 웹개발에서는 브라우저에서 지원하지 않는 코드를 사용가능한 코드 조각이나 플러그인(추가기능)을 의미한다. 보통 바벨에서 ESNext에서 지원…

Fetch 📄 공식문서 JavaScript의 내장 라이브러리로 promise 기반으로 만들어졌다. Axios 📄 공식문서 네트워크 요청을 위해 라는 메서드를 제공하는 인터페이스이다. 따로 설치할 필요가 없으며 node.js 와 브라우저를 위한 HTTP 통신 라이브러리이다. 비동기로 HTTP 통신을 가능하게 해주며 return을 promise 객체로 해주기때문에 response 데이터를 다루기에도 쉽다. (HTTP 요청과 응답을 JSON 형태로 자동 변경) GET POST Fetch vs. Axios axios fetch 써드파티 라이브러리로 설치가 필요하다 현대 브라우저에 빌트인이라 설치 필요 없음 XSRF 보호를 해준다 별도 보호 없음 data 속성을 사용 body 속성을 사용 data는 object를 포함한다 body는 문자열화 되어있다 status가 200이고 statusText가 ‘OK’이면 성공이다 응답객체가 ok 속성을 포함하면 성공이다 자동으로 JSON 데이터 형식으…

1. Vanilla Redux 이와 같이 카운터 예제가 있을 때, 기존 JavaScript에서는 HTML에게 값이 바뀌었다고 알려주기 위해 함수를 실행시켜주어야 했다. 이를 Redux를 사용하면 값을 간단하게 바꾸어줄 수 있다. 사용법 1. store 생성 : 상태 데이터를 넣어둘 저장소인 store를 생성한다. store에서 사용할 수 있는 함수 4가지: , , , (*store methods 공식문서) : action을 store에 연결된 reducer 함수에게 전달해준다. : store 안에 있는 변화들을 알게 해준다. : store에 저장되어 있는 상태값을 가져온다. 2. reducer 작성 : 관리해줄 상태 데이터값을 변경해줄 reducer 함수를 작성한다. reducer 함수에서 return 하는 값은 곧 상태 데이터의 값이 된다. 3. reducer 함수에게 액션 전달 : store에서 dispatch하면 action을 store에 연결된 reducer 함수에게 전…