KodeVvon's World

Parcel dev서버로 작업 중 async await을 사용하자 문제가 발생했다 Uncaught ReferenceError: regeneratorRuntime is not defined 구글링의 결과, 최신(?) 문법인 async를 사용했기 때문에 등장한 문제인 것 같다. async를 사용한 파일에서 babel-polyfill을 import하라고 했으나.... 아마도 이것은 이전 해결방식이었나보다 Babel 7.4.0 이상을 사용하는 경우 위의 polyfill 방법은 해결되지 않는다..! 그래서 아래 방법으로 해결했다 npm install regenerator-runtime -D 1. 일단 npm으로 regenerator-runtime 설치 2. package.json에서(package-lock.jso..

브라우저 객체 모델(Browser Object Model) BOM은 웹 브라우저 전체를 객체로 관리하는 것을 말한다 자바스크립트로 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것(내장객체)을 의미한다 브라우저에서 자주 사용되는 내장 객체 Window 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체 Document 웹 문서에서 태그를 만날 때 만들어지는 객체. HTML 문서 정보를 가지고 있다 History 현재 창에서 사용자의 방문 기록을 저장하는 객체 Location 현재 페이지에 대한 URL정보를 가지고 있는 객체 Navigater 현재 사용 중인 웹 브라우저의 정보를 가지고 있는 객체 Screen 현재 사용 중인 화면 정보를 ..

JSON Web Token, JWT라고 불리는 이 녀석은 토큰처럼 사용할 수 있도록 JSON을 인코딩한 것을 말한다. 쉽게 말해 보안을 위한 웹기술 중 한 유형으로, 인증에 필요한 정보들을 암호화시킨 토큰기반 인증 시스템을 의미한다. 먼저 인증과 인가의 비슷하지만 다른 점을 짚고 넘어가보자. 인증(Authentication) 사용자의 신원을 검증하는 행위 신원을 확인하고 특정 서비스에 일정 권한이 주어진 사용자임을 인증 받는 것 프론트에서 서버에게 보내는 정보가 일치한다면, 서버는 사용자가 맞다고 판단해 액세스를 허용한다 자격 증명 확인 기능 사용자가 볼 수 있음 비밀번호, 생체인식, 일회용 핀 등의 방식으로 진행 ID토큰 사용 인가(Authorization) 한 번 인증을 받은 사용자가 이후 특정 리소..

https://material.io/resources/color/#!/?view.left=0&view.right=0 Color Tool - Material Design Create and share color palettes for your UI, and measure the accessibility of any color combination. material.io 선택된 색상과 자연스러운 색상들을 기본ui유형에 맞게 보여주는 사이트 색상값을 쉽게 알아낼 수 있어 유용하다!

간단하게 보는 HTTP통신의 구조 1. 브라우저(클라이언트)에서 HTTP 요청 2. 서버에서 특정 백엔드 로직 실행 3. 서버가 DB에서 정보를 요청 4. DB에서 정보를 서버로 받아옴 5. 서버에서 특정 백엔드 로직 실행 6. 받아온 정보를 보내주며 HTTP 응답

쿠키 ​ HTTP의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 일컫는다. 쿠키는 웹사이트 접속 시 접속자의 개인장치에 다운로드 되고 브라우저에 저장되는 작은 텍스트 파일이다. 웹사이트는 쿠키를 통해 접속자의 장치를 인식하고, 접속자의 설정과 과거 이용내역에 대한 일부 데이터를 저장한다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다. key = value형태를 가진다. 쿠키는 사용자 인증에 대한 정보를 모두 클라이언트가 가지게 되므로 http요청을 탈취당하면 사용자의 정보를 모두 빼앗길 수 있다. 때문에 장바구니, 자동로그인 설정등..

로렘 입숨 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된다. - 위키백과 ​ * vscode에서 에밋을 활용해 로렘 입숨을 쉽게 적용하는 방법 1. lorem입력 후 탭 2. lorem숫자 입력후 탭하면 설정한 개수에 맞춰 단어가 채워진다

https://codepen.io/pen/ Create a New Pen ... codepen.io 코드펜(CodePen)은 사용자가 만든 HTML, CSS, 자바스크립트 코드 조각을 테스트하고 시연하기 위한 온라인 커뮤니티이다. 온라인 코드 편집기이자 오픈 소스 학습 환경 기능을 하며 여기서 개발자들은 펜(pen)으로 불리는 코드 조각을 만든 다음 이를 테스트할 수 있다. 코드펜은 웹 디자이너와 개발자들이 자신들의 코딩 스킬을 시연하는 최대 커뮤니티 가운데 하나이며, 330,000명의 등록 사용자와 14,160,000명의 월간 방문자를 기록하였다. - 위키백과 ​ ​ 코드펜은 프론트엔드 개발에 특화되어있는 온라인 코드 편집기로, 많은 사람들이 html, css, javascript 코드를 작성하면 결과..

에밋(Emmet)은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 원래 젠코딩(Zen Coding)으로 부르다가 에밋(Emmet)으로 이름을 변경했다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 준다. -위키백과 ​ 개발자들은 에밋의 코드 자동완성 기능을 활용하면 코드의 작업 속도를 크게 향상시킬 수 있다. VS code는 기본적으로 에밋은 플러그인으로 제공하고, Tab키를 이용해 기본적인 코드조각을 바로 생성할 수 있다. 에밋은 MIT 라이센스를 따르는 오픈소스이다. // div#main //div.test // li*5 // (ul>li*2>a)+div Notepad++, 에디트플러스, Coda 등의 다양한 편집기 안에서 ..

내 현재 로컬 스토리지의 코드와 파일은 분명 다른데, 원격 저장소에서 같은 브랜치의 추가 파일/코드 등을 가져오려 할 때 Already up to date라고 뜨면서 적용도 안되고 가져오지도 않는 경우가 있다. 로컬내 특정 파일들이 수정되어 이를 삭제하고, 다시 원격에서 수정 전의 파일들을 가져오려고 하는 과정에서 적용이 안되고 있었다. 이럴 때에는.....우선 이 방법을 시행 전, 일단 로컬에 있는 코드들이 날아갈 수 있다는 것을 먼저 주의하자. 1. 최대한 안전성(?)을 위해 git fetch를 사용해 원격 저장소와 로컬 저장소의 내용을 확인하는 것이 좋다 $ git fetch 원격저장소-이름 로컬저장소-브랜치이름 //원격저장소로부터 로컬 저장소의 해당브랜치로 파일 가져오기 $ git fetch --..