axios로 params를 붙여 get요청한 url을 unity팀에 그대로 보내줘야 했다. api호출시 url의 쿼리스트링은 내가 직접 작성한게 아니라 axios라이브러리가 처리해주었고, 게다가 url안에 특수문자가 있어서 인코딩한 url을 보내야 하는게 어떻게 할지 고민이였다. 그 해결 방법은 URLSearchParams 1. 필요성 URL 쿼리스트링 문자열을 쉽게 만들수 있음. 쿼리스트링 형식의 URL에서 쉽게 키,값을 조회할 수 있음. (url에서 특수 문자나 공백을) 자동으로 인코딩해줌. 2. 쿼리스트링 url 만들기 ✅ 생성자 함수 new URLSearchParams : url에서 쿼리파라미터 관련 정보를 파싱한 인스턴스 객체를 리턴함 new URLSearchParams(); // URLSear..
분류 전체보기
vuelayers 라이브러리 사용도중 data가 변경되었지만 반응형으로 리렌더링 되지 않는 문제가 발생했다. 비슷한 로직이 다른곳에서는 잘 작동 됐는데, 한 곳에서만 작동되지 않아 분명 라이브러리의 문제라고 확신한다. (vuelayers 라이브러리에 대한 불만이 아주 많아진다... vue2에 멈춰있고 유지보수도 안된다 -_-) 방법1. key속성 컴포넌트에 key를 붙여 리렌더링이 필요한 시점에 key를 업데이트 하기 v-for에서 key를 붙이는 이유는 실제 dom tree와 가상 dom tree 간의 변화를 key값만을 활용해 빠르게 캐치하기 위해서다. 이런 특성을 이용해 key를 변화시켜 리렌더링 시키는 방법이다. (이게 강제 리렌더링 시키기 위한 베스트 방법이라 한다.) 방법2. vue 내장 메서..
✅ 문제-해결 문제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..
