본문 바로가기

웹 지식19

[웹 브라우저 & 모바일] 모바일 기기에서 브라우저의 인풋이 focus 되었을 때, 가상키보드 안 생기게 하는 방법

두가지 방법이 있겠다. 2023. 2. 23.

[인프런 강의][Cookie] 사용자 인증이 필요한 api를 호출할 때, client와 server에 해줘야 하는 작업

개요 강의에서 커뮤니티(그룹)을 생성하는 기능을 구현하고 있다. 사용자 인증을 거쳐야 서버에서 클라이언트에서의 요청작업을 수행해줘야 한다. 클라이언트에서 서버로 요청할 때, Request Header에 Cookie를 넣어서 보내야 하는데, 서버랑 도메인이 다르다보니, cookie가 전송되지 않았다. 뿐만 아니라, 클라이언트에서 서버로 쿠키를 넘겨도, 서버에서는 받지 못하고 있었다. 이제 이 문제를 강의를 들으면서 해결한 방법을 소개한다. Client에서 cookie를 헤더에 넣어서 쏘는 방법은. axios 인스턴스에 withCrediential: true 옵션을 설정해주는 것이다. // src/api/core/index.ts import axios from "axios"; const request = a.. 2023. 1. 24.

[Javascript] 쿠키란?

쿠키 이름과 값은 항상 인코딩해야 합니다. 쿠키 하나의 최대 용량은 4KB이다. 사이트 하나당 20개 허용한다.(브라우저에 따라 다르다) 쿠키 옵션 설명 httpOnly 자바스크립트같은 클라이언트 측 스크립트가 쿠키를 사용할 수 없게 한다. document.cookie를 통해 쿠키를 볼 수도 없고 조작 못한다. secure HTTPS연결에만 쿠키 사용할 수 있다 samesite 요청이 외부사이트에서 일어나면, 브라우저가 쿠키를 보내지 못하게 막는다. XSRF 공격을 막는데 유용하다 관련 Javascript 라이브러리 https://www.npmjs.com/package/cookie cookie HTTP server cookie parsing and serialization. Latest version: .. 2023. 1. 14.

[Web] withCredentials는?

withCredentials 로그인 할 때, 아이디와 비밀번호가 서버로 넘어오면 유저의 정보가 맞는지 확인하고 cookie에 token을 발급한다. 그 후에도 다른 페이지에서 인증 할 때도 이 token으로 인증한다. 백엔드와 프론트 도메인이 다르면, 로그인 성공해도 별다른 에러 없이 인증되지 않는다. 그 이유는 도메인 주소가 서로 다르면, 쿠키가 전송되지 않기 때문이다. 프론트엔드와 백엔드에 withCredentials를 설정하지 않는다면, 어떻게 될까? 결론부터 말하면, 백엔드에서 Response Header에 set-cookie로 토큰이 넘어오긴하지만, 브라우저에 쿠키에는 저장되지 않는다. 로그인을 위해서 백엔드에서 jwt 토큰을 만들어서 클라이언트로 토큰을 전송했다. Response Header에.. 2023. 1. 14.

[WEB] 웹 바이탈이 비즈니스에 미치는 영향

https://web.dev/vitals-business-impact/ The business impact of Core Web Vitals This article will help you understand how Core Web Vitals correlate with key business metrics by exploring examples of companies which have already seen positive impact for their users and business. web.dev 위 글을 정리한 글입니다. 소요된 시간에 관계없이 의사 결정자는 이를 비즈니스 성장에 대한 장기적인 투자로 간주해야 한다. 빠르고 원활한 탐색 경험을 제공하면 사용자들를 즐겁게 하고 충성도가 높고 재방.. 2022. 10. 1.

참고 사이트

https://mdxjs.com/ Markdown for the component era | MDX MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. mdxjs.com https://github.com/react-syntax-highlighter/react-syntax-highlighter GitHub - react-syntax-highlighter/react-syntax-h.. 2022. 9. 29.

[HTML]selectbox placeholder

selectbox는 placeholder 옵션을 지원하지 않는다. selectbox의 options 태그의 속성으로 다음을 제공하고 있다. disabled - 클릭 안 됨 selected - 선택됨으로 값이 노출됨. hidden - 셀렉트 박스 옵션에 노출되지 않음. 선택 Youtube Naver Naver 2022. 5. 14.

Service worker란? 사용법

참고: 웹 앱에 푸시 알림 추가 service worker Javascript assets이다. web server와 web browser 사이에서 프록시처럼 동작한다. service worker의 목적은 offline access 제공을 위한 신뢰성을 높이기 위함이다. 앱과 유사하게 동작시키게 하기 위해서 점진적으로 웹사이트를 향상시킨다. 사용자 구독 브라우저 알림 동의 받기 app/index.html 에서 호출하는 javascript 파일( script/main.js )에 서비스 워커를 등록하는 스크립트를 작성합니다. script/main.js if ('serviceworker' in navigator && 'PushManager' in window) { console.log('Service Work.. 2022. 5. 6.

[크로스브라우징]safari에서 new Date()사용하면, utc로계산됨

* utc : 한국 시간보다 9시간 늦음. 크롬, 파이어폭스는 new Date('2022-04-22T03:34:22.000')을 생성하면, 다음처럼, 입력한대로의 시간을 객체로 가지게 된다. * 크롬 개발자 도구 콘솔 * 파이어폭스 개발자 도구 콘솔 * Edge 개발자 도구 콘솔 하지만,,, 사파리는 utc로 변환되서 객체로 변환된다. 사파리가 utc로 변환했고, 현재 내가 사용하는 사파리는 한국 시간을 표시할 거니까, +9시간이 더해진 시간으로 객체를 만들고 있던 것이다. 또 한가지 주의할 점이, 사파리에서 new Date('yyyy-m-dd')는 에러가 발생합니다. new Date('yyyy-mm-dd') 이렇게 작성해야 합니다. 해결 방법 // yyyy, m, d, h, m,s var y = new.. 2022. 4. 23.

[PWA]무엇? 왜 씀?

무엇? a Progressive Web App pwa는 웹 앱임. 사용자에게 앱 같은 경험을 줄 수 있음 https로만 통신할 수 있음 왜 씀? PWA를 만들기 위해 고려되어야 할 점 - 어떤 디바이스에서도 반응형이 되어야 한다. - 앱스토어 말고, 사용자의 홈 스크린에 저장할 수 있어야 한다. - Manifest file - 아이콘, 앱 이름, 앱 정보, 앱 스플래쉬 스크린을 설정할 수 있다. - Service Worker 2022. 4. 7.