Atelier BiCute

헤로쿠(heroku)를 사용하다보면 매우 쉽게 만날 수 있는 H10 App Crashed의 다양한 오류 해결 방법 중 2가지에 관한 내용을 정리해 봅니다. #1 오류 메시지 확인 분명 local에서는 잘 작동하던 것들도 heroku에 업로드하면 위와 같이 어플리케이션 에러를 쉽게 만날 수 있는데, 위에서 알려주는 다음 명령어인 "heroku logs --tail"을 작업중인 터미널에서 입력하여 원인을 찾아봅니다. 날짜 어쩌구 저쩌구 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=sws-wiki.herokuapp.com request_id=4a1aba64-a4c0-4a1e-8bb4-231d3cc51bbb fwd="..

몇가지 간단한 코드만 입력해도 자동으로 완성해주는 플러그인 기능인 에밋(emmit)은 VS Code에서 추가적인 설정을 하지 않아도 자동으로 지원하고 있습니다. 이 글은 딱히 뭔가를 건든적이 없는거 같은데... 갑자기 에밋 기능이 작동하지 않을때 확인해 볼 수 있는 방법 중 하나입니다. #1. 설정으로 이동 VS Code에서 톱니모양 아이콘을 눌러 설정으로 이동합니다. 단축키 ctrl + , (맥은 command + ,) #2. Emmet: Trigger Expansion On Tab 검색창에 emmit을 입력하고 스크롤을 내려 Emmet: Trigger Expansion On Tab이라는 체크박스를 확인해 봅니다. 체크가 해제되어 있다면 체크를 해주게 되면 Emmit 기능이 활성화 됩니다.

글자가 랜덤으로 섞이면서 나타나는 텍스트 셔플 효과 라이브러리 입니다. 일반 JavaScript만 사용하여 가볍고 라이브러리의 종속성이 없는것이 장점입니다. 샘플 페이지 Demo > 사용방법 1. JS 파일 다운받기 아래 공식 GitHub 레파지로티로 이동하여 shuffle-text 파일을 다운받습니다. GitHub 레파지토리 > 2. JS 파일 연결 다운 받은 파일을 사용할 문서에서 연결해줍니다. 3. 원하는 부분을 선택하여 .start()명령을 통하여 작동할 수 있습니다. This is a ShuffleText.js Examle 4. 그 외 공식 문서에도 다 나와있는 내용이지만 text.duration = 시간(밀리초); 로 텍스트 변환 시간을, text.sourceRandomCharacter = "..

리액트에서 컴포넌트 형식으로 사용할 수 있는 둥글둥글한 스타일의 아이콘 세트입니다. MIT 라이선스로 배포되고 있기에 상업적으로도 사용 가능하며 리액트가 아니더라도 SVG와 PNG 형식으로도 사용할 수 있도록 배포하고 있습니다. Pebble Icons >

제작하는 웹사이트에 인스타그램의 사진들을 표기하기 위해선 인스타그램의 API를 사용하는 방법도 있지만, LightWidget을 사용하면 매우 간편하고 쉽게 구현할 수 있습니다. LightWidget을 사용하면 아래 이미지와 같이 하단에 가득차게 슬라이드 형식으로 배치한다거나, 사이드바 영역에 배치하거나, 특정 영역에 넣는 등 다양하게 구현 가능합니다. 또한 호버 효과나 눌렀을때 어떤 페이지가 연결될건지도 정할수 있죠. #1 LightWidget 회원가입 홈페이지로 이동한 후 오른쪽 상단의 'Sign up'을 클릭하여 회원 가입을 진행합니다. LightWidget 홈페이지로 이동 > #2 인스타그램 계정 연동 로그인을 한 후, 첫화면(Dashboard)에서 Connect account를 눌러 인스타 그램 ..

node.js를 이용하여 만든 개인 프로젝트를 웹상에 올리기위해서 heroku를 이용하는 방법에 대한 글을 남겨본다. *기본적인 사용법은 Github에 파일 올리는것과 거의 동일하다. #1 회원가입과 로그인 (1) 당연하게도 서비스를 이용하기 위해선 우선 www.heroku.com에 접속한 후 회원가입을 해야한다. (2) 로그인을 한 후, Create new app을 눌러 새로운 프로젝트를 생성한다. *Github에서 새로운 Repositories를 만드는것과 같다 App name은 소문자,숫자, 하이픈(-)만 사용 가능하며 언더바(_)같은건 사용할 수 없다. #2 업로드 하기 전 확인할 사항 몇가지 (1) nodemon을 사용하고 있다면... package.json을 확인하여 node로 변경해준다. ..

구글맵을 이용해 특정 지점을 검색하면 주소창의 가장 뒤쪽에 d35.8538161!4d128.5918331 같은 형식으로 나타나는 것을 이용해 위도와 경도를 확인할수도 있지만, 설정을 조금만 바꿔주면 매우 편리하게 확인할 수 있는 방법이 있습니다. 설정방법 (1) 구글맵 오른쪽 아래에 있는 설정되어 지역(대한민국)을 클릭합니다. (2) 지역 설정을 대한민국이 아닌 해외로 설정합니다. *여기서는 일단 가나로 설정하였습니다 설정은 여기까지만 하면 끝입니다. 위도, 경도 확인 방법 (1) 지도의 원하는 위치를 클릭하게되면 좌표가 찍히면서 아래쪽에 위도와 경도가 나타납니다. (2) 마우스 오른쪽 버튼을 클릭할 경우 메뉴에 바로 좌표가 나타나며, 해당 좌표를 클릭하면 내용이 클립보드에 복사가 되어 다른곳에 바로 붙..

#1 console.log에 스타일 적용하는 방법 스타일을 주고싶은 위치에 %c라는 코드를 입력해줍니다. 그런 다음문자 끝에 쉼표(,)를 찍어주며 스타일을 지정해주면 되는데 스타일을 주고싶은 위치의 개수(%c)만큼 ,를 이용해 순서대로 각각의 스타일을 지정해주면 됩니다. 사용 방식은 일반 CSS의 코드 작성과 동일합니다. #2 console.log에 스타일 해제하는 방법 스타일을 해제하거나 공백이 필요하다면 ""로 스타일을 제거해 주는것도 방법입니다. #3 console.log에 복수의 스타일 적용하는 방법 스타일은 당연히 문자에 관한것 뿐만 아니라 패딩, 백그라운드 등 다양한 것들이 가능합니다. 또한 하나의 스타일 뿐만이 아니라 복수의 스타일도 줄 수 있는데, 이것 또한 CSS를 작성하듯이 하나의 스타..

이 게시물은 2021.07.13 타 블로그에 작성된 내용의 백업본입니다. 자주 쓰는 문장 또는 간간히 사용은 하지만 매번 새로 적는 게 귀찮은 문장들은 텍스트 대치 기능을 이용하여 쉽고 편리하게 작성할 수 있습니다. #1. 텍스트 대치 설정하기 01. '설정 > 일반 > 키보드 > 텍스트 대치'로 이동합니다. 02. 오른쪽 위에 있는 '+'를 탭하여 추가하고 싶은 문구를 입력해 줍니다. ※ 단축키는 초성만 사용하거나 다양한 방식으로 지정 가능하며, 단축키에 지정된 단어를 입력하면 문구에 지정된 문장이 출력됩니다. 03. 문구 입력이 완료되었으면 오른쪽 위에 있는 저장을 누르면 완료입니다. #2. 텍스트 대치 사용하기 메모, 문자 등에서 단축어를 입력하면 첫번째 이미지처럼 아래에 해당 문구가 표시가 됩니다..

이 게시물은 2021.07.05 타 블로그에 작성된 내용의 백업본입니다. 시계 앱을 거치지 않고 제어 센터에서 타이머를 빠르게 설정할 수 있습니다. #1. 제어 센터에서 타이머 설정 01. 화면 오른쪽 위를 아래로 슬라이드 하여 제어 센터를 엽니다. 02. 타이머 아이콘을 길게 탭합니다. 03. 슬라이드로 시간을 설정한 후 '시작'을 탭 합니다 *개인적으로 타이머는 매우 자주 사용하는데, 시리에게 '타이머 *분'이라고 부탁하는 게 가장 편리했던 거 같습니다.