본문 바로가기

웹 지식19

[Quasar] 무엇이고, 왜 쓰는걸까?

무엇? Quasar = Vuetify + Webpack + PWA 왜 씀? Quasar CLI로 모바일 앱 또는 PWA로 앱을 배포할 수 있음 2022. 4. 7.

프레임워크와 라이브러리의 차이점

프레임워크 내 코드를 프레임워크가 호출함. 프레임워크가 정해주는 부분에 코드를 작성해야 함. Next.JS를 예로 들면, /Pages 디렉토리 하위의 jsx들을 각 라우터의 페이지로 인식한다. /Pages/_app.js를 최상위 컴포넌트로 인식한다. 라이브러리 개발자가 라이브러리 코드를 호출해서 사용함. 2022. 1. 19.

[웹 렌더링 개념-2] webkit 렌더링 엔진 작업 순서-브라우저에 화면이 그려지는 과정 ✏️

개요 이번 6월에 회사에서 제가 속한 팀을 대상으로 Vue 라이프 사이클에 대한 기술 공유를 제가 맡게 되었었는데요. 단순히, 라이프 사이클에 대한 개념과 사용 방법 공유보다는 라이프 사이클이 어떻게 렌더링으로 작용하는지를 공유하고 싶었습니다. 그 이유는 저와 팀 원들에게 원리와 동작을 충분히 이해하고 프로그래밍을 하자는 메시지를 던지기 위해서였습니다. 공유를 준비하면서 공부한 내용을 총 3개의 시리즈 포스팅으로 작성해봤습니다. [웹 렌더링 개념-1] DOM 이해하기✏️ 👉 [웹 렌더링 개념-2] webkit 렌더링 엔진 작업 순서- 브라우저에 화면이 그려지는 과정✏️ [Vue] Vue의 라이프 사이클과 연관 지어 알아보는 렌더링 원리✏️ 이번 내용은 브라우저의 렌더링 순서와 원리입니다. 신입 개발자 면.. 2021. 6. 27.

[웹 렌더링 개념-1] DOM 이해하기 ✏️

개요 이번 6월에 회사에서 제가 속한 팀을 대상으로 Vue 라이프 사이클에 대한 기술 공유를 제가 맡게 되었었는데요. 단순히, 라이프 사이클에 대한 개념과 사용 방법 공유보다는 라이프 사이클이 어떻게 렌더링으로 작용하는지를 공유하고 싶었습니다. 그 이유는 저와 팀 원들에게 원리와 동작을 충분히 이해하고 프로그래밍을 하자는 메시지를 던지기 위해서였습니다. 공유를 준비하면서 공부한 내용을 총 3개의 시리즈 포스팅으로 작성해봤습니다. 👉 [웹 렌더링 개념-1] DOM 이해하기✏️ [웹 렌더링 개념-2] webkit 렌더링 엔진 작업 순서- 브라우저에 화면이 그려지는 과정✏️ [Vue] Vue의 라이프 사이클과 연관 지어 알아보는 렌더링 원리✏️ 그럼 순서대로 DOM의 개념을 불태워 보겠습니다. 🔥 - DOM .. 2021. 6. 21.

OAuth 기초 공부하기

User - My Service - Big Service(google, facebook, kakao, naver) 사용자들은 자신의 흔적(id, pw)이 어딘가에 저장되어 있는 것을 좋아하지 않습니다. 사용자가 서비스의 사용을 주저하게 됩니다. 하지만, 서비스들은 개인화된 서비스를 제공하기 위해서 사용자의 인증이 필요합니다. 그렇지만, 서비스들도 사용자의 정보를 저장하고 있으면서 관리하기를 원하지 않습니다. 또, Big Service에서도 자신의 유저 정보를 My Service들이 저장하는 것을 원하지 않습니다. 이런 상황 때문에 OAuth가 사용됩니다. OAuth id와 password 대신에 accessToken을 Big Service는 My Service에게 발급합니다. 이게 OAuth입니다. OA.. 2021. 6. 5.

html 체크박스 색을 수정하는 것은 가능할까?

안녕하세요. 이번에 회사에서 웹 화면을 만들면서, UI/UX 디자인에 체크바스 색이 다른 것을 사용하고 있었습니다. 단순 html에서 를 사용하게 되면, 아래 그림처럼 체크를 하게되면, 파란색으로 체크가 됩니다. 그럼, UI/UX 디자인 요구사항대로, 이 파란색을 회색이나 빨간색으로 HTML과 CSS 만으로 수정할 수 있을까요? 정답은 .. 안됩니다. css의 background-color나 color를 적용해도 색상은 변경되지 않습니다. 그럼, 어떻게 바꿀 수 있을까요? 두 가지 방법을 소개드리는데, 저는 두 번째 방법을 사용했습니다. 첫 번째 방법은 vuetify의 를 사용해서 체크박스의 색을 변경하는 겁니다. 두 번째 방법은 vue를 사용하지 않고 javascript로 이를 처리하려면, 버튼을 이용.. 2021. 2. 1.

[CORS] 가장 먼저 직면하는 문제. 개념 알고 해결하기

CORS (CROSS-ORIGIN-RESOURCE-SHARE) 보안을 위해서 아무 클라이언트 가서버로 XRH 요청을 할 수 없게 하기 위한 것입니다. 클라이언트는 서버와 같은 도메인을 사용하거나 서버에서 설정한 도메인으로 요청을 하지 않으면 데이터를 받을 수 없습니다. 서버에서 요청을 거절하기 때문입니다. 서버에서 응답을 승인할 도메인을 지정하고 클라이언트 쪽에서 승인받을 수 있는 URL로 요청을 보내야지 데이터를 성공적으로 받을 수 있습니다. CORS 에러 문제 해결하기 1. express 서버에 CORS 허용 URL 설정하기 cors 노드 패키지를 설치합니다. npm i cors //app.js const exrpess = require('express'); const cors = require('c.. 2020. 12. 3.

401에러 해결 방법

다음과 같이 401 에러가 발생할 때가 있습니다. 저는 웹 애플리케이션에서 데이터를 요청할때 사용하는 api를 애플리케이션의 요청이 아닌 로컬에서 그냥 부라우저에 url로 요청을 해봤을 때, 401에러를 운명처럼 만나게 되었습니다. 401에러가 정확히 뭔지 알아보기 위해서 401에러를 검색해 봤습니다. 출처 : MDN 해결하는 방법은 요청 헤더에 Authentication을 키로하고, api에서 인증을 요구하는 value값을 함께 넣어서 요청을 보내보면, 상태코드 200의 응답을 정상적으로 받을 수 있습니다. 저는 url요청을 날릴 때, 브라우저로 하지 않고, postman으로 사용해서 간편하게 header에 키와 값을 넣어서 요청을 시도해 볼 수 있었습니다. 감사합니다.. 2020. 12. 3.

CDN이란

HTTP 기초 CDN이란 CDN(Contents Delivery Network) 컨텐츠 전송 네트워크를 뜻합니다. 느린 응답속도/ 다운로딩 타임을 극복하기 위한 기술 지리, 물리적으로 떨어져있는 사용자에게 컨텐츠를 더 빠르게 제공할 수 있는 기술 사용량이 급격히 늘어나서 인터넷 상에서 콘텐츠를 다운로드를 받을 때 콘텐츠 병목 현상이 일어나거나 서버가 다운될 수 있기 때문에, 이럴 때를 대비해서 CDN을 사용함. 보통은 원할한 서비스 운영을 위해서 사용됩니다. CDN을 이해하기 앞서서 어느 업체의 CDN이 유명할까요? 당연히 글로벌 솔루션의 최강자 아마존 웹 서비스이겠지요? 그래서 검색을 해보니, CloudFront라고 aws 서비스가 있더군요. 개발자탕구리 탕탕구리 님의 글을 참고해보세요. [AWS 파헤.. 2020. 11. 29.

티스토리툴바