타닥타닥 민타쿠

처음에 자바스크립트의 비동기적 특성 때문에 내가 원하는 순서대로 실행되지 않는다는 것을 깨달았을 때, 실행 순서는 보장 받고 싶지만 동기, 비동기, Promise, then, async, await 다 무슨 말인지 모르겠고 무서웠다. 아니면 콜백함수로 다 처리해버리면 된다는데 또 콜백지옥 얘기를 꺼내며 다들 안좋단다. 그래서 그 때의 나에게 해결책을 제시해주듯이 간단히 따라할 수 있도록 정리해보겠다. Play() 함수 안에서, showFirst() -> showSecond() -> showThird() 의 순서로 실행되기를 원하는데 showFirst() -> showThird() -> showSecond() 의 순서로 실행되고 있는 상황으로 가정한다. 해결책 1. async await 그냥 따라하기 as..

깃허브 저장소에는 용량 제한이 없지만, 파일 하나당 100메가의 제한이 있다. 따라서, 파일이 50메가만 넘어가도 warning 메시지가 뜨고, 100메가가 넘어가는 파일을 push 하려는 경우에 다음과 같은 에러 메시지가 나온다. remote: Resolving deltas: 100% (3/3), completed with 3 local objects. remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com. remote: error: Trace: 51efcb860cd7c76aa349c5f931ebc96bedfc30763349d284be7278a271f..

온라인 사진 에디터 온라인 사진 에디터 - Pixlr.com 무료 & 프리미엄 온라인 사진 에디터를 만나보세요. 효과, 필터, 오버레이, 간단한 기능부터 고급형 기능까지 모두 담았어요. 대부분의 파일 형식 (PSD, PXD, JPeg, PNG - 투명, webP, SVG 등)을 지원해요. pixlr.com 종종 이미지 편집을 간단히 하고 싶을 때, 유용한 웹 사이트이다. 메인 화면에서 PIXLR E 버튼과 PIXLR X 버튼을 볼 수 있는데, 둘 다 무료이다. 다만 E 는 포토샵처럼 기능이 많은 버전이고 X 는 기능이 적고 빠르고 쉽게 초심자가 작업할 수 있는 버전이라 한다. 두 버전 간의 이동은 자유롭다. E 에서 작업하던 것을 X 에서 작업할 수 있고 그 반대 또한 가능하다. 히스토리, 최근 작업 파..

마우스 커서를 가져가면 파일 선택 버튼이 보이고, 이미지 파일을 선택하면 해당 이미지를 화면에 보여주는 미리보기 기능을 구현하는 방법에 대해 알아보겠다. HTML 레이아웃 id 기준으로, - imgBox : 마우스 오버를 감지할 곳이다. - imgTag : 이미지 미리보기를 나타낼 곳이다. - inputImg : 파일을 입력 받을 input 태그이다. jpg, png 형식만 accept 로 지정해 해당 확장명의 파일 선택을 유도한다. onchange 시 파라미터로 this 를 넘겨주며 loadFile 함수를 실행한다. 마우스 오버 감지 $('#imgBox').on('mouseover', function() { $('#inputImg').show(); }); $('#imgBox').on('mouseout'..

이전 버전 보고 돌아오기 이전 커밋의 소스를 확인하고 싶을 경우, 두 가지 방법이 있다. 커밋 메시지 보고 특정 커밋으로 되돌리기 git log - 명령 입력 후, 위 아래 방향키로 원하는 버전 커밋 찾기 - 'commit' 문구 뒤의 해시코드 앞에서 4자리 이상 복사 git checkout 복사한 4자리 이상 해시코드 - 현재 소스가 해당 버전으로 돌아간다. git checkout 브랜치 이름 - 되돌아오기(해당 브랜치의 최신 커밋으로 돌리기) 단계별로 되돌아가기 git checkout head~1 - 최신 커밋으로부터 한단계 전으로 되돌린다. - 1에 해당하는 부분을 바꿔서 원하는 단계만큼 지정할 수 있다. git checkout 브랜치 이름 - 되돌아오기(해당 브랜치의 최신 커밋으로 돌리기) 이전 ..

Nodejs 환경 기준으로 작성하지만, 혹여 다른 환경일지라도 아마존 코그니토 사용자 풀을 처음 써보려는 사람에게는 이 글이 분명 도움될 것이라 생각한다. 처음부터 끝까지 세세한 설명보다는, 길어보이지만 짧은 이 글을 읽고 나면 스스로 코그니토 API 를 찾고 사용하여 개발할 수 있게끔 설명하는 것이 목적이다. 생각보다 자세하거나 쉽게 설명한 글이 보이지 않아서 직접 알아보고 시행 착오를 겪으며 시작이 오래 걸렸지만, 이 글을 읽는 누군가는 금방 시작할 수 있다거나, 한줄기 희망으로 느껴졌으면 한다. 참고로 sns 연동은 다루지 않았다. 추후에 이를 다룬 포스팅을 업로드할 생각은 있다. 기본 사용 환경 구축 AWS Cognito user pools(사용자 풀) 생성 - 링크 참조 : (코그니토 사용자 풀..

본 글에서는 깃, 그리고 깃허브 입문자가 버전 관리, 단순 협업을 할 수 있도록 하기 위해 최대한 당장 필요한 것만 설명할 예정이다. 1. Git & GitHub 깃과 깃허브가 있다. 깃은 분산형 버전 관리 시스템이고, 깃허브는 이를 사용하는 프로젝트를 지원하는 웹호스팅 서비스이다. 쉽게 말해 백업과 협업을 위한 클라우드라고 보면 된다. 2. 작업환경 세팅 깃허브 회원가입(깃허브 홈페이지) 깃 다운로드 및 설치(깃 다운로드 페이지) cmd(terminal) 창에서 커맨드 입력 git config --global user.email "내 이메일" git config --global user.name "내 이름" 깃허브 로그인 요구시 로그인하기 (윈도우는 최초 1번, 맥과 리눅스는 설정 필요) (윈도우 기준..

JSON 비교 사이트 JSON Diff - The semantic JSON compare tool jsondiff.com JSON 끼리 비교해야할 경우가 있는데, 그럴 때 유용한 사이트이다. 왼쪽에 복사 붙여넣기, 오른쪽에도 복붙. 마지막으로 [Compare] 버튼만 누르면 끝! 물론 영어, 한글 등 다양한 언어를 지원한다. 굉장히 유용하다!

텍스트 비교 사이트 Text Compare! - An online diff tool that can find the difference between two text files text-compare.com 단순 텍스트를 비교해야할 경우가 종종 있는데, 그럴 때 유용한 사이트이다. 왼쪽에 복사 붙여넣기, 오른쪽에도 복붙. 마지막으로 [Compare!] 버튼만 누르면 끝! 영어, 한글 등 다양한 외국어도 물론 지원한다.

두괄식으로 말해서, 1. movePage 함수 선언 function movePage(navigator) { var pageUrl = $(navigator).attr("url"); if (pageUrl !== location.pathname) { history.pushState({ path: pageUrl }, null, pageUrl); var popStateEvent = new PopStateEvent('popstate', { state: null }); dispatchEvent(popStateEvent); // event 발생시키기 } } 이동하려는 url 정보를 받아 path 라는 이름으로 history.state 에 저장하고, popstate 이벤트를 발생시킨다. 2. onclick 에 moveP..