반응형
remote: support for password authentication was removed on august 13, 2021. please use a personal access token instead. remote: please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information. fatal: unable to access 'https://github.com/저장소 상세 경로/': the requested url returned error: 403

 

"비밀번호 인증 지원은 2021년 8월 13일에 제거되었습니다. 개인 액세스 토큰을 사용하세요."

 

프로젝트를 진행하면서, Push를 하려고 하는데, 위와 같은 에러 메시지가 발생했습니다.

당황하지 않고 에러 메시지가 시키는 대로 토큰 방식 인증하여 위의 에러 문제를 해결했습니다.

8월 13일 이후로 token or ssh 두 가지 중 하나로 인증을 해야 Github를 사용 가능합니다.

 

 

 

 

 

해결방법 - token 발급방법


 

 

1. Github 로그인 후 상단 개인설정 클릭 → Setting 클릭

 

 

2. 좌측 메뉴 하단에  Developer settings 클릭 Personal access tokens 클릭

 

 

3. 본문 우측 상단  Generate new token 버튼 클릭 후 token 허용범위 설정하여 토큰 생성 완료합니다.

token 명 작성, 범위는 기본적으로 repo만 선택해도 되지만, 글 작성자는 모두 선택했습니다.

 

 

 

 

★ 생성된 토큰 값은 잘 복사해서 잘 관리해야 합니다.

이유는 다시 토큰 값을 볼 수 없기 때문입니다.

 

 


 

 

해결방법 - git 저장소에 token 등록(소스트리)


 

 

저장소 메뉴 클릭 → 저장소 설정 메뉴 클릭 → 편집 버튼 클릭 발급받은 토큰 코드@ 추가

 

URL / 경로 : https://발급받은 토큰 코드@github.com/저장소 상세 경로.git

 

 

 

마치며 


 

저장소에 토큰 등록을 하고 나면,  push 진행 시 에러가 발생하지 않는 것을 확인할 수 있습니다.

검색을 해보면, 여러 가지 해결책들이 있었지만, 위와 같이 해결하는 것이 가장 간단하고 쉬운 것 같았습니다.

웹퍼블리싱 Workflow에 도움이 되었으면 합니다.  

 

반응형
반응형
'맑은커뮤니케이션 마크업' 개발팀에서는 iOS 10의 첫 번째 베타 버전이 출시되었을 때 일부 웹 퍼블리셔들은 viewport 메타태그의 user-scalable=no 가 사이트에서 작동 않는다는 사실을 발견하기까지는 오래 걸리지 않았습니다.
곧 Stack Overflow에서 이슈화 되기 시작했고, 이미 일부 퍼블리셔들은 JS 플러그인을 사용하여 이 문제를 해결하였습니다.
그러나 iOS 10의 첫 번째 베타 릴리스 노트에서 알 수 있듯이 버그가 아니며, Apple은 실제로 user-scalable=no 를 의도적으로 사용 중지했습니다.
user-scalable=no의 기능을 중지한 이유는 휴대 전화의 가장 분명하고 유용한 제스처 중 하나 인 핀치 투 줌(pinch-to-zoom)을 자유롭게 사용할 수 있게 함으로서
시각 장애가 있는 사용자에게 웹의 접근성을 확보 할 수 있는 희망적인 이유이기 때문이다.

iOS 10 릴리즈 노트

Safari의 웹 사이트에 대한 접근성을 향상시키기 위해 웹 사이트에서 뷰어에 user-scalable=no 를 설정 한 경우에도 사용자가 손가락으로 확대/축소 할 수 있습니다.

iOS 10 릴리즈 노트 Apple의 올바른 생각

user-scalable=no은 다양한 호환성과 UX 문제가 많이 있습니다.
iOS 10 릴리즈 노트의 변화는 사용자가 페이지와 크기를 제어 할 수 있기 때문에 Apple 좋은 움직임이라고 생각합니다.
"사용자 컨트롤 제공"은 항상 모든 UX 사용자를 위한 최상위의 조건이라고 생각합니다.
예를 들어, 눈이 너무 나쁘거나 시각장애인 의 경우 텍스트를 읽을 수 없는 경우 확대/축소를 할 수 있어야 합니다.
다양한 사용자에 대해 고려를 해야 하며, 우리는 개인적인 관점을 생각하지 말아야 합니다.

그래도 user-scalable=no 사용해야 한다면?

고객사를 설득하여 사용을 자제하도록 해야 하지만, 현실적으로 설득이 힘들다고 한다면 아래와 같이 사용하시면 됩니다.

document.documentElement.addEventListener('touchstart', function (event) { 
	if (event.touches.length > 1) { 
		event.preventDefault(); 
	}
}, false);
반응형
반응형

스마트폰 2천만명 시대인 지금은 모바일 웹사이트 코딩은 일반 웹사이트 코딩만큼 하게 되는것 같은데요. 최근 1,2년 사이 웹을 이용할 수 있는 다양한 모바일 기기가 등장하면서 미디어 쿼리를 이용해 다양한 해상도에 반응하는 웹을 구현하는 기술인 반응형 웹까지 만들어지게 되었습니다.

모바일 코딩은 html5와 css3까지 다양하게 사용할 수 있어서 재미있는것 같습니다.

하지만 모바일 웹사이트 코딩을 처음 접하시는 분들은 일반 웹사이트 코딩과 조금은 다른 부분 때문에 난관에 봉착할 때가 있을 것 입니다. 맑은커뮤니케이션에서 조금이나마 도움이 될 수 있기를 기대하면서 기본적인것 부터 정리 해보려구요.

  1. 화면 회전시 폰트사이즈 고정
    body {-webkit-text-size-adjust:none}
    
    페이지가 랜더링될 때 모바일 사파리는 텍스트의 크기를 자동으로 조절하는데, 이때 -webkit-text-size-adjust를 이용해 텍스트의 크기를 고정 또는 원하는 대로 조절할 수 있습니다. css의 body에 적어주면 해결됩니다.
    • auto : 화면의 폭에 맞추어서 텍스트의 크기를 자동으로 조절
    • none : 폰트사이즈 고정
    • n% : 폰트사이즈를 지정된사이즈로 변경
  2. -webkit-text-size-adjust의 3가지 속성
  3. 모바일 웹페이지를 가로크기에 맞추기
                        
                    
    
    스마트폰에서 랜더링 시켰을경우 터치를 통한 화면의 크기가 변경되지 않아야 하는데, 일반 웹사이트들은 그 크기가 pc에 맞게 제작되었기 때문에 상대적으로 작은 모바일디스플레이로는 감당하기 힘들게 됩니다. 이럴 때 위의 메타태그로 디스플레이 크기에 맞춰질 것입니다.
    • width=device-width : 플랫폼 가로 크기에 맞춤
    • initial-scale : 확대비율
    • maximum-scale : 최대확대비율
    • minimum-scale=1.0 : 최소축소비율
    • user-scalable : 사용자에 의한 화면확대 가능여부 (yes / no)
  4. 웹페이지가 브라우징된 후 주소창을 사라지게 합니다.
    window.addEventListener('load', function() {
    	setTimeout(scrollTo, 0, 0, 1);
    }, false);
    
  5. 스마트폰으로 접속시 해당 모바일 웹페이지로 자동 링크됩니다.
    var uAgent = navigator.userAgent.toLowerCase();
    var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce',
    'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');
    for(var i=0;i<mobilephones.length;i++) pre !="-1)" document.location="링크될 주소" ; < if(uagent.indexof(mobilephones[i])>
    </mobilephones.length;i++)>
  6. 페이지의 전체 백그라운드이미지를 넣을 경우, background-size를 사용합니다. 이 경우는 이미지가 늘어나거나 해도 시각적으로 무리가 없어야 할 것같습니다. 그라데이션등이 있는 bg는 늘어나면 보기 안좋더라구요~
    body {background:url(bg.png) repeat 0 0;
    background-size:100% 100%;}
    
  7. 이미지를 해상도에 맞게 조절하고 싶을 경우에는 max-width를 사용합니다.
    h1 {width:auto;} 
    h1 img {max-width:100%;}
    
  8. width값이 100%인 경우 border 값을 넣으면 가로스크롤이 생겨 버리니 조심해야겠죠.
  9. select, input등에 원치않는 그라데이션과 라운드가 처리되어 있는데, 이 form 요소의 기본속성을 초기화하는 방법입니다.
                        
    border-radius:0px 0px; /* 아이폰의 input 라운드 초기화 */
    -webkit-appearance:none; /* form 요소의 디바이스 기반 스타일 초기화 */
    
  10. html5의 form 요소의 type속성(http://biew.co.kr/18 참고)을 이용한 상황에 맞는 아이폰 자판 레이이웃을 호출할 수 있습니다. (아이폰의 경우입니다.)
                        
    
    
    html5의 새로운 input 속성인 입력값을 설명해주는 placeholder 속성도 활용할 수 있습니다. 이는 웹접근성 지침(http://biew.co.kr/17 참고)에도 표기되어있으며 웹접근성을 높일 수 있습니다.
반응형
반응형

마이크로소프트는 15일(현지시간) 블로그를 통해 2012년 1월부터 윈도우XP, 윈도우 Vista, 윈도우 7 운영체제의 구형 브라우저에 대해 자동 업그레이드 시작한다고 발표했다.

웹 브라우저 자동 업그레이드는 Windows Update를 통해 이루어지며 윈도우 XP에서 IE6,7을 사용하는 PC는 IE8로 업그레이드 되며 Vista, 7 운영체제에서는 IE9로 업그레이드 된다.

웹 브라우저 자동 업그레이드시 사용자에게 별도로 알려주지 않고 업그레이드가 진행된다.

자동 업그레이드를 원치 않는 사용자는 MS에서 제공하는 별도의 자동 업그레이드 차단 프로그램을 설치하면 된다.

자동 업그레이드 서비스는 2012년 1월부터 호주, 브라질을 시작으로 다른나라로 점차 서비스를 확대할 예정이다.

올해로 10돌을 맞은 IE6 브라우저는 지난 10년간 업그레이드된 웹 표준기술을 반영하지 않아 호환성이 떨어지며 보안에 취약해 악성코드 감염경로로 악용되고 있고 분산서비스 거부(DDoS) 공격의 주요 경로로 활용되는 등 치명적인 결함을 안고 있다.

해외 구글, 페이스북, 아마존, 유튜브등 주요 사이트들은 IE6 지원을 중단한 상태며 국내에서는 지난 7월 정부, MS, 포털 3사등이 손잡고 IE6 퇴출 캠패인을 벌이기도 했다.

한편, 11월 30일 기준으로 국내 웹 브라우저 점유율에서 IE6가 차지하는 비율은 8.9%로 중국(27.9%)다음으로 가장 많은 사용자들이 IE6을 사용하고 있는 실정이다. - 케이벤치 (www.kbench.com)

국내 최대 IT/디지털 미디어 케이벤치 www.kbench.com

반응형
반응형

요즈음 맑은커뮤니케이션에서 프로젝트를 하다보면, 고객사들은 스마트폰을 활용한 앱웹에 관심이 많습니다.
그리고 일반사람들은 어플리케이션이고, 앱이라고 하면 대부분 통용이 됩니다. 하지만 그 안을 들여다보면 좀더 복잡한 내용을 접할 수 있습니다. 이것은 작업방식에 따라 네이티브앱, 모바일웹, 하이브리드앱으로 구분이 됩니다. 하지만 이 세가지에 대한 기본지식이 없는 경우가 허다합니다. 또한 실무자들도 모르는 경우가 많습니다. 프로젝트 진행을 위해서는 이 세가지 방법중에 한가지를 정하고 프로젝트를 진행해야 하는데 이 세가지를 잘 알지 못한다면 기획단계부터 프로젝트는 엉망이 될 것입니다. 그래서 이 세가지에 대한 개념을 설명 하고자 합니다.

네이티브 앱

iOS의 개발 언어인 Object-C 또는 안드로이드는 Java를 이용한 이클립스에서 작성된 특정 플랫폼에서만 작동되는 앱을 말합니다.
네이티브 앱의 장점으로는 특정 플랫폼에 함께 탑재되어 있는 다른 어플리케이션과의 인터페이스나 API의 사용이 가능하여 어플리케이션 간의 확장성이 용이하고 UI 구성요소가 대부분 패키지화 또는 라이브러리 형식으로 기본 제공되기 때문에 빠른 로딩 속도가 장점입니다.
단점으로는 특정 플랫폼에서만 작동되기 때문에 제한적인 환경을 가지고 있고, 업데이트는 앱스토어를 통해서 받기 때문에 앱스토어를 열기 전까지는 업데이트를 할 수 없는 것이 단점입니다. 또한 안드로이드의 경우는 회사마다 device의 환경이 다르기 때문에 개발의 어려움이 많습니다.

모바일 웹

웹페이지를 작업할 때 사용하는 HTML5, CSS, JavaScript 등을 활용하여 작성된 브라우저에서 동작되는 화면을 말합니다. 따라서 브라우저의 환경적인 특성을 제외하고는 대부분 모든 브라우저에서 볼 수 있는 장점이 있습니다. 개발 시 화면 체크를 바로바로 확인할 수 있고, 바로 변경 및 수정이 가능하기 때문에 즉각적인 대응이 가능한 장점이 있습니다. 그리고, 기존의 웹 개발방식과 동일하기 때문에 개발 비용을 절감할 수 있는 장점도 가지고 있습니다. 단점은, 모바일에서 사용되는 API의 활용이 불가능하다는 것과 UI의 구성요소를 실시간으로 로딩하므로, 처리속도가 느리다는 점과 인터넷이나 WiFi의 연결 상태에 따라 영향을 받는다는 단점이 있습니다.

하이브리드 앱

하이브리드 앱의 경우에는 용어의 정의가 모호한 부분이 있지만, 대체적으로 모바일 앱과 유사한 점이 있습니다.
네이티브 앱과 동일한 환경을 가지고 있지만, 부분적으로 HTML, CSS로 작성된 앱을 말합니다. 인터넷 환경과 WiFi 환경에 따른 영향에도 유연하고, 모바일 앱보다는 빠른 로딩 속도와 스마트폰에서 바로 실행이 가능하다는 장점이 있습니다. 네이티브 앱의 개발보다 하이브리드 앱의 개발 비용이 상대적으로 절감할 수 있는 개발 형태라고 볼 수 있습니다.
단점으로는 네이티브 앱과 마찮가지로 앱스토어를 통해서 업데이트 및 업그레이드를 해야 하는 단점이 있습니다.
하이브리드 앱의 개발이 네이티브 앱과 모바일앱의 장, 단점을 적절히 활용하여 개발할 수 있는 형태라고 볼 수 있습니다.

현재 개발 추세는 하이브리드 앱의 개발이라 할 수 있습니다.
화면 안에서의 네비게이션 시스템이나, 중요한 Key 역활을 하는 부분을 제외하고 일반적인 정보를 대부분 모바일 웹으로 개발하는게 전반적인 내용에서 볼 때 단점보다는 장점이 많다는데 있습니다.
Cross Flatform이나 web 서비스 매쉬업을 지원하는 유일한 대안이라고 볼 수 있고, 모바일 웹에 있어서 절대적인 지원을 받고 있는 HTML5가 있기 때문에 가능한 것 입니다.
전반적인 개발 비용을 절감할 수 있고, 개발 인력의 수급, 개발 기간, 확장성을 고려할 수 있다는 점 역시 간과할 수 없는 부분이기도 합니다.

자료 : http://kimdirector.tistory.com/

반응형

+ Recent posts