개발일지, 개인 또는 단체 포트폴리오 등
웹팩(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를 직접 만들 수 있지만, 이런 스타일을 더보기…
타이머는 반복 작업 생성부터 지연 작업 예약까지 Swift에서 매우 편리하게 이용할 수 있습니다. 이 튜토리얼은 Swift에서 타이머를 만드는 방법을 설명합니다. Timer 클래스를 설명하기 이전에, NSTimer라고 알려진 클래스를 사용하여 타이머를 추가하는 방법에 대해 설명합니다. 반복 및 비반복 타이머, RunLoop 사용, 타이머 추적, 에너지 및 전력 영향을 줄이는 방법에 대해 알아 봅니다. 더보기…
컬렉션 뷰(Collection View)란 위의 그림에서 볼 수 있듯이 테이블처럼 일정한 가로 세로 개수를 가진 목록 오브젝트를 뜻합니다. 이 테이블 뷰를 생성하는 방법을 스위프트(Swift), 스토리보드(Storyboard) 기준으로 알아보겠습니다. 1) 컬렉션 뷰(Collection View) 오브젝트 추가 오른쪽 상단의 [+] 버튼을 클릭합니다. Collection View 오브젝트를 메인 뷰로 끌어와 추가합니다. 컬렉션 뷰를 양쪽으로 잡아당겨 화면에 꽉 채웁니다. 더보기…
저장소 https://github.com/ayaysir/saga-board-1 사용 기술 ReactJS React Hooks API Axios ES6+ JavaScript HTML CSS React-Redux Redux-Saga 주요 기능 외부 API를 통한 CRUD 기능 이미지 파일 전송 및 표시 기능 스크린샷
“제출(submit)” 버튼(button)과 “취소(cancel)” 앵커(a)가 있는 폼이 있습니다. HTML은 다음과 같습니다. <input type=”submit” value=”Submit” /> <a href=”some_url”>Cancel</a> 이 두 태그의 스타일이 똑같이 보이게 하려면 어떻게 해야 할까요? 간단하게 작성할 수 있는 최선의 방법은 다음과 같습니다. 위의 태그에 각각 클래스 likeabutton 을 추가한 뒤, 아래의 CSS 를 추가합니다. 경우에 따라 원하는 모양으로 커스터마이징 더보기…
iOS 프로그래밍: 테이블 뷰 (Swift, 스토리보드) 1 – 테이블 뷰 추가 커스텀 셀이란 Xcode에서 일반적으로 제공하는 테이블 셀이 아닌 사용자가 직접 새로운 형태의 셀을 만들어 테이블 뷰에 적용하는 것을 뜻합니다. 1) 커스텀 셀 오브젝트 배치 먼저, 메인 스토리보드에서 테이블 뷰의 셀 크기를 충분히 늘린 뒤, 이미지와 레이블 등을 더보기…