✅ 문제-해결 문제1. api get요청시 쿼리스트링 문자로 호출하면 에러나는 문제 처음엔 일단 통신이 잘 되는지만 확인해보려고 axios url에 파라미터를 쿼리스트링으로 직접 작성해줬다. 그런데 400 에러가 발생하였고, 이것 때문에 파라미터 값에 문제가 있는 줄 알아 애먹었다. 그러다 axios의 params로 파라미터를 담아줬더니 정상적으로 응답이 되었다. 결국 두 url 다 동일한 주소일텐데 왜 다른걸까 의문이다. → 두 url이 실제 api를 요청할 때 인코딩여부가 다른데 이게 영향이 있는 것 같다. params : 인코딩을 해준다. (axios 라이브러리에서 해주는듯) 쿼리스트링 : 인코딩 안해줌, 인코딩을 안하면 문제가 되는 문자열이 있어서 오류난 것 같음 (url주소에 backslash"..
분류 전체보기
6.4버전의 라우터를 쓰면 data Apis 기능을 사용할 수 있다. createBrowserRouter createMemoryRouter createHashRouter createStaticRouter 이 라우터는 data Apis 사용X 1. createBrowerRouter 모든 리액트 웹 프로젝트에서 권장되는 라우터임 History API를 사용해서 히스토리 스택을 관리할 수 있음 리액트 트리 외부에 라우터를 만들어야 됨 : component fetching and render fetchchains (https://remix.run/blog/remixing-react-router#component-fetching-and-render-fetch-chains) import React from 'rea..
공식문서 : https://styled-components.com/ vue styled-component: https://github.com/styled-components/vue-styled-components 1. 기본 사용법 - 컴포넌트를 생성하는 동시에 스타일을 정의할 수 있음 import styled from "styled-components" const Father = styled.div` display: flex; color: royalblue; ` function App() { return( 1 2 ) } 2. prop : styled-component 템플릿 리터럴의 함수에서 props를 받을 수 있다. import styled from "styled-components" const Fa..
이 셋 각각의 개념을 알고있다고 생각했는데, 또 모아놓고 생각해보니 뒤죽박죽이 되어버렸다. 이 꼴은 개념을 정확히는 모르고 있다는 말이겠지! 이번에 확실히 정리해보겠다. ✅ rest 파라미터 - 파라미터에 ...를 이용해서 받으면 나머지 인자를 받아 하나의 "배열"로 만들어 사용하게 됨. - ( "배열"이기 때문에 배열의 메소드 사용가능함.) - rest 파라미터는 항상 마지막에 있어야 함. function x(a, ...rest) { console.log(Array.isArray(rest)); // true console.log(a, rest); // 1, [2,3,4,5] } x(1, 2, 3, 4, 5); ✅ arguments - 함수를 호출할때 입력한 모든 인자가 담겨있음. - rest는 배열, ..
✅ Number.parseInt(string, radix) 1. 문자열을 radix에 해당하는 "진수로 읽어서" → 10진법인 숫자형으로 바꿈. 예제코드1 ) parseInt("10", 2); // 2 - 파라미터 "10"을 2진법으로 읽어서, 10진법으로 변환한 값을 리턴함. parseInt("0021", 3); // 7 - 파라미터 "0021"을 3진법으로 읽어서, 10진법으로 변환한 값을 리턴하였습니다. 예제코드2 ) function solution(idx) { return parseInt(idx, 10); } // 실행코드 console.log(solution('1234')); // 1234 (문자 "1234"를 10진법으로 읽어서, 10진법인 정수로 바꿈) console.log(solution(..
오늘 속도개선 결과물을 시연해보다가 내 컴퓨터에서는 잘 작동되는데, 다른 분이 테스트 할 때는 오류가 생기는 것을 발견했다. 그 이유는 내 환경은 네트워크 속도가 빨라서 api 응답이 빨리와서 문제가 없었지만, 다른 분의 컴퓨터에서는 api 응답 속도가 느려 api응답이 오기도 전에 데이터가 없는 채로 이미 먼저 렌더 되버렸기 때문이다. 이를 해결하기 위해 Network 패널의 Throttling 을 조절하며 네트워크 연결이 느릴 때를 재연하며 디버깅해나갔다. - Name : 다운로드 속도, 업로드 속도, RTT (라운드트립 시간) ※ RTT : 지연속도, (다운로드 요청하는 동안에 걸리는) 지연 시간인 것임. Fast 3G: 1.6mb/s, 750kb/s, 562.5ms Slow 3G: 500kb/s,..
History api란 : 브라우저의 세션 히스토리에 대한 접근, 조작 기능 기능을 제공하는 것 ✅ history.back() , history.forward(), history.go(step: integer) : 히스토리 스택을 조작할 수 있다. 1. history.back() : 방문 기록의 뒤로 이동하기. 사용자가 브라우저 도구 모음의 뒤로 가기 버튼을 누른 것과 같다. history.back() 2. history.forward() : 방문 기록의 앞으로 이동하기. 사용자가 브라우저 도구 모음의 앞으로 가기 버튼을 누른 것과 같다. history.forward() 3. history.go(step: integer) : 세션 기록에서 현재 페이지의 위치를 기준으로, 상대적인 거리에 위치한 특정 지점..
✅ router-link spa 구현 가능: 브라우저를 새로고침 하지 않고도 다른 페이지로 이동됨.: 주소 이동시 페이지 전체를 새로 로드하는게 아니라, 가상돔을 통해 바뀐 부분을 확인해서 그 부분만 서버로부터 받아와 리렌더링 하게 된다.사용: app 내부 페이지 간의 전환을 관리하는데 사용하는게 좋음구현 예제: 처음 렌더시에 html,css,js파일을 다 다운한 뒤 '/list' 페이지로 바뀌었을 땐 다른 부분만 새로 받아와 렌더해준다. ✅ a 태그spa 구현 불가: 주소가 이동되면 페이지 전체를 다시 불러와서 처음부터 다시 렌더링 해야한다.사용: 외부 URL로 이동시 사용하는게 좋음 구현 예제: 처음 렌더시에 html,css,js파일을 다 다운, '/test' 페이지로 바뀌었을 때도 아예 새로 ht..
✅ Mixin mixin을 사용하면 mixin의 모든 옵션이 → mixin을 사용하는 컴포넌트에 혼합됨 (mixin의 script에서 사용되는 모든 옵션 다 혼합됨! import, created...등등) mixin과 사용하는 컴포넌트에 중첩되는 옵션이 있으면 : 컴포넌트의 옵션이 우선하여 적용된다. mixin에 정의된 함수(Hooks)가 컴포넌트에 정의된 함수보다 먼저 호출된다. // MyMixin.js export default { created() { console.log("My mixin"); }, }; // Component.vue // 결과 : My mixin , component1 ✅ 전역 Mixin - mixin을 전역으로 사용할 수 있다. - 전역 mixin은 사용자 지정 옵션 처리에만!..
✅ 문제 center값이 바뀌면 자식 컴포넌트에서 이벤트 버스를 받아 로직을 처리해야 하는데 자식 컴포넌트에서 이벤트 버스가 받아지지 않았다. - Parent.vue watch{ center(){ this.$bus.$emit("eventBus") } } - Childrun.vue created: async function() { ... await this.method(); this.$bus.$on("eventBus", this.someMethod); ... }, ✅ 이유 : vue에서 이벤트 버스를 할 때 이벤트 바인딩을 늦게하기 때문에! await는 프로미스가 resolve 될 때 까진 그 뒤의 로직은 실행되지 않고 대기중이다. 때문에 Childrun 컴포넌트가 create 될 때 await 뒤에 ev..
