개발일지, 개인 또는 단체 포트폴리오 등
phpmyadmin에서 사용자 계정 생성하는 방법입니다. phpmyadmin의 홈페이지에서 (왼쪽 메뉴의 집 아이콘을 클릭하면 이동) 사용자 계정 탭을 클릭한 뒤, 빨간 네모박스의 사용자 추가 버튼을 클릭합니다. 사용자명 란에 아이디, 암호 및 재입력 란에 비밀번호를 입력합니다. 권한에서 사용할 권한을 체크한 후, 실행 버튼을 누르면 사용자가 생성됩니다.
JWT 란? JWT(JSON Web Token)는 공개 표준인 RFC7519로, JSON 객체 형태로 당사자 간 정보를 안전하게 전송하기 위한 소혀의 자체 포함 형식으로 정의됩니다. JWT는 두 당사자간에 전송할 클레임을 나타내는 URL에 안전(url-safe)한 압축 수단입니다. JWT의 클레임(claim; 페이로드의 한 조각)은 JWS(JSON Web Signature) 구조의 페이로드(payload; 정보) 또는 JWE(JSON Web Encryption) 구조의 JSON 개체로 더보기…
깃허브 프로젝트에 올린 웹 사이트를 인터넷에 올릴 방법이 없나 찾아보던 중 클릭 몇 번만으로 편리하게 깃허브 프로젝트를 인터넷상에서 배포할 수 있는 Netlify라는 서비스가 있어 사용방법을 소개하고자 합니다. Netlify 서비스의 장점 기본적으로 무료입니다. 깃허브 등 저장소 사이트와 계정 연동만 하면 클릭 몇 번만으로 각종 애플리케이션을 빌드 및 배포할 수 있습니다. 더보기…
현대음악가인 Steve Reich의 Clapping Music이라는 곡을 바탕으로 만들고 있는 리듬게임입니다. 원곡 동영상 데모 동영상 생각보다 배치가 어려워서 연습을 많이 해야할 것 같습니다. 데모 사이트 https://clapping-music.netlify.app/ 스페이스 바를 누르면 게임을 시작합니다. 왼쪽 키는 f, 오른쪽 키는 j를 눌러주세요. 크롬에서 실행하는 것을 권장합니다. 저장소 https://github.com/ayaysir/TypeScript-ClappingMusic/ 사용 기술 TypeScript 더보기…
URL 타입 인코딩되지 않은 주소를 URL의 형태로 관리합니다. let urlString = “https://itunes.apple.com/search?media=music&entity=musicVideo&term=collier” let url = URL(string: urlString) URL의 string:은 영문, 숫자와 특정 문자만 인식 가능하며, 한글, 띄어쓰기 등은 인식하지 못합니다. 아래 메소드를 통해 URL로부터 몇몇 정보를 가져올 수 있습니다. url?.absoluteString // 절대주소 (urlString과 동일) url?.scheme // http? htttps? url?.host // 더보기…
웹팩(Webpack)으로 타입스크립트 – HTML Loader 환경 설정 타입스크립트에서 아무런 준비 없이 mp3 를 import문 또는 require()를 써서 불러오려고 하면 Cannot filnd module ~ or its corresponding type declarations. 에러가 발생합니다. 이 에러를 방지하여 mp3 파일을 임포트할 수 있는 방법입니다. 1. 먼저 npm 프로젝트에서 file-loader 또는 url-loader가 설치되어 있어야 더보기…
Webpack으로 타입스크립트를 이용한 HTML 개발환경을 구축하는 방법은 다음과 같습니다. 일반 자바스크립트는 아래 글들을 참고하세요. Node.js: Webpack 설치하기 (Webpack 4 버전 기준) Node.js: Webpack 4 추가 설정 (CSS, HTML, dev-server) 빌드 및 배포 0. npm 프로젝트 생성 생성하고자 하는 디렉토리에서 터미널을 연 뒤 아래 명령어를 입력합니다. npm init -y 더보기…
깃허브에 문제가 생겨서 인증 에러(Authentication failed)가 발생한 경우 아래와 같은 방법으로 해결할 수 있습니다. (macOS 기준, 윈도우는 링크 참조) 1. Spotlight 검색창 또는 Launchpad > 기타 폴더에서 ‘키체인 접근’이라는 응용프로그램을 실행합니다. 2. 검색창에 git을 검색한 뒤 ‘인터넷 암호’ 종류의 github.com 항목을 삭제합니다. 3. 다시 push를 시도하면 아이디, 비밀번호 더보기…
버튼을 누르면 <textarea> 등의 요소 내에 있는 텍스트를 시스템의 클립보드로 복사하는 기능입니다. 먼저 아래 함수를 추가합니다. function copyToClipboard(text) { var t = document.createElement(“textarea”); document.body.appendChild(t); t.value = text; t.select(); document.execCommand(‘copy’); document.body.removeChild(t); alert(“복사되었습니다.”) } 다음 버튼을 클릭했을 경우 <textarea>의 내용을 가져온 다음 copyToClipboard(text)를 통해 함수를 실행하면 내용이 복사가 됩니다. var btnCopy 더보기…
https://glassmorphism.com/ 요즘 새롭게 부상할 디자인 트렌드로 글래스모피즘이 부상할 것이라는 이야기가 나오고 있습니다. 글래스모피즘 디자인은 표면이 반투명 유리 재질의 표면을 통해 배경이 흐릿하게 나오는 디자인 철학을 뜻합니다. 이미 macOS의 빅 서 (Big Sur)에서 전반적으로 새롭게 글래스모피즘 디자인이 적용된 것을 볼 수 있습니다. 이러한 디자인의 CSS를 직접 만들 수 있지만, 이런 스타일을 더보기…