오류 제보, 내용 개선에 대한 건의는 얼마든지 환영합니다. :)

Android 기기 브라우저 대응은 만만하지 않다

Android 기기 대응을 위해 개발을 하다 보면, 분명 PC 크롬 브라우저 개발자 도구의 모바일 해상도에선 아무 이상이 없었는데 실제 기기 브라우저에서는 다르게 작동하지 않는 경우가 꽤나 생깁니다.

매번 프로젝트를 배포한 후 기기를 일일이 테스트하는 것은 너무나도 비효율적이기 때문에, PC에서 바로 Android 기기의 브라우저를 디버깅할 수 있는 방법을 필요로 하게 됩니다.

USB 연결 유선 디버깅

PC와 Android 기기를 USB로 직접 연결해서 하는 디버깅이 가장 일반적이며, 무선 디버깅의 사전 단계가 됩니다.

1. Android 기기 개발자 모드, USB 디버깅 활성화

디버깅하고자 하는 Android 기기가 개발자 모드여야 합니다. 개발자 모드를 활성화하는 방법은 다음과 같습니다.

1. 설정 > 휴대전화 정보 > 소프트웨어 정보
2. 빌드번호 7번 터치

개발자 모드가 켜지면 USB 디버깅을 활성화할 수 있습니다. USB 디버깅을 활성화하는 방법은 다음과 같습니다.

1. 설정 > 개발자 옵션 > USB 디버깅
2. USB 디버깅 활성화

2. ADB 설치, 환경변수 설정

PC 브라우저가 Android 기기를 인식하기 위해선 Android SDK에 포함된 ADB(Android Debug Bridge)가 필수적입니다.

ADB를 Windows에 설치하는 방법은 다음과 같습니다. Mac 설치방법은 추후 추가 예정

1. 링크 다운로드 후 압축 풀기 (Android 스튜디오가 설치되어 있을 경우 생략)
2. 제어판 > 시스템 및 보안 > 시스템 > 고급 시스템 설정
3. 고급 탭 > 환경 변수
4. 시스템 변수의 Path 변수에 ADB 경로 추가

• ADB 경로
  • 다운로드받은 경우 압축을 푼 폴더 경로
  • Android 스튜디오가 설치되어 있을 경우 설치 폴더 내 platform-tools 디렉토리
    • 보통 C:\Users\사용자이름\AppData\Local\Android\Sdk\platform-tools

5. 환경변수 변경사항을 적용하기 위해 재부팅

cmd 창에서 adb 명령어를 입력했을 때, 다음의 메시지가 출력된다면 정상적으로 설치가 완료된 것입니다.

Android Debug Bridge version 0.0.00
Version 00.0.0-0000000
...

3. PC와 Android 기기 USB 연결

디버깅을 진행할 PC와 대상 Android 기기를 USB로 연결합니다. USB 케이블은 충전용 케이블이 아닌 데이터 전송이 가능한 케이블이어야 합니다. USB 디버깅을 허용하겠습니까?를 묻는 확인 창이 뜨면 허용을 선택합니다.

cmd 창에서 adb devices 명령어를 입력했을 때, 기기의 상태가 unauthorized가 아닌 device로 출력되면 정상적으로 연결된 것입니다.

4. 크롬 브라우저를 활용한 Android 기기 디버깅

PC 크롬 브라우저의 Inspect with Chrome Developer Tools를 통해 Android 기기를 디버깅하는 마지막 단계입니다.

1. 대상 Android 기기에서 디버깅하고 싶은 브라우저를 켜고 웹페이지 접속
2. PC 크롬 브라우저 주소창에 chrome://inspect를 입력
3. Devices 목록에 나타난 기기와 브라우저 확인
4. 디버깅 대상 기기 브라우저 항목 밑의 inspect 클릭
5. 기기 브라우저 화면을 그대로 보여주는 PC 크롬 개발자 도구로 디버깅

• PC 크롬 개발자 도구 창 화면

원격 무선 디버깅

USB 케이블을 이용한 유선 디버깅을 하다보면 유선의 불편함에 자꾸 부딪히게 됩니다. USB 케이블의 길이를 신경써야 한다든지, USB 포트의 낮은 출력량으로 인한 배터리 소모라든지...

다행히도 대상 Android 기기와 PC가 같은 네트워크에 연결되어 있다면 USB 케이블을 연결하지 않고 무선으로 디버깅을 할 수가 있습니다.

1. PC와 Android 기기 USB 연결

USB 연결 유선 디버깅의 3. PC와 Android 기기 USB 연결과 동일합니다.

2. Android 기기-PC 간 통신 포트 설정

cmd 창에서 adb tcpip [포트 번호] 명령어를 입력해 Android 기기와 PC의 통신에 사용할 포트를 설정합니다. 포트 번호는 사용자 마음대로 설정할 수 있지만, 이미 사용 중인 다른 포트와 겹치면 안 됩니다.

5000~8999 사이의 포트 번호를 입력하면 왠만해선 충돌하지 않습니다. 명령어를 입력했을 때 다음의 메시지가 출력된다면 정상적으로 설정된 것입니다.

restarting in TCP mode port: [포트 번호]

3. Android 기기 원격 무선 연결

cmd 창에서 adb connect [기기 Wi-Fi IP 주소]:[포트 번호] 명령어를 입력해 Android 기기를 무선으로 연결합니다. USB 디버깅을 허용하겠습니까?를 묻는 확인 창이 뜨면 허용을 선택합니다.

Android 기기의 Wi-Fi IP를 확인하는 방법

1. 설정 > 연결 > Wi-Fi > 연결된 네트워크 설정
2. IP 주소 확인

cmd 창에서 adb devices 명령어를 입력했을 때, 기기의 상태가 unauthorized가 아닌 device로 출력되면 정상적으로 연결된 것입니다.

이제는 USB를 제거해도 디버깅이 가능합니다.

※ 원격 연결 해제

cmd 창에서 adb disconnect 명령어를 입력하면 모든 원격 기기에 대한 연결이 해제됩니다.

참고자료

• [Android 개발] 크롬 개발자 도구 모바일 디버깅/Mobile Debugging/ PC에서 모바일 디버깅 / 모바일 개발환경 구축
• 안드로이드 스튜디오 adb를 이용한 스마트폰 원격 연결
• SDK 플랫폼 도구 출시 노트 | Android 개발자 | Android Developers

오류 제보, 내용 개선에 대한 건의는 얼마든지 환영합니다. :)

문제 상황

Visual Studio Code에서 React 프로젝트를 테스트하던 어느 날, 데스크탑에서 작업하다가 노트북으로 옮겨 프론트엔드 코드를 만지려던 상황이었습니다.

프로젝트의 백엔드 API 서버가 9001 포트를 사용하고 있어, CORS 이슈를 피하기 위해 (=== 동일한 출처로 만들기 위해) react-scripts start 스크립트에 포트 번호를 추가해 set PORT=9001 && react-scripts start로 변경해 실행시키려 했습니다. 데스크탑에서는 문제없이 작동한 스크립트였어요.

그런데 아래와 같은 메시지가 터미널에 뜨게 됩니다.

? Something is already running on port 9001

Would you like to run the app on another port instead? (Y/n)

응? 9001 포트에 뭐가 이미 돌아가고 있다고? 따로 돌린 거 없는데? 일단 무시하고 그냥 해보지 뭐.

하지만 그렇게 간단히 무시될 만한 문제였다면 지금 이 글을 쓰고 있지도 않겠죠. Y를 선택했더니 다른 포트인 9002로 실행되긴 했지만, 포트가 달라 CORS 이슈가 발생했고, 당연히 백엔드 API를 불러올 수가 없었습니다. 그렇다고 반대인 n을 선택했더니 아예 실행이 되지 않고 스크립트가 종료되어 버리는 사태가 발생했습니다.

브라우저 확장프로그램 등 어딘가의 프로그램이 포트를 쓰는 것일까봐 재부팅을 해도 어김없이 나타나는 Something is already running on port 9001

결국 구글신의 도움을 청하게 됩니다.

실행 환경

문제 해결 과정

구글 검색 키워드 | 검색 후 참고한 자료

check program using port | How to check which application is using which port

netstat -ano | findstr :[port_number] 명령어를 사용하면 특정 포트를 쓰는 프로세스를 확인할 수 있습니다. netstat -ano | findstr :9001 명령어를 실행했더니, PID가 4인 프로세스가 9001 포트를 쓰고 있었습니다.

kill process using port localhost | How to kill the process currently using a port on localhost in windows

taskkill /PID [pid] 명령어를 사용하면 특정 PID를 가진 프로세스를 종료시킬 수 있습니다. taskkill /PID 4 명령어를 실행했더니, 아래와 같은 오류가 발생하며 프로세스는 종료되지 않았습니다.

  오류: 프로세스(PID 4)를 종료할 수 없습니다.
  원인: 액세스가 거부되었습니다.

pid 4 system kill | port 80 for apache server is in use by PID 4 (System) and cannot be stopped

PID 4의 프로세스는 일반 프로그램이 아닌 System이기 때문에 종료되지 않는다는 것을 알게 되었습니다.

port 9001 used by system | 9001 port is used on windows 10

검색어를 바꿔 시스템이 9001 포트를 쓰는 경우를 검색해보았습니다. 한 GitHub 이슈가 검색되었고, 해당 페이지 댓글에서 Intel 그래픽 카드 소프트웨어와 연관된 문제일수도 있다는 실마리를 얻게 되었습니다.

intel graphics command center service 9001 | Intel graphics command center service use port 9001, how can I change that ? - Intel Community

추가로 Intel 그래픽 카드 소프트웨어 9001 키워드를 검색해봤고, Intel 커뮤니티의 게시글이 존재하는 것을 보고 Intel 소프트웨어 관련 문제라는 것을 재확인했습니다. 페이지 내 마지막 답변의 해결 방법을 따라한 뒤, 재부팅하여 이상 없이 해결되었는지, React 프로젝트는 정상적으로 실행되는지 확인했습니다. 시스템에 이상 없음 및 React 프로젝트가 정상 실행됨을 확인하고 문제를 종결 처리했습니다.

해결 방법

출처 | GitHub 이슈 댓글

1. 시작 메뉴
2. 서비스 검색 후 실행
3. Intel(R) Graphics Command Center Service 명칭의 서비스 검색
4. 우클릭 후 중지
5. 우클릭 > 속성 > 시작 유형 사용 안 함 변경
6. 재부팅

TL;DR

Intel 사의 내장 그래픽 카드를 사용하는 Windows 디바이스를 사용할 경우, 관련 소프트웨어인 Intel Graphics Command Center가 9001 포트를 사용하여 충돌을 일으킬 수 있습니다. System 프로세스로 취급되기 때문에 강제종료가 불가능하므로, 해당 프로그램을 서비스에서 찾아 중지 및 자동으로 시작되지 않게 해주어야 9001 포트를 정상적으로 사용할 수 있습니다.

참고자료

• How to check which application is using which port
• How to kill the process currently using a port on localhost in windows
• port 80 for apache server is in use by PID 4 (System) and cannot be stopped
• 9001 port is used on windows 10
• Intel graphics command center service use port 9001, how can I change that ? - Intel Community

본문은 서술상 편의를 위해 평어체로 작성되었습니다. 오류 제보나, 내용 개선에 대한 건의는 얼마든지 환영합니다. :)

영단어 첫 글자 대문자로 만들기

웹 프로그래밍을 하다 보면 웹페이지에 표시될 영단어의 첫 글자를 대문자로 변환해야 하는 때가 생긴다. 웹 기초 3대장 중 문자열 조작을 동적으로 할 수 있는 것은 JavaScript이다. 그러므로 처음 검색을 하는 키워드에는 보통 JavaScript, 첫 글자, 대문자라는 키워드가 들어가며, 그렇기 때문에 JavaScript를 활용한 방법이 주로 알려져 있다. 하지만 CSS를 활용해도 동일한 결과를 얻을 수 있다.

JavaScript를 사용하는 방식

가장 많이 알려져있는 것은 원 단어의 첫 글자를 추출해 toUpperCase() 메서드를 사용해서 대문자로 변환하고, 나머지 문자열과 다시 합치는 방식이다. 코드로 나타내면 아래와 같다.

const originalStr = 'blahblah';
let capitalizedStr =
    originalStr.charAt(0).toUpperCase() + originalStr.slice(1);

charAt과 slice 메서드 대신 index와 substring 메서드를 사용할 수도 있다.

capitalizedStr =
  originalStr[0].toUpperCase() + originalStr.substring(1);

template literal을 사용하면 + 연산자도 생략할 수 있다. 다만 오히려 가독성이 떨어져 보일 수도 있다.

capitalizedStr =
  `${originalStr[0].toUppercase()}${originalStr.substring(1)}`;

CSS를 사용하는 방식

CSS에는 특정 요소의 텍스트 모양을 변형시키는 text-transform 속성이 존재한다. 이 속성의 값으로 capitalize를 적용하면 해당 요소의 첫 글자는 대문자가 된다. CSS 코드로 나타내면 아래와 같다.

selector {
    text-transform: capitalize;
}

아무런 브라우저 호환성 문제가 없으며, 요소가 추가될 경우 선택자만 붙이면 된다는 점에서 다수의 요소를 다뤄야 할 때도 유용하다.

TL;DR

웹페이지에서 첫 글자를 대문자로 만드는 것은 JavaScript보다 CSS를 사용하면 더 간편하게 할 수도 있다.

참고자료

• [javascript] 문자열(string)의 첫글자를 대문자로 바꾸기
• text-transform - CSS: Cascading Style Sheets | MDN