자바스크립트 9

크롬 101버전 부터 유저에이전트 간소화

구글에서는 크롬 101 ~ 113버전에 걸쳐 복잡했던 유저에이전트 간소화를 간소화한다고 합니다. 이번 3월 말에 크롬 101버전이 출시됩니다. https://blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.html User-Agent Reduction Origin Trial and Dates Back in May, we published an update on our User-Agent string reduction plans with a promise to publish further details on timing. Now that ... blog.chromium.org Sec-CH-UA: "Chrome"; v="93" Se..

자바스크립트 2022.03.27

아이오닉 앵귤러를 써보면서 장점, 단점

.앵귤러를 쓰게 될줄은 꿈에도 몰랐습니다 사실 앵귤러는 전부터 꾸준히 점유율이 하락하고 있었고 신규로 쓰는곳이 있을까? 이런 생각이였거든요. 입사하고 보니 하이브리드앱이 앵귤러 JS와 앵귤러5 그리고 외주로 시작된 앵귤러10 이렇게 있네요 장점 - 앵귤러를 쓰기에 타입스크립트를 써야하고 아이오닉 프레임워크도 5버전은 비동기 컴포넌트위주로 되어있어 로딩이 개선되었습니다. 앵귤러의 RxJS 를 이용하여 스트림형태의 데이터를 구독하는 방식으로 쓸 수 있었습니다. - 리엑트에서는 RxJS는 리엑트의 생명주기랑 충돌되서 안맞다고 하더군요. 앵귤러의 주의사항은 AOT 컴파일을 하지않았을때 최적화 되지않아 속도가 상당히 느리다는 점이였습니다. AOT 컴파일을 하기위한 조건을 맞추려면 클래스 맴버변수를 public으로..

자바스크립트 2021.09.10

웹 Share API 적용하기

Q웹뷰를 수정하기 위해 파이어폭스 변경점을 보다가 웹 공유 API라는 것을 봤습니다. 모바일 웹 환경에서 공유버튼을 누를때 브라우저가 각 OS의 네이티브 공유 창을 호출하는 API입니다. 현재 지원하는 브라우저는 IOS용 사파리 12.2 안드로이드용 크롬 80 안드로이드용 파이어폭스 73 입니다. navigator.share({ title: 제목, text: '네이버', url: 'https://naver.com', }).then(() =>{ console.log('공유 성공') }).catch(() => { console.log('지원 되지 않는 api') }) 지원 되지 않을때는 undefined를 반환합니다. 아직까지 지원하지 않는 브라우저가 많기 때문에 기존에 웹환경에서 쓰이던 공유하기 라이브러리..

자바스크립트 2020.03.26

파이어폭스 74의 향상된 보안 CORP

흔히 웹개발할때 CORS경고를 본적 있을겁니다. 허용되지않은 웹사이트의 요청을 막거나 허락할 수 있죠 파이어폭스 74에서는 이와 비슷한 CORP를 기본값으로 되었습니다. Cross-Origin-Resource-Policy 로 이미지,스크립트 태그의 출처는 같은 도메인이여야 하고 외부에서 불러올경우 미리 지정해야 하기 때문에 브라우저 사용자의 보안이 향상됩니다. -

자바스크립트 2020.03.13

eslint 특정 대상 경고 끄기

저번에 만든 vue 게시판의 npm 패키지 의존성 업데이트를 하면서 lint 규칙을 표준으로 바꿨더니 eslint 가 .env 파일에 있는 VUE_APP_ 상수를 경고하기 시작했습니다. error: 'VUE_APP_BASE_URL' is not defined (no-undef) at src\components\member\SignUp.vue:82:14: 80 | this.axios({ 81 | methods: 'post', > 82 | url: VUE_APP_BASE_URL + '/member/sigunup' | ^ 83 | }) 84 | } 85 | }, 저 경고때문에 빌드가 안되는 상황.. eslint 공식문서를보면 globals : { 끄고싶은대상: false } parserOptions: { pa..

자바스크립트 2020.03.08

크롬 80부터 브라우저 쿠키 보안설정 변경된다고 합니다.

출처:https://okky.kr/article/670238 OKKY | 2020년 2월 브라우저 쿠키 정책 변경 준비 방법과 알려진 복잡성 교차 사이트 쿠키를 관리하는 경우 SameSite None; Secure 설정을 쿠키에 적용해야 합니다. 대부분의 개발자에게 구현이 간단해야 하겠지만, 다음과 같은 복잡성과 특별한 사례를 식별하기 위해 지금 테스트를 시작하도록 강력히 권합니다. 아직은 None 값을 지원하지 않는 언어와 라이브러리도 있 okky.kr 위 출처에서 구글에서 올라온 글을보면 https://developers-kr.googleblog.com/2020/01/developers-get-ready-for-new.html 개발자를 위한 새로운 SameSite=None; 보안 쿠키 설정에 대비하기..

자바스크립트 2020.01.15

자바스크립트 XML파싱

테마툴을 만드는데 안드로이드 레이아웃 XML 태그를 파싱을 하기위해 가져왔습니다. XML 스펙에는 네임스페이스가 있어서 태그나 속성에 네임스페이스를 지정할수있습니다. 네임스페이스는 다른 종류의 태그들이 같은이름을 사용할때 충돌하기 때문에 그룹을 따로 짓기위해 씁니다. DOMParser 객체를 생성하고 parseFromString(text,"text/xml") 형식을 정합니다. 를 보면 네임스페이스로 android를 쓰고 있습니다. 네임스페이스:속성이름 ="속성 값" 네임스페이스가 있는 속성은 getAttributeNS(네임스페이스URI,속성)로 값을 읽습니다.

자바스크립트 2019.12.19

Vue.js에서 axios 로 비동기 통신

#설치 Vue cli 에서는 vue add axios Vue cli로 시작한 프로젝트가 아니라면 터미널에서 npm으로 axios 를 설치합니다. axios는 비동기통신을 하기위한 라이브러리이며 return 값은프로미스 객체형태입니다. npm i axios package.json이 있는 프로젝트폴더에서 import axios from 'axios' Vue.prototype.$axios = axios main.js 에 axios 모듈을 Vue의 프로토타입에 등록해서 사용할 수있습니다. 글번호 제목 내용 {{article.boardNum}} {{article.title}} {{article.content}} template 을 이용하여 재사용 합시다. this.$axios 사용할 수있습니다. 서버에서 JSON..

자바스크립트 2019.08.07